Firebug - Desarrollo de paginas web

Diseño Web Sin Comentarios

FIREBUG

Es otra extensión de Firefox diseñada para desarrolladores y diseñadores Web. integra funciones del JS-Console y Web Developer.

Alfunas de sus funciones son:

  • Edición de HTML, CSS y JavaScript en tiempo real

Con Firebug se puede visualizar y editar el código fuente del HTML, CSS y JavaScript de una página Web en la pantalla del monitor, observando los cambios que hemos realizado de forma inmediata, pero temporal; es decir, los cambios que hemos hecho en el código de fuente son resaltados por Firebug y lo visualizamos en la página Web que estamos trabajando, pero solo veremos estos cambios hasta que actualicemos la página Web o salgamos de ella.

Por lo tanto al igual que Web Developer si queremos guardar los cambios –que hemos visualizado en la pantalla del monitor cuando trabajamos con este plugin- debemos ir al código de fuente real que está en el servidor. Además, la interfaz del Firebug es muy intuitiva

Consola mostrando el código de fuente HTML

  • Buscador Integrado

Facilita hallar los códigos de fuente con mayor rapidez y nos permite exportar los cambios fácilmente para aplicarlos en el código de fuente real. También, se puede filtrar la consola para que muestre sólo los errores que coinciden con el texto buscado.

Buscador de Firebug

  • Red de vigilancia

Algunas páginas Web se demoran en cargar, el motivo puede ser, que colocó demasiado JavaScript, las imágenes de la página no han sido comprimidas, o problemas con el servidor o conexión. En caso de ser un problema de programación, la red de vigilancia le indica el peso y tiempo de carga de cada elemento, para que luego haga los cambios que desee. También puede visualizar el peso y tiempo de carga por tipo de elemento. Ej. Solo CSS o HTML.

RED

  • Exploración del DOM

El DOM define la estructura lógica de los objetos y sus funciones, y el modo en que accedemos y manipulamos cada objeto. Existen dos tipos de objetos y funciones, los que pertenecen al DOM estándar y los que son del código JavaScript y para saber cual es cual ésta función muestra qué archivos son DOM.

Si quiere editar los archivos solo se debe hacer doble clic en el espacio en blanco de la fila que se quiere modificar.

DOM

  • depurador de JavaScript:

En la consola de Firebug usted puede visualizar si la página tiene errores, para ello aparecerá una aspa de color roja “X” en la parte inferior derecho del navegador. Para visualizar cuáles son los errores haga clic en el aspa roja.

Para solucionar el problema solo debe clicar vínculo, que tiene cada informe de error –está ubicado en el lado derecho y apunta al archivo y número de línea. Cuando haga clic lo llevará al depurador del JavaScript para que solucione el problema.

Semejanzas y diferencias del Firebug con la Web Developer

Tanto al Firebug como el Web Developer ayudan a desarrollar mejor los sitios Web. Cuándo emplear uno u otro depende mucho de si lo que queremos tiene que ver con el diseño o desarrollo del sitio Web. Si nuestro trabajo está más orientado al diseño de la página Web Developer es lo más recomendado porque permite trabajar más la maquetación y la semántica de la Web, así como los estilos.

Firebug, en cambio, está más orientado al desarrollo Web porque permite capturar y depurar errores en el instante y visualizarlos en la pantalla, aunque temporalmente, además permite saber la cantidad de transferencia y tiempo de carga de la Web.

La diferencia entre el JS-Console y la consola de Firebug, radica principalmente en que la consola de Firebug permite captar errores que solo son percibidos cuando la máquina se está descargando, y poder corregirlos en el acto.

Usabilidad en el diseño web experimental

Diseño Web Sin Comentarios

Acerca del diseño web experimental: ocupación de pantalla y control del usuario

Uno de los principios de usabilidad es que el usuario mantenga el control sobre el sistema. Determinados diseños se presentan a pantalla completa o fullscreen eliminando controles de navegación y la barra de tareas del sistema operativo desconcertando al usuario.

Algunos sitios web pecan de tener un diseño demasiado avanzado y buscan encerrar al usuario a través de la invasión completa de la pantalla, eliminando el acceso a funciones del navegador (botones y barra de navegación) y del sistema operativo (barra de tareas). Los usuarios de internet no suelen tener como objetivo pasar el rato en nuestro sitio. Un sitio web suele ser una herramienta, un medio para conseguir un objetivo concreto: informarse, adquirir productos o servicios, comunicarse. En raras ocasiones, excepto en sitios en los que el usuario va a pasar un tiempo, como sitios de juegos o sitios experimentales de caracter inmersivo el usuario hará de la mera estancia en nuestro sitio un objetivo. Una de las premisas de las aplicaciones usables es que el usuario ha de mantener siempre el control se rompe. Este tipo de usuarios sorprenden negativamente creando un entorno en el que el usuario queda “cautivo” y en el que los comandos básicos no funcionan, entre ellos el de ESCAPE. Es decir, tratamos de ser nosotros quienes controlamos al usuario y el uso que hace de su equipo. La opciones para el desconcertado usuario no son precisamente “naturales” y usuales en la navegación web: desde activar el Administrador de Tareas (CTRL+ALT+SUPR) y anular tarea hasta presionar ALT+TAB y alternar con otra tarea. Por otro lado, se rompe el principio de retroalimentación del interfaz: una pista básica como el símbolo de Windows en la esquina superior derecha del navegador que nos indica si la descarga de páginas está en marcha se nos oculta: no podemos saber si estamos navegando, la conexión ha fallado o hemos descargado al totalidad de la página.

Este diseño arrebata el control y no permite el trabajo multitarea

Este artículo no trata de criticar la experimentación en el diseño de interfaces web y las propuestas atrevidas, sino que intenta hacer tener en cuenta una serie de puntos básicos a la hora de decantarse por este diseño: Los usuarios no deben ser soprendidos ni arrebatárseles el control del sistema. Muchos usuarios ni entienden este tipo de diseños, ni si su equipo está funcionando correctamente. Una vez dentro de una de estas pantallas, si no encuentran la salida, tratarán de salir inmediatamente con acciones como CTR+ALT+SUPR… Los usuarios suelen realizar varias tareas simultáneamente cuando navegan: desde navegar en varios sitios a la vez, a comunicación por mensajería instantánea, hasta lectura y redacción de emails o uso de aplicaciones informáticas.

Algunas recomendaciones

Sé estándar: La navegación en internet, por lo defectuoso del diseño de la navegación de muchos sitios se basa en el navegador. No anules ni ocultes los controles de navegación. El usuario controla: Sorprender no es malo si es agradable. Jamás sorprendas a los usuarios con acciones imprevistas que les arrebaten el control de su equipo. Si igualmente, optas (o te hacen optar) por este tipo de acciones en tu diseño: Avisa antes de abrir la ventana: muestra un mensaje que indique al usuario que va a acceder a una navegación sin navegador a pantalla completa.

Diseño Gráfico

Diseño Gráfico Sin Comentarios

Diseño Gráfico

Siempre Buscaste tener una imagen visual impactante para tu negocio, una imagen visual concordante a las necesidades y objetivos de tu empresa, imágenes estilísticas, informativas, persuasivas, tecnológicas, innnovadoras, etc.

A partir de la industrialización de las artes gráficas en el siglo XX y el desarrollo de la tecnología se han producido cambios importantes en los esquemas de artes gráficas. La tecnología evolucionó de tal manera que con un computador, ahora, usted puede obtener una serie de herramientas que le reducen costos y tiempo, y que le permite plasmar lo que realmente quieres comunicar en forma realmente efectiva.

Como ya dispones de todas estas herramientas, ahora lo más importante  es tener la creatividad e imaginación para diseñar y comunicar lo que se quiere, aquí algunos pasos importantes - a su vez básicos y primordiales, no puedes dejarlo pasar- para diseñar un logo extraordinario para tu negocio o Web.

  • Tomar datos de la empresa.
    Obtener la mayor cantidad de información de la empresa, objetivos, misión, visión, que es lo que quieren comunicar con su logo, que quieren denotar en su imagen corporativa, etc.

    • Colores y tipografía
      Esta parte es importante ya que la tipografía y los colores a usar tienen el impacto visual y la manera de comunicar. De acuerdo a la empresa es importante presentar al menos tres variantes para escoger entre las tres alternitavas.

      • Otros datos a tener en cuenta:
        El logo debe desarrollarse en vectores, utilizando la menor cantidad de colores posibles y debe ser funcional tanto a colores como blanco y negro.

      Complementos para webmaster en Firefox

      Enchula tu Firefox Sin Comentarios

      El navegador Firefox ¡Nos hace la vida más fácil!, además de ser seguro y estable también ofrece complementos para optimizar nuestro trabajo en la Web. Conozcamos mejor como funciona cada complemento de desarrollo Web y personalizar mejor nuestro navegador.

      Docked JS-Console

      Mantiene abierta la consola JavaScript permitiéndonos visualizar los errores en el código JavaScript de nuestra página. Puedes acceder a ella a través del menú herramientas - opción “Consola de errores”-, y si tienes un uso continuo de ésta descárgate el complemento en:

      https://addons.mozilla.org/es-ES/firefox/

      y clica en el botón “desarrollo Web” del menú, ubicado en el lado izquierdo de la página.

      Luego de descargarla una ventana te pedirá que reinicies el navegado, haz clic en reiniciar y listo. Luego cuando se reinicie el navegador la consola JS aparecerá modo de barra en la parte inferior del navegador.

      Docked Js-Console

      Cuando instala la barra, puede reducirla o ampliarla, ocultarla o mostrarla según su conveniencia, el cambio queda guardado para las demás ventanas o para cuando inicies nuevamente el navegador.

      Web Developer

      Esta barra se instala en la parte superior del navegador. Tiene muchas funcionalidades, algunas de las que más empleo son:

      Web Developer

      • Función para habilitar y deshabilitar JavaScript.

      Cuando se trabaja en la elaboración de formularios o de información en general, la habilitación del JavaScript permite detectar los errores de programación, el buen funcionamiento de la página y rapidez en algunas aplicaciones, como en el caso de un proceso de compra en el que el formulario es muy extenso y es necesario acelerar el proceso brindando rapidez.

      Además el JavaScript permite dar elegancia a la Web, efectos de movimiento en algunos textos o imágenes.

      Deshabilitador JavaScript

      • Control de cookies –edita, elimina y agregar.

      Podemos crear cookies porque nos permiten detectar la ruta que siguen los usuarios dentro del navegador en una página Web o varias. La ruta, luego, servirá para armar un perfil de usuario anónimo.

      Como los cookies se comportan de diferente forma, dependiendo preferencias y personalización que del usuario a una página, se pueden crear y editar de tal modo que se adapten a los requerimientos del internauta.

      Las cookies son eliminadas cuando el usario sale de su navegador, para evitar esto se establece una fecha de eliminación, pudiéndose más adelante

      • Muestra y permite edición de CSS de una página en tiempo real.

      Podemos visualizar los códigos CSS (estilos empleados en la presentación de la Web) y obtener más fácilmente su construcción y ubicación para cuando deseemos realizar una modificación en la Web que estamos trabajando.

      • Mostrar información detallada en pantalla de formularios HTML.

      Aquí visualizamos maquetación de la página, solo los códigos HTML.

      • Mostrar comentarios y elementos escondidos.

      La anterior opción solo nos muestra la estructura de la Web en códigos HTM, dejando de lado los CSS y el Java Script, que sí podemos visualizar acá para cuando deseemos realizar un cambio sen el CSS y en el JavaScript.

      Mostrar comentarios y elementos ocultos

      • La función Outline.

      Al activar esta opción, ubicamos el puntero del Mouse en el elemento de la Web que nos interesa, este elemento es bordeado con un color y especifica como está ordenado dentro de la maquetación, si esta contenido en elemento o si contiene a otro. Asimismo, muestra como se ha ido estructurando la maquetación de toda la página.

      Hemos escogido las funciones que a nuestro criterio les ayudará de mucho, pero hay muchas más que no han sido explicadas. Espero que les haya sido de gran ayuda.

      Qué debo saber para contratar un hosting?

      Hosting Sin Comentarios

      Depende mucho de la cantidad de elementos que has agregado a tu página Web para saber que tanta cantidad de espacio necesitas, si usas flash, fotos, descargas de audio, necesitaras mayor espacio que una Web en la que solo tenga texto e imagen.

      Otro problema recurrente es la cantidad de transferencias mensuales que necesitamos, la cual depende mucho de la cantidad de visitas que recibirá tu Web. Debes tener en cuenta que la cantidad de bytes que se descargan en las transferencias se suman a la cantidad que bytes consumidos por la Web y los datos multimedia (archivos, imágenes, videos, flash, otros).

      Una propuesta estándar de la cantidad de espacio que puedes necesitar según la finalidad de tu Web es la siguiente:

      Web

      Espacio mínimo

      Espacio máximo

      Personal

      10MB-50MB

      100MB

      Corporativo pequeño

      100MB

      1GB

      Corporativo medio

      400MB

      1.6GB

      Corporativo grande

      Servidor dedicado


      En cuanto al tipo de Hosting, los hosting Linux son más cómodos de usar y permite numerosas aplicaciones de código abierto.

      Adquirir un servidor propio y mantenerlo es costoso, por eso te sea más conveniente contratar a una empresa que brinde el servicio de alojamiento Web. Esta empresa debe brindarte soporte técnico las 24 horas del día, atenderte rápido y eficientemente en la medida de sus posibilidades.

      Cómo crear Cuentas FTP en Cpanel

      Hosting Sin Comentarios

      FTP son las siglas de File Transfer Protocol, su traducción al español es Protocolo de Transferencia de Archivos, permite enviar y recibir archivos de un computador a otros, es decir su empresa sube archivos al hosting, una vez subidos los archivos se podrán ver en cualquier computador con conexión a Internet.

      Sofware para subir archivos vía FTP

      Para hacer las transferencias de los archivos se emplea un Software de Conexión FTP, algunos que puedes emplear son:

      • EFTP 3.3.1.145: incorpora algoritmos de seguridad como RSA y Blowfish que, aseguran seguridad y rapidez a la hora de hacer la transferencia de archivos en cualquier red TCP/IP, incluyendo Internet. Se basa en el estándar RFC 959 para FTP, EFTP.
      • BitKinex 3.0.3: Este software usa múltiples conexiones para transferencias y para mostrar la lista de directorios remotos. Es un programa ligero y fácil de usar que soporta una gran variedad de protocolos de transferencia: FTP, FTP(S), SFTP, HTTP(S) y WebDAV.
      • WinSCP 4.1.6: Es una aplicación de Software Libre, es un cliente SFTP gráfico para Windows que emplea SSH. Facilita la transferencia segura de archivos entre dos sistemas informáticos, el local y uno remoto que ofrezca servicios SSH.

      Si no cuentas con un software, también puedes subir tus archivos por FTP mediante Internet Explorer, para hacerlo debes seleccionar el archivo o carpeta que deseas copiar al hosting (clic derecho sobre el archivo o carpeta y clic en copiar). En explorador, en la barra de direcciones ftp.tudominio.com, aparecerá una pantalla que te pedirá el usuario y la contraseña para que accedes al hosting (Si te salió error, debes ir al menú archivo y dar clic en “iniciar sesión como”).

      Luego de iniciar sesión aparecerán varias carpetas, selecciona que se llama “WWW” o “publichtml” y los archivos que copiaste al inicio lo pegas en cualquiera de estas 2 carpetas (en realidad son la misma).

      Cómo crear subdominios en cpanel

      Hosting Sin Comentarios

      El subdominios es un subgrupo del nombre de tu dominio, es prácticamente un anexo a la página principal de tu Web. La definición de ellos depende de los fines de tu empresa. Por lo general te lo proporciona cualquier empresa que da servicios de alojamiento Web, pero en el Cpanel tu mismo puedes crear tus subdominios. Recuerda que para crear los subdominios debes informarte bien de la cantidad de subdominios permitidos para tu Web.

      Si el dominio es la mejor forma de tener una dirección en Internet, los subdominios permiten tener una URL para cada área grande e importante de la empresa.

      Para crear un subdominio debes ir al Cpanel a la opción “dominios” o “domian”. Luego a la opción “subdominios” o “subdomian””, y dentro de éste la opción “crear subdominio”, ingresa el nombre del subdominio que vas a crear y por último clic en “crear”.

      Para una ayuda mejor, puedes hacer clic en el botón “guía en video” dentro de la opción Subdominios para que te grafique los pasos a seguir.

      Estadísticas de visitas de tu sitio Web en Cpanel

      Hosting Sin Comentarios

      Cpanel también te da la opción de saber quiénes visitan tu Web y qué es lo que han visitado en la opción de “Registros”. Entre los principales datos que ofrece es la fecha de la visita (Date), el tipo de conexión (Http Version), la cantidad de bytes que ha descargado en su visita (Size in Bates) -esto es importante si tienes transferencia de bytes limitado-, secciones de la web que ha visitado el cibernauta (Referer) y el tipo de navegador que ha utilizado.

      Para obtener datos más completos de la estadística de la web y admisnitrar el tráfico de visitas, te recomendamos ir a la opción “Webalizer”. Ahí nos muestra el promedio de visitas diarias y mensuales desde la creación de la página, las secciones que han sido visitadas y cuáles se han visitado más, el tiempo de permanencia en ella y lo que toda empresa desea la cantidad de pedidos o consultas.

      Ten en cuenta, que si tienes una muy buena cantidad de visitas, pero no vendes, es porque algo está pasando en tu web, tal vez falle el contenido, las promociones o los precios.

      Cómo crear cuentas de correo en Cpanel

      Hosting Sin Comentarios

      Cpanel es el administrador de nuestra cuenta de alojamiento web, en el tenemos la opción de crear una lista de correos electrónicos y hacer cambios en ellos. La finalidad es que todos los colaboradores de la empresa cuenten con un correo corporativo que no tenga como dominio Hotmail.com, gmail.com o yahoo.es; porque a pesar de que son servicios gratuitos muy buenos de correos electrónicos no identifican al colaborador con la empresa.

      Esto disminuye la seriedad, confiabilidad y, sobretodo, imagen institucional de la empresa.

      Para que usted cree las cuentas de correo electrónico a sus colaboradores debe seguir los siguientes pasos:

      1. Ingresar al Cpanel (Panel de Control del alojamiento web)

      En el navegador ingresa el dominio de tu empresa y le agregas “/cpanel”: miempresa.com/cpanel

      1. Ingresa a la opción “mail” o “cuentas de email”
      2. Aparecerá otra página con las siguientes opciones: “Manage/Add/Remove Accounts” o en algunos casos añadir una Nueva Cuenta de Correo/ Cuentas Actuales”
      3. En la opción que es para crear una nueva cuenta de correo observarás lo siguiente:
        • Email: ventas@tuempresa.com
        • Contraseña o Password: la contraseña del correo
        • Mailbox quota (opcional): cuanto espacio darás a la cuenta 250MB es lo usual.

      Ventajas de tener un Hosting

      Hosting Sin Comentarios

      Es muy importante que las empresas tengan presencia en Internet para que sea visible a quienes la buscan y por la importancia de la Internet como canal de ventas. Para ello se empieza por tener una página Web propia (en la actualidad es inconcebible que una empresa no cuente con página Web) en la que hace imprescindible contar con un dominio y alojamiento Web (hosting).

      Contar tu propia Web te da mucho más beneficios de lo que puedes creer, es tu propia empresa en Internet y ven solo tu empresa, es más fácil que te hallen, cuidas el nombre y marca de la empresa y desde tu Web podrás vender y posicionar tus productos. ¿No es genial?

      Cuando ya tengas tu propia página Web y el nombre del dominio es importante que tengas un programa que transfiera toda la información que tiene tu Web hacia la persona que busca esa información, el programa se llama Servidor Web, que por el costo alto de mantenimiento muchas empresas solo adquieren una parte del espacio de este servidor, lo que llamamos alojamiento Web.

      Es importante que la empresa proveedora del Hosting brinde soporte técnico de calidad, un servidor estable para no pasar por los malos momentos cuando este se cuelga o se cae. Infórmate y asesórate bien para evitar que te den gato por liebre

      « Previous Entries