Archivo

Posts Tagged ‘HTML5’

Controles de entrada de datos en HTML5

febrero 4, 2013 Deja un comentario

En HTML5 tenemos nuevos tipos de datos de entrada que nos permitirán validar los datos fácilmente de manera que el usuario solo pueda ingresar los datos correctos.
podemos usar diferentes tipos y solo tenemos que ponerle en la propiedad lo que deseamos ingresar ejemplo:


type=”search”:  se usa para campos de búsqueda
type=”mail”:  se usa para campos de mail
type=”url”:  se usa para campos de url
type=”datetime”:  se usa para campos de fecha y hora, despliega un calendario
type=”color”:  se usa para seleccionar un color, en el value se guardar el valor RGB
type=”range”: se usa para seleccionar un valor con un rango permitido, generalmente sale una barra deslizante

Adicional puedes colocar la propiedad required en los input para indicar que el campo es requerido de esa manera hasta que no se seleccione o ingrese un valor o permitirá realizar el submit y adicional el mensaje de validación será generado automáticamente por el explorador.

anteriormente se usaba mucho Javascript para cada uno de estos casos pero ya con HTML5 podemos hacerlo mas fácil,  acá les muestro algunos ejemplos:

<label for=”search”>Buscar en esta web</label>
<input id=”search” name=”search” type=”search” placeholder=”Ingrese su busqueda” >

<label for=”email”>E-mail</label>
<input id=”email” name=”email” type=email>

<label for=”blog”>URL</label>
<input id=”blog” name=”blog” value=”” type=url required>

<label for=”edad”>Tu edad</label>
<input id=”edad” name=”edad” type=”number” step=”5″>

<label for=”telefono”>Teléfono</label>
<input id=”telefono” name=”telefono” type=tel value=”1111″ readonly>

<label for=”cantidad”>¿Cuántos cafés puedes beber por día?</label>
<input id=”cantidad” name=”cantidad” type=range min=5 max=10 >

<label for=”cumple”>¿Cuándo es tu siguiente cumpleaños?</label>
<input id=”cumple” name=”cumple” type=date>

<label for=”alarma”>Día y hora para la alarma</label>
<input id=”alarma” name=”alarma” type=datetime>

<label for=”hora”>Hora de alarma</label>
<input id=”hora” name=”hora” type=time>

<label for=”color”>Color preferido</label>
<input id=”color” name=”color” type=color>

campos_de_ingreso_HTML5

por desgracia no esta soportado por todos los exploradores especialmente el caso de internet explorer que solo lo soporta la versión 10, recuerden que pueden verificar la compatibilidad por acá: https://mteheran.wordpress.com/2013/01/31/compatibilidad-de-los-exploradores-de-escritorio-y-moviles-con-html5/

HTML5 etiquetas basicas

enero 31, 2013 2 comentarios

 

Para muchos que estén interesados en empezar con HTML5 pueden empezar utilizando las etiquetas básicas que se crearon para crear una estructura mucho mas ordenada en las paginas. primero les comparto cuales son las etiquetas que siguen y cuales quedaron obsoletas en HTML5:

ELEMENTOS QUE SE SIGUEN USANDO DESDE XHTML 1.1 (HTML5):

* html
* head: title, meta, base, link, script, style, noscript
* body: a, abbr, address, area, b, bdo, blockquote, br, button, caption,
cite, code, col, colgroup, dd, del, dfn, div, dl, dt, em, fieldset,
form, hr, i, iframe, img, input, ins, kbd, label, legend, li, map,
menu (changed), object, ol, optgroup, option, p, param, pre, q, s,
samp, select, small, span, strong, style, sub, sup, table, tbody, thead,
tfoot, td, th, tr, textarea, title, tr, ul, var

ELEMENTOS OBSOLETOS
acronym, applet, basefont, big, center, dir, font, frame,
frameset, noframes, strike, tt, u

 

los nuevos elementos que se incorporan en HTML5 son fáciles de usar:

header: Representa un encabezado

footer: Representa información de cierre o sumario

article: Representa un elemento independiente que puede ser utilizado por sí solo

section: Representa una sección temática de contenido

aside: Agrupa información relacionada a su contenedor, pero tangencial. Podría ser eliminada sin quitarle significado completo a su contenedor

nav: Es una sección con vínculos de navegación hacia otras páginas del sitio

 

 

por ultimo les dejo una pagina con la correcta utilización de estas etiquetas que reemplazan realmente la utilización de los Div para cada sección de los contenidos:

 

<!DOCTYPE html>
<meta charset=”utf-8″>
<title>HTML5</title>

<title>El TIEMPO.COM</title>
<Header>
<h1>El TIEMPO.COM</h1>
<nav>
<ul>
<li>Portada
<li>Opinión
<li>Politica
<li>Judicial
<li>Bogota
<li>Deportes
<li>Entretenimiento
<li>Reportajes
<li>Clasificados
<li>Secciones

</ul>
</nav>
</header>

<article>
<header><h1>”Hoy colombia es la que mejor juega en eliminatoria”: Fernando Carlos</h1></header>
<p>Esa es la opinion del periodista argentino de FOx sports que admira a Pékerman y es amigo de Falcao</p>

<p>

de lunes a viernes es una de las mas vistas en la pantalla dl prestigioso canal deportivo
FOX Sport. su sentido de humor y su capacidad para conducir el pograma “Fútbol para todos” tienen un sello diferente, que atrapa.

<p>Ahora con el presente que vive la seleción Colombia y, obre todo,

</article>

<section>
<h1>Top de noticias</h1>
<section>
<h1>Leído</h1>
<ol>
<li>Primera</li>
<li>Segunda</li>
<li>Tercera</li>
<li>Cuarta</li>
</ol>

<a href=”VerMas.html”>Ver mas</a>
</section>
<section>
<h1>Comentados</h1>
<ol>
<li>Primera</li>
<li>Segunda</li>
<li>Tercera</li>
<li>Cuarta</li>
</ol>

</section>

</section>

Compatibilidad de los exploradores de escritorio y móviles con HTML5

enero 31, 2013 Deja un comentario

 

 

Al empezar con hmtl5 debemos tener en cuenta aun la compatibilidad de  los exploradores ya que todavía no todo esta estandarizado, para ello les recomiendo revisar los siguientes Links:

 

1. compatibilidad de los exploradores móviles con html5:

http://mobilehtml5.org/

 

2. compatibilidad con los exploradores de escritorio:

http://caniuse.com/

 

3. utilidad para detectar si el cliente que esta viendo nuestra pagina (web o móvil) soporta o no algunos componentes de html5:

http://modernizr.com/

 

cualquier otra herramienta que conozcan por favor la comparten en los comentarios.