Comunidad PHPeros
Lenguajes => (X)HTML => Mensaje iniciado por: Mixvice en 05 de Mayo de 2012, 09:31:23 am
-
Hace tiempo que tome un curso en línea de html5 y hoy he optado por compartir un poco de mis conocimientos con ustedes, su uso es igual de fácil que html aunque aparecen nuevas etiquetas que tendremos que aprendernos, y desaparecen unas que tendremos que olvidar, aunque esto es otro tema.
La estructura básica es la siguiente, los nombres de las etiquetas nos dan una idea de para qué sirve cada una, aunque igual explicaré por más obvio que sea:
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Titulo de la web</title>
</head>
<body>
<header>
<hgroup>
<h1>Phperos</h1>
<h2>Tu Comunidad de PHP</h2>
</hgroup>
<nav>
<ul>
<li>Menú 1</li>
<li>Menú 2</li>
<li>Menú 3</li>
<li>Menú 4</li>
</ul>
</nav>
</header>
<section>
<article>
<h2>Titulo del articulo</h2>
<p>Contenido</p>
</article>
<aside>
<h3>Publicidad</h3>
<p>¿Quieres aprender a programar? <mark>entra a Phperos</mark></p>
</aside>
</section>
<footer>
Derechos de autor.. por ejemplo :P
</footer>
</body>
</html>
Doctype: Anteriormente manejábamos distintos doctype para decirle al navegador como leer nuestra web, ahora, con html 5 solo necesitamos de uno: <!DOCTYPE HTML>. Nada tan simple como esto.
Head y Body: Si estas aprendiendo html5 antes que html, es mejor que vuelvas cuando ya tengas dominado html :P
header: La etiqueta header, nos sirve para indicar el inicio del header de nuestro sitio web, generalmente ponemos cosas como el logo y eslogan de nuestro sitio, aunque podemos poner cualquier cosa.
hgroup: La etiqueta hgroup nos ayuda a organizar todos los titulos, es decir, de <h1> a <h6> en un mismo lugar, esta etiqueta solo puede contener estos elementos por dentro, no se pueden agregar párrafos (<p>), divs, imagenes o cualquier otra cosa.
nav: La etiqueta nav, como es de suponer, es para dar inicio al menú de nuestra página web, después de ésta vienen las etiquetas ul y li para ordenar nuestro menú.
section: Section nos ayuda, por ejemplo si eres blogero o tienes una página de noticias, a definir una sección en el contenido de nuestro sitio, dentro de ella pondremos por ejemplo las noticias.
article: Ésta etiqueta, igual como indica su nombre es para dar inicio a un artículo de un sitio web, alojando dentro de ella imágenes, divs, párrafos, etc...
aside: La etiqueta aside, es un tanto complicada de entender (al menos para mí) pero un ejemplo claro, es tener dos artículos, y en medio de ellos meter una publicidad, esta etiqueta nos ayudará a ordenar todos los elementos de la publicidad entre los dos <article> y sus contenidos ;)
mark: la etiqueta mark es para resaltar el texto que tenemos dentro, de una publicidad por ejemplo.
footer: Footer, como sabemos es la última parte de nuestra página, donde se ponen por ejemplo un mapa de nuestro sitio o bien, los copyright o derechos de autor :p.
Hay más etiquetas de html5, por ahora solo manejaremos estas para darnos una idea de cómo será la estructura en un tiempo, yo aún no implemento html 5 en mi web al 100% pues aún muchos usuarios no pueden dar soporte a dicha tecnología, aunque como diseñadores web, es nuestra obligación dar muerte a navegadores pésimos como internet explorer y sus versiones antiguas pues si no lo hacemos, el usuario nunca lo actualizará.
Para que se den una idea, les dejaré la versión en html del código que tenemos arriba.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Documento sin título</title>
</head>
<body>
<div id="header">
<h1>Phperos</h1>
<h2>Tu Comunidad de PHP</h2>
<div id="menu">
<ul>
<li>Menú 1</li>
<li>Menú 2</li>
<li>Menú 3</li>
<li>Menú 4</li>
</ul>
</div>
</div>
<div id="contenido">
<div class="articulo">
<h3>Titulo del articulo></h3>
<p> Contenido </p>
</div>
<div class="publicidad">
<h3>Publicidad</h3>
<p>¿Quieres aprender a programar? <mark>entra a Phperos</mark></p>
</div>
<div class="articulo">
<h3>Titulo del articulo></h3>
<p> Contenido </p>
</div>
</div>
<div id="footer"> Copyrigh blablabla...</div>
</body>
</html>
Si se fijan, en el código de arriba, nos podemos llegar a perder entre las etiquetas que cierran los div pues tenemos tantos, y tan juntos que es un tanto difícil diferenciar si no pones atención, el doctype es más largo y es uno de los varios que hay. Con HTML 5, como podemos ver, entre una de las tantas opciones que nos brinda, nos da una forma de organizar, y tener bien hecho nuestro sitio web.
Es tan simple, y tan claro que con estas nuevas formas de crear un sitio, implementando un poco de CSS, CSS3 Jquery o CANVAS, podremos llegar muy lejos si asi lo queremos.
Para terminar, les dejo unas demo, de lo que se puede lograr con html5 y css3, y claro algún otro framework por ahí, la mayoria de esto solo funciona con google chrome, si tienes IE ni se te ocurra entrar :P.
http://mrdoob.com/projects/chromeexperiments/ball_pool/ - Ball Pool es un experimento de Google Chrome en HTML5 en el que vas a encontrarte con una piscina de pelotas para divertirte moviendolas con el cursor.
http://hakim.se/experiments/html5/blob/03/ - Una burbuja que se puede juntar/separar xD
http://lights.elliegoulding.com/ - Mi favorito, al verlo me he quedado sin palabras. (Cuidado con este, es un tanto pesado y te puede llegar a "pegar" el navegador, aunque vale la pena correr el riesgo ;).
-
El tutorial esta muy bueno, pero debo reconocer que el ejemplo ese de las luces con la canción me dejo babeando.
Muy bien!
K+
-
El tutorial esta muy bueno, pero debo reconocer que el ejemplo ese de las luces con la canción me dejo babeando.
Muy bien!
K+
Si, a mi igual me encanta cuando mueves el cursor pareciera que vas volando xD. Gracias por el k ;)
-
Buen tuto !! :D
-
Hola,
¡Increíble! Gracias por el tutorial Manuel. Ahí va tu merecido K+.
Los ejemplos son asombrosos...
Un saludo,
Siquillote.
-
Excelente tutorial, no esta complicado. k+
-
Muy buen tutorial, nada mal. Sólo te aconsejo dos cosas:
1- Utilizar el atributo lang en la etiqueta html: <html lang="es">
2- Arreglar el indentado en el código, para que sea más agradable a la vista y menos confuso.
Por cierto PHPeros no crean que me olvidé de ustedes, solo que hace cosa de 2 semanas comencé a trabajar en lo que amo (desarrollo web) y estoy muy apretado, pero apenas tenga un respiro les vengo con una buena oleada de tutoriales HTML5, CSS3 y jQuery Mobile.
Saludos :)
-
Muy buen tutorial, nada mal. Sólo te aconsejo dos cosas:
1- Utilizar el atributo lang en la etiqueta html: <html lang="es">
2- Arreglar el indentado en el código, para que sea más agradable a la vista y menos confuso.
Por cierto PHPeros no crean que me olvidé de ustedes, solo que hace cosa de 2 semanas comencé a trabajar en lo que amo (desarrollo web) y estoy muy apretado, pero apenas tenga un respiro les vengo con una buena oleada de tutoriales HTML5, CSS3 y jQuery Mobile.
Saludos :)
Gracias por los consejos, los tomaré en cuenta, y ojala regreses pronto con esos tutos de jQuery Mobile :p
-
Excelente aporte.
Solo te falta implementar las nuevas etiquetas que todavía no son 100% seguras, pero las podes añadir, que son: <video> y <audio>.
Un saludo.
-
Por ahora estoy repasando HTML (siempre hay algo nuevo que aprender) y en breve estaré echando un vistazo a HTML5, ya empece por este post! Gran aporte, muchas gracias! :)