lunes, 1 de octubre de 2012
0:34 | 
Publicado por
carlitox |
HTML5
Etiquetas básicas principales de html5:
es un lenguaje de programación con una carga semántica. para que google lo indexe mejor.
<!DOCTYPE HTML>
<html>
<head>
--------
--------
</head>
<body>
</body>
</html>
Etiqueta header:
es una etiqueta de una sección, y se puede repetir cuantas veces sea necesario. un header puede representar a los que es una etiqueta de maquetación <div id="header"></div>
<html>
<head>
<title>prueba</title>
</head>
<body>
<header>
--------------
</header>
</body>
</html>
Etiqueta hgroup:
permite agrupar las etiquetas "h". en las anteriores versiones de html, los indexadores lo toman como h iguales. si queremos darle importancia a un h, lo sacamos fuera del hgroup.
<hgroup>
</hgroup>
Etiqueta nav:
dentro de esta etiqueta deberían estar los enlaces, viene a ser un menú. si hay una palabra en medio de un parrafo con un vinculo, dependiendo o no de la importancia que querramos darle, podemos meterla dentro de un nav, para que el navegador la indexe.
Etiqueta section:
define un área de contenido único en el sitio.
Etiqueta article:
define áreas que definen zonas de contenido independiente.
Etiqueta aside:
hace referencia a una zona de contenido tangencial-mente diferente, que no tiene absolutamente nada que ver con el contenido principal de nuestra web. un aside podría ser las barras laterales/menús
Etiqueta footer:
el pie de algo, ya sea página, sección o articulo.
todas las etiquetas mencionadas anteriormente vienen a ser como div.
ejemplo:
<!DOCTYPE HTML>
<html>
<head>
<title>Mi Blog</title>
</head>
<body>
<header>
<hgroup>
<h1>Blog de HTML5</h1>
<h3>Blog sobre como programar en html5</h3>
</hgroup>
</header>
<nav>
<ul>
<li>-----
<li>-----
</ul>
</nav>
<section>
<article>Esta es la....1..................</article>
<article>Est............2..........</article>
<article>Esta es la 3......................</article>
</section>
<aside>
Barra lateral, RSS
</aside>
<footer>
copyright......
</footer>
</body>
</html>
para que dreamweaver grafique las etiquetas html5 se puede crear un css con lo siguiente:
header, hgroup, nav, section, article, aside, footer {
display:block;
}
Etiqueta canvas:
representa un área dibujada, un lienzo en blanco en el que se puede dibujar lo que queramos, gráficos, imágenes animaciones, tipografías, cualquier contenido multimedia, un vídeo.
Adobe edge, es un programa en fase beta, para crear animaciones y flashes para la etiqueta canvas.
Etiqueta audio:
etiqueta para insertar archivos de audio, el estándar es mp3 y ogg.
<audio>
<source src="fichero.mp3"/> con estas etiquetas no se visualiza la barra de control.
</audio>
<audio controls>
<source src="fichero.mp3"/>
</audio>
Etiqueta video:
estandar que soporta html5:
- H.264 (.mp4/.m4u)
- Theora VP3 (.ogg(es un codec libre y gratuito, pero es viejo y malo), .ogv)
- VP8 (.webm) el mejor codec.
es recomendable poner los vídeos en estos 3 formatos y orden, para que puedan visualizarlos desde diferente navegadores y dispositos moviles.
<video controls>
<source src="video.mp4"/>
<source src="video.ogg"/>
<source src="video.webm"/>
</video>
FreemakeVideoConverter es un aplicación gratuita para convertir vídeos a los formatos mencionados anteriormente, se le da a la opción html5 y se convierte en los 3 formatos.
Etiqueta svg:
equivalente a la etiqueta img, solo que permite insertar imágenes no vectoriales, como vectoriales, y también animaciones vectoriales, al estilo de flash
Etiquetas de formulario <input *> (los nuevos inputs):
- <input type="search"> caja de busqueda.
- <input type="number"> caja tipo númerica.
- <input type="range"> nos pinta deslizamiento entre determinados valores.
- <input type="color"> nos muestra un elemento de selección de color.
- <input type="tel"> caja solo para introducir números telefonicos, en un smartphone se ve la diferencia de un tipo texto, ya que al darle, nos aparece el teclado para añadir un telefono.
- <input type="url"> caja de texto para introducir urls, pasa lo mismo que con el tel.
- <input type="email"> caja de texto para introducir direcciones de correo electronico, aparece un teclado de emails.
- <input type="date"> caja tipo fecha.
- <input type="month"> caja de tipo mes.
- <input type="week"> caja de selección de semanas.
- <input type="time"> caja fecha, que empieza del día en cuestión.
- <input type="datetime"> caja fecha mas hora absoluta.
- <input type="datetime-local"> caja de fecha absoluta, tanto del servidor como del cliente.
texto como placeholder:
es una caja de texto con un gris claro, con un texto informativo transparente.
<input placeholder="texto de ejemplo">
autofoco:
al entrar en la página es para que el cursor este dentro de esta caja.
<input autofocus>
compatibilidad con navegadores antiguos (principalmente IE):
- display: block; con este código hacemos que todos los navegadores, visualicen los códigos html5, osea las etiquetas de bloque.
- script de compatibilidad:
<!--[if lt IE 9]>
- <input type="number"> caja tipo númerica.
- <input type="range"> nos pinta deslizamiento entre determinados valores.
- <input type="color"> nos muestra un elemento de selección de color.
- <input type="tel"> caja solo para introducir números telefonicos, en un smartphone se ve la diferencia de un tipo texto, ya que al darle, nos aparece el teclado para añadir un telefono.
- <input type="url"> caja de texto para introducir urls, pasa lo mismo que con el tel.
- <input type="email"> caja de texto para introducir direcciones de correo electronico, aparece un teclado de emails.
- <input type="date"> caja tipo fecha.
- <input type="month"> caja de tipo mes.
- <input type="week"> caja de selección de semanas.
- <input type="time"> caja fecha, que empieza del día en cuestión.
- <input type="datetime"> caja fecha mas hora absoluta.
- <input type="datetime-local"> caja de fecha absoluta, tanto del servidor como del cliente.
texto como placeholder:
es una caja de texto con un gris claro, con un texto informativo transparente.
<input placeholder="texto de ejemplo">
autofoco:
al entrar en la página es para que el cursor este dentro de esta caja.
<input autofocus>
compatibilidad con navegadores antiguos (principalmente IE):
- display: block; con este código hacemos que todos los navegadores, visualicen los códigos html5, osea las etiquetas de bloque.
- script de compatibilidad:
<!--[if lt IE 9]>
<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
colocando este código se ejecuta correctamente, cualquier código javascrit de html5, en navegadores antiguos.
esto debería de colocarse entre las etiquetas del head.
libreria modernizr esto solo nos indica si el navegador es compatible o no con código html5, pero solo indica, no pone solución a la códificación: primero hay que descargar el documento o script en nuestro servidor para que funcione.
<head>
<script src="modernizr.min.js"/>
</head>
------------------
if (modernizr.canvas){
//podemos!!
}else{
//flash
}
de esta manera preguntamos que códigos html5, se pueden o no usar en algunos navegadores.
en html5 se pueden utilizar etiquetas que en xhtml no se usaban, como por ejemplo <b>, si usamos esta etiqueta le damos mas importancia y una carga semántica a la palabra o palabras que queramos resaltar, se puede usar el <strong> pero se le daría menos importancia.
APIS HTML5
- api canvas
- api geolocalización
- api aplicaciones offline: navegación sin conexión, html5 permite guardar-cachear las páginas que nosotros querramos guardar
- api base de datos(SQLite)
- api webworkers: permite lanzar varios procesos en paralelo
ejercicio de maquetación, hacer lo mismo que esta dirección url: http://www.areafor.com/ejemplos/moviles
<![endif]-->
colocando este código se ejecuta correctamente, cualquier código javascrit de html5, en navegadores antiguos.
esto debería de colocarse entre las etiquetas del head.
libreria modernizr esto solo nos indica si el navegador es compatible o no con código html5, pero solo indica, no pone solución a la códificación: primero hay que descargar el documento o script en nuestro servidor para que funcione.
<head>
<script src="modernizr.min.js"/>
</head>
------------------
if (modernizr.canvas){
//podemos!!
}else{
//flash
}
de esta manera preguntamos que códigos html5, se pueden o no usar en algunos navegadores.
en html5 se pueden utilizar etiquetas que en xhtml no se usaban, como por ejemplo <b>, si usamos esta etiqueta le damos mas importancia y una carga semántica a la palabra o palabras que queramos resaltar, se puede usar el <strong> pero se le daría menos importancia.
APIS HTML5
- api canvas
- api geolocalización
- api aplicaciones offline: navegación sin conexión, html5 permite guardar-cachear las páginas que nosotros querramos guardar
- api base de datos(SQLite)
- api webworkers: permite lanzar varios procesos en paralelo
ejercicio de maquetación, hacer lo mismo que esta dirección url: http://www.areafor.com/ejemplos/moviles
Suscribirse a:
Enviar comentarios (Atom)
Contra la ley Sinde
¿Estas en desacuerdo con la ley sinde? No permitas que coarten tu libertad.
Bájame
Bájame
0 comentarios:
Publicar un comentario