Cristalab

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
#24: Curiosidad
Manejo de números 2/2 en Python
Instalación de Ruby on Rails en Linux, Mac OS y Windows

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:

Un registro de Tipo A : Indica a qué servidor apuntará el dominio principal.
Un registro de Tipo CNAME : Esto indica que a un subdominio del dominio principal siempre le creo el registro WWW

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.

A la carpeta public_html/static/ apuntaremos el subdominio static.prueba.com. Ésta puede contener dos carpetas: una css/ y otra js/. Esto quiere decir que cuando se llame a un archivo, por ejemplo http://static.prueba.com/css/estilos.css, la red de cloudflare será la que lo despache al usuario final.
A la carpeta public_html/img/ apuntaremos el subdominio img.prueba.com. Esta contiene los archivos de imagen, esto quiere decir que cuando se llame a un archivo, por ejemplo http://img.prueba.com/logo.jpg, la red de cloudflare será la que lo despache al usuario final.

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 2

Vamos 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 CSS3

Esta 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.

#24: Curiosidad

Posted: 06 Aug 2012 07:51 AM PDT

Aterrizó (amartizó) el más avanzado robot creado por la humanidad, en otro planeta, en Marte. El Mars Curiosity o Mars Science Laboratory. Es un hecho único, increíble y del éxito de esta misión depende el futuro de misiones humanas en Marte y la mejor oportunidad que tenemos de saber si hay vida en otros planetas.

Anoche, a la media noche, cubrimos en vivo la entrada y aterrizaje a Marte.

El comic #24 de la serie Cristalab vs. The Web: "Curiosidad". Si esta es tu primera vez viendo el comic, mira el comic #23: HTML5 y otros anteriores.

An even more glorious dawn awaits.

Manejo de números 2/2 en Python

Posted: 06 Aug 2012 05:48 AM PDT

En este videotutorial, se explican algunas funciones básicas para manipular objetos numéricos en Python.

Instalación de Ruby on Rails en Linux, Mac OS y Windows

Posted: 03 Aug 2012 02:44 AM PDT

En este tutorial aprenderemos a instalar Ruby y el framework Rails bajo Linux (basado en Debian o Fedora), Mac OS y Windows.

Introducción

Ruby es un lenguaje de programación orientado a objetos, multiplataforma, bastante intuitivo y fácil de aprender. Nace en 1993 y se lanza en 1995, diseñado por Yukihiro Matsumoto. Su última versión estable (1.9.3) se lanzó el 31 de octubre del 2011. Tiene influencias de Perl, Python, Smalltalk, Lisp, Eiffel, Scheme, Ada, Dylan y CLU.

Rails, RoR o Ruby on Rails, es un framework MVC con código abierto para la creación de aplicaciones web, escrito, obviamente, en Ruby.

[nota:3d7ea06d7e] Este tutorial no instalará ningún tipo de base de datos (SQLite, PostgreSQL, MySQL, etc) extra a la que tenga tu sistema operativo.[/nota:3d7ea06d7e]

Instalación en Linux

En este tutorial escribo para distribuciones basadas en Debian (Ubuntu, etc) o Fedora (ASPLinux, etc). Los comandos aplican para ambos sistemas operativos o distribuciones, únicamente cambia si es especificado.

Primero que nada tendremos que actualizar nuestros paquetes, en la terminal escribimos:

Código :

  //Debian  sudo apt-get update    //Fedora  sudo yum update

Ahora, para lograr trabajar de manera correcta Ruby (verás como más tarde me lo agradecerás), lo más recomendable es instalarlo a partir de RVM:

Código :

  curl -L get.rvm.io | bash -s stable

Y lo cargamos a nuestra terminal:

Código :

  source ~/.rvm/scripts/rvm

RVM tiene sus propias dependencias, para ver cuales son ejecutamos el siguiente comando:

Código :

  rvm requirements

Dependiendo de tu SO o distribución te dará un comando, copia y pégalo para instalar. Actualizamos RVM:

Código :

  rvm get head && rvm reload

Instalamos la versión más estable de Ruby (1.9.3):

Código :

  rvm install 1.9.3

Y agregamos la versión 1.9.3 como default en nuestro sistema:

Código :

  rvm use 1.9.3 --default

Instalamos RubyGems con RVM:

Código :

  rvm rubygems current

E instalamos finalmente Rails:

Código :

  gem install rails

Ahora todo listo, podremos crear un nuevo proyecto y correr el servidor:

Código :

  rails new primer_proyecto  cd primer_proyecto  rails server

Si todo salió bien podremos acceder desde localhost:3000

Instalación en Mac OS

Para realizar la instalación de Rails en Mac OS tendrémos que instalar dos cosas: Xcode y Homebrew. Xcode es un kit para desarrolladores, Homebrew es un gestor de paquetes excelente. Estas dos utilidades no las utilizaremos en este tutorial, pero lo haremos después y es muy recomendado tenerlas.

Para instalar Xcode basta con irnos a la App Store y buscar por Xcode, es gratuito. Después de hacerlo abriremos Finder y navegaremos a nuestras aplicaciones y buscaremos la carpeta utilidades, después ejectaremos la terminal (Si, Mac tiene una terminal, no todo es "bonito diseño").

Escribiremos lo siguiente para instalar Brew:

Código :

  /usr/bin/ruby -e "$(curl -fsSL https://raw.github.com/mxcl/homebrew/master/Library/Contributions/install_homebrew.rb)"

Una vez instalado, instalaremos RVM.

Código :

  bash < <(curl -s https://raw.github.com/wayneeseguin/rvm/master/binscripts/rvm-installer

Ahora crearemos un perfil para inicializar RVM con la terminal:

Código :

  touch ~/.bash_profile  open -e ~/.bash_profile

Y copiamos y pegamos la siguiente linea:

Código :

  export PATH="./bin:$PATH"   [[ -s "/Users/TU_USUARIO/.rvm/scripts/rvm" ]] && source "/Users/TU_USUARIO/.rvm/scripts/rvm"

Y por si no te diste cuenta, en donde dice TU_USUARIO va tu nombre de usuario. Guarda y regresa a la terminal.

Ahora escribe el siguiente comando para asociar el perfil que creaste, con la terminal:

Código :

  source ~/.bash_profile

E instalamos la última versión de Ruby (1.9.3) con el siguiente comando:

Código :

  rvm install 1.9.3

Y agregamos la versión 1.9.3 como default en nuestro sistema:

Código :

  rvm use 1.9.3 --default

Ahora es tiempo de instalar Rails, en la terminal escribimos:

Código :

  gem install bundler  gem install rails

Ahora todo listo, podremos crear un nuevo proyecto y correr el servidor:

Código :

  rails new primer_proyecto  cd primer_proyecto  rails server

Si todo salió bien podremos acceder desde localhost:3000

Instalación en Windows

Primero que nada vamos a instalar Ruby, nos tendremos que descargar el ejecutable desde este enlace, escogeremos el paquete más reciente dentro de RubyInstallers. Así como el paquete más reciente bajo Development Kit.

Una vez descargado, ejecutamos el instalador de Ruby y seleccionamos todas las opciones. Paso siguiente es instalar el Develipment Kit. Doble clic y extraemos en nuestro Escritorio, nos vamos a Inicio > Ejecutar y escribimos cmd y en la terminal:

Código :

  cd Escritorio/carpeta_de_archivo_descargado  ruby dk.rb init  ruby dk.rb review  ruby dk.rb install

Ahora, para instalar Rails abrimos cmd de nuevo, dentro de la terminal escribimos:

Código :

  gem install rails -r -y

Una vez completado crearemos nuestro primer proyecto para ver que todo esté en orden, desde la terminal que abrimos escribimos:

Código :

  rails new primer_proyecto

Nos creará un montón de archivos, ahora entramos a la carpeta y ejecutamos el servidor:

Código :

  cd primer_proyecto  rails server

Si todo salió bien podremos acceder desde localhost:3000

Conclusión

No es difícil instalar Ruby o Rails en tu sistema operativo, cada uno tiene sus métodos; por largos o lentos que sean, son necesarios para lograr utilizar este sistema.

Es hora de que experimentes, utiliza Google y lee un poco acerca de esta maravillosa utilidad. Dudas o comentarios dejando un comentario en este foro.

También sígueme en twitter @kinduff para resolver tus dudas y para estar al tanto de la segunda parte de este tutorial.

Y recuerda: "Llegar al pico de Ballmer es fácil, pero mantenerlo, es el secreto." - A. Anónimo.

AT boletín - INFORMA

jueves, 23 de agosto de 2012

Cristalab

Cristalab

Qué es Cloudflare y para qué funciona?

En dónde utilizamos Cloudflare en nuestro sitio web?

Cómo configuramos Cloudflare en nuestra web?

Cómo hago para que mis archivos estáticos puedan pasar por Cloudflare?

Cómo hacer la tecla de acceso rápido en Sublime Text 2

Los prefijos según el navegador

La propiedad filter en CSS3

Blur (desenfoque)

Grayscale (escala de grises)

Sepia (sepia)

Brightness (brillo)

Contrast (contraste)

Hue-rotate (rotar matriz de color)

Invert (invertir)

Saturate (saturación)

Opacity (opacidad)

Introducción

Instalación en Linux

Instalación en Mac OS

Instalación en Windows

Conclusión

No hay comentarios:

Publicar un comentario