Archive

Archive for the ‘HTML5’ Category

BackBoneJS desde 0 – Conceptos Básicos

BackBoneJS es un framework de JavaScript que nos permite construir aplicaciones usando el modelo MVC.

La página oficial de BackboneJS: http://backbonejs.org/

Lo primero hay tener en cuenta es que depende de 2 librerias Jquery y UnderScore-Min y se debe tener en cuenta cada una de sus respectivas versiones, siempre es ideal utilizar el paquete que brinda la página principal.

Los componentes básicos de BackBoneJS son Eventos, Modelos, Vista y el Route usado para administrar las URL de la aplicación.

Eventos: Los eventos son acontecimientos internos que ocurren en la aplicación y permiten “avisarle” a todas las partes de la aplicación que ha ocurrido algo, por ejemplo se cambio la selección de un elemento se agrego o se quito un elemento de la colección o también se pueden crear de manera personalizada.

Modelos: Los Modelos como en cualquier arquitectura MVC se encargan de controlar los datos de la vista que esta viendo el usuario en ese momento, manejan lógica de negocio a nivel de manipulación de datos y también se usan generalmente para capturar los eventos que se generan y para producirlos.

Vistas: Son las que manejan el diseño de la interfaz HTML y se enlazan a los modelos para mostrar sus datos, las vistas permiten realizar una abstracción de los datos para que puedan ser manipulados por el usuario y también crear plantillas para ser reutilizadas en diferentes paginas.

Route o controlador de rutas: es la herramienta que nos permite controlar las URLs de nuestra aplicación como los avances o los retrocesos desde el navegador, también es muy útil para controlar rutas con estados dentro de la aplicación de tal manera que se puedan compartir y las otras personas al abrirlo puedan entrar a la aplicación y ver el mismo estado. En pocas palabras nos permite controlar lo que se conoce como deep links.

Esta subiendo los ejemplos del uso de cada uno de los elementos que componen este framework.

Como generar una modal o mensaje en windows 8 HTML5

Cuando estamos programando en HTML5 para windows 8 y deseamos sacar una modal lo mas lógico en lo que pensamos en hacer esto:

alert(‘Hello world’);

Lastimosamente esto no funciona pues no está soportado dentro del diseño de Windows 8, lo que debemos hacer es llamar una popup de manera asíncrona con un método propio de Windows  8:

var popudialog = Windows.UI.Popups.MessageDialog(‘Hello world’);
popudialog.showAsync();

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.