RSS Feeds

27.9.11

Antologías sobre diseño - Universidad de Londres

Por si hay algún interesado en aprender sobre diseño y comunicación en todas sus facetas, encontré una biblioteca de la Universidad de Londres con excelentes antologías sobre diseño http://bit.ly/6bzruB

Todas están en formato pdf y abarcan temas como animacion, teoría sobre diseño, metodologías para diseño multimedia en video, diseño de campañas publicitarias, embase y embalaje, diseño editorial, diseño tipográfico, fotografía en color y b/n, semiotica, señalética entre muchos otros temas, sinceramente se los recomiendo puede servirles como material de investigación para tesis o como para ampliar su bagaje cultural.

13.9.11

Sublime Text 2 + ZendCoding - Optimizando la escritura de código web

En la constante búsqueda de optimización para el desarrollo web me he topado con infinidad de herramientas, algunas muy útiles otras no tanto, algunas muy sencillas de utilizar otras demasiado complejas.

La edición de codigo y la estructuración semántica de este es indispensable para los que hacemos diseño y desarrollo web y utilizando herramientas como Sublime Text 2 y ZendCoding escribir código se vuelve cosa de niños.

Por ejemplo digamos que queremos hacer un menú con 5 elementos, generalmente tendríamos que escribir lo siguiente:


<ul id="menu">
<li class="menu-item">Inicio</li>
<li class="menu-item">Nosotros</li>
<li class="menu-item">Servicios</li>
<li class="menu-item">Portafolio</li>
<li class="menu-item">Contacto</li>
</ul>

Con ZendCoding solo tenemos que escribir la siguiente linea y obtendremos el mismo resultado:


ul#menu>li.menu-item*5 

Impresionante cierto?, lo interesante de esto es que Sublime Text 2 también trae por si solo un método de programación a través de snippets mediante comandos, por ejemplo: escribiendo un "comando" y presinando tab hacemos ejecutar el snippet y pegar el código relacionado a ese comando y así agilizar la escritura de nuestro código.

A continuación les comparto cómo instalar ZendCoding a SublimeText2 con lo que con una simple línea de código se ahorraran escribir 10 o más de una sola tajada, a eso llamo optimización del tiempo, sin más preámbulo les dejo la info:

1.- Despues de instalar SublimeText2 debes descargar el branch del proyecto ZenCoding en github, lo haces posicionando el cursor en la pestaña "get source" y das click a "zip" y comienza la descarga.
2.- Extrae el contenido y renombra la carpeta a ZendCoding
3.- En Sublime ve al menu Preferences / Browse Packages
4.- Arrastra la carpeta ZenCoding dentro de la carpeta Packages
5.- Reinicia el programa
6.- Abre un nuevo archivo y guardalo con la extensión que desees(PHP, HTML, Etc) ya que ZenCoding no funciona si no has guardado el documento.

7.- Una vez abierto el programa y guardado el documento utiliza Ctrl+Alt+Enter para abrir la linea de comandos donde escribirás el código Zen y observa la magia mientras escribes algo como ul#menu>li.menu-item*5

Para una lista más completa de los Atajos de teclado que puedes utilizar con Sublime y Zencoding puedes visitar el siguiente vínculo de donde transcribí la información al español, espero que les sirva, a mi, me funciona de maravilla.

Instalando CakePHP 1.3.11 sobre Windows 7 Con Xampp Server


Actualmente me encuentro en una etapa de cambios importantes en los cuales tengo que actualizar mis conocimientos sobre desarrollo web en php, ademas de que es un gusto personal que quiero darme independientemente de que en el trabajo lo necesite o no me decidí aventurarme a aprender a utilizar un framework y para comenzar decidí hacerlo con CakePHP, no voy a entrar en discuciones sobre si es el mejor o es el peor de los productos de desarrollo que rondan la red, pero como dicen "hay que comenzar por el principio" asi que me di a la tarea de recorrer la web para encontrar información acerca de cómo instalar Cake sobre Windows 7 y Xampp Server como tecnología de servidor, y a manera de tutorial les comparto los pasos que realicé para hacerlo.

1.- Descarga Cake PHP -> http://cakephp.org/
2.- Descarga Xaamp -> http://xampp.org
3.- Instala Xaamp
4.- Ejecuta Xampp y activa Apache y MySQL
6.- Descomprime el contenido del zip de "cake" donde tengas instalado xampp en mi caso en el directorio C:/xampp/htdocs/cake
7.- Crea una tabla con el nombre "caketest" en phpmyadmin (http://localhost/phpmyadmin)
8.- Ahora entramos en la carpeta de cake C:\xampp\htdocs\cake\app\config y aquí hacemos copia del archivo database.php.default y lo renombramos a database.php, lo abrimos y hacemos la conectividad con la base de datos, nos aparecerá la clase database_config de la siguiente manera

class DATABASE_CONFIG
{
var $default = array('driver' => 'mysql',
'connect' => 'mysql_connect',
'host' => 'localhost',
'login' => 'user',
'password' => 'password',
'database' => 'project_name',
'prefix' => '');

Lo cambiamos en modo local de la siguiente manera:

class DATABASE_CONFIG
{
var $default = array('driver' => 'mysql',
'connect' => 'mysql_connect',
'host' => 'localhost',
'login' => 'root',
'password' => '',
'database' => 'caketest',
'prefix' => '');

9.- Ahora nos vamos a la configuración de Apache C:\xampp\apache\conf\ y desmarcamos el comentario (#) en la siguiente linea del archivo httpd.conf (por lo general ya viene sin #)

#LoadModule rewrite_module modules/mod_rewrite.so

10.- Editar el archivo app/config/core.php que estara en tu ruta de instalación de CakePHP y buscar la linea: Configure::write('Security.salt', 'DYhG93b0qyJfIxfs2guVoUubWwvniR2G0FgaC9mi'); donde tiene por default una cadena de caracteres. Solo modificala agregando algunos caracteres o eliminando algunos de ellos el archivo Security.salt se encarga de hacer hash a los passwords (encriptar) a la hora de establecer seguridad a nuestras aplicaciones se tiene que modificar si no se quiere exponer la seguridad de nuestro trabajo pues la cadena es el que viene por defecto en cakePHP, una vez modificado no es recomendable volverlo a cambiar ya que causaría error en nuestras aplicaciones que hayamos creado y se relacionen pues siempre interviene este archivo.

11.- Hacemos lo mismo con la linea "cipherSeed", pero en este caso usamos sólo números aleatorios
    Configure::write('Security.cipherSeed', '16359506657458542996042684645');

12.- Probar que funcione dentro de la ruta del localhost: http://localhost/cake ahí, al principio, deben aparecer todos los mensajes en verde (ok)

13.- Ahora solo hay que modificar la variable de entorno "Path" de windows agregándole al final de la línea la ubicación de la consola de cake, la ubicacion de php.exe y mysql.exe separando las rutas por " ; " (ambos archivos están en la instalación de xampp) en mi caso yo uso la ruta siguiente:

C:\xampp\htdocs\cake\cake\console ; C:\xampp\php\C:\xampp\mysql\bin\

Esto sirve para poder utilizar la terminal o "linea de comandos" y ejecutar algunas líneas que utiliza cake a la hora de cocinar (bake) la aplicación o bien utilizar mysql desde ahí, personalmente me gusta hacerlo desde phpmyadmin en el aspecto de la base de datos, haz click en la imagen para verla mas grande:




Con esto queda listo todo para comenzar a desarrollar en Cake.

Los pasos son los que seguí personalmente para instalarlo y son un compilado de varios recursos en la red, y métodos personales, simplemente lo planteé desde una perspectiva de instalación desde cero:

Espero que les sirve tanto como a mi, trataré de ir documentando mi linea de aprendizaje para aquellos que quieran aprender de mis experiencias con este framework.

Fuentes:

http://dieguz2.blogspot.com/2010/03/cakephp-instalacion-en-publichtml-bajo.html
http://demoucron.wordpress.com/2007/08/21/instalando-cakephp/
http://www.youtube.com/watch?v=KmzOJfYEpyA

10.6.11

Personalizar icono de mapas en Google Maps

Les comparto este enlace en donde se muestra como modificar el ícono que sirve como apuntador que aparece por defecto en google maps.

http://code.google.com/intl/es-ES/apis/maps/articles/customicons.html#Materials

21.5.11

CSS 3 Generator, text shadow, box shadow y rounded corners

Despues de haber publicado otros posts en donde mencionaba generadores de bordes redondeados y sombras, sombras de caja (box shadow), y sombras de texto generadas con css3 les comparto esta herramienta online que no dista mucho de las otras pero la diferencia está en que trae todos integrados en un mismo sitio, bordes, sombra de texto, y box shadow, sin duda creo que servirá de mucho a la hora de trabajar un proyecto web tener a la mano este link.

http://css3gen.com/

a mi gusto solo le falto el de degradados crossbrowser pero bueno, creo que era mucho pedir.

20.5.11

CSS generador de degradados + crossbrowser

Les comparto este link para crear degradados con css, te genera el código css crossbrowser para que no tengas que romperte la cabeza implementandolo en internet explorer.

http://www.colorzilla.com/gradient-editor/

Saludos! :)

13.5.11

Ordenar dos o más veces una tabla mySQL

Cuando se trabajan con registros en una base de datos hay situaciones en las que se necesita ordenar varias veces los datos de una tabla para conseguir los resultados deseados, para logarlo lo unico que hay que hacer es lo siguiente:

mysql_query("SELECT * FROM portafolio ORDER BY ano DESC, cliente")

Con esto estamos ordenando los campos primero por año en orden descendente y despues se ordenan por el campo de cliente con lo que obtendríamos algo asi:

Año    |   Cliente
-----------------
2011   |  Armex
2011   |  Benso
2010   |  Card

Genial no?.

29.4.11

Acentos, eñes y saltos de línea PHP, jQuery, MySQL

Actualmente estoy trabajando con PHP MySQL y jQuery, en el proceso me encontré con algunos problemas con los acentos y eñes, despues de haberlos solucionado les comparto la información que encontre y que me funciono perfecto.


// Acentos //

-----------------------------------------

Situación 1:
Mediante un select dependiente se carga el texto de una consulta y al guardar ese texto en la DB se guarda con cadenas como (&#65533;) en los acentos y ñs

Problema:
Al mostrar esos datos en la página desde la DB el resultado viene con rombos <?> en los acentos y ñs

Solucion:
Antes de ejecutar la consulta que devolvera los resultados para ser guardados, poner en la cabecera del php donde se ejecuta la consulta

<?php header( 'Content-type: text/html; charset=iso-8859-1' );?>

Los resultados devueltos regresan codificados en iso-8859-1 (con acentos y ñs)
Al guardar esos resultados se guardan correctamente en la DB

-----------------------------------------

Situación 2:
Al enviar a la DB información tomada mediante .val() con jQuery los acentos y ñs se guardan con (ó , ú , ñ);

Problema:
En este caso no aparecen los rombos <?> sino que la cadena devuelta en la consulta se muestra con (ó , ú , ñ) reemplazando a las ñs y acentos tal y como se guardó.

Solución:
Antes de guardar la cadena en la DB:

En la cabecera del archivo (En la primera linea de tu archivo) establece el juego de caracteres:

<?php header( 'Content-type: text/html; charset=iso-8859-1' );?>

Y despues antes de guardar la cadena en la DB decodificala como sigue:

$mi_nuevo_texto = utf8_decode( $cadena_de_texto );


En donde $mi_nuevo_texto será la cadena que se guardara en la DB.

El resultado es que se guarda bien en la DB y se muestra bien en la página.

-----------------------------------------

Nota:

*Requisito todos tus juegos de caracteres en tus html o php que envíen la información a la DB deben ser de tipo: charset=iso-8859-1

-----------------------------------------


// Guardar saltos de linea <br /> de un textarea a la DB //

Situación:
Se redacta un texto con saltos de linea (enters) en un textarea, se guarda en la DB.

Problema:
Al leer ese texto no se interpretan los saltos de linea que se crearon al momento de redactarlo.

Solución:
antes de mostrar el texto en la página con echo o print utilizar:

nl2br($cadena_de_texto);

Con esto se interpretarán los saltos de línea que se hayan guardado en la DB.

-----------------------------------------

Espero que les sirva a mi me funcionó perfecto.

11.4.11

Obtener valor de un campo cualquiera con jQuery

Que tal amigos, después de un largo tiempo sin tocar el blog les comento que estos meses han sido excelentes he aprendido muchas cosas y he tenido muchas gratas experiencias y participado en grandes proyectos como pikhub donde estuve trabajando como UI developer en su etapa inicial, esto me dió la oportunidad de poder continuar documentándome más sobre jQuery y ahora estoy trabajando en un proyecto en la oficina en el que necesito aplicarlo mas que nunca en base de datos.

El problema aquí era obtener el valor de un campo INPUT dinámico para luego guardar los cambios en la base de datos a lo que encontré dos soluciones:

la primera utilizando:
$("#txt_nombre"+cual).get(0).value;

y la segunda mas corta:
$("#txt_nombre"+cual).val();

En donde "cual" es la variable que se pasa a través de una funcion, con esto podemos obtener el valor de los campos de texto y posteriormente enviarlos a la base de datos.

Espero que les sirva.