En esta entrada, os dejar\u00e9 una serie de ideas y herramientas de desarrollo que marcan las \u00faltimas tendencias en el despliegue del FrontEnd, es decir, \u00a0esa 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.<\/p>\n
<\/p>\n
Actualmente se habla mucho del dise\u00f1o responsive<\/strong> y l\u00edquido<\/strong> o el\u00e1stico<\/strong>, como la facilidad de adaptar webs a diferentes tipos de pantallas y resoluciones de forma autom\u00e1tica.<\/p>\n Otra tendencia o filosof\u00eda es Mobile First<\/strong>, dise\u00f1ar primero HTML para tel\u00e9fono, despu\u00e9s para Tablet y para finalizar modo escritorio o desktop.<\/p>\n Los \u00faltimos desarrolladores FrontEnd est\u00e1n hablando del dise\u00f1o OOCSS (http:\/\/oocss.org\/<\/a>)<\/strong> o dise\u00f1o orientado a objetos empleando las hojas de estilo en cascada. Otro de los frameworks con bastante popularidad es BootStrap<\/strong> (http:\/\/getbootstrap.com\/<\/a>), intentar\u00e9 hablar de \u00e9l en otra entrada, es necesario conocer\u00a0que es empleado por twitter y tiene bastantes seguidores.<\/p>\n Uno de los prop\u00f3sitos principales en el dise\u00f1o FrontEnd<\/strong> actual es acelerar el trabajo lo m\u00e1ximo posible con la mayor calidad buscando\u00a0 el mayor soporte de dispositivos. Todo ello busca como meta la rentabilidad de los proyectos debido al abaratamiento de costes.<\/p>\n Para ello el uso de frameworks<\/strong> HTML como boilerplate5 <\/strong>(http:\/\/html5boilerplate.com\/<\/a>), t\u00e9cnicas de reseteo<\/strong> de CSS como normalize.css (http:\/\/necolas.github.io\/normalize.css\/<\/a>) permiten acelerar y evitar tener que desplegar desde 0 \u00f3 from scratch<\/strong> para cada navegador.<\/p>\n El empleo de Dreamweaver entre los dise\u00f1adores profesionales es muy cuestionado debido a que se suele decir que este IDE HTML a\u00f1ade demasiado c\u00f3digo innecesario o basura a nuestros proyectos. Adem\u00e1s no permite controlar todos los aspectos.<\/p>\n Es por ello, que recientemente he podido probar otras herramientas que en el mundo profesional FrontEnd se encuentran muy difundidas.<\/p>\n Destaco Sublime Text como editor multiplafaforma HTML<\/strong>. Existen dos versiones, la 2 y 3.<\/strong> Gracias a este editor el soporte de extensiones como Emmet<\/strong>, Stylus<\/strong>, permiten acelerar los desarrollos. Stylus<\/strong> lo explicar\u00e9 a continuaci\u00f3n puesto que es una extensi\u00f3n de node.js.<\/strong><\/p>\n Otra de las t\u00e9cnicas o tendencias en el desarrollo actual es el empleo de\u00a0 Stylus y Nib<\/strong> para la compilaci\u00f3n de CSS<\/strong> y simplificaci\u00f3n de su desarrollo. Stylus requiere Node.js instalado en la m\u00e1quina<\/strong>. Es una alternativa m\u00e1s eficaz seg\u00fan expertos a los preprocesadores Sass y Less<\/strong>. El primer preprocesador fue LESS, pero es algo flojo para el desarrollo CSS. Sass es m\u00e1s potente pero a mi juicio posee una mayor complejidad. Stylus es m\u00e1s intuitivo y simplifica cosas como el empleo de notaci\u00f3n.<\/p>\n Como ejemplos, desplegar\u00e9 Node.js (necesario para stylus), Sublime text 3 con soporte de plugins Emmet y NIB sobre mi sistema Windows 8.1.<\/strong><\/span><\/p>\n Veamos como compilar plantillas CSS al vuelo<\/strong>, simplificando su codificaci\u00f3n y a la larga ahorrando tiempo.<\/p>\n Lo primero que necesitamos es descarga el editor Sublime text, la versi\u00f3n 3.<\/p>\n http:\/\/www.sublimetext.com\/3<\/a><\/p>\n Una vez instalado, podemos instalar plugins:<\/p>\n Para ello es necesario instalar pakage control para sublime 2 o 3 desde:<\/p>\n https:\/\/sublime.wbond.net\/installation<\/a><\/p>\n <\/p>\n Abrimos Sublime y nos vamos al men\u00fa ver, consola. Pegamos el c\u00f3digo de la web de instalaci\u00f3n sobre\u00a0 la consola, y se instala el gestor de\u00a0 plugins:<\/p>\n Una vez realizado esto vamos a Preferencias, Package control,<\/strong> tecleamos install package<\/strong> y una vez descargado, tecleamos emmet<\/strong>.<\/p>\n Ahora cerramos sublime y lo volvemos a abrir, ya se encuentra instalado.<\/p>\n Para comprobar si est\u00e1 instalado, podemos teclear HTML:5<\/strong> y pulsar tabulador, autom\u00e1ticamente el entono me coloca el c\u00f3digo.<\/p>\n Existen otros trucos, si tecleo .micapa autom\u00e1ticamente me teclea: Pero veamos mas.<\/p>\n Despu\u00e9s instalaremos node.js de la direcci\u00f3n:<\/p>\n http:\/\/nodejs.org\/<\/a><\/p>\n Una vez descargado e instalado, dependiendo de la plataforma, instalaremos ahora stylus.<\/p>\n Recuerda sobre Windows, antes de realizar este comando, meter un reinicio a la m\u00e1quina, a mi no me funciono a la primera, me dio errores nmp ERR! 404<\/p>\n Para ello abrimos una ventana como administradores de sistema, cmd<\/strong> y teclearemos:<\/p>\n npm install stylus<\/strong><\/p>\n En otros sistemas como mac o Linux es necesario meter la opci\u00f3n \u2013g<\/strong><\/p>\n Ahora podemos compilar el fichero con sintaxis style que estamos editando desde Sublime<\/p>\n C:\\Program Files\\node_modules\\.bin>stylus -c C:\\HTML-ejemplo\\css\\palentino.styl<\/strong><\/p>\n compiled C:\\HTML-ejemplo\\css\\palentino.css<\/p>\n Es importante fijarse en la ruta para sistemas Windows 8<\/strong>, os aseguro que no existen muchos tutoriales de momento de esto.<\/p>\n Para finalizar, si deseamos que sublime lo detecte en tiempo real necesitaremos ejecutarlo con el par\u00e1metro \u2013w<\/strong>. Es importante no cerrar el cmd de administrador.<\/p>\n El comando \u2013w se queda escuchando todos los cambios detectados. Cualquier acci\u00f3n que realicemos en sublime con el documento palentino.styl, se compilara autom\u00e1ticamente a palentino.css. La verdadera potencia es la velocidad, sencillez que tenemos al editar estilos css en tiempo real compilados.<\/p>\n stylus \u2013c -w C:\\HTML-ejemplo\\css\\palentino.styl<\/strong><\/p>\n <\/p>\n El CSS compilado, quedara compactado en diversas l\u00edneas, y la complejidad del dise\u00f1o en cascada es mucho m\u00e1s f\u00e1cil de entender como stylus<\/strong>.<\/p>\n Por ejemplo podemos anidar y emplear el operador & para las subclases.<\/p>\n Ejemplo: .boton<\/p>\n Meto las propiedades, sin comas, sin finalizaciones en punto y coma<\/p>\n Puedo anidar &.red para crear subclases bot\u00f3n.red, se compilar\u00e1 autom\u00e1ticamente. Maravilloso.<\/p>\n Para finalizar podemos instalar stylus con nib para a\u00f1adir funcionalidades diversas como simplificaci\u00f3n de sintaxis para m\u00faltiples navegadores, renderizados, degradados<\/strong>, etc.<\/p>\n Podemos ver m\u00e1s informaci\u00f3n en:<\/p>\n
\nDejo el enlace a repositorio git:\u00a0https:\/\/github.com\/stubbornella\/oocss\/wiki<\/a><\/p>\n
\nhttp:\/\/www.sublimetext.com\/3<\/a><\/p>\n![\"package-control-sublime\"](\"http:\/\/www.palentino.es\/blog\/wp-content\/uploads\/2014\/06\/package-control-sublime.jpg\")
<\/a><\/p>\n![\"sublime\"](\"http:\/\/www.palentino.es\/blog\/wp-content\/uploads\/2014\/06\/sublime.jpg\")
<\/p>\n![\"install-package\"](\"http:\/\/www.palentino.es\/blog\/wp-content\/uploads\/2014\/06\/install-package.jpg\")
<\/a><\/p>\n![\"emmet\"](\"http:\/\/www.palentino.es\/blog\/wp-content\/uploads\/2014\/06\/emmet.jpg\")
<\/a><\/p>\n
\n<div class=”micapa”><\/div>, maravilloso.<\/p>\n![\"instalacion-node\"](\"http:\/\/www.palentino.es\/blog\/wp-content\/uploads\/2014\/06\/instalacion-node.jpg\")
<\/a><\/p>\n![\"node-instalacion-windows\"](\"http:\/\/www.palentino.es\/blog\/wp-content\/uploads\/2014\/06\/node-instalacion-windows.jpg\")
<\/a><\/p>\n![\"stylus-windows8\"](\"http:\/\/www.palentino.es\/blog\/wp-content\/uploads\/2014\/06\/stylus-windows8.jpg\")
<\/a><\/p>\n![\"stylus-windows8-2\"](\"http:\/\/www.palentino.es\/blog\/wp-content\/uploads\/2014\/06\/stylus-windows8-2.jpg\")
<\/a><\/p>\n
![\"ejemplo-styl\"](\"http:\/\/www.palentino.es\/blog\/wp-content\/uploads\/2014\/06\/ejemplo-styl.jpg\")
<\/a><\/p>\n","protected":false},"excerpt":{"rendered":"