Symfony se basa en el patrón MVC (Modelo Vista Controlador). La estructura lógica de nuestros proyectos se divide en Aplicaciones > Clases > Módulos, donde la Aplicación seria nuestro proyecto, las clases los tipos de funcionalidades de las que consta nuestra aplicación (gestión de usuarios, gestión de noticias, gestión de comentarios, etc.) y los módulos, que es donde se detalla cómo hacer cada funcionalidad de la clase a la que están asignados (alta, borrado y edición de usuarios, etc.).

Como cualquier framework, al principio cuesta conocer la sintaxis y la metodología para programar las operaciones, pero como todo es cuestión de práctica y experiencia, poco a poco se van adquiriendo los conocimientos suficientes como para poder realizar nuestros proyectos con soltura y lo más importante: con rapidez.

Si has decidido utilizar Symfony para tu proyecto web, habrás llegado a otra cuestión ¿qué programa o IDE utilizo?. Yo he elegido NetBeans 6.9 (la última versión hasta la fecha). NetBeans, además de ser opensource y totalmente gratuito, en su última versión nos ofrece un asistente para crear un proyecto PHP utilizando el Symfony e incluso tenemos a nuestra disposición una consola UNIX para configurarlo.

Configurar proyecto Symfony en NetBeans 6.9

1. En primer lugar debemos tener un LAMP instalado en nuestro equipo.Yo utilizo XAMPP en Windows y MAMP en MAC OS X.
2. Descargamos la última versión estable de Symfony desde su web.
3. Descomprimimos el fichero descargado en el directorio de nuestra web. Debería quedar algo así.
   

   C:\dev\MiProyecto\symfony-1.4.6

4. Abrimos NetBeans y creamos un nuevo proyecto PHP. Seguimos todos los pasos hasta el último, PHP Frameworks, donde seleccionaremos Symfony. Al seleccionarlo nos aparecerán varias opciones de configuración. Tendremos que pulsar sobre Options, a la derecha de la ventana.



5. Se nos abrirá el panel de configuración de PHP. En la pestaña de PHP indicaremos la ruta donde se encuentra el ejecutable de PHP del LAMP que hayamos instalado:
   

   C:\Archivos de programa\Xampp\xampp\php\php.exe

   Además, tendremos que indicar la ruta de instalación de Symfony pulsando el botón Add Folder, que será la carpeta que hemos descomprimido en el directorio de nuestro proyecto

   C:\dev\MiProyecto\symfony-1.4.6



6. En la pestaña Symfony tendremos que indicar la ruta del fichero binario del framework que se encuentra en:
   

   C:\dev\MiProyecto\symfony-1.4.6\data\bin\symfony



7. Le damos a Aceptar y antes de pulsarle en Terminar seleccionamos el checkbox de backend.



8. Ya tendremos configurado e instalado nuestro proyecto de Symfony en NetBeans.
   

Fuente | The n4gash Blog - Blog de diseño, programacion e internet

Cómo configurar un proyecto en Symfony con Netbeans 6.9

Además de un bonito efecto visual, esta propiedad nos permite incluir más texto en la página web, evitando así tener que recurrir a Photoshop para editar las imágenes necesarias. Con esto logramos incluir más texto en la página y así disponer de más lugares donde incluir keywords para mejorar el posicionamiento web.

El problema de esta propiedad es que algunos navegadores no la soportan. Sólamente las últimas versiones son capaces de reconocerla. Sin embargo, existen varias alternativas cross-browsing para simular el text-shadow en navegadores antiguos. La propiedad text-shadow es soportada por Firefox 3.5+, Chrome, Internet Explorer 7+, Opera 9.5 y Safari 3+.

La sintaxis de esta propiedad es la siguiente:

text-shadow: color ejeX ejeY RadioSombra;

Ejemplo:

p.shadow {
color: #333333;
text-shadow: #1486D6 1px 1px 2px;
}

Prueba de texto con fondo difuminado

Podemos poner varias sombras a un mismo texto separadas por comas. En Firefox 3.5+ se pueden poner infinidad de ellas, en Opera están limitadas y en Safari sólo se puede poner una.

p.shadow {
color: #333333;
text-shadow: #1486D6 3px 3px 15px, red -3px -3px 15px;
}

Prueba de texto con fondo difuminado con dos colores

La alternativa para Internet Explorer 7+ no ofrece el mismo efecto, pero es lo único que hay por el momento. Desde mi punto de vista, lo mejor es no utilizar este efecto en IE, simplemente ponemos el texto en negrita u otro color.

p.shadow {
display:block;
with: 100%;
filter: dropshadow(color=#FFFFFF,offX=1,offY=1);
}

Prueba de texto con fondo difuminado sólo para Internet Explorer 7+

Fuente | The n4gash Blog - Blog de diseño, programacion e internet

Texto con sombra en tu web con CSS: text-shadow

El mes pasado Mozilla lanzó Open Web Tools Directory, un directorio de herramientas y aplicaciones gratuitas para desarrolladores web. El objetivo del directorio es recopilar en un único lugar todas las herramientas disponibles en la red para facilitar el acceso a éstas. Si bien empezaron con un par de herramientas y aplicaciones, poco a poco han ido aumentando su número gracias a la participación de los usuarios, que pueden enviar sus proyectos a través de un formulario.

La presentación de las herramientas es muy creativa. A través de un entorno espacial, podremos ver los logos o screens de las tools disponibles. Al pinchar en cada imagen aparecerá una ventanita con información y un enlace a la página web del proyecto. Si bien es original, hay que decir que si hay muchos logos o screens, éstos se superponen y la navegación se hace bastante complicada e incluso algunas herramientas quedan sepultadas por otras. El entorno de navegación está desarrollado en HTML5, por lo que es necesario utilizar navegadores avanzados. De todos modos, hay disponible una versión en HTML básico para que cualquier usuario pueda acceder al contenido.

Las herramientas y aplicaciones están dividas en categorías: diseño, código, pruebas, despliegue y documentos. Al acceder a cada una, los logos se reordenan y aparecen en varias filas, facilitando su visualización. También disponemos de un buscador para acceder directamente al contenido que nos interesa. Entre las herramientas y aplicaciones que podemos encontrar, destacan frameworks como jQuery, Prototype o Dojo, el famoso debugger de firefox FireBug, y muchísimas otras herramientas o aplicaciones que son menos conocidas y que gracias a este portal, pueden darse a conocer.

Más información | http://tools.mozilla.com/index.html

Fuente | The n4gash Blog - Blog de diseño, programacion e internet

Open Web Tools Directory, recopilación de herramientas de desarrollo web

La nueva versión de HTML (HTML5) es un paso más en pro de la web semántica. El nuevo HTML5 (“Hypertext Markup Language”) incorpora nuevas etiquetas para estructurar y especificar el contenido de las páginas web. Si bien se mantienen los tags clásicos, los nuevos nos permitirán indicar notas (aside), conversaciones entre personas (dialog), ficheros de audio o video, detalles (details), etc.

La gente de Smashing Magazine ha publicado recientemente una tabla de referencia rápida (Cheat Sheet) de HTML5 para consultar de forma más sencilla las nuevas etiquetas.

Más info | http://www.smashingmagazine.com/html-5-cheat-sheet-pdf

Fuente | The n4gash Blog - Blog de diseño, programacion e internet

Hoja de Referencia rápida de HTML5

Los próximos días 2,3 y 4 de Octubre se celebrará en el IFEMA de Madrid la III Edición del Congreso de Webmasters 2009. En la última edición se alcanzaron más de 3000 visitantes, convirtiéndose así en uno de los eventos más importantes del sector en nuestro país.

La tercera edición del congreso buscará la participación activa de los asistentes, por ello, además de numerosas ponencias y talleres, éstos podrán consultar sus dudas y exponer sus casos a los expertos que asistirán al evento. La programación del congreso tratará temas variados relacionados con el desarrollo web, seguridad y legislación en internet, el comercio electrónico y el marketing en internet (posicionamiento web). Para ello, participaran numerosos ponentes y habrá talleres y charlas prácticas con casos reales (ver programa completo del III Congreso de Webmasters 2009)

Si deseas asistir puedes realizar ya tu inscripción a través de la página del congreso abonando los 60€ de inscripción. Yo estoy planteandome seriamente en asistir. Nunca he ido a ningún evento de este tipo y la verdad es que me resulta muy interesante, ¿y tú? ¿vas a asistir al congreso de webmasters 2009?

Más info | http://blog.congresodewebmasters.com

Fuente | The n4gash Blog - Blog de diseño, programacion e internet

III Edición del Congreso de Webmasters 2009

Hoy he entrado al Tuenti y para mi sorpresa, o consternación (sí, estoy enganchado a la tuentimania ;P), el servicio está de mantenimiento. Como había un enlace al blog de la red social, he entrado a cotillear un poco. Entre los diversos artículos, comentarios y entradas de branding, he visto una pequeña creatividad ofertando un puesto de trabajo en Tuenti. Como curiosidad, he hecho clíck y me he puesto a mirar unas cuantas fotos que tienen de sus oficinas y puedo decir que poco o nada tienen que envidiar de las de Google: salas de reuniones con sofas y sillones, puestos de trabajo espaciosos y bien iluminados, salas comunes dotadas de fanásticos sofás para tomar un KitKat, etc. Al grano. Entre los diversos puestos que desean cubrir, el único interesante es uno de Usabilidad y Diseño Web. Entre los requerimientos que exigen, hay uno que utiliza un tecnicismo, que si bien nunca había visto u oído, es fácilmente deducible: cross-browsing. Por asi acaso, he entrado en la Wikipedia a ver qué significaba y como me imagino que no seré el único en desconocer esta palabreja de la jerga de los desarrolladores web, os comeno qué significa.

La etimología de la palabra compuesta nos lleva a pensar en los navegadores web (browsing) y una posible relación entre ellos (cross), que desde mi punto de vista o interpretativo, lleva a pensar a un recorrido que abarque a todos ellos.

Según la Wiki, cross-browsing es la habilidad de un desarrollador web de escribir un código que sea compatible con todos los navegadores y se muestre de forma correcta en cualquiera de ellos, sin importar la versión, ni el navegador. Nació en la década de los 90, durante las guerras de los navegadores (Browser Wars), donde se batieron duramente Internet Explorer y Netscape. Durante este tiempo ambos navegadores añadieron nuevas funcionalidades sin coordinarse entre ellos. Como resultado, muchas funcionalidades que eran soportadas por ambos tenían distintas formas de desarrollarse e interpretarse, provocando que los desarrolladores web tuviesen que aprenderse a escribir el código de dos formas distintas para obtener el mismo resultado.

Otro concepto similar es el multi-browsing. Su significado es similar, con la diferencia de que este tecnicismo sólamente implica que cualquier código debería funcionar en varios navegadores, mientras que cross-browsing implica a todos los navegadores y a todas sus versiones.

Por código se entiende, sobre todo, scripts de lado del cliente (client-side script), como JavaScript, aunque también habría cabida a multitud de clases CSS que Microsoft se ha venido sacando de la manga desde tiempos inmemoriables y que sólamente, por inspiración divina, usa Internet Explorer.

Si bien a día de hoy la mayoría de navegadores cumplen los estándares del W3C, Internet Explorer continúa teniendo sus pequeños detalles que lo hacen diferente del resto de navegadores del mercado y continúa fastidiándonos a los webmasters. Así que ya sabes, si eres capaz de desarrollar páginas web, hojas de estilo, scripts o cualquier código, que sea compatible con todos los navegadores (sin importar nombre o versión), puedes incluir en tu CV una bonita palabra que le dará un toque más cool y más técnico.

Fuente | The n4gash Blog - Blog de diseño, programacion e internet

Cross-browsing y la guerra de navegadores

Los estilos CSS que asignemos al diseño de nuestra página web podrán verse afectados por el navegador que utilicen nuestros usuarios y la versión de éste. La familia de Internet Explorer viene arrastrando multitud de incompatibilidades con muchos estándares web, por lo que es necesario aplicar varios estilos a un mismo elemento para que, dependiendo del navegador, el diseño se muestre de forma correcta.

Ie6Fixer es una herramienta diseñada para debuggear de forma rápida y sencilla nuestras hojas de estilo CSS para que funcionen correctamente en Internet Explorer 6. La herramienta todavía está en fase de pruebas, por lo que es posible que puedan generarse errores o que el proceso no se haga de forma correcta; además, el código que nos devuelve no estará formateado, ni indentado, por lo que nos tocará retocarlo si queremos que tenga un aspecto más “visual”.

El funcionamiento es sencillo, pegamos nuestro código CSS en el textarea y seleccionamos las opciones que deseemos que sean aplicadas en la conversión de la CSS. El código que nos devuelve el sistema incluirá diversos hacks allí donde sea necesario especificar el tipo y versión del navegador.

Más info | http://www.onderhond.com/tools/ie6fixer/
Fuente | http://www.anieto2k.com/ie6fixer-aplicacion-hacks-css

Fuente | The n4gash Blog - Blog de diseño, programacion e internet

Ie6fixer, adapta tu CSS a Internet Explorer 6 mediante hacks

Más info | http://www.maestrosdelweb.com

Fuente | The n4gash Blog - Blog de diseño, programacion e internet

Recursos para mejorar la Accesibilidad web de nuestra página o blog

Cuando escribimos un código fuente en una página, nuestra intención es mostrar todos los elementos que lo forman para que pueda ser comprendido correctamente. Por ello, una solución podría ser traducir a HTML aquellos caracteres que puedan ser malinterpredados por ser equivalentes o formar parte de elementos clave de un determinado lenguaje de programación orientado a páginas web. Por ejemplo, en vez de escribir la etiqueta <body>, podríamos traducir los corchetes a HTML, de tal forma que el resultado sería &lt; body &gt; y el código aparecería sin ser interpretado.

Sin embargo, tenemos a nuestra disposición una herramienta gratuita que además de permitirnos escribir código fuente sin necesidad de traducir ningún caracter, nos lo mostrará de una forma profesional, indicando el número de cada línea y cambiando los colores de los elementos según su función dentro del lenguaje de programación en el que esté escrito.

	»

Syntax Highlighter es un proyecto OpenSource de Google Code que nos permite publicar un código fuente de forma sencilla, con un aspecto similar al de cualquier aplicación de desarrollo y cambiando los colores de aquellos elementos clave (funciones, tipos de variables, etc.), para ello, disponemos de librerias Javascript para los distintos tipos de lenguajes de programación (php, asp, javascript, java, c, c++, c-sharp, etc.). Y lo mejor de todo es que cada librería tan sólo ocupa 4kb, por lo que apenas se notará en la carga de la página.

Para poder instalarlo en nuestra página web debemos bajar un paquete con varios ficheros javascript, css y swf. Lo ideal es estructurarlo en tres carpetas, y en cada una de ellas guardar los ficheros correspondientes.

Una vez lo hemos subido a nuestra web, tenemos que añadir en la cabecera de la página el siguiente código:

Si el código que vamos a escribir no es de C-Sharp, entonces tendremos que importar la librería correspondiente: shBrushJScript.js, shBrushPhp.js, etc.

Para que nuestro código aparezca correctamente, tendremos que meterlo entre la etiqueta <pre></pre>. Esta etiqueta HTML permite que cualquier texto escrito dentro de ella aparezca con los espacios en blanco que tenga y no se compacten en uno solo. De esta forma, podemos escribir texto tabulado a base de espacios. Además, tendremos que asignar un name="code" y un class a dicha etiqueta. El class dependerá del lenguaje que vayamos a mostrar, ya que establece la relación con la librería javascript correspondiente. Por ello, es importante que no olvidemos importarla. Por ejemplo, si el código es PHP, el class será class="php". Para el resto de lenguajes tenemos las indicaciones en la web del proyecto.

<pre name="code " class="c-sharp">
      ... aquí el código ...
</pre>

El trozo de código podremos copiarlo al portapapeles, abrirlo en una ventana nueva o incluso imprimirlo a través de varios botones situados en la parte superior.

Más info | http://code.google.com/p/syntaxhighlighter/

Fuente | The n4gash Blog - Blog de diseño, programacion e internet

Syntax Highlighter, presentación de código fuente en tu página web o blog

Acabo de recibir un e-mail desde www.desarrolloweb.com desde el que me invitan a participar en un seminario online de PHP totalmente gratuito que se celebrará el próximo 16 de Septiembre. Os copio lo más interesante de al descripción del seminario y un enlace para apuntaros si estáis interesados.

Un evento “On-Line”, de 1 día de duración, nunca antes realizado en Internet, pensado para que los profesionales del diseño y la programación de páginas web, descubran toda las posibilidades de PHP. Un lenguaje de programación que en pocos años, se ha convertido en el más utilizado para el desarrollo de contenidos interactivos y páginas dinámicas en Internet.

Además, los asistentes en esta presentación, podrán disfrutar de información privilegiada probablemente desconocida por el 99,9999% de los webmasters:

Se hablará en detalle, sobre las posibilidades REALES a nivel de trabajo a las que podemos tener acceso siendo desarrolladores de páginas web. Información que sin duda aumentará considerablemente las oportunidades laborales de las personas que asistan a este evento.

Más información en http://www.dominaphp.com/registro/

Fuente | The n4gash Blog - Blog de diseño, programacion e internet

Seminario de PHP on-line totalmente gratuito el 16 de Septiembre