RSS Feeds

20.5.12

foreach devuelve error “Cannot access empty property”

Trabajando en una aplicación me pasé un par de horas resolviendo un error que me devolvía "Cannot access empty property" cuando ejecutaba un bucle foreach para recorrer un array, la solución era tan sencilla pero después, de no dormir un par de días y de demasiadas líneas de código escritas no se hacía tan evidente el error.

Lo malo: 
foreach ($array as $key -> $value)
Esto está mal porque estaríamos llamando al metodo value de alguna clase, ademas de que en las llamadas a métodos no se usa $ antes de su nombre, en una llamada a un método lo correcto sería $key->value(parámetros) el nómbre del método sin el signo de dollar antes, pero no olvidemos que de lo que estamos hablando en este post es de un array, así que continuemos.

Solución: 
reemplaza -> en lugar de => en tu bucle.

Resultado:

foreach ($array as $key => $value)
Con esto ya se recorre bien el array

Saludos.

25.4.12

Lo que un buen Diseño y Desarrollo Web debe tener.

En el camino como desarrollador Web muchas veces nos encontramos con métodos y herramientas que nos son indispensables para nuestro flujo de trabajo diario, hablemos de snippets o de plugins jQuery y PHP (es el lenguaje con el que trabajo) sin los cuales la tarea de hacer web en la actualidad sería completamente tediosa.

En este post quiero compartir de manera antológica algunas de las herramientas y características "ideales" que mediante el uso de herramientas como Wordpress, Silverstripe y programación PHP puro y duro en la oficina he encontrado que sería interesante conjugar en algún proyecto, es algo así, como ensamblar una computadora con las mejores caracteristicas.

Estos son los parametros que, al menos para mi conformarían un buen esquema de trabajo y que proporcionarían velocidad al tiempo de desarrollo, sin más preámbulo, comencemos:


Herramientas para el front-end (Vista de Usuario):
  • Skeleton Framework (Grid de maquetación con Responsive Web Design).
  • 960.gs + Adapt.js (Grid para maquetación + Javascript para convertir tu diseño en Responsive Web Design).
  • Flexslider (slideshow de imagenes responsive).
  • Plantilla basada en HTML5
  • jQuery para conexiones AJAX
  • Plugin jQuery para alertas
  • Plugin jQuery para validar formularios
  • Utilizar un framework CSS (vease herramientas como LESS)
Características del CMS
No sugeriré ningun framework específico ya que eso es cuestión de gustos de cada quien.

  • Slugger automático para categorías (ej. Crear "la-rica-pina" a partir de "La rica piña").
  • Multiple file uploader
  • Al eliminar un archivo o imagen eliminarlo del servidor no solo de la Base de datos.
  • Renombrar archivos al subirlos quitando espacios, acentos y caracteres que puedan causar error en el nombre del archivo al querer utilizarlo, además de asignar el ID de la fila como prefijo para evitar duplicados o sobreescribir el archivo (ej. 01-lafoto.jpg) donde 01 es el ID de la fila.
  • Clase en PHP para redimensionar imagenes al subirlas (autogenerar thumbnails y originales)
  • Clase en PHP para colorear y añadir algunos efectos a la imagen al subirla (grayscale, blur, sepia, etc.)
  • Debe ser capáz de reordenar una lista (proyectos, categorías, etc) mediante drag&drop y guardar el orden en la base de datos.
  • En el caso de subir una galería de un proyecto poder seleccionar la que servirá como Cover o portada (Utilizando AJAX).
  • WYSIWYG con características muy básicas (ej. crear listas UL, negritas, y url link), recordemos que el estilo se define por el diseñador en el front-end.
Ustedes que agregarían o quitarían a esta lista?

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