Cristalab

---

• Carga progresiva de imágenes con lazyload.js y jQuery
• #23: HTML5
• Animar nubes estáticas en After Effects
• Qué significa backend y frontend en el diseño web
• Introducción a GitHub en Linux Ubuntu
• Banderola con efecto de costura para uso Web en Photoshop

Carga progresiva de imágenes con lazyload.js y jQuery Posted: 16 Jul 2012 04:22 AM PDT Aprende cómodamente como mejorar la velocidad y la experiencia del usuario en tus diseños web. Este ejemplo implementa la carga de imágenes sólo cuando, mediante el scroll, aparecen en la parte visible del navegador. Solo necesitarás usar jQuery y el plugin lazyload.js. [nota:40b07582ef]Recuerda borrar los datos de navegación (cache) para poder visualizar el efecto correctamente.[/nota:40b07582ef] Ejemplo de página con imágenes (sin) carga bajo demanda. Ejemplo de página con imágenes (con) carga bajo demanda. Para descargar los archivos del tutorial

#23: HTML5 Posted: 15 Jul 2012 10:06 PM PDT Este es el mejor momento para contarte que tenemos un curso de HTML y CSS, una introducción a HTML5 y un curso de CSS3... Y un curso de HTML5 en Colombia y otro en Guatemala y muchos muchos otros cursos y... Nos gusta esto del HTML5. El comic #23 de la serie Cristalab vs. The Web: "HTML5". Si esta es tu primera vez viendo el comic, mira el comic #22: Instálate una profesión y otros anteriores. border-radius: help;

Animar nubes estáticas en After Effects Posted: 15 Jun 2012 07:43 AM PDT En este episodio de After Effects obtendremos una animación realista de nubes, usando únicamente una fotografía estática, apoyándonos en las herramientas de deformación y la creación de máscaras, para aislar la zona sobre la que serán aplicadas y obtener secuencias de alta resolución, que nos servirán como fondos para nuestras composiciones. Importaremos el material en el proyecto, formado por una fotografía de un paisaje y lo duplicaremos, creando varias zonas con las máscaras y aplicaremos el efecto deformación para generar la animación. Saludos.

Qué significa backend y frontend en el diseño web Posted: 14 Jun 2012 04:15 AM PDT Backend, frontend, diseño, UX, usabilidad, posicionamiento, estrategia, arquitectura y muchos otros terminos componen el diseño y desarrollo web moderno. Lejos está la época donde un "webmaster" hacía todo el trabajo. Ahora es imposible crear un producto completo sin por lo menos un diseñador, un front y un back. A menos que seas un genio cuyos padres fueron asesinados, juraste venganza, estudiaste cinco años en un templo samurai de la W3C, destruiste el templo y volviste para cambiar el mundo. Con aplicaciones web. Backend: Lado del servidor (PHP, Ruby on Rails, Django, Node.js, .NET) Un programador tiende a ser backend. Es la labor de ingeniería que compone el acceso a bases de datos y generación de plantillas del lado del servidor. En backend se encargan de implementar cosas como MySQL, Postgres, SQL Server o MongoDB. Luego, un lenguaje como PHP o JSP, o frameworks como RoR, Django, Node.JS o .NET se conectan a la base de datos. A través de estos lenguajes y frameworks se recibe, procesa y envía información al navegador del usuario. En código HTML (que crea el frontend) o enviando datos puros en XML, RSS o JSON, para ser procesados por Javascript. En Facebook, por ejemplo, PHP manda la estructura básica del sitio web, pero son múltiples programas y servidores hechos en C++ o Erlang que procesan la información en tiempo real (como chat, comentarios, notificaciones) y las envían y reciben a través de Javascript en el navegador. Frontend: Lado del cliente (HTML, CSS, HTML5, CSS3, Javascript, jQuery) Los frontends tienden a ser programadores, pero hay diseñadores genios que también hacen frontend. Son los encargados de maquetar la estructura semántica del contenido (HTML), codificar el diseño en hojas de estilo (CSS) y agregar la interacción con el usuario (Javascript). En la época actual los frontends tienen HTML5 y CSS3. Con HTML5, desde el frontend, es posible hacer geolocalización, dibujo vectorial, guardar datos en el disco del usuario, insertar audio y video, entre otras cosas. Con CSS3, se pueden crear diseños altamente complejos sin la necesidad de imágenes cortadas, sólo usando código. Bordes redondeados, sombras, degradados, fondos múltiples, entre otros. Por último, Javascript y sus frameworks añaden el componente de interactividad y conexión al servidor. Es posible comunicarse con el backend y la base de datos sin recargar la página usando AJAX o WebSockets, recibir esos datos y cambiar el diseño entero del sitio. jQuery hace todo esto fácil pero no es el único framework de Javascript Diseño y usabilidad: Experiencia en la interacción del usuario No todos los diseñadores web son frontends ni deben serlo. Ni todos los diseñadores son realmente buenos para web. Un diseñador web sabe de interfaces, entiende la interacción con el usuario. Imagina las animaciones, las transiciones, los cambios en la aplicación. Sabe donde usar una caja de texto, un botón, un radio button, un checkbox, un desplegable. Aunque no sepa programarlos y sólo los dibuje en Photoshop. Pero además del diseñador hay personas dedicadas a entender el flujo de la interactividad. El camino que los usuarios toman y cómo simplificarla al máximo. Este tipo de personas son expertos en usabilidad y UX (User Experience). Arquitectura de información y SEO: Estrategias de contenido, organización y estructura Los sitios con menu: "Home Quienes Somos Productos Servicios Contactanos" se quedaron atrapados en el siglo XX por falta de un arquitecto de información. La web no sólo son bases de datos, colores bonitos y muchos links. La web tiene información, interacción, contenido ofrecido por los sitios y contenido generado por los usuarios. ¿Cómo se organiza ese contenido? ¿Cómo es presentado? ¿Qué tan profunda es la organización de ese contenido? ¿Es mejor simple y directo? ¿Es mejor un arbol de navegación complejo? ¿O es mejor dejar que el buscador sea la interfaz? Los arquitectos de información y la gente de SEO (Search Engine Optimization) se dedican a definir cómo se organiza todo el contenido, cómo se distribuye y sobre todo, como darle a los usuarios la oportunidad de descubrir lo nuevo y lo más relevante para ellos. Director del proyecto: Cobra el cheque gordo DEAL WITH IT En proyectos aun más complejos, los roles aumentan. Hay personas de control de calidad, gente dedicada a las bases de datos. Otros sólo a servidores. Personas dedicadas al seguimiento financiero del proyecto. Vendedores. Ejecutivos de cuenta. Admins de la comunidad. Editores. Escritores. Pero para la mayoría de proyectos, con este equipo tienes. ¿Falto alguien más?

Introducción a GitHub en Linux Ubuntu Posted: 06 Jun 2012 02:35 AM PDT ¿Qué es control de versiones? El control de versiones es la gestión de los diversos cambios que se realizan sobre algún archivo, en este caso, código. ¿Qué es Git? Git es un sistema de control de versiones diseñado por Linus Torvalds, pensando en la eficiencia y la confiabilidad del mantenimiento de versiones de aplicaciones cuando éstas tienen un gran número de archivos de código fuente. ¿Qué es GitHub? Es un sistema de control de versiones basado en Git, tiene una comunidad muy activa y aloja algunos proyectos muy interesantes como el Bootstrap de Twitter, el HTML5 Boilerplate, jQuery, entre muchos otros. GitHub en Ubuntu Debido a que no tenemos un cliente gráfico como en Windows o en Mac, deberemos proceder desde la consola. Instalación Lo primero que tenemos que hacer es instalar Git y XClip, para eso abrimos la consola y tecleamos: Código : sudo apt-get install git sudo apt-get install xclip Ó para comprobar si lo tenemos instalado anteriormente tecleamos: Código : git --version Y nos deberá salir algo como esto: Código : git version 1.7.9.5 Después configuraremos nuestros datos (usaré los míos): Código : git config --global user.name "carlos" git config --global user.email "me@carlosandresviteri.com" Obtención de la clave SSH GitHub usa una clave ssh para establecer conexión entre nuestro ordenador y el servidor de Git. Podremos generar la clave .ssh con el siguiente comando: Código : ssh-keygen Y la consola nos responderá con lo siguiente, donde podremos configurar el lugar donde se guardará (lo dejaré en la configuración predeterminada): Código : Enter file in which to save the key (/home/carlos/.ssh/id_rsa): Le damos enter, nos pedirá una contraseña -passphrase- la contraseña es opcional, para saltarla le damos doble enter. Código : Enter passphrase (empty for no passphrase): Enter same passphrase again: Para leer la clave ssh tendremos que teclear (ten en cuenta la ruta donde lo guardaste): Código : cat ~/.ssh/id_rsa.pub Y la consola nos responderá algo como esto: Código : ssh-rsa AAAAB3NzaC1yc2EAAAADAQABAAABAQDMpPqnv9XBAnNAU60o+zxoXxrl79LBaqpEgUdBk9zjSslkVqWJpu3VKWU/JC3nToPP7zRv0wDWWFaWdNaeJAT9AWsExrhbLZumKQJE1IONhqO1FBvEOrhT5HLAfN7FII89OM+rAP8ojQonbZqddKZaZ5ik5U7kIz/Z4oG8bKosSw6fqtf5I0Ya7G+egAW9QxjLdFyC6Y2MyftjKZsaugnpr7EHtsM2RoGdZAmUWND3ofE/DltrNh2KF4e3OhuPQUPXtP7uKtRW1orC0QxHfd7jMPOujtE1+dT5mb3itlLD7tnddoyNgzgjN/vKyl7O4igB4hdgD/MUOYqdmjbI73iv carlos@Carlos-PC Copiamos el contenido y lo pegaremos en SSH Keys en GitHub: Finalmente le damos clic en Add Key, nos pedirá la contraseña de nuestra cuenta. Si todo nos salió bien GitHub nos mostrará algo como esto: Creación de un repositorio Para crear un repositorio deberemos dirigirnos a New Repository , completar los datos que nos pide y darle clic a Create Repository: Subida de archivos Para subir archivos desde nuestro ordenador primero tenemos que posicionarnos en la carpeta donde están los archivos que queremos subir, los míos están en una carpeta dentro de la carpeta personal que se llama cristalab-tuto. Código : cd ~/cristalab-tuto Luego tecleamos: Código : git init Nos saldrá algo así: Código : Initialized empty Git repository in /home/carlos/cristalab-tuto/.git/ Para añadir archivos, si queremos por ejemplo añadir todos los archivos de la carpeta, tecleamos: Código : git add . Pero si queremos añadir un archivo específico: Código : git add nombre-del-archivo.extensión TODOS los cambios que hagamos requieren un comentario, para ello tecleamos: Código : git commit -m 'esto es un comentario' Para conectarnos al repositorio tecleamos -nótese mi nombre de usuario y el nombre del repositorio-: Código : git remote add origin git@github.com:niclick/intro-github-en-ubuntu.git Si nos sale este error: Código : fatal: remote origin already exists La solución es teclear, y repetir el paso anterior: Código : git remote rm origin Y lo subimos: Código : git push -u origin master Para el README, es necesario crear un archivo llamado README.md y subirlo de la misma manera que los demás. Y listo a disfrutar de nuestro repositorio. Eliminar un archivo Para eliminar un archivo debemos teclear: Código : git rm nombre-del-archivo.extensión Y para que el cambio se refleje en GitHub, deberemos hacer el mismo proceso que el de subida. Eliminar un Repositorio En la parte superior al lado del nombre de nuestro repositorio dice 'Admin', le damos clic y entraremos en la Administración del Repositorio, en la parte inferior dice Danger Zone™ le damos clic en 'Delete this Repository' ponemos el nombre del repositorio y lo eliminamos. Clonar un Repositorio Para clonar el repositorio podemos hacerlo de dos formas: la forma tradicional de descargar el .zip o la forma fancy mediante la consola. Descargar el .ZIP Forma Fancy Le damos clic en Git Read-Only y copiamos el contenido: Luego vamos a la consola y tecleamos git clone más lo que copiamos anteriormente: Código : git clone git://github.com/niclick/intro-github-en-ubuntu.git Y tendremos listo nuestro repositorio clonado de forma local.

Banderola con efecto de costura para uso Web en Photoshop Posted: 05 Jun 2012 06:07 AM PDT Repasaremos en Photoshop la creación de un elemento, la banderola, que ya habíamos utilizado anteriormente de forma simple en el diseño de páginas completas, por lo que renovaremos su estilo con un aspecto más estilizado, gracias a un efecto de textura e iluminación y una decoración de costura, realizada de forma simple gracias a la herramienta de texto. Crearemos la base con rectángulos y la herramienta pluma, añadiéndole estilos de capa para ajustarla, junto con texto, la textura y las formas personalizadas, que completarán el trabajo e identificarán su uso en el sitio Web. Saludos.

You are subscribed to email updates from Cristalab To stop receiving these emails, you may unsubscribe now.	Email delivery powered by Google
Google Inc., 20 West Kinzie, Chicago IL USA 60610