ChristianMania

Jueves, septiembre 2nd, 2010 - CSS, SEO, javascript, php

Después de haber leído el Manual de compresión con GZIP de un sitio web ya debemos tener una idea sobre las ventajas de comprimir las páginas y otros recursos antes de enviarlos al navegador. Además, hemos conocido ya diversos métodos de fácil configuración para conseguir esa compresión GZIP en las páginas PHP y otros archivos externos como JS o CSS.

En este artículo vamos a continuar explorando posibilidades de configuración de nuestro servidor web Apache, también por medio de un archivo .htaccess, que es la manera más sencilla y al alcance de un mayor número de personas. En concreto vamos a mostrar cómo definir en una sola instrucción que se compriman todos los archivos menos las imágenes.

Quizás alguno de vosotros se pregunte ¿Por qué no comprimimos las imágenes? Y es que realmente, como ya habíamos señalado en este manual, las imágenes ya están comprimidas, puesto que los archivos gráficos utilizados en web tienen todos un nivel de compresión. Por lo tanto, comprimir un GIF con GZIP no tendrá prácticamente mejora alguna, pues el peso del archivo comprimido será prácticamente el mismo que el GIF original. Además, representará un esfuerzo para el procesador del servidor web, que tendrá que comprimir esos archivos antes de enviarlos al cliente. Al final, el rendimiento del servidor puede verse reducido, por tener que comprimir todas las imágenes, y realmente no habremos adelantado en nada, puesto que las imágenes ocuparán casi el mismo espacio en KB. Esto ocurre con cualquier tipo de archivo gráfico, no sólo con los GIF, sino con otros utilizados para hacer webs, como JPG o PNG.

Instrucción htaccess para comprimir un tipo de medio

Existe un comando que se inserta en el código de los htaccess que sirve para definir la compresión GZIP / DEFLATE. El comando se llama AddOutputFilterByType y tenemos que indicarle luego el tipo de compresión y el tipo de medio que deseamos comprimir.
Por ejemplo, con esta línea de código comprimiríamos todos los archivos de texto plano:

AddOutputFilterByType DEFLATE text/plain

Si deseamos, podemos comprimir todos los archivos HTML con esta línea de código en el htaccess.

AddOutputFilterByType DEFLATE text/html

A continuación podemos ver una serie de líneas con distintos tipos de medios que se están indicando para comprimir:

AddOutputFilterByType DEFLATE text/xml
AddOutputFilterByType DEFLATE text/css
AddOutputFilterByType DEFLATE application/javascript
AddOutputFilterByType DEFLATE application/x-javascript
AddOutputFilterByType DEFLATE application/xml
AddOutputFilterByType DEFLATE application/xhtml+xml
AddOutputFilterByType DEFLATE application/rss+xml

Con este método, Apache será lo suficientemente inteligente para enviar los archivos comprimidos sólo para los navegadores que soportan esa optimización y nosotros no tenemos que hacer nada para que todo funcione correctamente.

De entre los dos métodos GZIP / DEFLATE podemos elegir cualquiera de ellos. Deflate es bastante rápido y compatible con más versiones de navegadores antiguos.

continue reading

Jueves, septiembre 2nd, 2010 - CSS, SEO, javascript, php

Estamos haciendo un Manual sobre las ventajas y métodos para comprimir con GZIP / Deflate los archivos de una web. Hasta ahora hemos conocido las ventajas de comprimir los archivos y un primer método para comprimir el código de las páginas PHP enviado al navegador. Sin embargo, la idea de la compresión debemos extenderla también a otros archivos de texto y no sólo al código HTML de las páginas web y cuando me refiero a archivos de texto, no sólo estoy hablando de los .txt, sino cualquier código del sitio web que está basado en texto, que se envíe al navegador para interpretar y renderizar la página.

El código de la página, como sabemos, está compuesto por varios elementos, como el propio HTML del documento, imágenes, hojas de estilo, archivos Javascript, etc. Las imágenes en realidad ya está comprimidas, puesto que los formatos usados en páginas web, como GIF, JPG o PNG, ya tienen la compresión del propio formato gráfico. No obstante, ficheros como las hojas de estilos (extensión .css) o los códigos Javascript (normalmente con extensión .js) se crean como archivos de texto plano, que no tiene ninguna compresión. Por ello, son ideales para enviarse comprimidos al navegador.

Para que esto quede bien claro, pensemos en el código de CSS de este mismo sitio, DesarrolloWeb.com. En el momento de escribir este artículo tenemos un archivo de CSS que ocupa 33.4 KB. Pero ese archivo se envía comprimido con GZIP, por lo que realmente lo que se está enviando al navegador es un archivo con 7.2 KB. La diferencia es, cuando menos, relevante. Lo cierto es que el CSS se transfiere una vez, en la primera visita del usuario, pero luego en páginas siguientes que pueda ver, o en visitas sucesivas, ese CSS se toma desde la Caché del navegador, así que ese ahorro de transferencia por enviar el archivo comprimido sólo se nota en la primera página que el usuario visita, pero aun así ayudará a reducir considerablemente la primera carga y por tanto será positivo.

Los archivos Javascript también se pueden comprimir para obtener ventajas similares, igual que los CSS podemos hacer que pesen entre un 60% y un 90% menos que los archivos no comprimidos. Sobre todo, pensando que los sitios más modernos utilizan bastante código Javascript, para hacer lo que se llaman aplicaciones enriquecidas en el cliente, la compresión con GZIP será fundamental para una rápida carga del sitio.

Por ejemplo, en DesarrolloWeb.com utilizamos el framework Javascript Mootools y también unas librerías relacionadas llamadas Mootools More para generar interfaces de usuario avanzadas. Pero además utilizamos una buena cantidad de scripts Javascript creados por nosotros mismos y basados en ese framework para animar y aportar dinamismo al web. Si sumamos todos los Javascript que utilizamos en una página básica del sitio tendremos unos ahorros de transferencia considerables, como se puede ver en la siguiente tabla:

Como se puede ver, el ahorro total que obtenemos en estos tres archivos es de aproximadamente 80 KB y además no son los únicos ficheros .js que utilizamos en el sitio web, con lo que el ahorro en algunas páginas todavía es mayor.

Si utilizamos cualquier otro framework Javascript, como el popular jQuery, el ahorro también será tan representativo como con Mootools. Por ejemplo, en la página de inicio de jQuery nos informan que el framework pesa 24KB “Minified and Gzipped”, pero si nosotros lo descargamos veremos que el archivo realmente ocupa 70.5KB. Lo que nos quieren decir es que, si tenemos configurado nuestro servidor para que comprima los archivos con GZIP antes de enviarlos al cliente, el peso real del archivo de jQuery que se enviará al cliente es de 24 KB, osea, casi un 33% del peso del fichero original (sin comprimir).

Configurar un htaccess para comprimir archivos CSS / JS o similares

Ahora que ya sabemos bien las ventajas de enviar comprimidos los archivos de código fuente del sitio web, veamos cómo hacerlo en Apache. La manera más cómoda y al alcance de más personas, para comprimir los archivos JS o CSS es definir un archivo htaccess con las directrices de configuración de nuestro servidor.

En el archivo .htaccess, que contiene texto de configuración para Apache, vamos a colocar varias líneas de código para solicitar a Apache que envíe comprimidos los archivos de extensiones que nosotros deseemos.

Por ejemplo, con el siguiente código estamos diciendo que se envíe comprimidos todos los archivos que tengan extensiones .css (todas las hojas de estilos de nuestro sitio web):

SetOutputFilter DEFLATE

Observar el *.css para indicar los tipos de archivos a enviar comprimidos. Observar también que se está solicitando el uso del método DEFLATE para la compresión de los archivos.

De una manera similar podemos definir la compresión de los archivos con código fuente Javascript, que tienen extensiones .js:

SetOutputFilter DEFLATE

De este modo, podemos definir cualquier extensión de archivo y Apache se encargará de enviarlo comprimido de manera transparente para nosotros desarrolladores y también para los visitantes. Es decir, el archivo está comprimido sin que tengamos que hacer nada más en la etapa de desarrollo y por tanto al navegador se le enviará con un peso menor. El cliente web recibirá ese archivo comprimido y lo descomprimirá internamente, sin que el visitante se entere de nada.

continue reading

Jueves, septiembre 2nd, 2010 - CSS, SEO, javascript, php

La compresión por GZIP o Deflate es una buena técnica para liberar de peso, en KB, a las páginas web. No resulta nada complicada si sabemos cómo configurarla y las ventajas son muy representativas. En los anteriores artículos del Manual de Optimización con GZIP ya hemos explicado bien en qué consiste y cuáles son las ventajas de utilizar estos métodos de compresión.
Depende de nosotros, o de la configuración de nuestro servidor web, que se envíen o no los archivos comprimidos a los clientes que lo solicitan, así que un primer paso para cualquier persona interesada en optimizar su web sería comprobar si las páginas de su sitio web se están enviando comprimidas .

En este artículo veremos una de las primeras configuraciones que podemos hacer con suma facilidad y en minutos sobre nuestro sitio web, para que las páginas PHP de nuestro sitio se envíen comprimidas. Se trata de la edición del archivo .htaccess para configurar Apache y hacer que los archivos PHP se compriman con GZIP antes de enviarse al cliente.

Código htaccess para comprimir las páginas PHP

Ahora veamos un sencillo código fuente que podemos utilizar para configurar Apache, de modo que los archivos PHP se envíen comprimidos. Es decir, que el código HTML de la página, generado después del procesamiento de los scripts PHP, se comprima en línea antes de enviarse al cliente que lo solicitó.
Esto se coloca en un archivo htaccess en nuestro servidor, osea, un fichero de texto llamado “.htaccess”, donde colocamos el código necesario para configurar Apache.

Como los .htaccess sirven para configurar un directorio y todos los subdirectorios de aquel donde hemos colocado el archivo, el código siguiente lo pondremos en un archivo .htaccess que tendremos en la home del dominio (directorio raíz de publicación de nuestro sitio web), de modo que afecte al directorio principal del dominio y todos los subdirectorios que cuelguen de él.

php_flag zlib.output_compression On
php_value zlib.output_compression_level 2

La primera línea le indica que se tiene que activar la compresión GZIP para los archivos PHP. La segunda línea indica el nivel de compresión del archivo (cuanto mayor sea el nivel, de 1 al 10) mayor será la compresión, pero también requerirá más tiempo de procesamiento el comprimir los archivos antes de enviarlos. Con una compresión a nivel 2 ya se comprime bastante y requiere menos tiempo de proceso que una compresión a nivel superior.

En siguientes artículos aprenderemos a comprimir no sólo las Páginas PHP enviadas por Apache, sino también otros tipos de archivo susceptibles de ser comprimidos. Puedes continuar la lectura a partir del artículo donde explicamos cómo comprimir archivos JS, CSS y demás.

continue reading

Jueves, septiembre 2nd, 2010 - SEO, javascript, php

En el anterior artículo mostramos algunos detalles interesantes sobre la compresión GZIP, sobre cómo funciona y cuáles son las ventajas de este modo de optimización de las páginas web. Ahora vamos a continuar con la segunda entrega del Manual de Compresión GZIP, explicando cómo funciona en la práctica este sistema.

Para poder entender la compresión por GZIP, u otros métodos de comprimir como Deflate, tenemos que conocer un poco sobre las comunicaciones por HTTP, que es el protocolo que se utiliza para el acceso al web. Como sabemos, toda comunicación entre el cliente y servidor web responde a un mismo esquema, que es justamente ese protocolo, o modo de operar, definido para las comunicaciones entre clientes y servidores web.

De una manera muy esquemática, estos son los pasos que se realizan en una comunicación HTTP entre el servidor web y el navegador:

El cliente web (navegador) solicita una página
El servidor recibe la comunicación, comprueba si existe el archivo solicitado
El servidor envía el archivo
El cliente lo muestra

Para implementar este protocolo, en la práctica, los sistemas cliente y servidor se envían diversas informaciones de control, en las cabeceras HTTP de la solicitud y la respuesta. En las cabeceras del HTTP, tanto en la solicitud como en la respuesta, se aloja mucha información para control y especificación de las comunicaciones, aunque en realidad ahora sólo nos interesan los datos enviados para definir si hay o no compresión.

Cuando el cliente web solicita una página, en el paso 1), envía en las cabeceras del HTTP un código de control para decir si acepta o no envío de los archivos comprimidos y qué formatos permite.

En concreto el cliente que solicitó la página enviará una variable llamada “accept-encoding” que tendrá como valor los formatos de compresión que admite ese navegador. Actualmente todos los navegadores modernos aceptan compresión con GZIP y Deflate, por lo que en las cabeceras del HTTP de la solicitud tendremos el siguiente código de control:

Accept-Encoding: gzip,deflate

Eso quiere decir que el navegador acepta los formatos de compresión GZIP y Deflate. El servidor que recibe esa cabecera, podrá entonces enviar los archivos solicitados al cliente en formato comprimido, con la certeza de que el cliente los podrá procesar perfectamente. Sin embargo, dependiendo de cómo se configure el servidor, los archivos se podrán enviar comprimidos o no.

El servidor web también envía en las cabeceras de las comunicaciones HTTP una variable para informar si finalmente se comprimieron o no los archivos de respuesta y, en el caso de que se hayan comprimido, el formato con el que se codificaron.

Content-Encoding: gzip

En esa variable, el servidor web está indicando que la respuesta enviada está en formato comprimido con GZIP.

continue reading

Jueves, septiembre 2nd, 2010 - SEO, javascript, php

La compresión por GZIP es una de las posibilidades más importantes para optimizar un sitio web, para buscar un mejor desempeño en la carga de las páginas. Consiste en enviar los códigos del sitio en formato comprimido, para que ocupen mucho menos espacio y por tanto se transfieran por la Red de una manera más rápida.

Tenemos variar formas de definir que se envíen comprimidos los archivos de la página. La manera más normal es configurar el servidor web donde esté alojada la página, ya sea Apache, IIS o cualquier otro sistema, para marcar que se utilice alguno de los métodos de compresión para los archivos. Aunque en ocasiones asusta un poco eso de configurar el servidor web, os podemos adelantar que esa configuración es muy sencilla de realizar y a lo largo de los próximos artículos vamos a explicar detenidamente cómo realizarla de diversas maneras.

Otra manera de enviar los archivos comprimidos es programar nosotros mismos esta funcionalidad con algún módulo en tu página realizado en lenguajes del servidor como PHP. Este módulo que podrías programar se encargaría de comprimir los archivos y enviarlos comprimidos al cliente web, pero estas técnicas sólo serían recomendadas si no tenemos la posibilidad de configurar directamente el servidor web. En adelante veremos de qué maneras que se pueden enviar los archivos comprimidos con algún lenguaje de programación.

En definitiva, veremos maneras distintas de conseguir esta configuración y así cualquier persona, en cualquier ámbito de trabajo, pueda optimizar la distribución de los contenidos de su página con GZIP.

Ventajas de comprimir con GZIP

La ventaja de comprimir con GZIP nuestro sitio web es que será menos pesado en KB, lo que derivará a su vez en otras ventajas importantes:

• Ahorro de ancho de banda / transferencia: nuestro sitio web enviará archivos comprimidos y por tanto, la transferencia que utilizará para enviar una misma página, será mucho mejor que si no estuviera comprimida. Al cabo del mes, sobre todo en sitios web con bastante tráfico, se obtendrá un ahorro considerable en transferencia.
• Velocidad del sitio: los archivos comprimidos tardarán menos en llegar a sus destinatarios, por tanto el sitio cargará con mayor rapidez. Si estamos optimizando el sitio en busca de mejorar el tiempo de carga, la compresión con GZIP será una de las más importantes opciones que tendremos a nuestra disposición y podremos configurarla en pocos minutos.
• Soporte en todos los navegadores actuales: hoy en día podemos estar tranquilos con la compatibilidad de la compresión con GZIP, puesto que todos los navegadores actuales la implementan.

En realidad, comprimir los archivos con GZIP siempre nos trae ventajas interesantes que harán que nuestro sitio web funcione más deprisa, por lo que resultará positivo en cualquier caso. El único marco que podría dar problemas es que el navegador que está utilizando el visitante no acepte compresión en las páginas, pero realmente en el panorama actual de navegadores eso es poco probable. Por tanto, a no ser que tu sitio web deba ser compatible con, por ejemplo, la versión 3 de Internet Explorer, puedes utilizarla sin problemas.

De cualquier forma, nuestro servidor puede enviar los archivos comprimidos sólo a los navegadores que soporten ese formato. Por lo que no debería preocuparnos ni tan siquiera esa posibilidad de un navegador no compatible.

Sitios web populares como Yahoo.com o Google comprimen las páginas con GZIP antes de enviarlas al cliente web, por lo que resulta claro que nosotros también debemos aprovechar esa posibilidad de optimización de la web. De hecho, no hacerlo, significa que estamos perdiendo una oportunidad muy buena para hacer que nuestro sitio sea más rápido.

Por poner un par de ejemplos, la portada de Yahoo.com en este momento ocupa 150KB, pero como se envía comprimida, en realidad sólo se transfieren 30 KB. DesarrolloWeb.com, el sitio donde estamos publicando estas informaciones, ocupa en su home page 78 KB y al enviarse comprimida la página por GZIP en realidad sólo se transfieren 18 KB. Esto quiere decir que estamos ahorrando más de un 75% de la transferencia que en principio sería necesaria si no lo comprimiésemos.

continue reading

Lunes, agosto 16th, 2010 - Python, php

PHP vs Python – ¿Qué se necesita saber para que un lenguaje sea mejor que el otro? Una respuesta puede ser flexible, favorable al desarrollo, la política de concesión de licencias (de código abierto o comerciales), la comunidad, la portabilidad, tipos dinámicos, soporte para un número variable de argumentos de la función y la capacidad para congelar objetos viven en una representación de cadena. Documentación, por supuesto, es un jugador importante cuando se elige un idioma porque usted todavía tiene que perfeccionar sus habilidades y no se ha trabajado en ese idioma todavía.

Las características que soporta PHP

• sintaxis muy cerca de C y Perl, con llaves y signos de dólar
• el ‘interruptor’ declaración y ‘hacer … mientras que “la construcción al igual que C
• incremento y decremento y asignación de los operadores
• el operador ternario / declaración (…? …: …)
• cuadro esquizofrénico de nombres de función. No hay espacios de nombres, por lo que a menudo tienen funciones de prefijos para denotar su origen (aunque no siempre). Las funciones son a menudo colocados en clases para simular espacios de nombres.
• un lenguaje muy informal, donde globales son a menudo usado para pasar argumentos (variables globales no debe ser utilizado, que es independiente del idioma)
• medio ambiente comúnmente instalados
• alias (‘$ a = & $ b’ significa que cuando los cambios b $, $ a cambios también) (debe ser “referencias”, no “alias”, pero se llaman alias)
• una matriz de tipo que también funciona como una lista y un diccionario. claves de los diccionarios se reiteró en su orden original.
• Excelente Documentación
• Enorme base comunitaria con el código base de apoyo amplio disponible en línea

Características que soporta Python

• espacios de nombres y los módulos
• pequeño núcleo
• muesca para marcar bloque estructura, más que llaves, lo que hace el código mirada más bonita
• sintaxis clara, concisa y ortogonales
• auto con la documentación y docstrings pydoc (PHP 5 tiene la reflexión y las cadenas de documentación)
• argumentos clave a funciones y métodos, el apoyo fácil para los argumentos por defecto
• la orientación a objetos y la verdad “primera clase” clases y funciones
• las clases se utilizan ampliamente en la biblioteca estándar
• la herencia múltiple
• archivo orientado a objetos de manipulación
• método de encadenamiento
• todo es una referencia
• ‘Del’ estado de todos los tipos de datos
• entre mayúsculas y minúsculas consistente (PHP hace para las variables, pero no funciones) (Las funciones son mayúsculas y minúsculas)
• matriz simple corte de sintaxis
• iteradores (PHP 5)
• control estructurado de excepciones (PHP 5)
• la sobrecarga de operadores
• roscado
• gran cantidad de datos de alto nivel de tipos (listas, tuplas, adictos, mx.DateTimes, NumPy matrices, etc)
• fechas que no se limitan a las marcas de tiempo UNIX (<1970,> 2038)
• apoyo a todas las grandes marcos GUI
• fuerte internacionalización y soporte Unicode
• madurez, estabilidad y compatibilidad hacia arriba-

tiende a dar lugar a mucho más aplicaciones escalables
A diferencia de PHP, que tiene características de desarrollo Web integrado directamente en el núcleo del lenguaje, capabilites Python desarrollo web son proporcionados por módulos complementarios. Capacidades básicas de CGI son proporcionados por el cgi “módulo que viene en la biblioteca estándar de Python. También hay una amplia gama de módulos de terceros disponibles para Python, algunas son complementarias, otras competir. Como resultado, Python proporciona una base más flexible para el desarrollo web.
Hay algunos efectos secundarios adversos de esta flexibilidad. En primer lugar, la gama de opciones puede ser desconcertante. A menos que usted está trabajando experimentados desarrolladores web de Python, PHP es más fácil para empezar con. En segundo lugar, soporte para PHP es más común con las empresas de alojamiento compartido de apoyo a las diversas opciones de Python.
Otra diferencia es que PHP está incrustado en el servidor web, mientras que las aplicaciones web de Python pueden ser incorporados en el servidor web como PHP o ejecutar en un proceso separado.
Ahora, permite comprobar la rapidez con que ejecutar para encontrar todos los números primos inferiores a 10000. Vamos a ejecutar la prueba tres veces mediante la optimización de los resultados.

tiempo $. / script.php
Idioma Script 1 Script 2 Script 3
PHP 1,359 1,753 1,191
Pitón 1,894 1,636 1,634
Bueno, esto muestra que PHP se ejecuta más rápido que Python, pero aquí hay un retén. PHP puede correr más rápido para los códigos más pequeños, pero cuando hablamos en términos de gran sistema escalable a continuación, Python se desempeñan mejor. El código anterior era pequeño en el que estaban encontrando todos los números primos inferiores a 10000 y muestra PHP por lo que su elegido en la mayoría de las aplicaciones web pequeñas. Sin dudas hay pocos grandes nombres con el respaldo de PHP también.
Vamos a hacer un análisis más en donde se realizan cálculos matemáticos
Ejemplo de secuencia de comandos de bucles a través de una instrucción FOR 2.000.000 veces calcular el hash MD5 de N + N, N igualando el número de pases hasta el momento.
Resultados:
Ronda 1 – 2.000.000 Pases
PHP = 21.4227 segundos
Python = 9,8737 seg
Ronda 2 – 2.000.000 pases
PHP = 21.1122 segundos
Python = 9,7241 seg
Ronda 3 – 1.000.000 pases
PHP = 9,811 seg
Python = 4,429 seg
Ronda 4 – 1.000.000 pases
PHP = 9,857 seg
Python = 4,280 seg
Como puede ver, Python es superior a 2 veces más rápido que PHP en la realización de esta operación, que es más hacia la ejecución de un algoritmo matemático.

Otra Opinión – Python ha sido optimizado para algoritmos matemáticos lo que en ese sentido, soplará PHP fuera del agua, pero si se compara que el lenguaje puede servidor más páginas web en un período de tiempo que usted encontrará que PHP es mucho más rápido.
Otros aspectos importantes que hacen preferible un idioma son los siguientes:

Velocidad de ejecución
Dado un problema bastante intensa ni el idioma tiene una gran ventaja sobre la otra, y cada uno será mejor para cosas diferentes. De este modo podemos descartar la velocidad de ejecución para el 99% de lo que hacemos.

Velocidad de escritura
Suponiendo que las lenguas en cuestión todos corren a una velocidad aceptable (y posiblemente así lo sea), esta se convierte en la métrica más importante (el segundo número 1 es si realmente funciona). Debo ser honesto y decir que no he usado Python lo suficiente para estar seguro de qué tan rápido o lento estoy para desarrollar en él, pero puedo decir que hasta el momento parece más rápido.

Mantenimiento
Yo podría no haber sido usando Python tiempo pero puedo decir que las manos hacia abajo es más fácil de mantener. Me cosas guión en PHP pero de todos modos la falta de llaves es muy bueno y yo prefiero el acceso ámbito de aplicación de Python en PHP (objeto.propiedad vs propiedad $ objeto->), pero creo que eso es una cuestión de opinión personal que usted necesita para decidir sobre usted mismo.

Facilidad de instalación / Portabilidad
PHP gana aquí, no es necesario escribir sus propias cabeceras HTTP como lo hace con Python, más hosts lo apoyan, es más fácil conectarse a una base de datos y parece que hay más tutoriales sobre el mismo.

Apoyo / Comunidad
Yo diría que la comunidad PHP y soporte técnico es mejor, pero con los días que pasan por que he notado la gran comunidad de Python ayudar.

continue reading

Sábado, julio 31st, 2010 - CSS, JQuery

Nube de Zoom es un zoom de la imagen jQuery plug-in, una alternativa comparable a productos tales como Magic Zoom. Compared to the popular jQZoom plugin, Cloud Zoom is smaller, has more features and more robust compatability across browsers. En comparación con el plugin jQZoom popular, Cloud Zoom es más pequeño, tiene más funciones y mayor compatibilidad robusta en todos los navegadores.

Features Características
* Works with most browsers (tested on IE6+, Firefox, Chrome, Opera, Safari). * Funciona con la mayoría de los navegadores (probado en IE6 +, Firefox, Chrome, Opera, Safari).
* Easy integration with basic valid HTML. * Fácil integración con HTML válido de base.
* Small 6Kb (minified) script. * 6Kb Pequeño (minified) guión.
* Smooth zoom movement. * Smooth zoom movimiento.
* Gallery mode. * Modo Galería.
* Tint, soft focus and inner zoom features. * Tinte, enfoque suave y funciones de zoom interno.
* Degrades gracefully with Javascript turned off. * Se degrada con gracia con JavaScript desactivado.
* Fully accessible with no CSS or text only browsers. * Totalmente accesible sin CSS o navegadores de texto solamente.

continue reading

Jueves, julio 15th, 2010 - WordPress

La conveniencia de uso, o no, de los frameworks siempre es un tema polémico. No ocurre sólo con los frameworks CSS, sino también con los frameworks de otros lenguajes o tecnologías, aunque quizás en el caso de las librerías CSS todavía se acentúa más la discusión.

Las personas a favor del uso de frameworks siempre podrán decir que aceleran los procesos de desarrollo y que ello es suficiente razón para usarlos, pero conviene saber que también cuáles son las desventajas y decidir si nos interesa o no usarlos también en función de ellas.

Conviene aclarar antes de nada qué nos ofrece un framework CSS, pues la mayoría de las ventajas están directamente relacionadas con las áreas donde éstos actúan.
Componentes habituales de un framework CSS
Cada framework CSS es distinto, pero la mayoría proveen de código fuente -hojas de estilo en cascada- para resolver los mismo asuntos:

* Creación de una rejilla, para que el desarrollador pueda colocar en ella los distintos elementos que forman parte de la web. Esta rejilla, que divide los espacios en distintas columnas, ayuda a posicionar con CSS los componentes de una página de una manera precisa y versátil.
* Definiciones de estilos de tipografía para los elementos HTML, de modo que no tengamos que definirlos nosotros para cada proyecto.
* Solución de casos de incompatibilidad entre navegadores, para que un mismo código se vea igual en todos los clientes web más habituales
* Creación de clases CSS estándares, que puedan ayudarnos a estilizar componentes avanzados de interfaces de usuario.

Ventajas de los frameworks CSS

Ahora que ya sabemos dónde indicen las librerías CSS, vamos a listar una serie de ventajas posibles de su utilización.

Maquetación acelerada y código más limpio:
Con un framework CSS podemos maquetar de una manera mucho más rápida una página, gracias a la rejilla que nos ofrece. Pero además utilizarlo nos ayudará a tener un código más limpio y más estructurado.

Solución a los problemas CSS comunes:
Casi todos los frameworks están realizados bajo la experiencia de trabajo con CSS en muchas páginas web. Por ello siempre ofrecen soluciones a problemas comunes de los desarrolladores.

Compatibilidad entre navegadores:
Los navegadores a veces interpretan de manera distinta un mismo código fuente. Esto es algo que a menudo se acentúa en Internet Explorer y que los frameworks CSS solucionan de alguna u otra manera.

Aprender trucos y prácticas habituales:
Al leer el código fuente de los frameworks CSS podremos aprender las prácticas de otros desarrolladores y en concreto para los frameworks CSS es muy sencillo examinar su código fuente.

Desarrollar conforme a un mismo patrón:
Cuando desarrollamos con un framework tendremos un procedimiento determinado para resolver las necesidades comunes. Esto quiere decir que la manera de actuar en diferentes proyectos puede ser muy similar y por ello a la larga te costará menos esfuerzo de mantenerlos y podrás recordar mejor cuáles son los criterios que utilizaste para desarrollarlos.

Ayuda al trabajo en grupo:
Dado que trabajar con un framework CSS nos obliga a desarrollar con un patrón determinado, en proyectos en grupo, las personas que integren el equipo de trabajo podrán tener más claras cuáles fueron las decisiones que se tomaron a la hora de maquetar con un breve vistazo en el código.

En definitiva, las ventajas más importantes de usar un framework CSS es que agilizará el proceso de desarrollo y nos ayudará bastante a la hora de hacer una web que se vea perfecta en cualquier navegador. Pero dependiendo de nuestro contexto de trabajo podemos encontrar otras ventajas interesantes.

Desventajas del uso de frameworks CSS

Hasta ahora, todo lo que hemos comentado de los frameworks CSS es muy bueno, pero existen algunas desventajas que también debemos conocer, para valorar su conveniencia o no y minimizar en la medida de lo posible los aspectos negativos.

Para mi, existe una desventaja principal bastante importante y otra serie de desventajas menos determinantes. Quizás la desventaja principal es suficiente como para desistir en el uso de frameworks CSS y para entenderla tenemos que conocer antes una de los motivos por los que se creó CSS.

Como quizás sepamos, CSS es un lenguaje para definir estilos en páginas web, que se creó con la intención de separar el contenido de la presentación. Con HTML especificamos el contenido de una página y con CSS especificamos, por separado, la presentación. Pues bien, la mayoría de los frameworks CSS se cargan esta ventaja del lenguaje, o al menos la limitan. Esto es porque, cuando queremos usar la rejilla para posicionar los elementos, muchas veces estamos utilizando código HTML con clases (Class de CSS) que especifican la posición que van a tener esos elementos. Eso hace que estemos volviendo a mezclar contenido con presentación y quiebra por tanto algunas de las ventajas que habíamos adquirido al trabajar con CSS.

Asimilada para mi esta desventaja principal, veamos un completo listado de los inconvenientes del uso de Frameworks CSS:

Mezclas de nuevo el contenido y la presentación:
Cuando diseñas una web con CSS podrías cambiar su aspecto radicalmente con sólo cambiar la hoja de estilos, incluso la manera como los elementos se posicionan en la página. Pero cuando utilizas un framework estás colocando clases (de CSS) que indican dónde se van a posicionar los elementos en una rejilla y, si quieres cambiar la posición de esos elementos más adelante te verás obligado a cambiar el código HTML de la página y colocar otras clases CSS, que permitan situarlos en otros puntos de esa rejilla.

Tendrás código CSS que no utilices nunca:
El framework CSS contiene diversos códigos CSS útiles en casos generales, pero lo cierto es que cuando diseñas una página web una buena parte de ese código no lo vas a usar nunca. Es decir, al utilizar un framework estamos cargando innecesariamente el peso en bytes de nuestro código CSS. Esto lo podemos arreglar “a mano” limpiando el CSS del framework, eliminando código que no lleguemos a utilizar en ninguna página del sitio.

Curva de aprendizaje más lenta:
Aunque aprender a usar un framework CSS no es nada complicado, tendrás que conocer sus particularidades para sacarle provecho. Tendrás también que aprender a diseñar de una manera determinada, para usar la rejilla con la que se posicionan los elementos. Todo esto, insisto, no es difícil, pero lleva su tiempo. Tanto es así que, si vas a diseñar una sola web, quizás tardes más tiempo en aprender a trabajar con el framework CSS que lo que tardarías en diseñarla sin utilizarlo. En definitiva, sólo sacarás provecho al framework cuando lo conozcas, es decir en el segundo, o siguientes diseños que realices con él.

No estás aprendiendo a valerte por ti mismo:
Muchos de los problemas de diseño típicos ya vienen resueltos en un framework y esa situación, a pesar de ser una ventaja, puede derivar en que al final no sepas solucionar esos problemas básicos por ti mismo. Como ya estaba resuelto, no tuviste la ocasión de resolver el problema y por tanto no aprendiste con esa experiencia. Del mismo modo, probablemente aprenderás a resolver tus necesidades aplicando clases CSS del framework, pero realmente puede que no sepas qué estilos CSS estás aplicando y por qué. En definitiva, si antes de empezar a trabajar con frameworks no tienes una experiencia y conocimiento suficiente del lenguaje CSS y sus usos, puede que aprender a diseñar con un framework represente una desventaja para aprender bien CSS.

Otro detalle sobre este mismo punto es que cuando quieras cambiar de Framework, tendrás que aprender de nuevo la forma de trabajar y con toda probabilidad cambiar el código HTML de tu página para ajustarlo a los nuevos nombres de clases y estilos CSS.

Conclusión: ¿Usar o no frameworks CSS?

La decisión final sobre usar o no un framework debe correr a cargo de cada desarrollador. Un framework CSS no es nada del otro mundo, sino una serie de estilos CSS útiles para muchas personas, pero no por eso deben ser útiles para ti. Incluso, puede que a lo largo de tu experiencia ya hayas creado una serie de clases CSS y estilos básicos que ya incluyes en todos tus proyectos. Por decirlo de alguna manera, puede que ya estés usando tu propio “framework” rudimentario y no lo sepas.

En mi opinión, su conveniencia o no también depende de cómo utilices el framework. Si ya conoces CSS y te interesas un poco sobre cómo funcionan las cosas, puedes minimizar las desventajas que tienen e incluso pueden venirte bien para aprender. Si los usas sin conocer realmente CSS y sin importarte lo que tienen dentro y qué estás aplicando realmente cuando invocas las clases CSS puede que te resulten complicados y a la larga tampoco te beneficien mucho en tu línea de aprendizaje como desarrollador web.

Referencia: Si quieres aprender algún framework CSS te recomendamos estos manuales de DesarrolloWeb.com, sobre dos de los frameworks más populares:
1.- Blueprint
2.- 960 Grid System

continue reading

Miércoles, julio 14th, 2010 - CSS, JQuery

continue reading

Viernes, julio 9th, 2010 - php

A la hora de desarrollar un proyecto utilizando PHP, hay que ver si nos interesa utilizar un Framework que nos facilite el desarrollo y podamos aprovechar todas las funcionalidades que nos dan ya desarrolladas.

Vamos a realizar un repaso por los framework para PHP que podemos encontrarnos en la actualidad.

Symfony

Es un framework creado completamente en PHP 5 y diseñado para optimizar el desarrollo de las aplicaciones web mediante algunas de sus principales características. Separa la lógica de negocio, la lógica del servidor y la presentación web. Con este framework, el desarrollador podrá olvidarse de las tareas comunes en una web y centrarse solo en las específicas del proyecto en el que esté trabajando.

Entre sus características más destacables están:

* Fácil de instalar y configurar en la mayoría de plataformas.
* Independiente del sistema gestor de bases de datos.
* Utiliza programación orientada a objetos.
* Utiliza un modelo MVC (Modelo vista controlador).
* Sigue la mayoría de mejores prácticas y patrones de diseño para la web.
* Está preparado para aplicaciones empresariales.

BlueShoes

Es un framework y CMS escrito en PHP, con soporte para MySQL y para Oracle y MSSQL. Ofrece a los desarrolladores soluciones para necesidades reales, para lo cual disponemos de componentes de manejo de usuarios, sesión, grupo de usuarios, tratamiento de excepciones, logs, formularios y mucho más. Dispone de la posibilidad de añadir plugins. Existe una versión gratuita y otra enterprise que por un precio nos ofrece más características.

CakePHP

Es un framework que facilita el desarrollo de aplicaciones web, utilizando el patrón de diseño MVC (Modelo-Vista-Controlador). Es un framework de código abierto. Está desarrollado en PHP con programación orientada a objetos.

Surgió en el año 2005 cuando Ruby on Rails estaba ganando popularidad y tiene muchas características que ofrece Ruby On Rails, como por ejemplo facilitar al usuario la interacción con la base de datos mediante el uso de ActiveRecord.

Entre las características de este Framework, podemos destacar:

* Compatible con PHP4 y PHP5
* CRUD de la base de datos integrado
* Creación de url amigables.
* Sistema de plantillas rápido y flexible.
* Ayuda para Ajax, Jacascript, html….
* Proporciona componentes de seguridad y sesión.

CodeIgniter

Es un framework para desarrollo de aplicaciones en PHP. Es Open Source y muy pequeño, con una estructura de sus librerías muy bien estrutrurado.

Destaca por lo liviano que es y por su facilidad para ponerlo en marcha. Solo hay que descomprimirlo y ponerlo en una carpeta.

Algunas características de este framework:

* Compatible para PHP4 y PHP5
* Gran documentación con una gran comunidade de desarrolladores.
* Gran facilidad de aprendizaje. En poco tiempo se puede hacer grandes cosas.

Utiliza el patrón de diseño Modelo-Vista-Controlador.

Horde

Es un framework libre escrito en PHP para el desarrollo de aplicaciones colaborativas. Se compone de unas bibliotecas que proporcione funcionalidades básicas como son la autenticación, gestión de preferencias, interfaz gráfrica… y que sirven de unión entre las distintas aplicaciones de usuario que son gestionados como sub-proyectos independientes.

Seagull

Es un framework que nos permite realizar una programación modular y que poseé un CMS. Entre las características que podemos destacar están.

* Es compatible con PHP 4 y PHP 5
* Tiene el ORM integrado
* Utiliza como patrón de diseño MVC.
* Soporta distintos tipos de bases de datos
* Funciones para la validación de datos.
* Integración de librerías PEAR.

Qcodo

Es un framework de código abierto para PHP5 que construye un mapeo de objetos y una interfaz de ABMS utilizando AJAX desde un modelo existente en una base de datos.

También poseé Qforms que son componentes para la creación de formularios. Tiene la ventaja de que es muy liviano y puede ser utilizado tanto en pequeñas como en grandes desarrollos.

El framework consiste de dos componentes principales: el generador de código y los Qcompomentes (Qforms). Qcodo usa ORM para el acceso a base de datos. El generador de código introspecciona una estructura de base de datos relacional y construye un ORM, así como también varias interfaces remotas (SOAP, AJAX) para el ORM. El ORM en QCodo puede ser extendido para proveer funcionalidad mantenida por el usuario (via object subclassing). Qforms incluye la habilidad de validar campos, disparar eventos, y asociar llamadas AJAX. Qforms se comunica perfectamente con el ORM, permitiendo a los desarrolladores a rápida e interactivamente cambiar cualquiera de los tres componentes de la arquitectura MVC con poco impacto a los otros componentes.

Xaraya

Xaraya es un framework PHP que permite crear sofisticadas y flexibles aplicaciones, ofrece: diseño modular, API, internacionalización, templates XML, etc.

Zoop

Zoop es un framework PHP basado en el patrón de diseño MVC (Modelo, Vista, Controlador) que separa la lógica de negocio de las vistas y de la capa de datos. Está diseñado para ser eficiente, modular y extensible, proveyendo balance entre ligereza y robustez. El framework dispone de un conjunto de controles mejorados, distintos tipos de acceso a datos, automatización de tareas tediosas e integración fácil con otros proyectos.

Zend Framework

Zend Framework es un framework de código abierto para desarrollar aplicaciones web y servicios web con PHP 5. ZF es una implementación que usa código 100% orientado a objetos. La estructura de los componentes de ZF es algo único; cada componente está construido con una baja dependencia de otros componentes. Esta arquitectura débilmente acoplada permite a los desarrolladores utilizar los componentes por separado.
ZF ofrece un gran rendimiento y una robusta implementación MVC, una abstración de base de datos fácil de usar, y un componente de formularios que implementa la prestación de formularios HTML, validación y filtrado para que los desarrolladores puedan consolidar todas las operaciones usando de una manera sencilla la interfaz orientada a objetos.

continue reading