Consejos sobre programación web
Buenas, una de las tareas que me ha llevado mucho tiempo ha sido la reducción del árbol mostrado en el navegador de categorías para la versión responsive.
Al final he conseguido finalizar dicha tarea de la manera menos esperada, pero efectiva.
El menú superior mostrado en la tienda prestashop corresponde al módulo Blocktopmenu, así que mi labor de investigación fue ver qué había exactamente en archivo Blocktopmenu.tpl del theme que estaba usando.
En anteriores post hablaba de cómo minimizar y combinar ficheros CSS y JavaScript para optimizar el rendimiento de nuestro proyecto web, haciendo uso de herramientas como CSS Minify para NetBeans, o la herramienta CSS-JS-Booster.
Ambas herramientas son muy interesantes de conocer y de usar, sin embargo, esta mañana me he dado cuenta que todo ese tiempo invertido, aunque me ha ayudado a aprender mucho sobre este tema, ha sido un poco absurdo, ya que PrestaShop cuenta en su apartado de administración avanzada con un apartado de Rendimiento donde se puede aplicar la técnica de reducción y combinación de JS y CSS así como HTML, gestión de Caché, compilación del proyecto…etc.
Como el saber nunca está de más, no diré que ha sido una pérdida de tiempo todo lo investigado con anterioridad, ya que me resultará útil en otros proyectos (o al menos eso espero).
Así que hablemos un poco de las opciones que ofrece PrestaShop para optimizar la carga de nuestra tienda:
Prestashop utiliza un motor de plantillas para PHP llamado Smarty. A la hora de tener nuestra tienda en desarrollo podemos marcar la opción ‘Forzar compilación’, pero una vez la tienda ya está en producción, esta opción debe ser desactivada para que se emplee la caché de plantillas.
Marcando estas opciones, como su propio nombre indica, el propio PrestaShop optimiza nuestros CSS, JS y HTML, haciéndolos más eficientes y más ligeros.
PrestaShop ofrece la posibilidad de utilizar servidores alternativos para la carga de contenido multimedia, únicamente deberemos indicar qué servidores pueden ser llamados para obtener nuestras imágenes, CSS, JavaScript, o cualquier recurso. De esta manera, se cargarán más recursos de forma simultanea.
Gracias a la aplicación de estos métodos, haciendo el test de velocidad de carga de pingdom, se han podido ver buenos resultados, rebajando el tiempo de carga unos 2 segundos.
En esta ocasión voy a escribir sobre una charla muy interesante de David Bonilla (@david_bonilla).
Este es el enlace para ver la presentación: 7 técnicas para conseguir que un buen equipo sea brillante
En esta charla presenta 7 técnicas que harán que aumente la productividad del trabajo en equipo e incluso la productividad personal en caso de no disponer de un equipo. Además, es importante hacer notar que estas técnicas, aunque se aplican al área del desarrollo de aplicaciones, es aplicable a cualquier tipo de empresa, únicamente adaptando conceptos.
Las 7 técnicas que describe David Bonilla para conseguir lo mejor de un equipo son las siguientes:
Como podemos ver, los puntos son llamativos.
A modo de resumen, aunque es recomendable ver el video, en el punto 1, mantener el ‘flow’ se refiere a tener momentos de concentración en los que no seamos molestados por nadie, él habla de hacer sesiones de 25-30 minutos seguidos de trabajo concentrado, sin interrupciones de móvil, correos electrónicos, visita de webs, y lo más complicado de conseguir, sin interrupciones externas.
‘Alimentar el cerebro‘, como se puede imaginar es estar siempre aprendiendo, ponerse siempre al día, esto siempre me recuerda una cita de Goethe que decía:
El que no avanza, retrocede.
Y eso es cierto en todas las áreas, si no te empleas a fondo en aprender, cuando lo necesites, tu conocimiento estará desfasado.
El siguiente punto es ‘Di «bien hecho«. Y esto es más importante de lo que parece, y está perfectamente reflejado en las labores de programación. Podemos estar desarrollando cualquier cosa y nada más terminarla….venga! a otra cosa. No tenemos tiempo de saborear esa pequeña victoria. Eso por un lado, y por el otro tampoco tenemos a alguien que nos diga «Bien hecho» y nos podamos sentir orgullosos de nuestro trabajo.
El ‘Report Robot‘ consiste en llevar un control del flujo de trabajo, de cuánto tiempo se emplea en cada tarea, básicamente, la posibilidad de que el jefe de proyecto pueda hacer un seguimiento del proyecto de manera automática, sin necesidad de acercarse a cada uno y preguntar «Bueno, por dónde vas? Que has hecho este último mes?». Con herramientas de seguimiento automático esta labor es más sencilla para el jefe de proyecto, y para nosotros mismos, porque no ayuda a ver dónde empleamos más tiempo.
Un punto también importante es el que David Bonilla denomina «Come tu propia comida de perro«. Con este título tan llamativo hace referencia a que si hemos hecho algún módulo o una modificación a la aplicación, la probemos nosotros mismos antes de ponerla disponible. Hay gente que está muy acostumbrada a hacer los cambios directamente en producción…pero ya sabemos que eso puede tener sus consecuencias.
Para ir terminando, ‘Celebra un día especial‘ en el que habla de fomentar las ideas de los trabajadores, que den pequeñas charlas de cosas que les puedan parecer interesantes, etc.
Y por último, ‘Experimenta‘, aunque siempre se dice «Los experimentos con gaseosa», en esta vida, al igual que hemos dicho anteriormente que hay que estar aprendiendo siempre, el hecho de experimientar ayuda también a ese aprendizaje.
Además de estos puntos de los que trata la charla de 7 técnicas para conseguir que un buen equipo sea brillante, hace hincapié en fomentar las relaciones entre los trabajadores, unos trabajadores que están más compenetrados, hacen mejor equipo y trabajan mejor. Habla de salidas a tomar cervezas, salidas de ocio, e incluso viajes juntos.
Esto es muy dificil de ver, pero…no creeis que sería positivo conocer a tus compañeros de trabajo fuera de ese ambiente ? Es posible que alguno de una sorpresa agradable.
Buenas de nuevo, cambiando un poco radicalmente de tema sobre lo publicado anteriormente, en este post, voy a poner una herramienta que ayuda a visualizar la web que estemos desarrollando/comprobando como si accedieramos desde un terminal móvil.
La herramienta se llama Ripple y es un plugin para Google Chrome.
Este es un video demostrativo que aparece en los detalles del plugin (http://youtu.be/V97j188X8Wg).
Con Ripple podemos seleccionar entre diferentes tipos de dispositivos (tablets, iPads, iPhones y diferentes tipos de dispositivos Android), además, gracias a Ripple podemos rotar la pantalla para ver la pantalla de manera horizontal o vertical. También podemos girar el dispositivo, sacudirlo, e incluso geoposicionarlo.
Una herramienta que no puede faltar si como en mi caso estás probando un proyecto de Prestashop con un tema teóricamente responsive.
Continuando con la optimización de Páginas Web, hoy vamos a hablar de otra herramienta que es capaz de optimizar el uso de CSS y JavaScript por parte de nuestra página Web.
La herramienta es CSS-JS-BOOSTER (visitar página web).
CSS-JS-BOOSTER es una herramienta en PHP, totalmente gratuita y sencilla de utilizar. Hay que descargarse las librerías, añadirlas a nuestro proyecto y modificar la carga de CSS y JS para que utilice dicha librería.
Con esta herramienta podemos minimizar nuestros CSS y JS, podemos fusionar todos nuestros CSS y JS para reducir el número de ficheros a cargar por parte de nuestra web, y también tiene la opción de trabajar con ficheros gzip para servir el contenido web.
Como se puede ver, es una herramienta bastante interesante, estoy haciendo la integración con el proyecto y confío que los resultados sean los esperados (ya lo contaré).
Como parte un poco negativa, indican que tras la modificación de algún CSS ó JS, la primera carga tardará más de lo deseado, pero hay que tener en cuenta que en la primera carga es cuando genera todos los ficheros optimizados.
El primer objetivo del proyecto es hacer una web ligera, para ello estamos viendo las diferentes técnicas para hacer adelgazar una web.
Hay una guía bastante curiosa en http://browserdiet.com/es/ donde hay truquitos interesantes.
Hoy he empezado con la minimización de CSS y JS, aunque un código bien estructurado ayuda a la hora de desarrollar, a la hora de la carga en el navegador, el exceso de espacios y lineas hace que el fichero pese más, con lo que se recomienda la eliminación de todo aquello no necesario.
Con el fin de automatizar esa tarea, he encontrado un plugin para NetBeans (JS CSS Minify Compress) que facilita esta tarea, se escoje el fichero a minimizar…y con el botón derecho se le indica que se quiere minimizar y ya obtenemos el mismo fichero pero sin información innecesaria.
Parece que no, pero hay ganacias importantes, y para muestra, una imagen.
Buenas, voy a comenzar aquí un blog en el que iré poniendo mis experiencias con las tecnologías usadas. Estoy en un proyecto con prestashop y otro con joomla, así que imagino que las experiencias serán interesantes y podré aprender mucho.
Si piensas que vales lo que sabes, estás muy equivocado. Tus conocimientos de hoy no tienen mucho valor más allá de un par de años. Lo que vales es lo que puedes llegar a aprender, la facilidad con la que te adaptas a los cambios que esta profesión nos regala tan frecuentemente