Autor Tema: [!] HTML 5. Proximamente.  (Leído 1598 veces)

Desconectado Focux

  • PHPero Master
  • ******
  • Mensajes: 1.010
  • Karma: 22
    • Ver Perfil
[!] HTML 5. Proximamente.
« en: 12 de Noviembre de 2009, 21:43:52 pm »
HTML 5


Hace 10 años que se actualizó por última vez el HTML con la especificación 4.01. Desde entonces, la web ha cambiado radicalmente como también lo ha hecho el modo de diseñar y desarrollar páginas. Se han estandarizado una serie de elementos como los encabezados o el menú,  se utiliza Ajax para recargar el contenido dinámicamente y todo el mundo usa CSS para definir los atributos visuales de la página.

El nuevo HTML 5 intenta adaptarse al nuevo escenario y presenta elementos para desarrollar páginas dándole un valor especial a la semántica, es decir, que se 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 que un lenguaje de etiquetas sencillo orientado a poner en líneas trabajos acadé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. La primera versión salió a la luz en enero de 2008 pero ha sido revisada varias veces. Sin embargo, navegadores como Firefox 3.5 o Internet Explorer 8 ya pueden interpretarlo y tienen soporte para las etiquetas y tecnologías que vienen de la mano.

Las novedades
El borrador del HTML 5 es un documento complejo y extenso. Hice la prueba de convertilo a PDF  obtuve un documento de 1737 hojas tamaño A4. Sin embargo, hay mucha información estrictamente técnica que no afecta al diseño web como dice Eric Meyer . Por ejemplo, el cómo hacer un análsis sintáctico (“parsear”) del componente tiempo o cómo moverse por el historial del navegador.

En lo que es estrictamente diseño lo más importante son las etiquetas del HTML 5. Pero antes avanzar conviene recordar que -como es habitual en el W3C- se asegura la compatibilidad hacia atrás con lo cual podemos seguir escribiendo en el viejo HTML 4 sin miedo porque los navegadores seguirán mostrando correctamente las páginas. Sin embargo, profesionalmente nos vamos 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 la presentación de los elementos de pantalla cayeron en desuso. Ahora definitivamente se eliminan. Todas pueden ser perfectamente reempalzadas por atributos en las hojas de estilo.

El listado de etiquetas que caen en desuso -porque ya existe una forma de hacer lo mismo con CSS- es el siguiente:

FONT
CENTER
STRIKE
BASEFONT
BIG
S
STRIKE
TT
U
El HTML 5 elimina completamente el uso de frames (marcos) por razones de usabilidad y accesibilidad. No ocurre lo mismo con el IFRAME que seguirá siendo válido. Por lo tanto, las etiquetas vinculadas con los frames que salen son:

FRAME
FAMESET
NOFRAMES
Para terminar, encontramos etiquetas que ya no se usan porque creaban confusió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 valor semántico al código para que se pueda reconocer fácilmente la función de los elementos en una página. Por eso, aparecen muchos indicadores de secciones y contenedores para tipos de contenido específicos.

Hay 22 nuevas etiquetas y son las siguientes:

SECTION
ARTICLE
ASIDE
HGROUP
HEADER
FOOTER
NAV
DIALOG
FIGURE
VIDEO
EMBED
MARK
PROGRESS
METER
TIME
RUBY (RT y RP)
CANVAS
COMMAND
DETAILS
DATALIST
KEYGEN
OUTPUT

También tenemos etiquetas que soportan nuevos atributos. Por ejemplo, anteriormente en INPUT solo podías escoger entre botones, casillas de verificación, campos de texto o clave y pocas opciones más. Ahora tenemos atributos 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 una fecha. También aparece el atributo AUTOFOCUS para poder poner el foco de un formulario en un lugar concreto sin tener que recurrir al JavaScript.

Fuente
Mixtiqueros.net

<?PHP
define
(_miNombre, &#39;Focux&#39;);
if(_miNombre == &#39;Focux&#39;): printf(&#39;%s es un programador avanzado&#39;, _miNombre); else: printf(&#39;Tu no eres %s&#39;, _miNombre); endif;
?>

Comunidad PHPeros

[!] HTML 5. Proximamente.
« en: 12 de Noviembre de 2009, 21:43:52 pm »

Desconectado Siquillote

  • PHPero Master
  • ******
  • Mensajes: 4.229
  • Karma: 179
  • Sexo: Masculino
    • Ver Perfil
Re:[!] HTML 5. Proximamente.
« Respuesta #1 en: 13 de Noviembre de 2009, 16:48:40 pm »
Muy buen aporte :) Te daría un Karma si lo hubieses escrito tu :)

#Fdo. Physlet

Desconectado Focux

  • PHPero Master
  • ******
  • Mensajes: 1.010
  • Karma: 22
    • Ver Perfil
Re:[!] HTML 5. Proximamente.
« Respuesta #2 en: 15 de Noviembre de 2009, 02:03:13 am »
Muy buen aporte :) Te daría un Karma si lo hubieses escrito tu :)
.... que $·%&, cómo rayos lo voy a escribir yo si aún no a salido y ningun navegador lo soporta, esta información tan sólo se encuentra en webs oficiales. >:(
Mixtiqueros.net

<?PHP
define
(_miNombre, &#39;Focux&#39;);
if(_miNombre == &#39;Focux&#39;): printf(&#39;%s es un programador avanzado&#39;, _miNombre); else: printf(&#39;Tu no eres %s&#39;, _miNombre); endif;
?>

Desconectado CarlosRdrz

  • Moderador Global
  • PHPero Master
  • *****
  • Mensajes: 2.505
  • Karma: 131
  • Sexo: Masculino
  • A.k.a. TLX
    • Ver Perfil
Re:[!] HTML 5. Proximamente.
« Respuesta #3 en: 15 de Noviembre de 2009, 10:29:26 am »
.... que $·%&, cómo rayos lo voy a escribir yo si aún no a salido y ningun navegador lo soporta, esta información tan sólo se encuentra en webs oficiales. >:(

Eso no es cierto, en el sitio oficial de la w3c viene la especificación oficial de HTML 5.
Concretamente aquí: http://www.w3.org/TR/2008/NOTE-html5-pubnotes-20080610/
Eso que copiaste y pegaste es simplemente un pequeño resumen de esa gran nota.

Saludos
« Última modificación: 15 de Noviembre de 2009, 10:31:03 am por TLX »
La dedicación de mi respuesta sera directamente proporcional a la dedicación de tu pregunta.
Hacer códigos que entiendan las máquinas es fácil, lo difícil y realmente útil es hacer códigos que entiendan las personas.
http://twitter.com/CarlosRdrz
http://www.carlosrdrz.es

Desconectado Siquillote

  • PHPero Master
  • ******
  • Mensajes: 4.229
  • Karma: 179
  • Sexo: Masculino
    • Ver Perfil
Re:[!] HTML 5. Proximamente.
« Respuesta #4 en: 15 de Noviembre de 2009, 11:42:56 am »
Eso no es cierto, en el sitio oficial de la w3c viene la especificación oficial de HTML 5.
Concretamente aquí: http://www.w3.org/TR/2008/NOTE-html5-pubnotes-20080610/
Eso que copiaste y pegaste es simplemente un pequeño resumen de esa gran nota.

Saludos


Pues eso lo que había ducho yo , copy & paste :D

#Fdo. Physlet

Desconectado Focux

  • PHPero Master
  • ******
  • Mensajes: 1.010
  • Karma: 22
    • Ver Perfil
Re:[!] HTML 5. Proximamente.
« Respuesta #5 en: 18 de Noviembre de 2009, 01:20:28 am »
Eso no es cierto, en el sitio oficial de la w3c viene la especificación oficial de HTML 5.
Concretamente aquí: http://www.w3.org/TR/2008/NOTE-html5-pubnotes-20080610/
Eso que copiaste y pegaste es simplemente un pequeño resumen de esa gran nota.

Saludos

Pues eso lo que había ducho yo , copy & paste :D
Eso es lo que estoy diciendo --', el me dijo que porque no lo saque de mi mente, y como "#%$ voy a hacer eso si aún no a salido.
Mixtiqueros.net

<?PHP
define
(_miNombre, &#39;Focux&#39;);
if(_miNombre == &#39;Focux&#39;): printf(&#39;%s es un programador avanzado&#39;, _miNombre); else: printf(&#39;Tu no eres %s&#39;, _miNombre); endif;
?>

Desconectado CarlosRdrz

  • Moderador Global
  • PHPero Master
  • *****
  • Mensajes: 2.505
  • Karma: 131
  • Sexo: Masculino
  • A.k.a. TLX
    • Ver Perfil
Re:[!] HTML 5. Proximamente.
« Respuesta #6 en: 18 de Noviembre de 2009, 15:30:46 pm »
Eso es lo que estoy diciendo --', el me dijo que porque no lo saque de mi mente, y como "#%$ voy a hacer eso si aún no a salido.

Leyéndote la nota oficial de la w3c y escribiendo tú mismo un resumen sobre eso.

Saludos
La dedicación de mi respuesta sera directamente proporcional a la dedicación de tu pregunta.
Hacer códigos que entiendan las máquinas es fácil, lo difícil y realmente útil es hacer códigos que entiendan las personas.
http://twitter.com/CarlosRdrz
http://www.carlosrdrz.es

Desconectado Tope

  • PHPero Experto
  • *****
  • Mensajes: 540
  • Karma: 23
  • Sexo: Masculino
  • Programador PHP
    • Ver Perfil
    • www.Info-Keko.Es
Re:[!] HTML 5. Proximamente.
« Respuesta #7 en: 19 de Noviembre de 2009, 14:15:53 pm »
Cabe destacar que la maquetación es totalmente diferente (y más facil).

Además de que quien use
Citar
FONT
CENTER
STRIKE
BASEFONT
BIG
S
STRIKE
TT
U

Estará haciendo un "destrozo"
Un Saludo, Tope >> Programador FIJO en PHPeros

Desconectado westwest

  • PHPero Master
  • ******
  • Mensajes: 2.837
  • Karma: 104
  • Sexo: Masculino
    • Ver Perfil
Re:[!] HTML 5. Proximamente.
« Respuesta #8 en: 19 de Noviembre de 2009, 15:17:44 pm »
a que te refieres con la maquetación?

Desconectado Tope

  • PHPero Experto
  • *****
  • Mensajes: 540
  • Karma: 23
  • Sexo: Masculino
  • Programador PHP
    • Ver Perfil
    • www.Info-Keko.Es
Re:[!] HTML 5. Proximamente.
« Respuesta #9 en: 19 de Noviembre de 2009, 17:43:04 pm »
Me refiero a la estructura del código (perdón...)

El uso de <header> para meter el contenido (en lugar de hacer un div llamado header)

Otro con <footer>, para los articulos se usa <article>

Y lo mejor de todo, es insertar videos sin necesidad de plugins (incluso sin flash!!!), directamente subes un video MP4, y pones <video width="640" height="360" src="video.mp4" autobuffer autoplay>(contenido que quieres que se vea si no tiene un navegador con HTML5)</video>
El uso de video, se podría hacer directamente desde ya, porque las ultimas versiones de Firefox y Chrome soportan HTML5 y podemos poner los videos así y en el contenido que queremos que se vea si no tiene un navegador que lo soporte, incrustamos el reproductor flash ^^

Nota: Lo que va entre <video ...> y </video> es como si fuera el atributo ALT que desaparece. Al igual que una imagen que seria
<img src="moto.jpg" alt="Moto"> ahora es <img src="moto.jpg">Moto</img>
Un Saludo, Tope >> Programador FIJO en PHPeros

Desconectado westwest

  • PHPero Master
  • ******
  • Mensajes: 2.837
  • Karma: 104
  • Sexo: Masculino
    • Ver Perfil
Re:[!] HTML 5. Proximamente.
« Respuesta #10 en: 19 de Noviembre de 2009, 18:14:41 pm »
wow! genial! me encanta HTML5
pero img ahora es siempre <img></img> ? :(

Desconectado Tope

  • PHPero Experto
  • *****
  • Mensajes: 540
  • Karma: 23
  • Sexo: Masculino
  • Programador PHP
    • Ver Perfil
    • www.Info-Keko.Es
Re:[!] HTML 5. Proximamente.
« Respuesta #11 en: 19 de Noviembre de 2009, 20:03:01 pm »
En HTML, la etiqueta img, siempre ha sido <img src="" *con su alt, title, etc...*></img>
Sólo que estamos acostumbrados a escribirla en XHTML que es <img src="" /> (al igual que con los br, los input, etc..)

En XHTML 5 (se está desarrolando HTML 5 y XHTML 5 a la misma vez, cosa que nunca antes había pasado) también existirá el poder poner <etiqueta />
Un Saludo, Tope >> Programador FIJO en PHPeros

Desconectado westwest

  • PHPero Master
  • ******
  • Mensajes: 2.837
  • Karma: 104
  • Sexo: Masculino
    • Ver Perfil
Re:[!] HTML 5. Proximamente.
« Respuesta #12 en: 19 de Noviembre de 2009, 20:33:25 pm »
Pues prefiero XHTML la verdad...
XHTML5 tendra las mismas caracteristicas que HTML5? ¿o parecidas? como lo de video, etc.

Desconectado CarlosRdrz

  • Moderador Global
  • PHPero Master
  • *****
  • Mensajes: 2.505
  • Karma: 131
  • Sexo: Masculino
  • A.k.a. TLX
    • Ver Perfil
Re:[!] HTML 5. Proximamente.
« Respuesta #13 en: 19 de Noviembre de 2009, 22:22:12 pm »
En HTML, la etiqueta img, siempre ha sido <img src="" *con su alt, title, etc...*></img>
Sólo que estamos acostumbrados a escribirla en XHTML que es <img src="" /> (al igual que con los br, los input, etc..)

<img src="" /> no es de XHTML, yo llevo toda mi vida incluyendo los scripts js con <script type="tal tal tal"... />
Cerrar la etiqueta con /> o con </etiqueta> es indiferente y no depende de si es XHTML o no.

Saludos
La dedicación de mi respuesta sera directamente proporcional a la dedicación de tu pregunta.
Hacer códigos que entiendan las máquinas es fácil, lo difícil y realmente útil es hacer códigos que entiendan las personas.
http://twitter.com/CarlosRdrz
http://www.carlosrdrz.es

Desconectado Siquillote

  • PHPero Master
  • ******
  • Mensajes: 4.229
  • Karma: 179
  • Sexo: Masculino
    • Ver Perfil
Re:[!] HTML 5. Proximamente.
« Respuesta #14 en: 20 de Noviembre de 2009, 16:12:58 pm »
Una duda.

Me refiero a la estructura del código (perdón...)

El uso de <header> para meter el contenido (en lugar de hacer un div llamado header)

Otro con <footer>, para los articulos se usa <article>

Y lo mejor de todo, es insertar videos sin necesidad de plugins (incluso sin flash!!!), directamente subes un video MP4, y pones <video width="640" height="360" src="video.mp4" autobuffer autoplay>(contenido que quieres que se vea si no tiene un navegador con HTML5)</video>
El uso de video, se podría hacer directamente desde ya, porque las ultimas versiones de Firefox y Chrome soportan HTML5 y podemos poner los videos así y en el contenido que queremos que se vea si no tiene un navegador que lo soporte, incrustamos el reproductor flash ^^

Nota: Lo que va entre <video ...> y </video> es como si fuera el atributo ALT que desaparece. Al igual que una imagen que seria
<img src="moto.jpg" alt="Moto"> ahora es <img src="moto.jpg">Moto</img>

Lo de <video...> ¿Es como si fuera un <embed...>?  Si es así sería genial :D

#Fdo. Physlet