¿Qué es el HTML5 shiv?

HTML5 shiv es algo que se escucha mucho a la hora de hacer un sitio web usando HTML5. Si el sitio que estás haciendo solo debe funcionar en navegadores más avanzados como los que usan Webkit (Chrome, Safari, etc) o Firefox, entonces no es necesario que sigas leyendo esto… a no ser que tu sitio en HTML5 requiera de ser correctamente interpretado por Internet Explorer. IE no reconoce los nuevos elementos del HTML5 (article, section, etc), es por esto que para que los mismos se visualicen correctamente estilizados en el mencionado navegador, es necesario crearlos mediante javascript. La solución es bastante simple, tienes que poner el siguiente código en el head de tu sitio: <!--[if lt IE 9]> <script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script> <![endif]--> Cada...

Read more »

Traducción de “HTML 5 + XML = XHTML 5″

HTML 5 Doctor es un excelente sitio en inglés en el cual varios expertos escriben sobre este lenguaje. La verdad que vale la pena leer el total de sus artículos ya que son muy interesantes y útiles. Bruce Lawson es uno de estos gurús, trabaja en la parte de Estándares Web Abiertos para Opera, también es miembro de la “Web Standards Project´s Accesibility Task Force” y de el “W3C Mobile Best Practices Working Group”. El escribe en su blog: www.brucelawson.co.uk y también en www.html5doctor.com. Bruce muy amablemente me dió el permiso para publicar una traducción de su artículo llamado “HTML5 + XML = XHTML 5” publicado el 2 de julio de 2009 en HTML5 Doctor. Así que ¡muchas gracias Bruce!. Traducción Me gusta la sintaxis del XHTML. Es como...

Read more »

Nuevos tipos de input en HTML5

Dentro de la gran cantidad de novedades que nos ofrece el HTML5, una muy interesante son los nuevos valores para el atributo type del elemento input. Estos nuevos tipos de campos hacen que los navegadores adopten distintos comportamientos que, sin dudas, nos van a hacer la vida más fácil a los desarrolladores de sitios web. Así como actualmente tenemos el conocido password que oculta la contraseña con asteriscos o círculos (dependiendo del navegador); ahora contamos con el nuevo search que presenta una pequeña cruz para poder borrar su contenido; o también el nuevo campo numérico number que muestra dos flechas (hacia arriba y hacia abajo) para aumentar o disminuir el valor del número. Algo muy importante a tener en cuenta es que si bien...

Read more »

5 grandes nos enseñan HTML5: Mozilla, Google, Apple, Facebook y Opera

A esta altura es inconmensurable la cantidad de información que existe en la web sobre HTML5. Existen múltiples recursos en línea para que aprendamos cada detalle sobre el mismo, desde blogs personales a grandes portales de tecnología. A continuación te mostramos 5 grandes compañías dentro del mundo de internet que quieren que aprendamos todo sobre HTML5, CSS3 y nuevas tecnologías.   Mozilla Mozilla es el único de esta lista que ofrece contenido enteramente en español. Y por suerte hay unos cuántos artículos y tutoriales. Su sitio es muy recomendable tanto si recién empiezas como si tienes algo de experiencia. HTML5Rocks de Google HTML5Rocks.com es el sitio que nos ofrece Google, con varios artículos y secciones como son las diapositivas,...

Read more »

La etiqueta meta viewport en la web móvil

La etiqueta meta para el viewport fue introducida por Apple en Safari para móviles, para ayudar a los desarrolladores a mejorar la presentación de sus aplicaciones web en un iPhone, iPod Touch o iPad. A continuación una breve explicación y un video muy descriptivo. La etiqueta viewport nos permite a los que construimos sitios web o web apps, definir el ancho, alto y escala del área usada por el navegador para mostrar contenido. Al fijar el ancho o alto del viewport, los desarrolladores podemos usar un número fijo de pixeles (ej: 320, 480, etc) o usar dos constantes, device-width y device height respectivamente.Se considera una buena práctica configurar el viewport con algunas de estas dos constantes, en vez de un ancho o alto fijo. Muchos...

Read more »

¿Qué es HTML5 Boilerplate?

Seguramente hayas leído el nombre de HTML5 Boilerplate (o H5BP) en Twitter. Pero, como tantos otros temas, lo dejaste pasar pensando “esto es solo otro proyecto más” de los cientos (¿miles?) basado en HTML5. Pero este proyecto no es “uno más”, te conviene saber al menos de que se trata ya que te puede llegar a ser de gran utilidad. HTML5 Boilerplate nos ofrece simplificar el proceso de construcción de sitios web en HTML5 y para ello nos permite descargar una especie de template o plantilla que puede ayudar no solo a los desarrolladores web novatos, sino también a los más experientes. Con H5BP podemos obtener código del mejor (está desarrollado por gurus como Paul Irish) para: normalización para todos los navegadores (cross-browsing), optimización...

Read more »

HTML5 Nuevas APIs y Javascript

API para hacer Drag & Drop. Mediante eventos. API para trabajar Off-Line. Permite descargar todos los contenidos necesarios y trabajar en local. API de Geoposicionamiento para dispositivos que lo soporten. API Storage. Facilidad de almacenamiento persistente en local, con bases de datos (basadas en SQLite) o con almacenamiento de objetos por aplicación o por dominio Web (Local Storage y Global Storage). Se dispone de una Base de datos con la posibilidad de hacer consultas SQL. WebSockets. API de comunicación bidireccional entre páginas. Similar a los Sockets de C. WebWorkers. Hilos de ejecución en paralelo. ESTÁNDAR FUTURO. System Information API. Acceso al hardware a bajo nivel: red, ficheros, CPU, Memoria, puertos USB, cámaras,...

Read more »

HTML5 Novedades

Incorpora etiquetas (canvas 2D y 3D, audio, video) con codecs para mostrar los contenidos multimedia. Actualmente hay una lucha entre imponer codecs libres (WebM + VP8) o privativos (H.264/MPEG-4 AVC). Etiquetas para manejar grandes conjuntos de datos: Datagrid, Details, Menu y Command. Permiten generar tablas dinámicas que pueden filtrar, ordenar y ocultar contenido en cliente. Mejoras en los formularios. Nuevos tipos de datos (eMail, number, url, datetime …) y facilidades para validar el contenido sin Javascript. Visores: MathML (fórmulas matemáticas) y SVG (gráficos vectoriales). En general se deja abierto a poder interpretar otros lenguajes XML. Drag & Drop. Nueva funcionalidad para arrastrar objetos como imágenes...

Read more »

HTML5 en navegadores antiguos que no lo soportan

Una pregunta muy común en estos tiempos es: “¿Cómo puedo empezar a utilizar HTML5 si existen navegadores antiguos que no lo soportan?” Pero la pregunta en sí se ha formulado de forma errónea. El HTML5 no es una cosa grande como un todo, sino una colección de elementos individuales, por consiguiente lo que sí se podrá será detectar si los navegadores soportan cada elemento por separado. Cuando los navegadores realizan un render de una página, construyen un “Modelo de Objeto de Documento” (Document Object Model - DOM), una colección de objetos que representan los elementos del HTML en la página. Cada elemento - <p>, <div>, <span> - es representado en el DOM por un objeto diferente. Todos los objetos DOM comparten unas características...

Read more »

HTML5 Otros Elementos Muy Interesantes

<audio> y <video> - Nuevos elementos que permitirán incrustar un contenido multimedia de sonido o de vídeo, respectivamente. Es una de las novedades más importantes e interesantes en este HTML5, ya que permite reproducir y controlas vídeos y audio sin necesidad de plugins como el de Flash. El comportamiento de estos elementos multimedia será como el de cualquier elemento nativo, y permitirá insertar en un video, enlaces o imágenes, por ejemplo. Youtube, ya ha anunciado que deja el Flash y comienza a proyectar con HTML5. <embed> - Se emplea para contenido incrustado que necesita plugins como el Flash. Es un elemento que ya reconocen los navegadores, pero ahora al formar parte de un estándar, no habrá conflicto con <object>. <canvas>...

Read more »

HTML5 Mejoras en los formularios

El elemento input adquiere gran relevancia al ampliarse los elementosque se permitiran en el “type”. · <input type="search"> para cajas de búsqueda. · <input type="number"> para adicionar o restar números mediante botones. · <input type="range"> para seleccionar un valor entre dos valorespredeterminados. · <input type="color"> seleccionar un color. · <input type="tel"> números telefónicos. · <input type="url"> direcciones web. · <input type="email"> direcciones de email. · <input type="date"> para seleccionar un día en un calendario. · <input type="month"> para meses. · <input type="week"> para semanas. · <input type="time"> para fechas. · <input type="datetime"> para una fecha exacta, absoluta y tiempo. · <input type="datetime-local">...

Read more »

HTML5 Mejor estructura

Actualmente es abusivo el uso de elementos DIV para estructurar una web en bloques. El HTML5 nos brinda varios elementos que perfeccionan esta estructuración estableciendo qué es cada sección, eliminando así DIV innecesarios. Este cambio en la semántica hace que la estructura de la web sea más coherente y fácil de entender por otras personas y los navegadores podrán darle más importancia a según qué secciones de la web facilitándole además la tarea a los buscadores, así como cualquier otra aplicación que interprete sitios web. Las webs se dividirán en los siguientes elementos: <section></section> Se utiliza para representar una sección “general” dentro de un documento o aplicación, como un capítulo de un libro. Puede contener...

Read more »

HTML5 Introduccion

El HTML5 (HyperText Markup Language, versión 5) es la quinta revisióndel lenguaje de programación “básico” de la World Wide Web, el HTML.Esta nueva versión pretende remplazar al actual (X)HTML, corrigiendoproblemas con los que los desarrolladores web se encuentran, así comorediseñar el código actualizandolo a nuevas necesidades que demanda laweb de hoy en día.Debido a que estos cambios afectaran la forma de desarrollar la web enun futuro inmediato, desde The Process, plantearemos una serie deartículos donde desvelaremos los cambios más importantes.Actualmente el HTML5 está en un estado BETA, aunque ya algunasempresas están desarrollando sus sitios webs en esta versión dellenguaje. A diferencia de otras versiones de HTML, los cambios en HTML5comienzan...

Read more »