HTML 5

HTML5.- Introducción a JavaScript en WebMatrix 

Posted by Pit Wednesday, May 15, 2013 11:09:00 PM Categories: JavaScript

 

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 practicarlo Smile

 

 

Qué hace JavaScript en HTML5?

Bueno JavaScript o también 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 basado 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 desencadenamos 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 mayúsculas y minúsculas (Case Sensitive).
  • Se puede comentar de dos maneras:

image

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

image

  • 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.

image

 

Ejemplo del día

Ahora daremos paso al ejemplo del día para ir practicando Smile

Vista desde el editor

 

image

Lo que hemos hecho es abrir 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 búsqueda 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 botón que este seria nuestro evento.

Vista desde el Navegador

image

 

Luego de hacer Clic

image

 

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 fácilmente el tweet de aquí abajito, si te gusto no olvides RT y para no perderte los siguientes post sígueme. Wink

No olvides seguir en twitter a:

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


WordPress Tags: HTML5,Javascript,WebMatrix

View User Profile for Peter J. Concha Regatto Full Stack Developer & Speaker Eloquent. @Avanet Community Lead & #IEuserAgent. Microsoft MVP ASP.NET/IIS

HTML5.- Construyendo Formularios en WebMatrix Parte 3 

Posted by Pit Tuesday, November 20, 2012 2:06:00 AM Categories: HTML5

Continuando con los post sobre todo lo que nos trae HTML5 para la construcción de formularios hay algo muy importante que aclarar y para ir elaborando un resumen de lo aprendido; que el aplicar los respectivos type para el control a emplear nos otorgara:

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

html5

 

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.

html5

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.

html5

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 Guiño

 

<input type="search">

html5

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.

html5


 

<input type="number">

html5

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.

html5

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.

html5

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.

html5


 

<input type="color">


html5

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.

html5

 

<input type="tel">

html5

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">

html5

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">

html5

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">

html5

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">

html5

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.

html5

 

Atributo maxlength

html5
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 Wink

No olvides seguir en twitter a:

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

View User Profile for Peter J. Concha Regatto Full Stack Developer & Speaker Eloquent. @Avanet Community Lead & #IEuserAgent. Microsoft MVP ASP.NET/IIS

HTML5.- Construyendo Formularios en WebMatrix Parte 2 

Posted by Pit Sunday, September 23, 2012 7:08:00 PM Categories: HTML5

 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

Antes con JavaScript

 

Ahora con el poder de HTML5

 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.

Required

 

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.

 

Autofocus

 

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.

Pattern

 

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.

View User Profile for Peter J. Concha Regatto Full Stack Developer & Speaker Eloquent. @Avanet Community Lead & #IEuserAgent. Microsoft MVP ASP.NET/IIS

HTML5.- Construyendo Formularios en WebMatrix Parte 1 

Posted by Pit Tuesday, August 14, 2012 6:57:00 AM

 

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

 

1Contruyendo formularios Part1

 

LE DAMOS UN POCO DE ESTILO

 

2Contruyendo formularios Part1

 

DESARROLLAMOS LA LOGICA DEL EJERCICIO

 

3Contruyendo formularios Part1

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.

 

4Contruyendo formularios Part1

 

5Contruyendo formularios Part1

 

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 Wink

No olvides seguir en twitter a:

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

View User Profile for Peter J. Concha Regatto Full Stack Developer & Speaker Eloquent. @Avanet Community Lead & #IEuserAgent. Microsoft MVP ASP.NET/IIS

HTML5.- Etiquetas Audio y Video en WebMatrix 

Posted by Pit Monday, June 11, 2012 7:50:00 AM

Hi geeks,

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 Confundido. 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:

 

reproductor

 

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:

 

 nosoporta

 

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:

 

video

 
 
 
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 Wink

No olvides seguir en twitter a:

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 Sonrisa

View User Profile for Peter J. Concha Regatto Full Stack Developer & Speaker Eloquent. @Avanet Community Lead & #IEuserAgent. Microsoft MVP ASP.NET/IIS
Page 1 of 2 1 2 > >>