Cristalab |
- Introducción a Ruby on Rails (II)
- Introducción a Ruby on Rails
- Texto en columnas con CSS3
- Configurar Cloudflare para mejorar el tráfico de tu web
- Acceso rápido para visualizar código en el navegador en Sublime Text 2
- Filtros para imágenes con CSS3
| Introducción a Ruby on Rails (II) Posted: 18 Sep 2012 09:27 AM PDT Para poder seguir con lo que vamos a hacer recomiendo primero tener instalado Ruby on Rails (puedes ver sobre eso aquí ) y haber leído la explicación sobre los frameworks que es la primera parte de esta introducción. Si eres Windows user te recomiendo este proyecto. Ahora lo que vamos a comprender es qué pasa cuando comenzamos a crear un proyecto en Ruby on Rails. La intención de este artículo es explicar lo mínimo indispensable que hay que entender para hacer un proyecto básico y luego iremos creciendo a nuevos niveles de aplicaciones más complejas. Una vez que hemos instalado Ruby on Rails podemos ir al directorio donde vamos a poner nuestros proyectos y vamos a invocar el comando mágico y maravilloso que permite crear todo. Ya he explicado en la primera parte que un comando en un Framework como Rails involucra por lo general varias acciones. En este caso usaremos para comenzar: Código : rails new miProyecto Luego de invocar este comando van a comenzar a ocurrir una serie de cosas. Voy a explicar las más simples. Lo que va a ocurrir, de forma general, es que rails va a crear una serie de carpetas y va a crear una serie de archivos que van a servir para el funcionamiento de la web. Solamente quiero remarcar lo más interesante:  En esta imagen podemos ver que con create comienza a crear carpetas y archivos que van a servir de marco de trabajo de nuestro proyecto. Tolo que hace en esa etapa es crear la estructura básica de directorios y archivos. Lo otro importante es que va a ejecutar automáticamente el comando bundle install. ¿Y qué hace ese comando?. Pues resulta que en ruby las bibliotecas de código son llamados gemas. Estas gemas se van a instalar usando un archivo llamado Gemfile del cuál hablaremos luego. Lo importante es que en la creación automáticamente se llama a ese comando e instala las gemas de esta manera.  Ahí podemos ver las gemas y sus versiones, de las que nos ocuparemos un poco más adelante. ¿Y eso es todo?. En principio sí pero es muy importante comprender lo mínimo necesario de la ubicación de algunas cosas para poder crear nuestra primera aplicación. De estas carpetas y archivos creados por Rails quiero destacar tres partes que me parece las más importantes para hacer una aplicación inicial. 
Tal vez has oído sobre el patrón MVC. No voy a ahondar en ese tema pues da para varios posts como este, pero te dejo un enlace para que leas un poco al respecto. En lo que respecta a nuestro proyecto, dentro de la carpeta app, hay tres carpetas que quiero resaltar. 
En estas tres carpetas vamos a gestionar la parte principal de nuestra aplicación. Muy bien, por ahora eso es todo lo que necesitamos saber para comenzar. A partir de este punto ya podemos desarrollar una aplicación básica que es lo que veremos en la tercera parte de esta guía.
|
| Posted: 18 Sep 2012 08:36 AM PDT Una de las cosas que siempre me ha asombrado es cuando toda la comunidad de una tecnología nueva dice: "esto es simple", "esto es fácil", "esto es hermoso" y cuando me muestran cómo se hace algo, me muestran, como si fueran trucos de magia, una serie de acciones que me dejan un poco asustado e intimidado respecto a esta nueva tecnología. Es por eso que quiero comenzar estos tutoriales siguiendo un poco el mismo camino que tuve que seguir para aprender sobre muchos temas que no conocía. Cuando hablamos de Ruby on Rails hablamos de dos cosas. Por un lado hablamos de Ruby, un lenguaje de programación de los tantos que hay. ¿Qué lo hace especial? Como toda tecnología tiene características muy buenas e interesantes que sería muy largo listar pero lo que lo hace especial es que realmente es como arcilla moldeable y permite, con gran flexibilidad, programar de una forma muy cómoda. Otra cosa que me gusta mucho de Ruby es que no dejas de encontrar novedades en cada rincón que recorres y siempre me está asombrando. Pero, como todo en la vida, tiene que ver con el gusto del programador. Un programador experto puede dar aquí diez millones de razones técnicas de lo hermoso de este lenguaje pero yo no voy a hacer eso. Yo solamente te voy a invitar a que lo pruebes pero un poco más adelante.  Por otro lado hablamos de Rails, un framework que se usa para desarrollo web como otros frameworks que hay para Ruby: Sinatra, Padrino, Waves, Camping, Remaze y otros muchos pero ¡un momento! ¿Qué es un Framework?Claro, todos me comienzan a hablar de frameworks para Java, PHP, Ruby, Python. Ay si! Ay si! que Synfony, que CakePHP, Rails, Django y ¡nadie me ha dicho qué es un Framework!. No te voy a dar una explicación muy técnica ya que esa la puedes leer aquí. Yo te voy a contar una versión resumida de lo que es. Supongamos que programas en un lenguaje determinado. Digamos Java para no amarrarlo a Ruby. Digamos que eres feliz desarrollando en Java y realizas varios proyectos. De pronto en todos los proyectos te das cuenta que tienes que ingresar números enteros por la consola. Esto es muy pesado pues todo lo que entra por teclado en la consola es texto y cuando necesitas que el valor sea numérico te ves enfrentado a la necesidad de convertirlo. Tenemos algo como esto: Código : int miVariableNumerica; miVariableNumerica = Integer.parseInt(in,readLine()); …esa línea hace que, lo que ingreso por teclado (in.readLine()) se convierta en un entero (Integer.parseInt). Luego de poner unas 1000 veces eso, decido que estoy aburrido de ponerlo siempre y decido crear una biblioteca que me permita simplificarme el trabajo porque siempre me estoy equivocando en la sintaxis y con tantas mayúsculas y minúsculas me confundo. Decido que la mejor forma de cambiar esta situación es crear un método llamado ingresaEntero que reciba ese ingreso por teclado y haga esa operación. Muy bien! Entonces en un archivo llamado miFramework.java creo esto: Código : class miFramework public int ingresaEntero(String ingreso){ int respuesta; respuesta = Integer.parseInt(ingreso); return respuesta; } end Bien, a partir de este punto podemos usar en el programa principal algo como: Código : int numero; numero = ingresaEntero(in.readLine()); Estoy tan felíz con eso que decido hacer lo mismo con in.readLine() y lo llamo a ese método leerTeclado. Luego comienzo a darme cuenta de que, por ejemplo, siempre que me conecto a la base de datos realizo el mismo código y decido crear un método llamado conectar(String NombreBase de Datos) y así comienzo a poner todas las tareas repetitivas bajo métodos y nombres de comando que engloban una o varias tareas. Si a esto le sumo patrones, acciones, eventos, etc y tienen un entorno de trabajo uniforme entonces nace un Framework (desde un punto de vista resumido por supuesto). Entonces cuando en un framework como Rails pones una instrucción, por lo general, lo que hace es realizar varias instrucciones de Ruby que pueden pasar por acciones como por ejemplo, crear un HTML, crear una tabla, crear una controladora y dejar todo listo e interrelacionado para que tú puedas programar solamente la inteligencia de negocio. El objetivo de usar un framework es dejar las tareas repetitivas y las mejores prácticas en manos del framework. Y eso es a "groso modo" lo que es un framework y su funcionamiento. Si bien aquí solamente estamos dando una ligera introducción lo importante es que te hagas una idea de cómo funciona, pues en la segunda parte vamos a comenzar con el uso de Rails, entonces ya tendrás una idea de qué es lo que está pasando cada vez que pones un comando y ocurren cosas mágicas y maravillosas. Ve a la segunda parte, donde veremos la parte técnica del frameworkEn la segunda parte de la introducción a Ruby on Rails aprenderás mucho más a fondo cómo crear proyectos e nteros en RoR.
|
| Posted: 18 Sep 2012 05:04 AM PDT En este tutorial les voy a enseñar a trabajar con columnas de texto en CSS3(algo así como las de un periódico) , que les podrá ahorrar varios problemas y dolores de cabeza que podrían tener a futuro. Es bastante simple, y no necesitan saber mucho para poder trabajar con esta función. Ahora, sin más preámbulos, vamos con el tutorial. Antes que nada, les voy a dejar un par de ejemplos de sitios web donde usan o deberían usar las funciones que les voy a mostrar, para que se vayan armando una idea de cómo se usa, cuándo se usa y para qué sirve. Ejemplos de columnas en CSS3Este ejemplo es de un sitio web cualquiera, donde en su portada tienen una sección de noticias. Entonces para ahorrar espacio tienen 2 columnas con noticias. Es importante notar que no sólo sirve para texto, si no también para elementos (como <div>, <span>, <li>, etc).  En este ejemplo se muestra claramente el uso de varias columnas con el texto genérico Lorem Ipsum. Este es un ejemplo claro de cómo quedaría una web con un sistema de multicolumnas vía CSS3.  Cómo hacer columnas de texto en CSS3Luego de que hayan visto cómo se usa el sistema de columnas en disitintas webs y las distintas formas en las que pueden trabajar esta función, ahora vamos al código en bruto. Primero que nada, estamos en CSS3, y nuestros navegadores todavía no aceptan varias propiedades de este lenguaje, así que para que las reconozca, tenemos que agregar los prefijos -moz- (en caso de Firefox) y -webkit- (en caso de Google Chrome y todos los navegadores que usen webkit). Por un tema de responsabilidad al diseño, debes poner los dos prefijos por respeto al usuario, ya que no todos usan Google Chorme, o no todos usan Firefox. Luego de haber aclarado el tema de poner los prefijos de compatibilidad, ahora vamos a ver las propiedades que se usan para el uso de columnas en CSS3. Las propiedades para generar columnas de texto son: [css:1:06dbde341a]column-count: número de columnas ; column-gap: espacio entre columnas ; column-rule: decoración de las columnas ;[/css:1:06dbde341a] En donde:
Un ejemplo de uso sería: [css:1:06dbde341a] #columna { column-count: 3; column-gap: 20px; column-rule: 1px solid #fff ; }[/css:1:06dbde341a] ¡Recuerden poner los prefijos! El resultado del ejemplo anterior sería el siguiente:  Y claro, el HTML (no se si es necesario ponerlo, pero si a alguno le sirve se lo dejo): Código : <div id ="columna"> <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc sed orci enim, at vulputate nulla. Quisque vehicula tincidunt eros sed rutrum. Aenean molestie feugiat dolor, ut aliquet tortor mollis sit amet. Morbi volutpat, odio sit amet scelerisque venenatis, eros turpis tristique nisi, sed feugiat massa ligula sed magna. Praesent sed sem odio. In vitae mi risus, a cursus justo. Quisque in lectus massa, eget porttitor velit. Sed feugiat libero at mi rutrum feugiat. Nulla felis justo, accumsan ut accumsan nec, consequat nec est. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Nulla facilisi. Praesent quis nisi leo, vel accumsan turpis. Pellentesque a orci a purus tincidunt scelerisque. Ut mattis leo quis mauris lobortis lobortis. Mauris dolor purus, placerat et cursus ut, molestie ac diam. In eleifend porttitor libero eget fringilla. Cras velit metus, feugiat sit amet tempus eu, venenatis in lacus. Nunc vitae nunc sem. Sed non leo nunc. Nam metus velit, posuere nec tristique vel, viverra in lacus. Aliquam erat volutpat. </p> </div> Recuerden que ahí falta toda la estructura base del HTML, ese solo sería el div y pueden poner imágenes vía <img src =""/> y quedan auto posicionadas, no les debería dar problemas. Bueno comunidad, eso ha sido todo lo que les traigo por hoy, es un tutorial simple, pero espero seguir aportando a la comunidad, a medida que pueda. Si les interesa lo que escribo, me pueden seguir en Twitter, que siempre trato de aportar cosas respecto al mundo web, informática, tecnología y todos esos temas que a muchos nos apasiona: @semasad. También en Taringa si tienes cuenta: @Shai. Eso sería todo, y gracias por llegar hasta abajo. Cualquier duda o consulta me la pueden preguntar de cualquier modo que se les ocurra (mensaje, comentario, redes sociales, etc) siempre estoy abierto a responder todo.
|
| Configurar Cloudflare para mejorar el tráfico de tu web Posted: 23 Aug 2012 07:30 AM PDT Buenas a todos, luego de un descanso sin escribir, hoy quise escribir este tutorial sobre cómo configurar un sitio web para que trabaje con la tecnología de Cloudflare. Qué es Cloudflare y para qué funciona?Cloudflare es un CDN. Wikipedia : Citando Wikipedia un CDN es Una red de entrega de contenidos o red de distribución de contenidos (CDN, content delivery network en inglés) es una red superpuesta de computadoras que contienen copias de datos, colocados en varios puntos de una red con el fin de maximizar el ancho de banda para el acceso a los datos de clientes a través de la red. Un cliente tiene acceso a una copia de los datos cerca del cliente, en contraposición a todos los clientes que acceden al mismo servidor central, a fin de evitar cuellos de botella cerca de ese servidor. En dónde utilizamos Cloudflare en nuestro sitio web?Lo podemos utilizar en todos los archivos estáticos, por ejemplo CSS, Javascript, imágenes o archivos varios.  Cómo configuramos Cloudflare en nuestra web?Lo primero que debemos hacer es registrarnos en cloudflare.com (Es gratis).  Registramos uno de nuestros dominios en el sistema de cloudflare.com  Cloudflare buscará los DNS actuales del dominio y nos dará las instrucciones para configurar el nuevo dominio.   Nos permite configurar nuestros nombres de dominios a nuestros servidores, por ejemplo, para una configuración básica, debemos crear los siguientes registros de DNS:
 Y dejamos las opciones de seguridad por defecto. Continuamos:  Listo, ya nos dice a qué DNS debemos apuntar el dominio.  Cómo hago para que mis archivos estáticos puedan pasar por Cloudflare?La mejor práctica que he utilizado y me a funcionado muy bien es la de crear varios subdominios para apuntar este contenido, por ejemplo: static.prueba.com : Este dominio será utilizado para despachar los archivos JS, CSS y SWF. img.prueba.com : Este domino será utilizado para despachar las imágenes. Lo que demos hacer ahora es crear dos Registros CNAME.  Quedará de la siguiente forma:  La Nube en color naranja indica que pasa por la red de Cloudflare, la nube en color gris no pasa por cloudflare sino directo a nuestro servidor. Ahora configuramos en nuestro CPanel los subdominios apuntando a la carpeta en donde estará nuestro contenido.
Con esta configuración todo funcionará de maravilla y ya te estás ahorrando todo el ancho de banda de tus CSS, JS e Imágenes. Cualquier consulta o pregunta estamos a la orden, espero que les sirva a muchos. Saludos. @andrewvergel
|
| Acceso rápido para visualizar código en el navegador en Sublime Text 2 Posted: 23 Aug 2012 06:49 AM PDT Sublime Text 2 aún no tiene integrada una tecla de acceso rápido para ejecutar el código directamente en el browser, lo más cercano a esto es: click derecho en el código fuente > Open in browser, lo cual me parece un poco tedioso ya que como programadores siempre buscamos la manera más rápida de ejecutar el código. Integrándome nuevamente en el mundo de la programación decidí utilizar Sublime Text 2, sugerido por @freddier en mejorando.la y es así como solucioné el acceso rápido para visualizar el código. Cómo hacer la tecla de acceso rápido en Sublime Text 2Vamos a Tools > New Plugin  Borrar el código que aparece y pegar el siguiente: Código : import sublime, sublime_plugin import webbrowser class OpenBrowserCommand(sublime_plugin.TextCommand): def run(self,edit): url = self.view.file_name() webbrowser.open_new(url) Guardar con el siguiente nombre: open_browser  Vamos a Preferences > Key Bindings – User  Pegamos el siguiente código dentro de los corchetes: Código : { "keys": ["alt+6"], "command": "open_browser" }  En este caso "alt+6" será la tecla de acceso rápido para ejecutar nuestros códigos en el explorador por defecto. Guardar y cerrar el documento. Listo, ahora sólo nos queda probar el funcionamiento de la tecla de acceso rápido desde cualquier documento en el que estemos trabajando en Sublime Text 2. Saludos!
|
| Filtros para imágenes con CSS3 Posted: 23 Aug 2012 06:19 AM PDT En este tutorial veremos cómo modificar el aspecto de una imagen usando la propiedad filter de CSS3 y el prefijo -webkit, que es el único que cuenta con soporte para filtros, pero seguramente se sumen en próximas ediciones Firefox y Opera, por ese motivo usaré "provisionalmente" este prefijo para que se puedan testear los ejemplos.  [nota:559cdf6ed2] El prefijo -webkit- y sólo funciona con Chrome, Safari y iOS (Safari). [/nota:559cdf6ed2] Los prefijos según el navegador[css:1:559cdf6ed2]-webkit-filter:/* Chrome y Safari */ -moz-filter:/* Mozilla */ -ms-filter:/* Internet Explorer */ -o-filter:/* Opera */[/css:1:559cdf6ed2] La propiedad filter en CSS3Esta propiedad afecta a cualquier elemento, ya sea texto, imagen o video. Dentro de filter podemos añadir uno o varios filtros que existen para esta propiedad, sin un máximo, simplemente separándolos por espacios. [css:1:559cdf6ed2]-webkit-filter: [Filtro] [Filtro];[/css:1:559cdf6ed2] Estos son los distintos tipos de filtros que podemos usar con nuestras imágenes o con cualquier elemento de nuestra página. Vale aclarar que podemos darle todo tipo de valores intermedios, por ejemplo: 0 / 0.5 / 1. Blur (desenfoque)[css:1:559cdf6ed2]-webkit-filter: blur(0px); /* Sin desenfoque */-webkit-filter: blur(5px); /* 5px de desenfoque */[/css:1:559cdf6ed2]  Grayscale (escala de grises)[css:1:559cdf6ed2]-webkit-filter: grayscale(0); /* Color */-webkit-filter: grayscale(0.5); /* 50% color */ -webkit-filter: grayscale(1); /* Blanco y negro */[/css:1:559cdf6ed2]  Sepia (sepia)[css:1:559cdf6ed2]-webkit-filter: sepia(0); /* Normal */-webkit-filter: sepia(0.5); /* 50% sepia */ -webkit-filter: sepia(1); /* Sepia */[/css:1:559cdf6ed2] Brightness (brillo)[css:1:559cdf6ed2]-webkit-filter: brightness(0); /* Normal */-webkit-filter: brightness(0.5); /* Imagen clara */ -webkit-filter: brightness(1); /* Blanco */[/css:1:559cdf6ed2] :  Contrast (contraste)[css:1:559cdf6ed2]-webkit-filter: contrast(0); /* Bajo contraste (gris) */-webkit-filter: contrast(1); /* Normal */ -webkit-filter: contrast(10); /* Alto contraste */[/css:1:559cdf6ed2]  Hue-rotate (rotar matriz de color)[css:1:559cdf6ed2]-webkit-filter: hue-rotate(0deg); /* Normal */-webkit-filter: hue-rotate(180deg); /* Rotar la matriz 180 grados */ -webkit-filter: hue-rotate(270deg); /* Rotar la matriz 270 grados */[/css:1:559cdf6ed2]  Invert (invertir)[css:1:559cdf6ed2]-webkit-filter: invert(0); /* Normal */-webkit-filter: invert(0.5); /* Gris */ -webkit-filter: invert(1); /* Color invertido */[/css:1:559cdf6ed2]  Saturate (saturación)[css:1:559cdf6ed2]-webkit-filter: saturate(0); /* Sin color */-webkit-filter: saturate(1); /* Normal */ -webkit-filter: saturate(10); /* Alta saturación */[/css:1:559cdf6ed2]  Opacity (opacidad)[css:1:559cdf6ed2]-webkit-filter: opacity(0); /* Transparente */-webkit-filter: opacity(0.5); /* 50% transparente */ -webkit-filter: opacity(1); /* Normal */[/css:1:559cdf6ed2]  Ver los ejemplos funcionando aquí, y también un ejemplo aplicado a textos.
|
| 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 | |
No hay comentarios:
Publicar un comentario