HTML5: Introducción

Hola, ya sé, ya sé, como que este post llega muy tarde, pero como dicen, mejor tarde que nunca. Mi idea es ir creando unos cuantos tutoriales para que la gente que aún no ha migrado a HTML5 y aún no tenga claro de que va, empiece a tener una idea. Empezamos!!

HTML5 es el nuevo standard de HTML el cual trae consigo nuevas funcionalidades y también elimina unas cuantas que pasamos a enumerar.

LO NUEVO

- Nuevos elementos, como el <header>, <section>, <article>, <footer>,<nav>, <aside>, <figure> entre otros.
- Nuevos controles de formulario como  number, date, time, calendar, and range.
- Nuevos elementos gráficos: <svg>, <canvas>.
- Nuevos elementos multimedia: <video>, <audio>.
- Nuevas apis: HTML Geolocation, HTML Drag and Drop, HTML Local Storage, HTML     Application Cache, HTML Web Workers y HTML SSE.

LO QUE SE HA QUITADO

Ya no existen los siguientes tags:

• <acronym>
• <applet>
• <basefont>
• <big>
• <center>
• <dir>
• <font>
• <frame>
• <frameset>
• <noframes>
• <strike>
• <tt>

(Así que ir eliminando estos tags de sus aplicaciones si quieren migrar a la nueva versión.)

NAVEGADORES QUE SOPORTA

En principio HTML5 debería ser soportado por todos los navegadores modernos, aunque no tiene soporte para versiones de IExplorer anteriores a la IE9. 

Si un día quieres saber si tu navegador soporta html5 o algunas de sus nuevas características entra a http://html5test.com/

Felizmente existen herramientas para poder usar(simular) las nuevas características en navegadores que no soportan HTML5 como Modernizr. También puedes hacer uso de los Polyfills, los cuales son scripts que nos permiten realizar tareas de HTML5 en navegadores que no lo soportan.

Creo que para ser una introducción vamos bien, la idea es hacer un post por cada nueva característica o funcionalidad que he comentado acá, a ver que tal se no da :D.. hasta la próxima :)

Reordenando, estructurando los estilos, usando SuitCSS

Hola a todos,

Uno  de los temas que más me fastidia de la parte front de las aplicaciones, es la falta de orden y standard para la nomenclatura y acoplamiento que hay en los archivos css de una aplicación. He visto aplicaciones con archivos .css inmensos, otros en los cuales se machacaba un estilo con otro por encontrarse duplicado, o simplemente que se mezclaban.

Reconozco que es un calvario mantener los .css pero felizmente existen los preprocesadores que nos ayudan mucho en esta tarea como SASS, LESS o Stylus y del cual hablaremos más adelante. Hace unas semanas descubrí un standard para la nomenclatura de estilos que me parece muy interesante y esta teniendo acogida por parte de muchos desarrolladores. Se trata de SUITCSS, un proyecto de GitHub que aparte de también de ser un preprocesador, pretende establecer un standard para nombrar a nuestras clases de estilos de dos maneras.

Empecemos explicando el primer caso:

.namespace-ComponentName-descendentName--modifierName.is-stateName {...}

.namespace: SuitCSS pretende que empecemos nombrando nuestras clases con un namespace. Aunque este parámetro es opcional, se recomienda utilizarlo para tener que evitar conflictos con otros archivos css. Esto debe ser escrito en Camel Case.

-ComponentName: Es el nivel más alto de nuestro componentes. Si nos guiamos a la nueva estructura que propone HTML5, acá se podría declarar los elementos header, section, article, footer, etc. Esto debe ser escrito en Pascal Case.

Archivo CSS usando el namespace y ComponentName juntos

.main-Header{...}
.main-Footer{...}

.popup-Header{...}
.popup-Footer{...}

Página HTML

   ...
   ...


   ...
   ...

-descendantName: Es la parte del componente al cual aplicaremos el estilo. Por ejemplo podría ser un <figure> que esta dentro de un <header>. Esto debe ser escrito en Camel Case.

Archivo CSS 

.main-Header{...}
.main-Header-figure {....}

Página HTML

   
   

      ...
      ...
   

--modifierName: Esta clase nos permite modificar el elemento base de una cierta forma, un ejemplo sería un estilo determinado a un botón por defecto, o los campos de texto que son obligatorios de llenar. Esto debe ser escrito en Camel Case.
Archivo CSS 

.main-Header{...}
.main-Header-figure {....}
.main-Header-button {....}
.main-Header-button--default {....}

Página HTML

   
   

      ...
      ...
   
   
   

.is-stateName: Esta clase nos permite indicar un estado que puede tener un determinado elemento, como habilitado, deshabilitado, seleccionado, etc. Esta clase se escribe con un punto al inicio, lo cual indica que es una clase aparte y que puede ser reutilizada por diferentes elementos, pero es recomendable tenerlo dentro del mismo ámbito del componente por temas de orden y para facilitar luego el uso de preprocesadores. Esta clase se debe escribir en Camel Case también.

Archivo CSS 

.main-Header{...}
.main-Header-figure {....}
.main-Header-button {....}
.main-Header-button--default {....}
.main-Header-button--default.disabled {....}
.main-Header-button--default.enabled {....}

Página HTML

   
   

      ...
      ...
   
   
   

Por último hablaremos del segundo caso:

.u-utilityName {...}

.u-utilityName: Esta clase está pensada para crear estilos globales. El nombre de la clase debe empezar con u seguido de un guión, lo cual nos permite indicar que será un utilitario capaz de aplicar estilos a muchos elementos. Nos puede ser util para establecer estilos para cosas comunes en toda la aplicación, como los tag de title, h1, h2 o para indicar un tipo de posicionamiento o alineación. La idea es que sea una clase que contengan estilos comunes en la aplicación. Debe ser escrito tambien en Camel Case.

.main-Header{...}
.main-Header-figure {....}
.main-Header-button {....}
.main-Header-button--default {....}
.main-Header-button--default.disabled {....}
.main-Header-button--default.enabled {....}
.u-title {...}
.u-buttons {...}

Página HTML

   
   
   

      ...
      ...
   
   
   

Como podemos ver SuitCSS viene a poner orden en la manera en como declarar las clases de estilos en nuestras páginas html. Hace uso del selector por clases y es una manera ordenada y clara de ver los documentos. Sería genial que los desarrolladores empiecen a usar este tipo de standar de nomenclatura para que el mantenimiento de estilos esté más controlado. Espero les sirva, hasta la próxima :)

Generando datos de prueba, usando NBuilder

Muchas veces tenemos la necesidad de generar datos de pruebas por distintas razones. Ya sea para generar prototipos, test unitarios o pruebas de concepto.Imaginemos que tenemos la siguiente clase y queremos crear un listado de 50 nuevos objetos Customer:

 
    public class Customer
    {
        public int Id { get; set; }
        public string Name { get; set; }
        public int Age { get; set; }
    }

Y queremos mostrar un grid con un listado de 50 personas. Reconozco que hace tiempo hacia lo siguiente:
Otros hacen uso de un XML lo cual aún es mas coñazo, o quien sabe que otras técnicas usarán por ahi. No digo que esto no esté mal, pero para que reinventar la rueda cuando tenemos herramientas que ya hacen esto. Para esto tenemos NBuilder Para instalarlo, puedes ir a su página y descargartelo. Yo prefiero instalarlo via Nuget, para lo cual vamos a la Consola de Paquetes de Nuget e escribimos lo siguiente:

 Install-Package nbuilder

Después de tenerlo instalado es tan simple generar la lista de 50 objetos Customer:

Vamos a mostrar el resultado en una vista de MVC de la siguiente manera:

Y generamos la vista con un listado de customers. El resultado es el siguiente:

Espero les ayude, hasta la próxima :)

Usando Sublime Text y instalando el package control.

Hace un tiempo descubrí un editor de texto que me encantaba por la cantidad de plantillas y la forma en que te ayuda a crear diferentes tipos de documentos, sobre todo html y css3 de una manera fácil y rápida. Estamos hablando de Sublime Text, una herramienta open source que tiene una versión de pago pero que también puedes trabajar sin problemas con la versión free.

Entre algunas cosas que me gusta hacer con esto es crear html ya que te permite hacerlo de una manera fácil. Para esto lo que hacemos es abrir un nuevo documento en Sublime, lo guardamos como demo.html por ejemplo y empezamos a crear nuestro html.

Como Sublime sabe que estamos editando un documento html utiliza el marcado respectivo para este tipo de documento, por lo que si escribimos solo html y pulsamos la tecla tab, se genera automaticamente el cuerpo básico de un documento html.

Lo mismo por ejemplo si queremos crear un div con una clase especifica por ejemplo con la clase "header". Lo único que tenemos que hacer es posicionar el cursor dentro del editor de texto en la parte que queremos crear ese div y escribir lo siguiente:

div.header + tecla tab 

El resultado será el siguiente:

Como ven, con algunas reglas podemos ir creando un documento html rápidamente. Pero Sublime tiene muchas cosas más, pero para ello necesitamos instalar un paquete de controles, por defecto al instalarlo por primera vez no lo tiene, pero para que tú puedes verificarlo haces lo siguiente:

- Dentro de Sublime pulsas CTRL + SHIFT + P y te aparece una ventana flotante, dentro de ella escribes Package Control y si es que no devuelve ningún resultado, es porque aún no lo tienes instalado.

Para instalarlo vamos al siguiente enlace:

https://sublime.wbond.net/installation

Copiamos el texto que sale dentro del cuadrado rojo de la imagen:

Vamos a Sublime, al Menú View/Show Console y lo pegamos ahí:

Luego de eso vuelves a dar a las teclas CTRL+SHIFT+P y escribes PackageControl y deben aparecer esta vez resultados:

De la lista de resultados, seleccionamos la que dice Package Control: Install Package. Una vez instalado aparece un listado de los plugins disponibles del Package Control para utilizar en nuestro editor de texto. Como ejemplo utilizaremos el plugin "EMMET" y le damos a enter. Debe salir la siguiente imagen:

Como se ve en la imagen, nos pide reiniciar el editor. Una vez reiniciado volvemos al documento y podemos empezar a jugar con este plugin. En el documento html que estábamos creando ponemos lo siguiente.

div.padre>div.hijos*2

Y pulsamos la tecla tab y el resultado debe ser el siguiente:

Como ven se ha generado un div con la clase padre y dos divs hijos con la clase hijos de una manera super fácil. Si quieren profundizar en esto, busquen en google Zen Coding con sublime y sáquenle partido a todas las funcionalidades y ayudas que nos ofrece Sublime Text.

Un abrazo

Notificaciones no bloqueantes y bonitas: Usando ToastR

Muchas veces queremos que nuestra aplicación web muestre alertas, notificaciones, avisos y errores de una manera personalizada. El problema de las típicas notificaciones que nos ofrece js son feas y bloqueantes. Felizmente hay una libreria js que nos permite hacer estas notificaciones agradables a la vista del usuario de una manera fácil. Esta librería se llama ToastR y la puedes descargar desde Github. Desde aquí nos bajamos el js y el css y lo integramos a nuestro proyecto. En esa página puedes ver también toda la documentación pero en este post te lo resumo un poco :).

- Una vez añadidos los archivos .js y .css de Toasr (ojo, este librería hace uso de jquery, asi que tambien es necesario que esta librería este en nuestro proyecto) a tu proyecto creamos una nueva página html y referenciamos a la hoja de estilos, a jquery y a toastr.js:

-Lo siguiente es crear unos cuantos botones dentro del body de nuestra página para ver los diferentes tipos de notificación que nos ofrece toastr.

 

Usando ToastR

-Y por ultimo escribir el siguiente script en la parte final de la página (aunque puedes escribirla donde quieras, pero por temas de optimización post que espero escribir más adelante se recomienda poner los scripts al final del todo.

Resumiendo,

• Descargamos el js y css de ToastR y lo añadimos al proyecto. 
• Luego creamos una nueva página y lo referenciamos al proyecto. 
• Creamos cuatro botones, cada con una función onclick() diferente.
• Y por ultimo creamos el script necesario para ejecutar la aplicación. En el documento.ready() de la página ponemos el siguiente código:

 
 toastr.options.closeButton = true;

Esto nos indica que las notificación podrán mostrar el boton de Cierre. En caso no lo quieras mostrar, le pones false y ya está :).

Y bueno el resultado es el siguiente:

Notificación Info

Notificación Warning

Notificación Succcess

Notificación Error

Como vean Toasr nos permite mostrar notificaciónes bonitas de una manera fácil. Además tambien ofrece otras propiedas para mostrar tu notificación de diferentes maneras, posiciones y animaciónes. Todo esto lo puedes ver en la documentación. Aquí te dejo un ejemplo

http://codeseven.github.io/toastr/demo.html

Que lo disfrutes, hasta la próxima.