WebMatrix.- Buenas prácticas en CSS con Boilerplate y OrangeBits Compiler


Muy buenas mis geeks, ahora tendremos unos tips y herramientas para hacer del mantenimiento y trabajo de nuestros estilos css sea más profesional  Winking smile (si eres nuevo en esto del CSS te invito a revisar el pensum del curso de HTML5 donde te enseñamos CSS)

Nota del autor: es probable que veas muchos emoticons en este post dado que quería expresar las posibles expresiones que tuviste al pasar por los mismos problemas de novato.

Además en esté post asumimos que ya posees conocimientos de LESS, de no ser así te invito a revisar el siguiente video donde mi compañero Esteban Beltran (@academo) nos enseña a dar nuestros primeros pasos en LESS.

Primero lo que vamos hacer es iniciar WebMatrix y nos dirigimos a crear un nuevo proyecto con una plantilla llamada Boilerplate (sino sabes lo que es Boilerplate y  porque lo usamos como base en nuestros proyectos HTML5 te invito a revisar el siguiente post).

New > Template Gallery > HTML > Boilerplate

image

image

 

imageLuego al finalizar la instalación de nuestra plantilla, dirigimos a extensiones para instalar OrangeBits Comiler , en caso de que aún no la hallas utilizado.

Qué es OrangeBits y para que sirve ???

Es una extensión que nos ayuda a compilar (LESS, Sass, Scss y CoffeeScript), minificar (JavaScript, CSS) y optimizar imágenes. Y a lo que le vamos a sacar provecho está vez para mejorar la carga y desarrollo de nuestros CSS.

image

Es probable que tengas que volver abrir el editor para que los cambios hagan efecto.

Ahora nos dirigimos a nuestro directorio “CSS”, copiamos todo el contenido de “style.css” y borramos el archivo. Lo que vamos hacer con esto es llevar todo ese CSS que nos entregó la plantilla de boilerplate y lo pondremos en una hoja de estilo de LESS para esto nos dirigimos a crear nuestro primer archivo LESS.

Home > New > ALL > CSS (LESS)

image

image

Y procedemos a darle el nombre de style”, luego damos clic en “OK” y nos dirigimos al panel de archivos donde veremos que se ha creado el archivo “style.less” y otro como “style.css”.

image

De aquí en adelante los archivo con los que vamos a trabajar son “.less”  mientras que WebMatrix + OrangeBits Compiler se encargará de devolvernos el “.css” que sería el resultado de toda nuestro desarrollo con LESS.

Ahora vamos a ingresar a nuestro archivo “style.less” y pegar todo el contenido que teníamos en portapapeles y luego agregaremos a nuestro proyecto otros archivos LESS.

image

Color: tendremos todo lo relacionado con el color de nuestro proyecto xD … más las imágenes también irán aquí porque ¿? porque le dan color al sitie Confused smile.

Forms: los estilos que le aplicamos directamente a los formularios.

Fuente: tamaño, estilos, tipografía de nuestra web. 

Header: al igual que la hoja de estilo forms, aquí ira lo relacionado directa y únicamente con el header de nuestro sitio.

Layout: aquí realizaremos la maquetación de nuestra web (contenedores y posiciones).

 

Luego de esto vamos a enlazar todos estos archivos LESS. Ingresamos a nuestro archivo “style.less”  y realizamos un “@import” de cada uno de los archivos LESS que creamos y lo haremos en la sección de “primary style” que es donde debería ir todo nuestro CSS pero como no queremos tener un archivo inmenso todo mezclado donde para encontrar algo habría que hacer búsquedas de palabras clave o scrolear de arriba abajo. Porque hacer todo eso cuando podemos tener un desarrollo modular con LESS Open-mouthed smileimage

Y ahora me dirás ósea eso no es novedad puedo hacer lo mismo sin LESS. Y ahí es donde te digo que te equivocas si tu haces un “@import”  normalmente en tu hoja de estilos sin LESS lo que ocurrirá es que tengas no solo una petición “get” de tu hoja “style.css” sino que ocurrirá que tendrás un “get” por cada “@import” que realices D: haciendo la carga de tu web más lenta y por gusto.

image

Pero con LESS no pasa esto Open-mouthed smile porque??? Hagamos una demostración sencilla.

Nos dirigimos a nuestro archivo “fuentes.less” y ponemos el siguiente CSS

image

Y luego nos dirigimos a nuestro archivo “index.html”  e incluimos la siguiente etiqueta

image

Ahora lo que nos queda por hacer es actualizar nuestros “.css”, por los archivos independientes no te preocupes que el editor se encarga de actualizarlos cada vez que grabes nuestro foco debe estar en nuestra hoja “style.less” ya que tenemos que compilarla de nuevo para que tome los nuevos valores provenientes de cada “@import”  y lo haremos de la sencilla y siguiente manera.

image

Y buala! por arte de magia sin comandos que recordar tendrás un desarrollo ordenado (modularmente) y el resultado final una sola hoja de estilos.

image

Y dijiste bueno donde está el resultado hasta ahora todo chido buen desarrollo ordenado, pero no solo eso podemos hacer con está brillante extensión (OrangeBits Compiler).

 

Tenemos más???

 

Si señores desde nuestro editor sin problemas podemos reducir nuestra hoja de CSS para un peso más pequeño y nuestra página cargue más rápido.

image

Y como resultado nos devolverá una hoja de estilos reducida “style.min.css” que consiste en tener todo el CSS en una sola línea sin espacios para reducir el tamaño del archivo.

image

Y para finalizar este archivo lo será el que subiremos a producción en nuestros proyectos por lo que es el que vamos a linkear desde nuestro “<head>” en nuestro archivo “index.html”.

image

image

image

image

image

Eso es todo mis geeks espero que les halla gustado el post si fue así Open-mouthed smile no olviden RT aquí abajito está el tuit y si tienes alguna duda me puedes responder desde el mismo tuit Winking smile

 

 

Te gusto WebMatrix!!!

que esperas para unir al grupo de Web Developers en facebook Winking smile solo dale un clic al banner.

image

WebMatrix.- Construir Sitios Con Node.js Es Irresistible


¿Amas Node.js? Con características como el autocompletado de código y plantillas integradas basadas en las mejores prácticas, WebMatrix hace que sea más fácil escribir aplicaciones Node.js.

Autocompletado De Código Para Node.js

Muchos editores tienen una característica llamada "autocompletado de código" (o IntelliSense) que sugiere las funciones apropiadas o palabras clave a medida que escribes. El editor WebMatrix sugiere variables, funciones, e incluso módulos npm potencialmente relevantes para el contexto actual.

 

Plantillas Node.js

Cada proyecto se inicia en algún lugar. Nuestras plantillas integradas proporcionan una amplia gama de puntos de partida desde los sitios vacíos, a través de aplicaciones con todas las funciones que utilizan Express, enrutamiento, OAuth y más.

 

Jade y EJS

WebMatrix tiene soporte de primera clase para Jade y EJS, para que puedas elegir tu plantilla favorita de lenguaje de representación.

 

LESS y SASS

Usa el preprocesador de CSS  que más te gusta sea LESS o SASS para hacer tú código de estilo más eficiente. WebMatrix incluye autocompletado de código, validación y formato de documentos CSS.

 

CoffeeScript

Si no te gustan las llaves, WebMatrix tiene un gran editor CoffeeScript, completo con extensiones que proporcionan una compilación automática.

 

Publicando En La Nube

Tu puedes publicar tu sitio web Node.js en Windows Azure o cualquier otro proveedor de hosting que soporta FTP o Web Deploy.

 

Fuente: http://www.microsoft.com/Web/webmatrix/node.aspx

Eso es todo por hoy muchach@s recuerden realizar sus consultas en formspring o déjanos tu comentario Wink

  • peter.concha@avanet.org

  • @PeterConchaR

    Y no olvides descargar:

    Y de unirte a:

    WEBMATRIX USER GROUP
  • WebMatrix.- Diseñado Para Estándares


    WebMatrix proporciona un amplio soporte para aplicaciones Open Source, ASP.NET, PHP, Node.js y otros estándares web.

    Herramientas Para Una Web Moderna

    WebMatrix proporciona potentes funciones que hacen la vida del desarrollador más fácil, incluyendo selectores de color, JavaScript IntelliSense , herramientas para la búsqueda y más.

     

    HTML5

    WebMatrix incluye autocompletado de código, validación y formato para HTML5 para que pueda construir sus páginas web utilizando los últimos estándares.

     

    CSS3

    Con soporte de primera clase para CSS3, WebMatrix te permite escribir páginas web impresionantes. WebMatrix incluye autocompletado de código CSS3, propiedades especificas del proveedor, validación y formato.

     

    LESS y SASS

    Usa el preprocesador de CSS  que más te gusta sea LESS o SASS para hacer tú código de estilo más eficiente. WebMatrix incluye autocompletado de código, validación y formato de documentos CSS.

     

    JavaScript

    WebMatrix ama JavaScript. Por eso nos ofrece autocompletado de código, el formato y validación para JavaScript que son las herramientas que necesitas para construir un gran sitio web.

     

    Autocompletado De Código Para jQuery Mobile

    WebMatrix hace que sea más fácil el soporte para dispositivos móviles. WebMatrix apoya a jQuery Mobile, que es framework touch optimizado para crear aplicaciones móviles e incluye soporte integrado para autocompletado de código y personalización de datos.

     

    Publicar En La Nube

    Muchos sitios web exigen una mayor disponibilidad y escalabilidad bajo demanda. Con WebMatrix, puedes publicar tus sitios web en Windows Azure o cualquier proveedor de hosting que soporte FTP o Web Deploy.

     

    Fuente: http://www.microsoft.com/Web/webmatrix/standards.aspx

     

    Eso es todo por hoy muchach@s recuerden realizar sus consultas en formspring o déjanos tu comentario Wink

  • peter.concha@avanet.org

  • @PeterConchaR

    Y no olvides descargar:

    Y de unirte a:

    WEBMATRIX USER GROUP