HTML5.- Desarrollo y Buenas Prácticas con JavaScript [Evento]


Untitled

Hi mis geeks Open-mouthed smile

Esta vez les escribo para compartirles el feedback de lo que fue la pasada charla (03/09/2013) que brinde para la PUCE (Pontificia Universidad Católica del Ecuador) donde hablamos sobre una breve introducción de lo que es JavaScript para que los chicos se motiven a desarrollar con ello y darles una guía de cuales son los primeros pasos que deben seguir.

A continuación les comparto la presentación y el video de la charla. Y también si desean apoyar a comunidades estudiantiles los invito a brindar su follow al Microsoft Student Tech Club (STC)  de la PUCE.

Facebook https://www.facebook.com/PuceCelula.net

Twitter: https://twitter.com/NetPUCE

 

No olvides de RT y de seguirme aquí abajito en twitter Smile , si tienes alguna duda puedes responder el tweet Winking smile

 

Sin más me despido,

@PeterConchaR
Microsoft Student Partner Lead LATAM

Web Developer HTML5, CSS3 and JavaScript

Community Lead Avanet

https://ptrconcha.wordpress.com/

Anuncios

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