JavaScript es el lenguaje usado en la Web.

JavaScript se utiliza en miles de millones de páginas Web para añadir funcionalidad, validar formularios, comunicarse con el servidor y mucho más.

JavaScript es fácil de aprender. Tan solo como todo en la vida hay que prácticarlo

Qué hace JavaScript en HTML5?

Bueno JavaScript o tambien abreviado muchas veces JS por la extensión de los archivos “.js”. sirve para desencadenar o activar eventos en base a acciones del cliente (ocurre del lado del navegador) por eso se lo conoce como un lenguaje del lado del cliente. Entonces esto se resume a que JavaScript nos va ayudar a dar dinamismo a la página.

Algo muy importante a rescatar que es muy cierto que hoy en día existe frameworks basador en JavaScript pero antes de eso es muy recomendable conocer lo que es JavaScript para entender como trabaja todo esto.

Qué es un evento en JavaScript?

Es cuando desencademos una porción de código en base a una acción del usuario.

Antes de empezar…

Debemos recordar siempre que en JavaScript:

• Es sensible a mayusculas y minusculas (Case Sensitive).
• Se puede comentatizar de dos maneras:

• Los “{ }” se utilizan para definir fragmentos de código.
• El “;” nos ayuda a marcar el final de una sentincia.

• Existen dos formas de incorporar código JavaScript en nuestro proyecto:
• Externamente: cuando se hace referencia aún archivo .js.
• Internamente: cuando el código JavaScript se encuentra en la misma página.

Ejemplo del día

Ahora daremos paso al ejemplo del día para ir prácticando

Vista desde el editor

Lo que hemos hecho es aperturar los tags desde la línea 7 para crear nuestro código JavaScript y procedimos a crear una función que inspeccionara nuestro documento en busqueda del Id “parrafoPrincipal” para almacenar la fecha actual dentro de la etiqueta HTML que posea ese Id.

Todo esto va ocurrir al realizar clic en el botom que este seria nuestro evento.

Vista desde el Navegador

Luego de hacer Clic

Eso es todo por hoy muchach@s recuerden visitar el pensum del curso y de realizar sus consultas o comentarios vía twitter a @PeterConchaR  respondiendo facilmente el tweet de aquí abajito, si te gusto no olvides RT y para no perderte los siguientes post sigueme. 

#HTML5.- Introducción a #Javascript en #WebMatrix -> ow.ly/l4YwH vía @avanet

— Peter Concha Regatto (@PeterConchaR) May 16, 2013

No olvides seguir en twitter a:

• @Avanet
• @SoreyGarcia

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

WordPress Tags: HTML5,Javascript,WebMatrix

Mayor semántica: Al identificar el type empleado nos queda claro el uso de dicho control.

Con esto a simple vista podemos definir que se va a solicitar un texto que podría ser un nombre del usuario seguido de su teléfono y dirección de correo electrónico.

Soporte a dispositivos táctiles: Al acceder a nuestros formularios al posicionar el foco en cada control veremos como nuestro teclado móvil se adapta para el ingreso de lo datos que fue diseñado ese tipo de input.

Para los interesados aquí estamos emulando la vista de la página en un Samguns Galaxy S con la extensión Browser Stack de WebMatrix

Ayuda a el autorelleno: Gracias al emplear correctamente los types veremos como el navegador rellena los campos automáticamente ya que al tener reconocido el tipo de entrada que se solicita el mismo proporciona los datos requeridos en caso de que estos hallan sido guardados previamente.

Reglas de validación: Cuando se ingresa los datos el navegador lo comprueba con el tipo de input que se esta empleando y restringe el envió de la información del lado del cliente evitando que se envíen datos con parámetros no afines al tipo de input empleado.

Otro punto importante es para el caso de los navegadores que no reconozcan algunos de los <input type=” ”> para ese caso es recomendado trabajar con framework de detección como modernizr.

Ahora si luego de aclarado estos conceptos vamos a dar un último vistazo a otro grupo de <input type=””> con este grupo finalizaremos este articulo sin más recordarle que si probablemente se me este escapando alguno no dudes en compartirlo con un coment

<input type="search">

Este tipo de entrada se debe usar receptar una cadena para realizar consultas, en que nos beneficia esto ahora cuando empieces a digitar contenido en la casilla el navegador si encuentra en nuestro historial ingresos previos nos dará sugerencias de autocompletado.

<input type="number">

Este tipo de entrada debe usarse para trabajar con números, en que nos beneficia esto ahora cuando empieces a digitar contenido en la casilla el navegador en el caso de teléfonos móviles desplegará el teclado numérico. Y ahora te preguntaras en que se diferencia su uso con el <input type=”tel”> la respuesta es simple en el valor semántico que le otorga a la etiqueta.

Además de esto se le suma que al nivel de navegadores de escritorio solo el Google Chrome soporta al 100% la etiqueta ya que muestra los respectivos controles para incrementar y decrementar los dígitos.

Aparte el propósito de esto es que con el atributo step se puede fijar de cuando a cuenta va a ser el incremento o decremento.

<input type="color">

Este tipo de entrada debe usarse para trabajar en casos de requerir un selector de color. Vale la pena acotar que esto solo es de momento soportado por Google Chrome.

<input type="tel">

Vuelta con este tipo de control al visitar desde un dispositivo móvil y realizar touch en el control veremos como se despliega en el teclado numérico en vez del acostumbrado teclado general.

<input type="url">

Con este tipo de controles al intentar enviar una cadena que no tenga el formato de una URL enviara una alerta y evitara el envió de los datos no validos.

<input type="date">

Con este tipo de control nos permite trabajar de manera sencilla con un datepicker sin algún tipo de control o programación avanzada; vale la pena rescatar que por el momento es soportado por Google Chrome.

<input type="time">

Al implementar este control nos permite formatear lo que se ingresa con el formato de hora y aparecen los controles para incrementar o disminuir los dígitos.

<input type="password">

Al implementar este control ocultara por defecto todo lo ingresado (soporta Firefox, Google Chrome, Internet Explorer 9). Además de que el navegador nos brindara la opción de guardar la contraseña al enviar los datos (soporta Firefox), ya que gracias a el aporte que le hace las etiquetas HTML5 al valor semántico el navegador detecta y se comporta de acuerdo al tipo de control con el que se esta trabajando.

Atributo maxlength

Con maxlength controlamos la longitud máxima del campo. Vale la pena rescatar que como esta y otras implementaciones expuestas con anterioridad antes se las cubría estas validaciones del lado del cliente con javascript pero con la llegado de HTML5 esto ya es un peso menos, siempre y cuando nos preocupemos con manejar la detección del soporte con modernizr probando siempre en todos los navegadores y dispositivos con WebMatrix, además de no olvidar siempre de realizar la respectiva validación del lado del servidor sea el lenguaje que estés implementando siempre debe estar validar de ambos frentes.

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

• peter.concha@avanet.org
• @PeterConchaR

No olvides seguir en twitter a:

• @Avanet
• @SoreyGarcia

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

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

Ahora con el poder de HTML5

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.

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.

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.

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

• peter.concha@avanet.org
• @PeterConchaR

No olvides seguir en twitter a:

• @Avanet
• @SoreyGarcia

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

Hola geeks el día de hoy vamos a presentar nuevos atributos y variables de la etiqueta <input> dentro de la construcción de formularios con los estándares de HTML5 vemos como adquiere gran relevancia al ampliarse los elementos y el valor semántico que este aporta.

Ahora a continuación presentamos a cada uno de ellos:

<input type="range">

Este tipo de <input> puede recibir atributos como: min, max, step y value entre otros a continuación vamos a apreciar un ejemplo de su uso.

PRIMERO CREAMOS LA VISTA

LE DAMOS UN POCO DE ESTILO

DESARROLLAMOS LA LOGICA DEL EJERCICIO

Todo el código está documentado y lo pueden descargar aquí.

<input type="email">

Empleamos este tipo de type para indicarle al navegador que sólo permita las cadenas que se ajusten a una estructura de dirección de correo electrónico válida. Así es, incorporado en la validación de formularios pronto estará aquí! aunque no se puede confiar 100% en esto todavía, por razones obvias. En navegadores antiguos que no entienden esta type, simplemente se empleara un input normal.

Descarga el ejercicio aquí.

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

• peter.concha@avanet.org
• @PeterConchaR

No olvides seguir en twitter a:

• @Avanet
• @SoreyGarcia

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

Por aquí reportándome luego de una perdida XD pero vamos a hora con pasito acelerado para recuperar el ritmo y perder esos kilos de pereza . Dejando el intro cursi vamos a lo nuestro…HTML5 rocks!

HTML 5 incluye nuevas etiquetas como <audio> y <video> en un documento HTML. Nos permitirán incluir un reproductor con un archivo de audio o video.

AUDIO

<audio> permite reproducir archivos de sonido en diferentes formatos sin necesidad de un plugin como adobe flashplayer. Para insertar un sonido se debe de utilizar la etiqueta <audio>, esta etiqueta tiene atributos tales como:

• SRC: enlaza al archivo de audio que queremos reproducir.
• CONTROLS: implementa los controles del reproductor por defecto del navegador como, botón play - pause, seek y volumen.
• AUTOPLAY: reproduce el archivo de audio desde que se carga la página.
•  PRELOAD: carga un poco el archivo de audio antes de iniciar la reproducción en el buffer para que no se trabe por reproducir más de lo que carga.

Ejemplo:

<audio src="Url del archivo.mp3" type="audio/mp3" controls autoplay />

Vista previa:

Aquí esta la tabla de soporte de formatos:

Formato             IE 8         Firefox 3.5           Opera 10.5           Chrome 3.0            Safari 3.0
Ogg                    No                Si                       Si                        Si                          No
MP3                    No                No                      No                       Si                          Si
Wav                    No                Si                       Si                        No                         Si

¿Qué hacer si un navegador no lo soporta?

También está previsto, y podemos hacer uso de la siguiente estructura:

<audio src="Url del archivo.mp3" type="audio/mp3" controls autoplay>

  <a href="Url del archivo.mp3">Tu navegador no soporta esta función</a>

</audio>

si, no soporta saldrá esto:

Que es lo que escribimos para que se muestre:

<a href="Url del archivo.mp3">Tu navegador no soporta esta función</a>

Por eso también podemos agregar varios formatos del sonido mientras lo tengas en dicho formato:

<audio controls autoplay preload>

  <source src="Url del archivo.ogg" type="audio/ogg" />

  <source src="Url del archivo.mp3" type="audio/mpeg" />

  <source src="Url del archivo.wav" type="audio/wav" />

  Tu navegador no soporta esta caracteristica

</audio>

VIDEO

Expliquemos los atributos de la etiqueta:

• SRC: enlaza el archivo de video que queremos reproducir.
• WIDTH: define el ancho del video en pixeles.
• HEIGHT: define la altura del video en pixeles.
• CONTROLS: implementa los controles del reproductor por defecto del navegador como, botón play-pause, seek y volumen.
• AUTOPLAY: reproduce el archivo de video desde que se carga la página.
• PRELOAD: Nos carga un poco el archivo de video antes de iniciar la reproducción en el buffer para que no se trabe por reproducir mas de lo que carga.

Para insertar un archivo de vídeo o enlazar con un vídeo en directo, usaremos <video> Ejemplo:

<video src="Url del archivo.mp4" width="640" height="360" controls autoplay preload />

Vista previa:

Implementación de formatos de video:

Al igual que en la etiqueta AUDIO tenemos muchos formatos de video que debemos implementar ya que cada motor de renderizado de los navegadores tiene soporte para un códec de video diferente.

Veamos la tabla de compatibilidad:

Imagen tomada de: www.desarrolloweb.com/articulos/integrar-video-html5.html

Ejemplo para hacer que sirva para todos los navegadores:

<video controls autoplay preload>

  <source src=”Url del archivo.ogv” type='video/ogg; codecs="theora, vorbis"' />

  <source src=”Url del archivo.mov″ type='video/mp4; codecs="avc1.42E01E,  mp4a.40.2"' />

  <source src=”Url del archivo.webm” type='video/webm; codecs="vp8, vorbis"' />

  Tu navegador no soporta esta característica

</video>

Como ven, la diferencia es poca, ahora solo quitamos el atributo SRC y agregamos los SOURCE de los diferentes archivos de video. Algo fácil manejar estas etiquetas luego de que aprendas a manejarlas bien podrás jugar mucho con CSS y hacer tus propios reproductores personalizados !!

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 

• peter.concha@avanet.org
• @PeterConchaR

No olvides seguir en twitter a:

• @Avanet
• @SoreyGarcia

Para estar al día con las entradas en este blog.  Y para finalizar darle un enorme gracias a mi bro Kevin Concha por el apoyo que me da cada día

El día de hoy luego de aprender un poco de HTML5 y CSS3 ahora vamos a aprender a validar nuestras páginas. Pero antes…..

Porque es importante validar nuestras páginas?

La validación se presenta por adoptar un estándar en nuestro caso es dado por W3C (World Wide Web Consortium) que pasa a ser el ente regulatorio. Esto es importante debido que sin pruebas de validación, la implementación consistente de estándares representa un mayor desafío y resulta más difícil para los desarrolladores del sitio confiar en estas.

Gracias a Markup Validation Service del W3C por hacer posible indicar cuando es un documento HTML5 a través de un simple Doctype (revisar primer post), al momento de realizar la validación de una página Web esta comprueba que es un documento HTML5 y verifica si el mismo cumple con dichos estándares.

Para validar tus sitios en base a HTML5 solo debes ingresar a:

Markup Validation Service

Luego de esto solo deben de dar clic en Address para indicar la URL de la página a validar y le damos clic en Check para iniciar con dicho proceso. En un instante tendremos el listado y detalle de errores y alertas, en caso que el validador detectara alguno.

Si bien nos podemos dar cuenta esta herramienta resulta ser de gran utilidad para quienes están comenzado a realizar desarrollos en HTML5 y desean verificar errores en las páginas.

Del mismo modo si deseamos validar CSS3 debemos ingresar a:

CSS Validation Service

En el caso del validador de CSS3 no olvidar entrar en Más opciones y cambiar el perfil de validación.

Luego de realizar las respectivas validaciones una buena practica es enlazar la validación con nuestro sitio empleando un icono del consorcio.

Para esto les comparto el siguiente pedacito de código que tendremos que añadir en nuestros proyecto por lo general se acostumbra ubicarlos al final dentro de la etiqueta footer (revisar primer post):

Ahora vamos a explicar un poco lo que hemos hecho aquí.

En el archivo CSS3.html ahora hemos incluido:

• Líneas 19 - 23
  • En este bloque tenemos la incrustación del logo de CSS3 direccionando al sitio que demuestra que estamos cumpliendo con el estándar.
• Líneas 25 - 27
  • En este bloque tenemos la incrustación del logo de HTML5 direccionando al sitio que demuestra que estamos cumpliendo con el estándar.
• Líneas 19 y 25 <a href=”……”>
  • Dentro de las comillas dobles de la etiquetas colocamos las respectivas URLs que nos muestra nuestro código ya validado.

El código lo pueden encontrar a aquí los archivos son estilos.css y CSS3.html

Eso es todo por hoy muchach@s recuerden que puedes realizar sus consultas en formspring o déjanos tu comentario

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

No olvides seguir en twitter a:

@PeterConchaR

@Avanet

@SoreyGarcia

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

Muy buenas estimados geeks, antes de entrar en detalles con CSS te recomendamos revisar los capítulos anteriores:

HTML5.- Introducción y Estructura en WebMatrix

 HTML5.- Estilo con CSS3 en Webmatrix

Ahora luego de un poco de introducción vamos con la practica el día de hoy veremos con dar un poco de estilo a tus textos más bordes redondeados.

Código

Ahora vamos a explicar un poco lo que hemos hecho aquí.

En el archivo CSS3.html tenemos:

• Línea 6 <link rel="stylesheet" href="estilos.css" /> 
• En esta línea hacemos referencia a nuestra hoja de estilos externa

• Línea 9 - 13
• Vemos como aplicamos dentro de nuestro <body> diferentes etiquetas entre ellas una con ID y otra con una clase más adelante en nuestro archivo estilos.css veremos como a través de etiquetas, ID y clases podemos dar diferentes estilos.
• La etiqueta <span> permite agrupar variod elementos en línea seguidos dentro de un mismo bloque (por ejemplo varias palabras seguidas dentro de un párrafo) para luego darle formato con una hoja de estilos.

RECUERDA los ID no se pueden repetir

En nuestro archivo estilos.css tenemos:

• Línea 1- 5 body{ ..........}
• Aquí podemos ver como aplicamos una regla de estilo a la etiqueta <body> a esto se le llama selector y esta referenciando a una etiqueta.
• Línea 2 background: gray; 
• Aqui aplicamos color al fondo de nuestro sitio en este ejemplo será gris.
• Línea 3 font-family: Helvetica, Arial; 
• Aplicamos la respectiva fuente al texto del <body> de nuestro sitio una buena practica es aplicar helvetica ya que en la actulaidad está deberia estar en todos, en caso extremo de no encontrarse aplicamos en respaldo Arial donda nadie absolutamente nadie te puede decir que en la actualidad no posee un computador con dicha fuente, no esta demás aconsejarte que una muy mala practica es llenar de fuentes inecesarias el CSS basta con el estilo deseado y esta dos de respaldo.
• Línea 4 font-size: 16px; 
• Aplicamos el tamaño a la  fuente en pixeles para la relación de nuestra sitie una buena practica es defenir en el <body> de nuestro HTML una medida global que sirvira al momento de diseñar logremos trabajar con un tamaño relativo haciendo que el diseño de nuestro sitio dependa del tamaño de nuestra fuente global más abajo veran la aplicación de este concepto.
• Línea 7 text-align: center;
•  Alineamos el texto dentro del H1 al centro
• Línea 8 text-shadow: 5px 5px 10px rgba(0, 0, 0, 0.5);
• Aplicamos sombra al texto H1.
• Los valores de esta propiedad son: movimiento_en_X, movimiento_en_Y, difuminasión, color. 
• El valor color se ve definido por rgbaque es la cantidad de color en rojo, verde y azul esta combinación de tres valores se puede obtener con programas de diseño como photoshop o paint.
• El último valor de color es para:
•  1 = si queremos un 100% de sombra completamente opaca.
•  0 = si la sombra será completamente trasparente.
•  0.5 = si la sombra será de un 50%.
• Línea 10 - 18 #parrafo1{....}
• Ahora aplicamos una regla de estilo al ID este es un selector referenciando a un ID.
• Línea 12 border-radius: 0.5em;
• Aquí definimos el borde ne nuestro bloque.
• El valor está definido por em que es una medida de fuente global logramos con esto agarramos a la variable global más cercana en este caso 16px y se convierte en em si le pongo 1em será los 16px, 2em serán 32px, si son 0.5em son 8px.
• Línea 13 color: black;
• Aquí aplicamos color a nuestro párrafo.
• Línea 14 display: block; 
• Los parrafos van a estar dentro de una forma tipo bloque.
• Línea 15 margin: 1em auto; 
• El margen que existe entre un elemento y los que tenga al lado.
• Los valores para esta propiedad son:
• 1m = margen arriba y abajo.
• auto = margen a los lados en este caso lo dejamos en automático.
• Línea 16 padding: 1em; 
• Es el espacio que existe en un contenedor entre el contenido y los bordes del contenedor.

• Línea 17 width: 70%; 
• Ancho de nuestro bloque.
• Línea 19 - 22 .blue{....}
• Un selector que hace referencia a la clase
• Línea 21 font-weight: bold; 
• Definimos el grosor de la letra los valores pueden ser:
• bold: negrita
• normal 
• border: bordeado
• lighter: claro
• inherit: sirve para heredar su valor de su etiqueta padre.

Presentación

El código lo pueden encontrar aquí.

Puedes realizar tus consultas en formspring  o dejanos tu comentario 

No olvides seguir en twitter a:

@PeterConchaR

@Avanet

@SoreyGarcia

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

Si quieres aprender un poco más sobre CSS te recomendamos seguir la capsula:

 CSS para principiantes

Hola hola mis geeks, hoy les traigo una probadita de CSS3. Si hablamos de HTML5 muy importante es ver CSS3 como lo mencionamos anteriormente la formula perfecta para HTML5 es:

HTML5=HTML+CSS3+JavaScript

Qué es CSS3?

El sus siglas en español significan hojas de estilo en cascada del inglés Cascading Style Sheets. CSS es un lenguaje usado para definir la presentación de un documento estructurado escrito en HTML o XML (y por extensión en XHTML). 

Para que sirve?

La idea que se encuentra detrás del desarrollo de CSS es separar la estructura de un documento de su presentación.

Porque usarlo?

Con el poder de CSS3 podemos realizar cosas como bordes redondeados de manera sencilla evitando todo el riguroso proceso de maquetación con div, png, tablas,ect. Ahora ya no más!, CSS3 trae para nosotros la opciones que hacen el diseño fácil para nosotros :)

Recomendación:

La mejor forma de practicar CSS3 es practicar dibujo con el.

Con esto comprenderas el poder de esta herramienta pero siempre orientarlo con un propósito de su uso a nivel profesional.

Una hoja de estilos consiste en una serie de reglas esta compuesta de tres partes que son selectores, propiedades y atributos.

Selectores:

Cada regla es uno o más selectores, esto quiere decir que cada selector marcara que elementos son afectados por cada bloque de estilos que se siga, afectando uno o varios elementos a la vez, en función de su tipo, nombre (name, ID, clase (class), o document object model.

La definición de un selector es la siguiente:

Selector{

propiedad: valor;

} 

Propiedades:

Son los elementos con los que vamos asignarle un valor para comenzar a interactuar logrando así nuestro estilo deseado.

Atributos:

Forman parte de las propiedades y colaboran con la definición de las mismas.

Recomendaciones al trabajar con CSS3

Ordenar tu CSS para un diseño legible y colaborativo.

• Este consiste en organizar todos sus atributos y propiedades en orden alfabético.
• Los selectores que usaremos para nuestros estilos se deben comenzar desde las etiquetas más altas, luego los ID y por ultimo las clases todas estas respetando la organización por orden alfabético distinguiendo de mayúsculas y minúsculas.

Formas de Usar CSS3

Para dar formato a un documento HTML, puede emplearse CSS de tres formas distintas:

1. Mediante CSS introducido por el autor del HTML
   1. Un estilo en línea (inline) es un método para insertar el lenguaje de estilo de página directamente dentro de una etiqueta HTML. Esta manera de proceder no es totalmente adecuada. El incrustar la descripción del formateo dentro del documento de la página Web, a nivel de código, se convierte en una manera larga, tediosa y poco elegante de resolver el problema de la programación de la página. 
      Pero cuando usarlo ??? , dado que los clientes de correo electrónico no soportan las hojas de estilos externas, y que no existen estándares que los fabricantes de clientes de correo respeten para utilizar CSS en este contexto, la solución más recomendable para maquetar correos electrónicos, es utilizar CSS dentro de los propios elementos (inline).
   2. Una hoja de estilo interna, que es una hoja de estilo que está incrustada dentro de un documento HTML, dentro del elemento <head>, marcada por la etiqueta <style>. De esta manera se obtiene el beneficio de separar la información del estilo del código HTML propiamente dicho. Se puede optar por copiar la hoja de estilo incrustada de una página a otra (esta posibilidad es difícil de ejecutar si se desea para guardar las copias sincronizadas). En general, la única vez que se usa una hoja de estilo interna, es cuando se quiere proporcionar alguna característica a una página Web en un simple fichero, por ejemplo, si se está enviando algo a la página Web.
   3. Una hoja de estilo externa, es una hoja de estilo que está almacenada en un archivo diferente al archivo donde se almacena el código HTML de la página Web. Esta es la manera de programar más potente, porque separa completamente las reglas de formateo para la página HTML de la estructura básica de la página.
2. Estilos CSS introducidos por el usuario que ve el documento, mediante un archivo CSS especificado mediante las configuraciones del navegador, y que sobreescribe los estilos definidos por el autor en una, o varias páginas web.
3. Los estilos marcados "por defecto" por los user agent, para diferentes elementos de un documento HTML, como por ejemplo, los enlaces.

Con esa breve introducción terminamos por ahora.

Puedes realizar tus consultas en formspring  o dejanos tu comentario 

No olvides seguir en twitter a:

@PeterConchaR

@Avanet

@SoreyGarcia

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

Si quieres aprender un poco más sobre CSS te recomendamos seguir la capsula:

 CSS para principiantes

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

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

            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.

            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

Código

Presentación 

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 

No olvides seguir en twitter a:

• @PeterConchaR
• @Avanet
• @SoreyGarcia

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