Browse Tag: internet explorer

Buenas prácticas para el Desarrollo Web con HTML5

Desarrollo Web con HTML5

Quizás muchos de ustedes se están iniciando en el Desarrollo Web con HTML5, por eso es bueno comenzar con unas cuantas buenas prácticas de HTML5 desde el principio. Son bastante básicas, pero no está de más recordar alguna de ellas, ya que sobre todo nos ayudarán a crear un mejor código HTML5.

Al comenzar a desarrollar una web normalmente lo primero es definir los elementos básicos, buena parte de ellos son los mismos en casi todas las páginas, algunos tags iniciales como: header, footer, metas… Para crear este esqueleto básico podemos usar alguno de los generadores de plantillas disponibles en forma online.

Algunos de los más conocidos son Shikiryu generator. Sin olvidarnos de el excelente HTML5 Boilerplate.

Tener siempre a mano un chuleta de HTML5

HTML5 Cheat Sheet - Tags

Seamos sinceros. No conocemos todos los tags HTML5 y algunas veces muchos de ellos se nos olvidan con frecuencia. Eso sin contar los nuevos que se van introduciendo. Así que lo mejor es tener siempre a mano una chuleta (cheat sheet) de HTML5. Podéis encontrar unas cuantas sobre tags, event handler o soporte en navegadores en la web siempre actualizadas.

Ser cuidadoso con la compatibilidad de los elementos que usemos

HTML5 sigue siendo una tecnología nueva. Aunque poco a poco muchos navegadores ya la van incorporando no en todos funciona ni de la misma forma. Por eso es recomendable tener siempre a mano la web de Can I Use.com para consultar que especificaciones podemos usar, aquí encontraréis tablas de compatibilidades de CSS3, SVG y Javascript.

Saber cómo hacer compatibles HTML5 y versiones antiguas de Internet Explorer

Internet Explorer siempre ha sido un quebradero de cabeza para los desarrolladores web. Con HTML5 promete dar aún algunos dolores de cabeza, al menos para las versiones antiguas de IE 8 y anteriores. La buena noticia es que existe un script que te soluciona la vida de una forma muy simple. Se trata de este de html5shim que con tan sólo incluir en la cabecera de tu código permite ser compatible.

<!-- [if lt IE 9]>
<script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->

Usar los elementos correctamente

Puede parecer una gilipollez y te va a funcionar igual, pero si HTML5 nos da tags específicos como header, footer, article, section, aside, nav…. debemos usarlos y olvidar los viejos div para esos casos. Nuestro código se verá favorecido en legibilidad y podremos aprovechar mucho mejor las características de HTML5 para el marcado de nuestras webs.

Valida tu código

Nunca hay que olvidar hacer un código valido. Nos quejamos de la compatibilidad de los navegadores, pero en muchas ocasiones no hemos escrito el código correctamente para que valide, lo que da problemas en algunos navegadores “menos listos” o incluso en la forma que Google nos indexa. El W3C Validator es nuestro amigo.

Vía | Cats Who Code

Multibrowser el navegador perfecto para los desarrolladores web

NOTA: El software ha sido descontinuado.

Compruebe que su sitio web tiene un aspecto perfecto en todos los navegadores. La captura de pantalla no está mal, pero trabajar con los navegadores en un ambiente real es mucho mejor. Multibrowser es la agrupación de todos los navegadores de uso común, en una aplicación.

Página web de Multibrowser

Multibrowser contiene casi todos los navegadores que más se usan actualmente: Internet Explorer 7, 8, 9, Firefox y Google Chrome. Se trata de una representación real de los núcleos de cada navegador. La aplicación te permite ver hasta cuatro sitios web de manera simultánea en los diferentes modos y puntos de vista existentes.

Tres espacios de trabajo diferentes

Multibrowser tiene un buen ambiente de trabajo para cada fase del proyecto. El modo de diseño, si va a crear o editar el proyecto. Contiene muchas herramientas inteligentes y útiles, tales como las reglas y guías, que permiten medir el tamaño de los elementos, y WebTools para la edición de CSS en tiempo real. El modo de comparación, si es necesario comparar varias versiones de su proyecto en un navegador. Y, por último, el modo de Vista, que se utiliza para el control final de su proyecto en todos los navegadores.

Capacidad de navegación por el sitio web completo

Multibrowser no genera las imágenes estáticas de las páginas. Solo contiene la mayoría de los navegadores que más se utilizan en la actualidad, y lo más importante es que los sitios web se muestran en la misma forma que en los navegadores nativos, incluyendo todos los accesorios y funciones. Las páginas pueden ser vistas con eficacia en todos los navegadores seleccionados al mismo tiempo.

La edición en línea del código CSS (WebTools)

Multibrowser contiene una herramienta de gran alcance que es WebTools. Seguramente, usted debe haber oído hablar de Firebug. No negamos que hemos estado un poco inspirados por este popular complemento para Firefox, mientras estábamos desarrollando nuestro WebTools, herramienta que permite modificar el estilo para mostrar los cambios que hechos en tiempo real, muestra los estilos y la posición de los elementos dentro del árbol DOM. Otras características incluyen el Validador HTML del código fuente.

Monitoreo en línea de los cambios en todos los navegadores al mismo tiempo

¿Está familiarizado con la situación cuando se está depurando un sitio web o una plantilla para un navegador concreto y, mientras tanto, se le rompe la disposición de los demás? Posteriormente, tendrá una tarea complicada y el tiempo para revisar las páginas en todos los navegadores, o que va a recibir imágenes desde otras aplicaciones o servicios. Con Multibrowser todo es mucho más fácil. Con WebTools puede depurar su página o plantilla y usted puede ver inmediatamente los cambios, al mismo tiempo, en todos los navegadores que ha seleccionado. Si se utilizan dos monitores para el trabajo, todo el proceso es incluso más rápido, porque puede tener WebTools en un monitor y los navegadores en el otro.

Validador HTML

Ya no es necesario hacer clic entre múltiples aplicaciones, Multibrowser cuenta con editor y validador. Contiene un sistema integrado de validación de código fuente, que está directamente vinculado con el validador del W3C. Inmediatamente después de la descarga que indica si la página es válida o no. Con un clic podrá encontrar todos los errores y las advertencias en la página, incluyendo el número de las líneas donde se encuentra el error. Los resultados de la validación se muestran directamente en el editor, donde los errores se pueden corregir y volver a validar hasta que el archivo HTML esté correcto y validado, teniendo la posibilidad de guardarlo.

Reglas, guías, zoom y otras herramientas de desarrollo

El modo de diseño contiene herramientas útiles para el desarrollo. Con las reglas usted puede determinar con precisión la distancia de los elementos desde el borde superior e izquierdo de la zona de trabajo. Puede utilizar las guías para verificar la ubicación de los elementos de la página y, al mismo tiempo, puede comprobar la exactitud de sus puntos de vista en los navegadores por separado. Si usted necesita ver cualquier parte de la página con mayor precisión en los detalles, puede utilizar la función de zoom.

Comparación de imágenes con la plantilla HTML

Puede ser que usted haya tenido un diseño gráfico de aspecto perfecto, pero el resultado de la plantilla o sitio web haya sido completamente diferente. Los elementos no encajaban, el tamaño de letra era diferente, había una hendidura, imágenes diferentes, entre otras incongruencias. Para evitar que esto ocurra, Multibrowser le permite cargar una imagen – un diseño gráfico – en una de las ventanas, utilizando las guías para indicar la posición de los elementos individuales y, posteriormente, adaptando el resultado de la plantilla a la imagen.

Inspección de elementos HTML

Una de las funciones más populares. Para no complicar su búsqueda en cuanto al elemento específico en la página de árbol DOM o en los estilos CSS, todo lo que necesita es hacer clic en el elemento de Inspección en el contexto de selección y tendrá toda la información que usted precisa. Y, por supuesto, inmediatamente puede trabajar con el elemento, lo puede modificar y depurar.

Editor integrado de HTML

Si necesita hacer cambios sencillos o escribir unas pocas líneas de código, puede utilizar el editor de HTML integrado, que soporta el resaltado de sintaxis HTML, la numeración de líneas, y mucho más. Por supuesto, todos los cambios están en línea visible en todos los navegadores activos. El editor trabaja con WebTools, por lo que se pueden ver y editar los archivos CSS en la página que se muestra; posibilitando redactar un mayor número de códigos, en lugar de unos pocos atributos.

Soporte para los editores externos y entornos de desarrollo

Aunque Multibrowser incluye un editor de HTML integrado, es claro que cuando se está preparando plantillas y proyectos web, está utilizando el entorno de desarrollo favorito o un editor de HTML completo. No hay problema, en la configuración se establece la ruta a su editor y, posteriormente, se puede hacer todo lo que necesite. Los cambios que se realizados se pueden observar inmediatamente en todos los navegadores activos.

Soporte para el trabajo con dos monitores

Si utiliza un editor externo como se describe anteriormente, usted se quedará impresionado con la capacidad de trabajar con dos monitores a la vez: uno puede tener el editor, donde puede escribir el código, y el otro, mostrar exploradores individuales. Por supuesto, esto posibilita trabajar con WebTools o con el editor integrado.

Otras características de uso fácil y útil:

  • Sincronización de navegación en todas las ventanas.
  • Sincronización de desplazamiento de las páginas en todas las direcciones, solo tienes que arrastrar el ratón.
  • Posibilidad de personalizar el tema con aplicaciones de color.
  • Entorno estándar y fácil de usar cómo otras aplicaciones de Windows.

Fuente: http://www.multi-browser.com/