teknomada

Introducción a SASS/Compass: Programabilidad para tus Estilos CSS

Mora Zyx — Thu, 17 May 2012 02:28:33 +0000

Quizas los más dificil a la hora de entender SASS es comprender para que sirve. Si ya tenemos CSS, sabemos escribirlo y es lo único que entienden los navegadores, ¿para que queremos otro lenguaje de estilos? Lo que hay que entender es que SASS no reemplaza a CSS, todo código que escribamos en SASS se convertirá en CSS estandar mediante un preprocesador (en esto se parece a PHP). Seguirá siendo CSS normal lo que produzcamos, pero con SASS podremos hacer del componerlo un proceso más cómodo, rápido y funcional.

Algunas Caraterísticas: variables, operaciones matemáticas (+, -, *, / y %), código anidado, mixins y bastantes mas…

Introducción a SASS

Syntactically Awesome Stylesheets o SASS es una extensión de CSS3. Se escriben en archivos SCSS que son iguales que los CSS con las caracerísticas añadidas de SASS (acepta CSS normal). Se guardan con la extensión .scss y estos se compilan. Se generan los archivos .css que usaremos en el ... la página.

Gracias al SASS podemos darle funcionalidad dinámica a nuestro CSS. Tiene muchisimas ventajas sobre escribir CSS normal y produce código que seguramente sea mejor que el que escribiriamos a mano ya que es un procesador inteligente y optimizará el código para que no haya codigo duplicado y otras cosas que puedan reducir el rendimiento de nuestros estilos. Recomiendo a aquellos que ya esten familiarizados con CSS echarle un vistazo a SASS. Le ayudara mucho, sobre todo a nivel de proyectos grandes. Es en gran parte la tendencia hacia el desarrollo web de futuro, parecido a otras tecnologías sobre de todo de templating como LESS, Jade, CoffeScript, etc.. aunque me parece a mí, personalmente, bastante más útil SASS que los mencionados.

Instalación

1. Instalar Rubygems :
$ sudo apt-get install rubygems

2. Instalar SASS :
$ sudo gem install sass

3. Listos. Pruebalo…
$ sass -v

Nota: En algunos sistemas (eg. Windows) no hara falta poner sudo delante de los comandos. En algunos sistemas unix quizas haga falta añadir la ruta a los binarios de rubygems al final del archivo ~/.bashrc. Prueba: $ export PATH=$PATH:/var/lib/gems/1.8/bin

Uso Rápido

$ sass --watch style.scss:style.css

Esto vigilará tus archivos. Cuando detecta cambios en style.scss, SASS actualiza el style.css automáticamente. También se puede vigilar carpetas enteras:

$ sass --watch estilos/sass:estilos/css

Vigila la carpeta estilos/sass y genera los CSS en estilos/css.

Como tambien es CSS normal, puedes empezar a usar SASS moviendo tus archivos de CSS a SCSS:

$ mv style.css style.scss
$ sass --watch style.scss:style.css

Variables / Operaciones

SASS nos permite usar variables en nuestro código CSS. Nos puede ahorrar muchisimo trabajo si queremos cambiar por ejemplo el color de nuestra web.. buscariamos cada vez que sale el color que queremos cambiar para textos, bordes, fondos, etc. Con SASS podemos asignarle valores variables con el formato:

$: ;

El valor puede ser cualquier valor que ya usemos en CSS — colores, tamaños, etc…

$myColor: #BADA55; $sidebarWidth: 100px; $articleWidth: 960px - $sidebarWidth;

.mainContent {
width: $articleWidth;
color: $myColor;
}

.sidebar {
width: $sidebarWidth;
background: $myColor;
}

En el ejemplo tambien se demuestra como podemos usar operaciones matemáticas en nuestro código SCSS.

Código Anidado (Nesting)

El código anidado en SASS nos permite crear relaciones complejas con la simplicidad del anidado. Si queremos seleccionar un elemento especifico a traves de CSS usamos selectores avanzados con simbolos como ul > li. En SASS podemos simplemente anidar código para darle relación. Ejemplo:

h1 { color: #000; span { color: #777; } }

Produce el código CSS siguiente:

h1 { color: #000; } h1 span { color: #777; }

Muy útil para situaciones complejas que se pueden formar con los formularios, cosas como:

form ul > li .input …

Mixins

Los mixins de SASS son como funciones. Se les puede pasar arguments como color, border-radius, etc.. y este devolverá el código preciso:

@mixin rounded($radius: 5px) { -webkit-border-radius: $radius; -moz-border-radius: $radius; border-radius: $radius; }
#box { @include rounded(10px); /* @include rounded; usara valor por defecto */ }

Podriamos crear un mixin para elementos que queremos flotar a la izquierda:

@mixin izquierda($dist) { float: left; margin-left: $dist; }
.thumbnail { @include izquierda(10px); }

Herencia de Selectores

Con la herencia podemos extender las propiedades de nuestras clases a otras sin duplicar código. Esto se hace usando @extend y el selector de nombre de la clase que queremos incorporar:

.myClass {
color: #000;
font-family: monospace;
}

#box2 {
@extend .myClass;
font-size: bold;
}

Compass: Framework SASS

Estríctamente hablando, Compass es un framework CSS. Pero hace uso del lenguaje SASS para crear los estilos. Se podría considerar un framework de frameworks — ya que es muy fácil incorporar otros frameworks a tu proyecto (como podrian ser otros frameworks de grids o botones, etc..). Compass te ayuda a estructurar tus proyectos CSS que usen SASS y además tiene una grandisima librería de utilidades, hacks y estilos ya creados para que solo tengas que importarlos a tu proyecto. Compass te permite trabajar con CSS de una manera distinta y muy efectiva. Podemos usar @import en nuestro código sin problema de rendimiento ya que no es el SASS lo que servimos al cliente si no el CSS optimizado.

$ sudo gem install compass $ compass create $ compass watch
…(edita los archivos SCSS que se encuentran en la carpeta /src de tu proyecto)…

Ver los estilos disponibles en compass-style.org y importalos a tu proyecto:

@import "compass/reset"; @import "compass/css3/border-radius";
/* incluye todo el modulo css3: @import "compass/css3"; */
@import "compass/utilities"; /* mixins utiles (eg. sprites). */

Y ahora podemos usar las funciones importadas asi:

@include border-radius(10px); @include border-shadow(red, 2px, 5px, 10px);

Ejemplo: Usando la Utilidad de Sprites

.logo { background: sprite-image("img/sprite.png"); }
.linea { background: sprite-image("img/sprite.png") 0 26px; }

Más Información: http://sass-lang.com

Trucar el Reproductor de Audio HTML5 y Hacerlo Más Inteligente

Mora Zyx — Sat, 28 Apr 2012 21:48:30 +0000

Pienso que el nuevo elemento HTML5 es una maravilla. Es super simple de usar, intuitivo de programar y es hasta bonito por defecto. Trae consigo todas las opciones que habitualmente pediriamos de un reproductor de de audio: botones de control (volumen, etc.), autoplay (reproducción automática), loop (reproducción continua) y preload (si deberiamos cargar el archivo cuando cargamos la página). ¡Casi todo lo que necesitariamos! Solo nos quedaría tweakear algunos detalles para que sea el reproductor perfecto.

Un Problema

Toma la siguiente situación: tenemos el reproductor instalado en nuestro sitio, por ejemplo, con una música ambiental que se reproduce de fondo. La canción en sí dura unos minutos. El problema con el que nos encontramos es que cada vez que cambiamos de página (refrescamos o cliqueamos un link), vuelve a reproducirse nuestra canción desde el principio. Esto puede dar un efecto muy feo, incluso puede hacer que decidamos ni si quiera usar el HTML5 en nuestras páginas…

Por suerte hay soluciones que podremos implementar facilmente y resolver este problema. Os recomiendo la siguiente solución (para un simple problema) para usarlo como acercamiento al elemento en HTML5, pero también os diré que ya hay muy buenas soluciones a este y muchos otros problemas de en librerias gratuitas que encontrarás online. Al final detallaré algunas de estas.

Una Solución

( refresca la página para ver como el audio sigue )

Paso 1

Descargar: aqui. Tenemos que incluir un archivo para el CSS, la librería jQuery (que aquí haremos usando la versión que hospeda Google) y este archivo JavaScript. Pondriamos en el … de nuestra página:

Ver / Descargar:

Paso 2

Ahora en el cuerpo:

Ver / Descargar:

Audio: MP3 / OGG
Imagenes: play.gif / pause.gif / restart.gif

Paso 3

¡Ya esta listo! Configuralo a tu gusto usando la simple API.

Descarga un ZIP con todo

Esta sencilla solución podrá reproducir audio sin tener que volver a empezar la canción desde el principio cada vez refrescamos (o cambiamos de página si quieres). Tambíen se acuerda de las preferencias de reproducción, es decir, se acuerda del la última posición de volumen o si el reproductor estaba en play o pause cuando lo dejamos. Muy bueno.

Librerias y Otras Soluciones

AAP – Accessible Audio Player (AAP). Usa el elemento HTML5 para los navegadores que lo browsers soportan, y el reproductor de media de Yahoo! para los que no. Para navegadores que no corren HTML5 muestra una lista de archivos MP3. AAP tiene una versión plugin WordPress llamado Accessible Audio Player Plugin (AAPP).

audio.js – Utiliza el nativo donde este disponible y un reproductor de flash invisible para emular el en otros navegadores. Ofrece un consistente interfaz de usuario (UI) del reproductor HTML5 para todos los navegadores que permiten estilos css.

boombox.js – Fácil uso. Utiliza HTML5 y jQuery to crear un boombox (mini-cadena) digital. Crear reproductores de audio de alta calidad se hace más fácil con boombox.

jPlayer – jPlayer es una completa librería escrita en JavaScript. Es un plugin jQuery. jPlayer te permite rápida y fácilmente integrar audio y video en tus páginas. API comprensiva y comunidad activa.

Speakker – Muy atractivo. Viene de casa en dos variantes con increibles opciones de customización: dimensiones flexibles, colores ilimitados y dos conjuntos de botones para tanto para temas claros como oscuros. Fácil instalación.

Yahoo! WebPlayer – Integra el reproductor de Yahoo! WebPlayer en tu página fácilmente poniendo un código HTML justo antes del final de la etiqueta .

Zen – Muy buena implementación de jPlayer que crea un super reproductor en CSS3. Muy atractivo.

SEO Avanzado (o Como “Hacerle la Pelota” a Google)

Mora Zyx — Thu, 26 Apr 2012 21:05:48 +0000

Esto no pretende ser una introducción al tema SEO, pero si detallaré brevemente lo que es: el SEO (Search Engine Optimization en inglés), tal y como su nombre indica, es la optimización de una página hacia los buscadores. Parece una tontería, pero no se debe confundir esto con su opuesto que seria: optimizar los buscadores hacia tu página. Esto es lo que piensa mucha gente… que entras en alguna parte medio-perdido de las páginas más secretas de google.com y les truqueas desde dentro para que siempre que alguien busque algo, sea lo que sea, se encuentren con tu página, ahí, la Primera. No se trata de eso. Se trata de optimizar tu página, tu código, para facilitarles la vida a los buscadores a la hora de determinar las cosas más relevantes que puede aportar tu pagina.

SEO Normal

El SEO normal, típico de toda la vida (desde los noventa), tiene todo que ver con links (enlaces). Cuantas más páginas externas enlacen con una en particular, esa se verá mejor reflejado en Google en cuanto al criterio de búsqueda se refiere. (Por muchos enlaces externos que tenga una página, si el tema no tiene nada que ver con la búsqueda seguramente no saldrá entre los resultados). Wikipedia o Marca.com no salen los primeros en muchas búsquedas porque hayan firmado algún acuerdo con Google–salen los primeros porque miles (quizas incluso millones) de páginas externas enlazan con su contenido. Para Google han generado una confianza y eso determina el ranking. Incluso se llama así: PageRank.

La otra cosa que determina el SEO normal son las palabras claves. Es el método tradicional de asociarle algunas palabras clave al tema y al contenido de una página para que los buscadores puedan mediante ellos saber mejor lo que tiene que ofrecer una página. Conviene tener bien definidas las palabras claves, las justas y necesarias, respaldadas realmente en el contenido, para que pueda crecer la confianza (y no te penalizen por impostor). Google tiene una guía de introducción a la optimización de motores de búsqueda aquí.

Nuevas Técnicas de SEO

Con el tiempo el SEO ha ido de ser una idea y un proceso bastante simples, a convertirse en algo más parecido a un arte. Muchas técnicas se han ido descubriendo y desarrollando para optimizar tu página hacia los buscadores. Mayormente tiene que ver con buen código y el uso de las redes sociales para hacer crecer una marca. Aquí nos interesa el código…

¿Como se mejora el código? Toda página de internet es HTML. Esto es lo que leen los robots de los buscadores. No leen imágenes, ni sonidos, ni películas muy bonitas hechas en Flash*. Leen HTML y esto es lo que hay que optimizar. De entrada, existen algunas etiquetas HTML que nos permiten especificar algo de más de información a los buscadores sobre nuestro sitio. Las etiquetas para meta-datos van en la cabecera del documento HTML entre las etiquetas … . Con ellos podremos especificar el idioma, una descripción y las palabras claves para nuestro sitio:



  
  
  
  Gatos Asesinos | MiLindoGatito.es



...

Otras Consideraciones

Palabras Clave: Si decides especificar que las palabras claves son realmente el tema de tu página debes respaldarlo por lo menos salpicando esas palabras por diversas partes de la página. Cogamos el ejemplo de GATO… si elegimos “gato” como una palabra clave, conviene que este esa palabra en el titulo, en algún encabezado (

Gato del Día

), en el pie de página, etc. Ahora con HTML5 podemos ser hasta más descriptivos y semánticos con nuestro código. Ver: Microdatos

URLs: La URL es la dirección de la página (que verás arriba en el navegador). Elegir buenas URLs pueda ayudar enormemente al ranking de una página. Dos cosas que pueden influir son el dominio (el nombre .com o .es …) y las direcciones de las páginas internas–es decir la dirección de las diversas páginas repartidas por el dominio. Si alguien busca “El Barrio de Triana” y existiera un www.elbarriodetriana.com fácilmente llegaría a ser de los primeros. En cuanto a las páginas internas, también conviene que sean descriptivas. No es lo mismo:

http://teknomada.es/index.php?p=135

que

http://teknomada.es/desarrollo-web/top-10-frameworks-php/

Aunque sean la misma página, una dirección es mucho más descriptiva del contenido de la página y los buscadores también usan este método para determinar la relevancia que tiene.

Títulos: En conexión con las URLs y de gran importancia son los títulos. Los títulos, tanto de las entradas como de las páginas, pueden ser de más o menos interés para los buscadores dependiendo de como esta escritos. Hay muchas teorías sobre que tipo de títulos son mejores para el SEO, pero una forma de averiguarlo es comparar las palabras claves más buscadas para tu nicho o mercado. Google ofrece un comparador de palabras clave como parte de su plataforma AdWords. Normalmente, las palabras claves mejor pagadas son las que más interesan–teniendo en cuenta siempre la competencia. Como norma es bueno tener títulos que sean descriptivos y hagan uso moderado y inteligente de palabras que sabes que buscan. (El Blog de Webmasters de Google tiene una entrada: Títulos de páginas en los resultados de búsqueda)

SEO Avanzado

Ahora os presento una técnica avanzada de SEO. No es avanzada por ser muy difícil de implementar, la considero avanzada por lo nueva que es y lo poco que aún se usa. Os presento: Google Authorship.

¿Has notado que a veces cuando buscas algo en Google te aparece una imagen debajo con la foto del autor?

Configurando Google Authorship puedes demostrar combinar tu marca personal con tu contenido original. Es una manera que promete mucho en cuanto a ayudar a los buscadores entregar la información que realmente busca, usando al mismo tiempo el poder social que acarrea tu persona online. En el marketing cada vez más el boca-a-boca y la confianza entre el creador y consumidor son factores cruciales.

Hay algunas restricciones ahora mismo, ante todo te pide: una foto de perfil de tu cara. Piensen lo que quieran. Esto es el futuro del marketing online, hacer crecer tu marca como “persona”.

Te pedirán dos cosas: 1) validar que realmente eres el autor que dices ser, recibiendo un mail / agregando un poco de HTML en la página y 2) poner un poco de HTML en un link que ponga claramente que eres el autor (“Escrito por ”). Algo así:

Escrito por TEKNOMADA

La ruta del enlace debe apuntar a tu perfil de Google+ agregándole al final la parte de ?rel=author (es necesario).

Enlaces

Google Authorship – Linkea tu perfil de Google+ al contenido que creas.

LSI Keywords – Herramienta que estudia las primeras posiciones de Google para alguna búsqueda sacando de ellas las palabras clave. Muy bueno para estudiar el mercado.

Ayuda de AdWords – Guía de ayuda en linea de usuarios de Google AdWords

Tipografía Web: Cómo Usar Fuentes Personalizadas en CSS3

Mora Zyx — Tue, 24 Apr 2012 06:29:37 +0000

Desde la segunda versión de CSS ya teníamos a nuestra disposición la regla @font-face, pero con CSS3 viene estandarizada. Sigue habiendo temas de licenciatura de fuentes comerciales pero tenemos a nuestra disposición para usar los miles de fuentes de libre distribución que existen. Encontrarás una gran colección de fuentes gratuitas aqui. También tenemos con CSS3 más de una forma de incorporar nuestras fuentes. Os mostraré las distintas formas, detallando algunos cosas que debeis tener en cuenta.

Tenemos tres maneras de incluir una fuente en una página a través de CSS. La primera es la canónica, mientras que los otros dos son variaciones sobre el concepto de importar archivos externos.

1) @font-face

Suponiendo que nuestra fuente (archivos OTF o TTF) esta en el mismo directorio que nuestro archivo de CSS, escribiremos en nuestra hoja de estilo:

@font-face {
   font-family: Delicious;
   src: url('Delicious-Roman.otf');
 }

@font-face {
   font-family: Delicious;
   font-weight: bold;
   src: url('Delicious-Bold.otf');
 }

Ahora lo podremos usar con cualquier elemento de texto, por ejemplo:

h3 { font-family: Delicious, sans-serif; }

2) @import

Esta manera es la menos recomendada, pudiendo relentizar considerablemente el tiempo de carga tu página. Esto es dado que descarga (e importa) archivos externos, pero lo hace de manera sincrónica. Se recomienda usar la manera que puede descargar archivos asincronicamente. Aun asi, le pongo la demostración de su uso:

@import url(http://fonts.googleapis.com/css?family=Crete+Round);

3) Web Fonts

Podemos incluir fuentes en la cabecera de nuestro documento html entre … :

Y en ambos casos para usarlos:

font-family: 'Crete Round', sans-serif;

NOTA: En los ejemplos 2) y 3) usamos la Web Fonts API de Google, un servicio de fuentes online que puedes incluir en tu código sin necesidad de incluir los archivos .ttf … visita: Google Web Fonts.

Configuración Avanzada de un Servidor Local: php.ini, .htaccess y módulos de Apache2.

Mora Zyx — Tue, 24 Apr 2012 02:35:40 +0000

NOTA: Este post es el antiguo. Puedes ver el nuevo visitando http://ciberpunktxt.tumblr.com/post/38066198867/instalacion-y-configuracion-local-de-un-servidor-web .

php.ini

El primer problema que puedes encontrar con tu configuración inicial es el limite que impone PHP para subir archivos. En la instalación por defecto de apache2 mod_php el tamaño máximo permitido pa la subida de archivos es 2mb. (Resulta ser un problema a la hora de, por ejemplo, importar una base de datos con phpmyadmin si el archivo .sql pesa más de 2mb) Para esto, y todas las otras configuraciones de PHP con Apache, esta el archivo llamado php.ini que puede estar en distintos sitios dependiendo de la instalación, pero que en Ubuntu se encuentra en: /etc/php5/apache2/php.ini

Para cambiar el limite de subida buscaremos la linea que lee upload_max_filesize = 2M y lo cambiamos al tamaño que queremos.

.htaccess

Este archivo es la diferencia entre una URL al estilo de http://ejemplo.com/index.php?id=36 y una URL mucho más bonita como http://ejemplo.com/contacto … En el archivo .htaccess podemos introducir reglas para Apache (el ejemplo anterior usa una regla para re-escribir la URL para “esconder” el index.php). Para poder usar la función de URLs bonitas en WordPress tengo que crear un archivo en la carpeta raiz del blog llamada .htaccess y rellenarlo con:


  RewriteEngine On
  RewriteRule ^index\.php$ - [L]
  RewriteCond %{REQUEST_FILENAME} !-f
  RewriteCond %{REQUEST_FILENAME} !-d
  RewriteRule . /index.php [L]

mod_rewrite

Para que funcione el .htaccess anterior es necesario tener activado el módulo mod_rewrite de Apache. Lo usaremos de ejemplo de como instalar módulos de apache2:

$ sudo a2enmod rewrite
$ sudo /etc/init.d/apache2 restart

El comando a2enmod ACTIVA los módulos y a2dismod los DESACTIVA.

userdir

Habilitar carpetas de usuarios (ej. http://localhost/~usuario) para no tener que usar sudo en /var/www … la carpeta por defecto es: /home//public_html y se habilita asi:

$ cd /etc/apache2/mods-enabled
$ sudo ln -s ../mods-available/userdir.conf ./userdir.conf
$ sudo ln -s ../mods-available/userdir.load ./userdir.load
$ sudo /etc/init.d/apache2 restart

Importante: Para activar PHP en las carpetas de usuarios tenemos que editar el archivo /etc/apache2/mods-enabled/php5.conf y comentar las lineas que deshabilitan el uso de .htaccess. Buscamos las lineas que leen:

    
        
            php_admin_value engine Off

Y los comentamos empezando cada línea con una almohadilla ( # ) quedando asi:

#    
#        
#            php_admin_value engine Off
#        
#

Reinicia el servidor con el comando:

$ sudo /etc/init.d/apache2 restart

NameVirtualHost (hosts virtuales)

A veces incluso las URLs estilo http://localhost/~usuario/blog son muy largos. Usando hosts virtuales podemos hacer que cualquier URL que definimos que apunte a nuestro servidor local. Para esto tendremos que tocar el archivo /etc/hosts y agregar al final:

NameVirtualHost *:80
127.0.0.1    www.ejemplo.com

Y finalmente tenemos que crear un sitio virtual en /etc/apache2/sites-available y linkearlo a /etc/apache2/sites-enabled:

$ sudo nano /etc/apache2/sites-available/www.ejemplo.com

Escribiremos:


  ServerAdmin webmaster@localhost
  ServerName www.ejemplo.com
  DocumentRoot /home/--USUARIO--/public_html/www.ejemplo.com

  
    Options FollowSymLinks
    AllowOverride None
  

  ErrorLog ${APACHE_LOG_DIR}/error.log
  LogLevel warn
  CustomLog ${APACHE_LOG_DIR}/access.log combined

Linkeamos y reiniciamos…

$ sudo ln -s /etc/apache2/sites-available/www.ejemplo.com /etc/apache2/sites-enabled/www.ejemplo.com
$ sudo /etc/init.d/apache2 reload

Top 10 Frameworks PHP

Mora Zyx — Sun, 22 Apr 2012 22:17:42 +0000

Un framework te puede agilizar el trabajo repetitivo o bien te puede servir de herramienta de construcción. Y usándolas es una muy buena forma de aprender como funcionan las aplicaciones PHP. A continuación os presento con los Top 10 de frameworks PHP. De todo un poco, desde la más minimalista hasta las más robustas de nivel enterprise. La mayoria de ellos usan (o se basan en) la metodología MVC, que quiere decir Modelo-Vista-Control – una manera de organizar el código que escribimos dependiendo de lo que hace.. Muy basicamente: la base de datos (el Modelo), el HTML/CSS/… (la Vista) y la lógica que los une en código (el Controlador).

He jugueteado con muchos de estos frameworks y verdaderamente depende de tus preferencias y necesidades a la hora de elegir un framework. Si solo quieres una aplicacion que pueda comunicarse con una base de datos, conviene usar un framework pequeño (como el F3) que se ocupe de la ORM. Si buscas una solución de plugins quizas el CakePHP sea lo que buscas. ¿Te gusta Ruby on Rails? Prueba: Symfony. ¿Solución Enterprise? Zend. A mi personalmente, siempre me ha gustado la libertad que me da CodeIgniter…

CakePHP – CakePHP usa algunos conceptos de ruby on rails. Su meta es el desarrollo rapido de manera estructurada y flexible. Tiene una comunidad activa que organiza conferencias anuales. Compatible con PHP 4 y PHP5. Funciones CRUD (Create-Read-Update-Delete). Listo para integrar con bases de datos. Arquitectura MVC. Validación integrado. Templating de vistas a traves de View Helpers para AJAX, JavaScript, Formularios HTML… Fácil configuración. Extensible.

CodeIgniter – Este framework es más como una caja de herramientas para aquellos desarrolladores que quieran usar PHP cuando crean sus aplicaciones. Ayuda a desarrolladores que quieren construir un sitio web de manera agil y los que quieren escribir el framework desde cero. Pone a disposición de programador un amplio y rico conjunto de librerias, con una interfaz simple y estructura lógica. CodeIgniter minimiza la cantidad de programación necesaria para determinada tarea. Pesa poco (lightweight). Cero configuración. No necesita usar la linea de comandos. Sin restricciones a la hora de escribir código. Perfecto para sitios pequeños y hosting básico. Excelente documentación.

Fat-Free (F3) – Fat-Free es un potente micro-framework muy bien diseñado para ayudarte a construir aplicaciones dinámicas rapidamente. Esta condensao en un solo archivo de 55KB. F3 (que se le llama) te proporciona un base sólida sobre la que construir agilmente. En esta pequeña cajita de herramientas encontrarás el enrutador URL de alto rendimiento, soporte de localización multi-idiomas, un procesador de formularios HTML, sistema de cache integrado y herramientas para el testing y perfilado de código. Todo en tán solo 55KB.

FuelPHP – Interesante proyecto bastante nuevo. Coge lo mejor de otros frameworks y lo desarolla desde el comienzo otra vez sin ataduras a convenciones antiguas. Esta escrito en PHP 5.3+ y sigue el MVC desde el diseño. Incluye ViewModels que une las vistas con los controladores. Enrutamiento avanzado. HVMC. Moderno.

Kohana – Kohana es un proyecto bastante grande usado por muchos clientes en producción. Ayuda a crear aplicaciones PHP más rapida y efectivamente usando algunos objetos y classes predefinidos. Convención-sobre-configuración (como Ruby on Rails). Rige una estructura altamente organizada y implementa patrones de diseño bien establecidos en la ingeniería de software—Model View Controller(MVC).

Lithium – Lithium es un framework que promete. Al estilo de muchos proyectos de código libre collaborativos aunque tiene buenas ideas para el futuro parece que aun le queda implementar muchas de ellas. Ahora mismo dispone de algunas herramientas útiles para el desarrollo rápido. Sistema de cacheado. Y ademas se entiende muy bien con las bases de datos orientados-a-documentos como CouchDB o MongoDB al igual que con MySQL. Para el futuro tienen previsto el manejo de sesiones, localización y enrutamiento de URLs. Atrevido.

Mako Framework – Mako es encantador. Un framework minimalista, pero facilmente extensible, que te proporciona todo lo necesario para desarrollar tus aplicaciones rápidamente en PHP. Caching. Encriptación. Bases de datos. Sesiones. Logs. Etc.. Todo en uno.

Symfony – Symfony maduró y Symfony2 gira el enfoque incluso más hacia aplicaciones enterprise. Tomando muchos conceptos de Ruby on Rails busca proveer el control a través de unas convenciones (en lugar de muchas configraciones). Symfony viene provisto tambien de unas herramientas (de comando de linea) para hacer pruebas, depurar código y documentar tu aplcación web. Estilo Django / Ruby on Rails.

Yii Framework – Yii tiene muy buena fama. Es un framework PHP orientado-a-objetos que se basa en componentes. Dice ser el mejor framework el desarrollo de aplicaciones web 2.0 .. MVC. Puede hacer bases de datos (DAO/ActiveRecord). Caching. Localización de idiomas. Validación. Autenticación. Roles. Ademas viene con herramientas para agilizar el desarrollo y probar el código. PHP puro y duro.

Zend Framework – Zend es la solución corporativa. Destacan sus licencias corporativas amigables y su base de código. Zend la empresa que se encarga del lenguaje PHP disponen de documentación extensa, comunidad activa y extensiblilidad con modulos probados. Arquitectura flexible. Muchas extensiones como Zend Studio, Zend Server, etc… Enterprise.

¡Feliz 420!

teknomada — Fri, 20 Apr 2012 02:25:52 +0000

¡Una vez al año no hace daño! Y como verán por esta imagen hay razones para creer que esta planta es verdaderamente buena y útil para la humanidad.. como lo ha sido durante grandisima parte de la historia. Más información acerca del cannabis en Rincon del Kenke.

Visita: Rincon del Kenke (www.rincondelkenke.com)

10 Herramientas (Gratuitas) Online para Desarrolladores Web

teknomada — Wed, 18 Apr 2012 00:16:06 +0000

Se acerca el día en el que casi todas las aplicaciones se ejecutaran en el navegador. Ya tenemos editores de imagenes online (estilo PhotoShop), editores de flash, de documentos como Google Docs… aplicaciones web para todo! Reproductores de música, traductores, etc. etc… Hoy os voy a dejar con algunas de las aplicaciones online especialmente útiles para desarrolladores web. La mayoría de estas utilidades os ayudaran a crear código HTML5, CSS3 y JavaScript, aunque incluire también algunos otros que puedan servir.

HTML5/CSS3

CSS3 Generator – Generador de CSS3. Muy útil para bordes, sombras, transiciones y gradientes.
HTML5 Audio – Creador del elemento HTML5 con muchas opciones. Muy bueno!
Patternizer – Generador de patrones complejos en CSS .
Validator.nu – Validador de código HTML5. Muy bueno!

IMAGEN

Color Scheme Designer – Experimenta y diseña un buen esquema de colores con esta aplicación.
FavIcon – Generador de favicon.ico que permite subir archivos para convertirlos. *
Spritebox – Crea el CSS necesario para tus imagenes sprite.

UTILIDADES

jsFiddle – Prueba todo tu código en este IDE de HTML5 (HTML, CSS y JavaScript) en directo y en el navegador. Muy recomendado!
resizeMyBrowser – Prueba distintos resoluciones de monitor. Esta utilidad le abrira una nueva ventana al tamaño deseado.
Style Master – Tiene dos bookmarklets (XRAY & MRI) que puedes agregar al navegador, muy utiles para estudiar el código de la página que estas visitando. Parecido al Inspector de Elemento que traen los navegadores.

BONUS

Pixlr – Editor de imagenes online (estilo Photoshop).
net2ftp – Cliente FTP en el navegador.

Monta Tu Propia Nube Privada (con ownCloud)

Mora Zyx — Tue, 17 Apr 2012 06:35:03 +0000

Una de las tendencias hoy en las nuevas tecnologías es el de la computación en la nube. Muchas compañías se dedican a proveer a sus clientes de sistemas de cloud computing como son: DropBox, Google Docs, Amazon EC2 … son algunos de los más conocidos. Algo menos conocido es el sistema de código abeirto ownCloud, una solución sencilla para montar tu propia nube.

Yo diría que ownCloud es incluso más fácil de montar que WordPress, pues no es necesario configurar una base de datos MySQL para que funcione. Es parecido a WordPress en que es simplemente un programa PHP que puedes subir a tu servidor y usar.

Con ownCloud podras subir y editar archivos desde el navegador y/o sincronizarlo con tu ordenador personal usando WebDav. Algunas de las características destacadas de ownCloud son:

Editar Archivos de Texto y Código
Reproductor de Música
Compartir con Grupos y Otros Usuarios

Para instalarlo,

Visita www.owncloud.org y descarga la última versión …
Extraer los archivos. Subirlos al servidor …
Darle permisos de escritura al servidor para la carpeta data/ …
Empezar a disfrutar de tu propia nube privada.

Diseño “Responsive” con HTML5/CSS3 @media

teknomada — Sat, 14 Apr 2012 12:21:33 +0000

Los @media “queries” (o peticiones) en CSS estan consideros como algo dificiles, aunque resultan facil y muy útil para ciertas situaciones. Se usan ampliamente para darle a un página responsividad, que en términos de diseño web quiere decir hacer que una página se adapte a distintas navegadores en muy diversos dispositivos.

… que la experiencia sea mas personalizada …

Para usarlo creamos un estilo CSS como siempre y ponemos:

@media (max-width: 500px) {
  body { background: red; }
}

Aqui podemos hacer que el body tenga un fondo rojo si sucede que la anchura (max-width) sea menor de alguna cantidad – aqui 500px.

Podemos extender esto facilmente para darnos unos efectos simples pero inspiradoras …

@media (max-width: 500px) {
  body { background: red; }
}

@media (max-width: 700px) {
  body { background: yellow; }
}

Ahora veremos que el fondo va cambiando dependiendo de la anchura de nuestra ventana del navegador.

¿Para que sirve esto? Mayormente, es asi que se hacen interfazes dedicadas para dispositivos (como los comunes iPad, y tal …)