Welcome to Scribd, the world's digital library. Read, publish, and share books and documents. See more ➡
Download
Standard view
Full view
of .
Add note
Save to My Library
Sync to mobile
Look up keyword
Like this
4Activity
×
0 of .
Results for:
No results containing your search query
P. 1
Guía básica de HTML 5 para diseñadores web

Guía básica de HTML 5 para diseñadores web

Ratings: (0)|Views: 331|Likes:
Published by Roci Carrion

More info:

Published by: Roci Carrion on May 13, 2011
Copyright:Attribution Non-commercial

Availability:

Read on Scribd mobile: iPhone, iPad and Android.
download as PDF, DOCX, TXT or read online from Scribd
See More
See less

08/22/2012

pdf

text

original

 
Escrito el
01 octubre 2009
por Sebastián Thüer HTML 5 para diseñadores webHace 10 años que se actualizó por última vez el HTML con la especificación4.01. Desde entonces, la web ha cambiado radicalmente como también lo hahecho el modo de diseñar y desarrollar páginas. Se han estandarizado unaserie de elementos como los encabezados o el menú, se utiliza Ajax pararecargar el contenido dinámicamente y todo el mundo usa CSS para definir losatributos visuales de la página.El nuevo HTML 5 intenta adaptarse al nuevo escenario y presenta elementospara desarrollar páginas dándole un valor especial a la semántica, es decir, quese pueda reconocer desde el propio código el tipo de contenido que se estámostrando. Conviene recordar, que en sus orígenes el HTML no era más queun lenguaje de etiquetas sencillo orientado a poner en líneas trabajosacadémicos. Por eso, por ejemplo, tenemos seis niveles de títulos (<h1>,<h2>… <h6>) que casi nadie usa en su totalidad.El estado actual del HTML 5 es el de un borrador que está madurando. Laprimera versión salió a la luz en enero de 2008 pero ha sido revisada variasveces. Sin embargo, navegadores como Firefox 3.5 o Internet Explorer 8 yapueden interpretarlo y tienen soporte para las etiquetas y tecnologías quevienen de la mano.
Las novedades
El borrador del HTML 5 es un documento complejo y extenso. Hice la pruebade convertilo a PDF obtuve un documento de 1737 hojas tamo A4. Sinembargo, hay mucha información estrictamente técnica que no afecta al diseñoweb comodice Eric Meyer  . Por ejemplo, el cómo hacer un análsis sintáctico (“parsear”) del componente tiempo o mo moverse por el historial delnavegador.En lo que es estrictamente diseño lo más importante son las
etiquetas delHTML 5
. Pero antes avanzar conviene recordar que -como es habitual en elW3C- se asegura la compatibilidad hacia atrás con lo cual podemos seguir escribiendo en el viejo HTML 4 sin miedo porque los navegadores seguiránmostrando correctamente las páginas. Sin embargo, profesionalmente nosvamos a quedar atrás y en algún momento debemos encarar la transición.Mejor hacerlo ahora.
 
Etiquetas que salen
Con la llegada del CSS muchas etiquetas del HTML que afectaban lapresentación de los elementos de pantalla cayeron en desuso. Ahoradefinitivamente se eliminan. Todas pueden ser perfectamente reempalzadaspor atributos en las hojas de estilo.El listado de
etiquetas que caen en desuso
-porque ya existe una forma dehacer lo mismo con CSS- es el siguiente:
FONT
CENTER
STRIKE
BASEFONT
BIG
S
STRIKE
TT
UEl HTML 5 elimina completamente el uso de frames (marcos) por razones deusabilidad y accesibilidad. No ocurre lo mismo con el IFRAME que seguirásiendo válido. Por lo tanto, las
etiquetas vinculadas con los frames quesalen
son:
FRAME
FAMESET
NOFRAMESPara terminar, encontramos
etiquetas que ya no se usan
porque creabanconfusión o hacían lo mismo que otras ya existes. Estas son:
ACRONYM
APPLET
ISINDEX
DIR
Etiquetas que entran
Como mencioné anteriormente, una prioridad del HTML 5 es darle valosemántico al código para que se pueda reconocer fácilmente la función de loselementos en una página. Por eso, aparecen muchos indicadores de seccionesy contenedores para tipos de contenido específicos.Hay 22 nuevas etiquetas y son las siguientes:1.SECTION2.ARTICLE3.ASIDE4.HGROUP5.HEADER6.FOOTER7.NAV8.DIALOG9.FIGURE10. VIDEO11.EMBED12.MARK13.PROGRESS
 
14.METER15.TIME16.RUBY (RT y RP)17.CANVAS18.COMMAND19.DETAILS20.DATALIST21.KEYGEN22.OUTPUTTambién tenemos etiquetas que soportan nuevos atributos. Por ejemplo,anteriormente en INPUT solo poas escoger entre botones, casillas deverificación, campos de texto o clave y pocas opciones más. Ahora tenemosatributos específicos como SEARCH si se trata de un campo de búsqueda,EMAIL si el usuario tiene que introducir un correo electrónico o DATE si es unafecha. También aparece el atributo AUTOFOCUS para poder poner el foco deun formulario en un lugar concreto sin tener que recurrir al JavaScript.
Primeros pasos con HTML 5
Voy a intentar explicar algunas de las nuevas etiquetas (las más importantes enmi opinión) a través de un ejemplo práctico. Supongamos que tenemos un sitioclásico formado por el encabezado, menú a la izquierda, contenido y pide depágina.En HTML 4.01 hubiésemos usado algo así:Esquema de una página en HTML 4Mientras que en HTML 5 podemos hacer más explícito el contenido de cadasección en lugar de usar identificadores para los DIVs.

You're Reading a Free Preview

Download
/*********** DO NOT ALTER ANYTHING BELOW THIS LINE ! ************/ var s_code=s.t();if(s_code)document.write(s_code)//-->