Twitter Flickr Pinterest LinkedIn YouTube Google Maps E-mail RSS
formats

Trucos y técnicas de diseño avanzado FrontEnd en HTML

El desarrollo de websites ha cambiado en los últimos años de forma sustancial. Es por ello que proyectos grandes requieren de equipos multidisciplinares de trabajo. Lo que antes hacia un webmaster, ahora es inviable para grandes desarrollos y se requiere de grupos profesionales especializados.

Estos equipos están formados por miembros con diversos perfiles, desde los desarrolladores Front-End, administradores de bases de datos, programadores Back-end, administradores de sistemas, consultores, analistas, etc. Además existen metodologías de trabajo que coordinan el desarrollo y avance del proyecto así como herramientas software para compartir ficheros a modo de repositorio. Ejemplos actuales de gran éxito pueden ser Github,Mercury, etc.

En esta entrada, os dejaré una serie de ideas y herramientas de desarrollo que marcan las últimas tendencias en el despliegue del FrontEnd, es decir,  esa parte que permite crear interfaces de usuario. No necesariamente pueden emplease estos consejos, puesto que existe mucha libertad a la hora de desarrollar, pero son tendencia en desarrollo.

Actualmente se habla mucho del diseño responsive y líquido o elástico, como la facilidad de adaptar webs a diferentes tipos de pantallas y resoluciones de forma automática.

Otra tendencia o filosofía es Mobile First, diseñar primero HTML para teléfono, después para Tablet y para finalizar modo escritorio o desktop.

Los últimos desarrolladores FrontEnd están hablando del diseño OOCSS (http://oocss.org/) o diseño orientado a objetos empleando las hojas de estilo en cascada.
Dejo el enlace a repositorio git: https://github.com/stubbornella/oocss/wiki

Otro de los frameworks con bastante popularidad es BootStrap (http://getbootstrap.com/), intentaré hablar de él en otra entrada, es necesario conocer que es empleado por twitter y tiene bastantes seguidores.

Uno de los propósitos principales en el diseño FrontEnd actual es acelerar el trabajo lo máximo posible con la mayor calidad buscando  el mayor soporte de dispositivos. Todo ello busca como meta la rentabilidad de los proyectos debido al abaratamiento de costes.

Para ello el uso de frameworks HTML como boilerplate5 (http://html5boilerplate.com/), técnicas de reseteo de CSS como normalize.css (http://necolas.github.io/normalize.css/) permiten acelerar y evitar tener que desplegar desde 0 ó from scratch para cada navegador.

El empleo de Dreamweaver entre los diseñadores profesionales es muy cuestionado debido a que se suele decir que este IDE HTML añade demasiado código innecesario o basura a nuestros proyectos. Además no permite controlar todos los aspectos.

Es por ello, que recientemente he podido probar otras herramientas que en el mundo profesional FrontEnd se encuentran muy difundidas.

Destaco Sublime Text como editor multiplafaforma HTML. Existen dos versiones, la 2 y 3.
http://www.sublimetext.com/3

Gracias a este editor el soporte de extensiones como Emmet, Stylus, permiten acelerar los desarrollos. Stylus lo explicaré a continuación puesto que es una extensión de node.js.

Otra de las técnicas o tendencias en el desarrollo actual es el empleo de  Stylus y Nib para la compilación de CSS y simplificación de su desarrollo. Stylus requiere Node.js instalado en la máquina. Es una alternativa más eficaz según expertos a los preprocesadores Sass y Less. El primer preprocesador fue LESS, pero es algo flojo para el desarrollo CSS. Sass es más potente pero a mi juicio posee una mayor complejidad. Stylus es más intuitivo y simplifica cosas como el empleo de notación.

Como ejemplos, desplegaré Node.js (necesario para stylus), Sublime text 3 con soporte de plugins Emmet y NIB sobre mi sistema Windows 8.1.

Veamos como compilar plantillas CSS al vuelo, simplificando su codificación y a la larga ahorrando tiempo.

Lo primero que necesitamos es descarga el editor Sublime text, la versión 3.

http://www.sublimetext.com/3

Una vez instalado, podemos instalar plugins:

Para ello es necesario instalar pakage control para sublime 2 o 3 desde:

https://sublime.wbond.net/installation

package-control-sublime

 

Abrimos Sublime y nos vamos al menú ver, consola.sublime

Pegamos el código de la web de instalación sobre  la consola, y se instala el gestor de  plugins:

Una vez realizado esto vamos a Preferencias, Package control, tecleamos install package y una vez descargado, tecleamos emmet.

install-package

emmet

Ahora cerramos sublime y lo volvemos a abrir, ya se encuentra instalado.

Para comprobar si está instalado, podemos teclear HTML:5 y pulsar tabulador, automáticamente el entono me coloca el código.

Existen otros trucos, si tecleo .micapa automáticamente me teclea:
<div class=»micapa»></div>, maravilloso.

Pero veamos mas.

Después instalaremos node.js de la dirección:

http://nodejs.org/

instalacion-node

Una vez descargado e instalado, dependiendo de la plataforma, instalaremos ahora stylus.

Recuerda sobre Windows, antes de realizar este comando, meter un reinicio a la máquina, a mi no me funciono a la primera, me dio errores nmp ERR! 404

Para ello abrimos una ventana como administradores de sistema, cmd y teclearemos:

npm install stylus

node-instalacion-windows

En otros sistemas como mac o Linux es necesario meter la opción –g

Ahora podemos compilar el fichero con sintaxis style que estamos editando desde Sublime

C:\Program Files\node_modules\.bin>stylus -c C:\HTML-ejemplo\css\palentino.styl

compiled C:\HTML-ejemplo\css\palentino.css

Es importante fijarse en la ruta para sistemas Windows 8, os aseguro que no existen muchos tutoriales de momento de esto.

stylus-windows8

Para finalizar, si deseamos que sublime lo detecte en tiempo real necesitaremos ejecutarlo con el parámetro –w. Es importante no cerrar el cmd de administrador.

El comando –w se queda escuchando todos los cambios detectados. Cualquier acción que realicemos en sublime con el documento palentino.styl, se compilara automáticamente a palentino.css. La verdadera potencia es la velocidad, sencillez que tenemos al editar estilos css en tiempo real compilados.

stylus –c -w C:\HTML-ejemplo\css\palentino.styl

stylus-windows8-2

 

El CSS compilado, quedara compactado en diversas líneas, y la complejidad del diseño en cascada es mucho más fácil de entender como stylus.

Por ejemplo podemos anidar y emplear el operador & para las subclases.

Ejemplo: .boton

Meto las propiedades, sin comas, sin finalizaciones en punto y coma

Puedo anidar &.red para crear subclases botón.red, se compilará automáticamente. Maravilloso.

Para finalizar podemos instalar stylus con nib para añadir funcionalidades diversas como simplificación de sintaxis para múltiples navegadores, renderizados, degradados, etc.

Podemos ver más información en:

http://visionmedia.github.io/nib/

Para instalar nib en Windows:

Npm install nib

Para compilar con nib

c:\Program Files\node_modules\.bin>stylus –u nib –c -w C:\HTML-ejemplo\css\palentino.styl

Recuerda agregar las importaciones dentro del fichero @import , no obstante no he conseguido compilar con nib todavía.

También podrás usar style con Dreamweaver.

Ejemplo fichero styl que generará un CSS:

ejemplo-styl

Etiquetas:,

Deja un comentario

Este sitio usa Akismet para reducir el spam. Aprende cómo se procesan los datos de tus comentarios.

Home Formacion Trucos y técnicas de diseño avanzado FrontEnd en HTML
© www.palentino.es, desde el 2012 - Un Blog para compartir conocimientos ...

Uso de cookies en mi sitio palentino.es

Este sitio web utiliza cookies para que tengamos la mejor experiencia de usuario. Si continúas navegando estás dando tu consentimiento para la aceptación de las mencionadas cookies y la aceptación de la política de cookies

ACEPTAR
Aviso de cookies