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 :)

OFFTOPIC: Nuevas Tecnologías

Hola, aunque en un principio traté de orientar este blog a sólo temas de Visual Studio, poco a poco la cosa va evolucionando y como buen amante de la programación me gusta estar viendo y actualizándome con nuevas tecnologías. Asi que poco a poco (si el tiempo me lo permite) iré posteando sobre nuevos temas que voy tocando en el día a día o sobre temas que me van interesando, así que pronto tendrán temas de MongoDB, HTML5, CSS3, Bootstrap, Angular, Windows Azure, NodeJs, Xamarin y demás tecnologías. Estar atentos y disculpen si a veces pasan semanas y no posteo nada, el trabajo a veces es absorvente, un saludo :)

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 :)