HTML5.- Construyendo Formularios en WebMatrix Parte 2


PlaceHolder

Es un nuevo atributo que se utiliza dentro de la etiqueta input. Sirve para mostrar un texto dentro del input como funciona al darle la respectiva variable a este atributo presentara la misma siempre y cuando el campo esté vacío o no esté con focus. En cuanto se haga clic dentro del campo (o se llegue por el TAB), el texto desaparecerá . Vale la pena rescatar que antes para realizar este tipo de marcado era necesario JavaScript.

 

Antes con JavaScript

image_thumb17

 

image_thumb61

 

Ahora con el poder de HTML5

 

image_thumb41

 

image_thumb22

 

Actualmente no es compatible con el navegador IE9, presentando un <input> normal como si no se empleara el atributo respectivo.

 

Required

Este atributo se especifica dentro de los formularios que <input> son requeridos o obligatorios. Dependiendo de la forma de llevar el código se puede especificar esto de dos maneras.

image_thumb35

image_thumb23

 

Autofocus

Con forme vamos avanzando te puedes ir percatando que con la llegada de HTML5 va eliminando el uso de JavaScript innecesario haciendo nuestro tiempo de desarrollo más simple y limpio para dedicarnos en las partes más importantes. Ahora si necesitamos que uno de nuestros <input> tenga un focus vale solo aplicar el atributo autofocus esto hará que al cargar la página el cursor se posiciones en dicho input.

 

image

 

image_thumb56

 

Pattern

Ahora con este atributo podemos insertar una expresión regular directamente en nuestros <input> para filtrar el ingreso de lo proporcionado por el usuario.

 

image_thumb82

 

image_thumb75

 

En caso de no estar familiarizado con la definición de lo que es una expresión regular te recomiendo que revises el siguiente articulo en wikipedia.

A continuación les dejo los fuentes de los ejercicios: placeholder, autofocus, required y pattern.

Eso es todo por hoy muchach@s recuerden visitar el pensum del curso y de realizar sus consultas en formspring o déjanos tu comentario Wink

No olvides seguir en twitter a:

Para estar al día con las entradas de la comunidad Avanet.

HTML5.- Introducción y Estructura en WebMatrix


Html5 Logo

Hiiiii! geeks,

Tengo el gran gusto de iniciar la aventura de HTML5 con ustedes, para los que estamos en el día a día del mundo de la web nos podemos dar cuenta que se esta construyendo toda una revolución para recibir a la web moderna que consiste en un manejo sencillo de vídeo, audio, geolocalización, nuevos componentes y etiquetas que son el marco que aclama la web de hoy en día.

ESTO Y MÁS ES HTML5

Pero que es HMTL5 ? 

HTML5 es la actualización de HTML, el lenguaje en el que es creada la web. HTML5 también es un termino de marketing para agrupar las nuevas tecnologías de desarrollo de aplicaciones web: HTML5, CSS3 y nuevas capacidades de Javascript.

 

Porque fue creada ?

La versión anterior y más usada de HTML, HTML4, carece de características necesarias para la creación de aplicaciones modernas orientadas al navegador. La intervención de Javascript ha ayudado a mejorar esto y gracias a frameworks como jQuery, jQuery UI,Sproutcore, entre otros.

 

Porqué la tan anunciada muerte de Plug-in como Flash y Silverlight ?

Como les comentaba debido a esta carencia se vio en muchas casos el uso de plug-in como reemplazo de HTML para desarrollar aplicaciones web con un rico contenido en: audio, video, animaciones vectoriales, componentes de interfaz complejos y más acceso a hardware como webcams y micrófonos entre muchas otras cosas. Ahora HTML5 es capaz de hacer esto sin necesidad de plug-in y con una gran compatibilidad entre navegadores.

 

Que necesito para empezar  ?

Editor de código

image Puedes comenzar con un simple Bloc de Notas si tu estilo es el Hard Code.

 

image Pero si te interesa una metodología un poco más ágil en el desarrollo emplear Intellisense más un editor ligero te recomendamos   Sublime Text.

 

      image      O sino ahora necesitas acceso a datos, reportes, y de más funciones de forma sencilla en un editor ligero te presentamos a WEBMATRIX la nueva herramienta de Microsoft que incluye todo lo necesario para el desarrollo de sitios web ademas de que es gratis como a nosotros nos gusta =).

 

Desarrollar sitios web con HTML5 nunca ha sido tan fácil usa WebMatrix.

 

 Nuevas etiquetas de HTML5 y estructura de nuestro primer proyecto

 

Para empezar a usar HTML5 lo único que tienes que hacer es colocar este DOCTYPE antes de la etiqueta <html>:

 <!DOCTYPE html>

Es un DOCTYPE mucho más simple que XHTML pero esto no cambia las reglas implementadas mas bien esta ahora te permite usar todo el poder de HTML5 sin que nada de lo que ya tienes programado anteriormente deje de funcionar.

 Todas las etiquetas que estamos a punto de presentar se comportan como un div o span. Pero con la diferencia que estas mantienen un significado semántico que queremos decir "es como la etiqueta describe el significado de su contenido". De este modo, los navegadores sabrán qué partes de una página web son estas como cabeceras, pies de página, partes centrales de contenido, etc, etc  y de ese modo podrán dar más importancia a unas u otras. 

 

<header>

Está diseñada para reemplazar la necesidad de crear divs sin significado semántico, ahora aquí ubicaremos nuestra respectiva cabecera.

 

 <nav>

Está diseñado para que coloques los botones de navegación de tu sitie. Incluso puedes colocar cualquier etiqueta dentro, aunque lo recomendado es usar listas <ul>. Y como nota importante sólo puedes tener un <nav> por página.

 

<section>

Define un área de contenido única dentro del sitio. En un blog, sería la zona donde están todos los posts.

 

<article>

Define zonas únicas de contenido independiente. En un blog, cada post sería un article.

 

 <aside>

Cualquier contenido que no esté relacionado directamente con la misión de la página va en un aside. En un blog, obviamente el aside es la barra lateral de información.

 

<footer>

Es el pie de página y todo lo que lo compone.

 

Atención:


Y ustedes se preguntaran que paso con el <div> ya no tiene propósito su uso ???

Con todas estas nuevas etiquetas no significan que ya no se use <div>. Solo usaremos un DIV cuando no exista otra etiqueta más idónea para usar o, cuando pretendamos aplicar un Script o unos estilos CSS a un bloque de contenido al que no es posible aplicar una de esas nuevas etiquetas Sólo se deben usar las etiquetas semánticas de HTML5 donde sean necesarias.

 

AHORA COMO QUEDA LA ESTRUCTURA DE NUESTRO DOCUMENTO HTML5

 

Estructura HTML5

 

Código

Codigo en WebMatrix

 

Presentación

Presentacion Navegador Chrome

 

 

El código lo pueden encontrar aquí.

De está manera se a defino la estructura semántica del sitio haciendo que la exploración tanto para el navegador y el desarrollador sea más efectiva ya que de está manera le damos un significado especifico a cada contenido vale la pena aclarar que esto no es el como se verá nuestro sitio sino como está estructurado en si y su significado, para el como se verá es trabajo de CSS3 que ya veremos en siguientes post.

Y es todo por hoy chic@s quería agradecer en este primer post a @SoreyGarcia por la oportunidad y confianza depositada en mi. Un gran saludo a todos los miembros de @Avanet espero vivir grandes y felices experiencias con ustedes =).

Puedes realizar tus consultas en formspring  o dejanos tu comentario Wink

Mail: peter.conchar@fcmf.ug.edu.ec

No olvides seguir en twitter a:

para estar al día con las entradas en este blog.