Marcofbb Noticias y Artículos Webmasters



Publicidad marcored

Etiqueta de Audio y Videos HTML5

  • 23/04/2011
  • 12:45 am
  • marcofbb

Etiqueta audio

Con esta etiqueta puedes añadir audio a tu sitio sin necesidad de plugins. Esta etiqueta permite los codecs de audio ogg (ogg, oga), mp3, wav y AAC, aunque cada navegador soporta diferentes codecs.

<audio controls>
<source src="demo-audio.ogg" />
<source src="demo-audio.mp3" />
</audio>

Etiqueta video

Esta etiqueta es similar a

<video width="320" height="240" controls autobuffer autoplay preload="none" poster="videoframe.jpg">
<source src="demo-video.mp4" type="video/mp4" />
<source src="demo-video.ogv" type="video/ogg" />
</video>

Funciones: controls, autobuffer, autoplay

Si el video no tiene los controles como play o pause, el atributo CONTROLS hará que aparezcan los controles por defecto del navegador, claro, eso depende de si por ejemplo fuera Opera o Safari.
Autobuffer hace que se comience a cargar el video en cuanto carga la página
Autplay comienza a reproducir el video en cuanto se carga un poco del buffer

Soporte de Códecs

¿Qué son los codecs? Bueno, en realidad no vamos a entrar en detalles porque sería demasiado extenso todo, pero para dejárselas facil; es una “herramienta" (por así decirlo) que nos permite decodificar el video o contenido multimedia en sí, de manera que el navegador pueda mostrarlo visual y correctamente al usuario.
He aquí los codecs que usa y soporta cada navegador:

  • Chrome – H.264 y Theora (comúnmente llamado como OGG Vorbis)
  • Safari – H.264 y todo lo que use Quicktime
  • Firefox – Sólo Theora

Hay algo que muchos se preguntan; ¿Por qué Firefox solo soporta Theora y Safari sólo H.264? Es algo todavía complicado, pero resumiento todo, es por que H.264 no es software libre, tienes que pagar por su uso, y digamos que los de Safari (apple) son “de dinero". En cambio Theora, como es libre y como Firefox es creada por una fundación que apoya el Software Libre, ya se imaginarán.

Share

Nuevos inputs en HTML5

  • 05/04/2011
  • 10:46 pm
  • marcofbb

Nuevos inputs

  • Search – Sirve para un campo de búsqueda.
  • Number – Para campo numérico.
  • Range – Mostrará algo así como una "recta" en la que tu estableces un rango.
  • Date, datetime, week, month – Campo para fecha
  • Tel, email, url – Ya sabrán

Search

<input type="search" autofocus placeholder="search" name="nombre">

En input type estamos declarando el tipo de input, luego con Autofocus significa que al cargar la página, se autoseleccionará este campo.

El placeholder es el texto que aparecerá en el campo inactivo, de modo que cuando lo seleccionemos pues se quedará en blanco
Y en name, le asignamos cualquier nombre al campo

Number

<input type="number" min="10" max="80" step="10" placeholder="numero" name="nombre">

Como dijimos, input type declara el tipo de input, min declara el número mínimo de caracteres, max el numero máximo, placeholder y name ya lo habíamos dicho.

Range

<input type="range" min="10" max="80" placeholder="range" name="nombre">

Date

<input type="datetime">

Se puede cambiar datetime por date, datetime-local, time, week o month

Tel, email, url

<input id="input" name="input" type="email" />

Se puede cambiar email por tel o url

Atributo requerido

Ahora los formularios permiten el atributo ‘required‘ para especificar que un campo es requerido. Esto significa que los datos del formulario no serán enviados si el campo marcado como requerido está vacío. Puedes utilizar este atributo de dos formas:

<input type="text" name="Input1" required>

o

<input type="text" name="Input1" required="required">

El atributo placeholder
Este atributo permite rellenar el campo con un valor predeterminado y una vez que el usuario hace clic en el campo este valor desaparece. Por el momento, este atributo solo sirve en algunos navegadores.

<input name="search" type="search" placeholder="Buscar" />

Uso de expresiones regulares
Si deseas que en un campo de un formulario solo se puedan escribir solo un número máximo de caracteres, o solo mayúsculas, etc., esto lo puedes hacer mediante expresiones regulares utilizadas directamente en el código HTML:

<form action="" method="post">
<label for="username">Nombre de Usuario: </label>
<input type="text"
name="username"
id="username"
placeholder="4 <> 10"
pattern="[A-Za-z]{4,10}"
required>
<button type="submit">Enviar </button>
</form>

Hilo donde están todos los artículos para aprender HTML5

Share

Estructura completa HTML5

  • 04/04/2011
  • 6:19 pm
  • marcofbb

En esta clase vamos a dar un ejemplo de como se utiliza el HTML5 para estructuras que tienen Footer, Menu y Header.

Estructura completa

Estructura Html5

<body>
<header>
<hgroup>
<h1>Título de la página</h1>
<h2>Subtítulo de la página</h2>
</hgroup>
<nav>
<ul>
<li><a href="#">Link 1</a>
<li><a href="#">Link 2</a>
<li><a href="#">Link 3</a>
</ul>
</nav>
</header>
<section>
<article>
<header>
<h1>Título del post</h1>
<p>Datos del post: autor, fecha, etc.</p>
<time datetime="2010-08-02T13:30:50+07:00"></time>
</header>
<p>Contenido del artículo</p>
</article>
<!--Más artículos -->
</section>
<aside>
Barra lateral / Sidebar
</aside>
<footer>
Footer de la página
</footer>
</body>

Como verán, se usa la etiqueta “aside” para la sidebar, “footer” para el footer, etc. Pero, si queremos darle un diseño a cada uno con CSS, podemos ponerle el atributo div, quedaría algo así:

<aside id="IDaqui">

Y también, les explicaré la línea de DATETIME:

<time datetime="2010-08-02T13:30:50+07:00">

La sintaxis es algo así: AÑO-MES-DIA, todo seguido de una T que indica que escribiremos el Tiempo y luego: HORA(Formato24):MINUTO:SEGUNDO+DIFERENCIAGTM
Por ejemplo, si la hora GTM es 12:50:10, y nuestro GTM es +5 pondremos: 12:50:10+5:00
O si somos -7, pondremos: 12:50:10-7:00

Elementos no soportados en HTML5

Los siguientes elementos ya no son soportados en HTML5: <acronym>, <applet>, <basefont>, <big>, <center>, <dir>, <font>, <frame>, <frameset>, <noframes>, <s>, <strike>, <tt>, <u> and <xmp>

Nuevas etiquetas

Las principales nuevas etiquetas en HTML5, solo buscan añadir un significado semántico superior a lo que anteriormente significaba un div o un span.

Estás etiquetas se pueden utilizar en conjunto con las etiquetas del estándar HTML4.

<header> y <footer>

Los elementos <header> y <footer> reemplazan a <div id=”header”> y <div id=”footer”> y generalmente contienen la sección de la cabecera y pié de página del diseño, pero también pueden ser usados como cabecera y/o pié de página de una sección en especial. Estas etiquetas pueden usarse varias veces en un mismo diseño.

<hgroup>

Este elemento es usado para agrupar varias etiquetas de cabeceras (<h1> <h2> <h3> <h4> <h5> <h6>) cuando se van a utilizar títulos, subtítulos, etc para evitar cortar el flujo del esquema del documento.

<nav>

Esta etiqueta esta diseñada para que coloques los menús de navegación ya sea de la página principal o para un artículo en especial.

<section>

Esta etiqueta indica una sección genérica del sitio: La etiqueta <section> es una agrupación temática de contenidos, generalmente con una cabecera.

<article>

Esta etiqueta representa una sección de contenido independiente. Esta etiqueta se utilizaría para respuestas en un foro, artículos en un blog o comentarios de un artículo.

<aside>

Esta etiqueta se utiliza para representar contenido que no este directamente relacionado con el contenido de la página. Por lo general esta etiqueta es utilizada para representar las barras laterales de los blogs.

Cuando necesites una sección con propósitos netamente de posicionamiento, estilos, etc, es recomendable seguir usando la etiqueta <div> en vez de usar las etiquetas mencionadas anteriormente.

Hilo donde están todos los artículos para aprender HTML5

Share

Que se viene de nuevo en HTML5

  • 02/04/2011
  • 2:56 pm
  • marcofbb

El HTML 5 no surgió como todos creíamos, nadie dijo “Ah, ok, vamos a renovar HTML y se va a llamar así”. No, HTML5 fue naciendo conforme el mundo moderno iba avanzando, conforme las necesidades web eran cada vez mayores, ahí es donde nacen las Web Applications. El HTML5 ya no estará destinado a sólamente marcar el texto semánticamente, si no a poder desarrollar mucho más facilmente aplicaciones web.

Hubo un grupo que fue el que se especializó en crear esta nueva versión, llamado WHATWG (Web Hypertext Application Tecnology Working Group). Este grupo está creado por Apple, Mozilla y Opera, y el director de este proyecto es Ian Hickson que ahora es un empleado de Google (fue invitado un trabajador de Microsoft, pero no aceptó).

¿Que se viene nuevo?

  • Se vienen nuevas etiquetas, etiquetas muchisimo más sencillas, más útiles, y que de verdad se necesitan hoy en día.
  • Se eliminarán algunas etiquetas del HTML, etiquetas que en realidad son inservibles o que no sirven para mucho, y que solo estorban.
  • Se incluirá soporte nativo de multimedia sin necesidad de usar plugins y especialmente en audio y video. Es decir, para embeber no se necesitará tampoco mucho código, solo una simple línea que veremos más adelante.
  • Formularios mejorados, por ejemplo, ya no se necesitará usar tanto código para un formulario simple, bonito y eficaz.
  • Por último, están tecnologías variadas, como por ejemplo la conocidísima Geolocalización.

Hilo donde están todos los artículos para aprender HTML5

Share