Camara del Comercio de Málaga.

Últimamente no he escrito mucho en mi blog por varios motivos.

Uno es el trabajo (como no jejej) y es que empezar en un sitio nuevo siempre requiere un sobreesfuerzo para acostumbrarse y conocer la forma de trabajo de los nuevos compañeros. De Nextline sólo puedo hablar cosas buenas (por ahora ).

Otra es el curso que estamos realizando gracías a la Camara del Comercio de Málaga y la Fundación INCYDE. Este curso que dura aproximadamente dos meses nos enseñan y nos ayudan a hacer un plan de negocio. Tenemos diferentes tutores cada semana, estos nos dan una clase conjunta a todo el mundo de 4 o 5 horas un día a la semana y después tenemos otra tutoría personalizada a nuestro proyecto. Estamos aprendiendo mucho y trabajando más de lo que nos piden para hacerlo bien.

Por eso y por otros motivos -también me gusta eso de tener vida social – tengo el blog un poco dejado atrás, pero no os preocupéis que seguiré publicando cosillas

8 buenas prácticas en el Desarrollo Web

Partiendo de una charla con unos compañeros de trabajo, salió el tema y como lo abarcamos cada uno de nosotros, me pareció tan interesante que aquí me dispongo a hablar un poco sobre el tema. No trato de explicar conceptos o formas de hacer las cosas, simplemente una serie de prácticas.

Aunque son prácticas personales -a excepción del punto 3- creo que todos son totalmente imprescindibles para unos mínimos de calidad.

1.- Inizializar estilos

Sabemos que nuestros diseños se pueden ver alterados de un navegador a otro -incluso mismos navegadores en diferentes S.O.-. Uno de los motivos que causa esto son las tres hojas de estilos que se utilizan (el del navegador, el del usuario y el del diseñador). Para arreglar o resetear los estilos que nos puedan estropear nuestro trabajo debemos usar lo conocido como reseter.

Yo uso una de las versiones de Eric Meyer. Podéis googlear un poco para encontrar mucha información al respecto.

Hay varias formas de realizar este reseteo, puede valernos diferentes dependiendo del proyecto pero la que nunca recomiendo es Hard Reset.

2.- Ver nuestro diseño en varios navegadores

En relación con el punto anterior debemos comprobar nuestro diseño en diferentes navegadores. Lo ideal es llegar a cubrir el 90% de los visitantes de nuestra web (lo podemos saber de antemano o generalizar con datos conocidos).

Podemos tener varios navegadores instalados en nuestro pc (firefox, opera, IE,…) o lo que es mejor tener motores de renderizado (gecko, presto, trident…).

Si eres de Linux puede que te interese el proyecto IEs4Linux, hay su homólogo para Mac en IEs4Mac.

Puede ser tedioso tener varios navegadores, y aún así hay otros muchos que nos dejaremos atrás, por eso hay herramientas webs tan buenas como Browsershots que nos puede facilitar la vida. Prueba en 4 S.O. y 72 navegadores diferentes, nos brinda capturas de pantallas para que veamos los resultados.

3.- Usar un Sistema de Versión

Ya sea Subversión, Git, Cervicia o cualquier otro… una vez te acostumbras a trabajar con un sistema de versionado no sabes como podrías hacer grandes -o pequeños- trabajos sin él. No es totalmente necesario pero si altamente recomendable y puede ayudarte enormemente para cumplir el punto siguiente.

Si no sabes, aprende, hay muchos manuales por internet y aplicaciones gráficas para casi todos. Si ya lo usas felicidades

4.- Tener una buena organización -un TODO, un orden…-

Diréis: “yo me organizo bien probando cosas” y yo os diré: “mentira”. Para trabajos serios, proyectos realmente importantes -para nosotros o para quien sea- no podemos ir haciendo las cosas a lo loco -ni tampoco planearlo todo exhaustivamente porque nos limitará la espontaneidad y la inspiración-.

¿No te estas contradiciendo? Me explico mejor. Para un correcto desarrollo tenemos que tener las ideas claras: saber el diseño a groso modo, la estructura en la que organizaremos los archivos -la simple practica lo da-, etc. Ni empezar desde cero y a ver como va saliendo las cosas ni tenerlo todo exaustivamente pensado puesto que siempre nos llegarán elementos que no encajan bien o pequeños cambios por parte del cliente que nos lo rompe todo.

Por eso digo, organízate de la forma que sea, hazte alguna lista TODO de tareas por hacer, por comprobar… Los post-it pueden ser buenos amigos.

5.- Mejora Progresiva

Un concepto desconocido para muchos desarrolladores y uno de los más importantes. Realizando el trabajo hay dos grandes tendencias:

1. Usar sólo características que soporten todos los navegadores (ello incluya IE 6) haciendo diseños muy limitados.
2. Olvidarse de los navegadores antiguos y fijarse sólo en los más modernos.

A mi parecer, ambos dos son incorrectos. La mejora progresiva tiene dos principios y desde que los leí cambió mi forma de tratar este tema:

1. En primer lugar, el diseño web debe permitir el acceso completo y correcto a toda la información de la página independientemente del tipo de navegador utilizado por el usuario.
2. Después de cumplir el requisito anterior, se deben utilizar las características más modernas de CSS 2/3, aunque sólo los usuarios con navegadores más modernos sean capaces de disfrutarlas.

No es una tarea fácil al principio pero si queremos hacer trabajos profesionales, tenemos que ser eso mismo, profesionales.

6.- Estándares. Usar validadores

Muchas de las prácticas anteriores carecen de sentido si luego no usamos estándares HTML/XHTML/CSS… por ello según vamos diseñando -o sólo al final si ya tienes práctica- debemos usar validadores para cersionarnos que todo nuestro trabajo es totalmente compatible con los navegadores -todos lo siguen menos IE que va a su bola...-

Hay muchos por la red pero los que recomienda casi cualquier desarrollador son los de W3C.

7.- Tener un ojo pendiente al rendimiento

Según un estudio de Yahoo! el 80% del tiempo de carga de una web actual se destina a peticiones al servidor y descarga de la información (imágenes, estilos, etc.) y el otro 20% al desarrollo de información dinámica (ejecutar comandos php, ruby, etc.). Debido a esto debemos de estar pendientes de nuestro código, de nuestras hojas de estilos, de nuestras imágenes.

Aqui os dejo unos cuantos consejos:

• Optimizar todas nuestras imágenes. Una vez nos convendrá usar .jpg, otras .gif, otras .png. Ajustar la calidad y opciones llega a reducir mucho el peso sin ser perceptible para el ojo humano la diferencia. Ojea manuales para ayudarte con el tema, siempre tendrás tiempo para probar y probar. (Nota: para los usuarios de Photoshop, les puede ser muy interesante una opción dentro del menú Archivo, no recuerdo el nombre pues soy usuario de Gimp pero era algo como guardar imagen para dispositivo móvil/web).
• Usar técnicas de Sprites CSS, reducirás el peso de imágenes y el número de peticiones al servidor.
• Código limpio en el HTML y el CSS -usar la propiedad Shorthand, etc.-.
• No usar flash o imágenes cuando se puede usar trucos CSS para efectos visuales. Ver este enlace para ejemplos.
• Usar compresores de CSS y javascripts como YUI Compresor, sólo lo recomiendo si sabéis lo que hacéis.
• Reducir el número de peticiones al servidor, hay muchos trucos para esto. Es más importante de lo que muchos piensan.

8.- Aprender

Quizá sepamos hacer cualquier web, podamos desenvolvernos en cualquier situación y desarrollar lo que se desea pero… siempre hay mejores formas de hacer las cosas!! mejores herramientas! mejores métodos! mejores prácticas! nuevos lenguajes! nuevos compañeros de los que aprender! nuevos networkings por hacer! y un grandísimo etc.

Se mejor profesional que ayer. No dejes de aprender, de leer blogs, manuales…. haz de la curiosidad y la tenacidad una de tus mejores virtudes.

¿tienes algo más que añadir? ¿no estas deacuerdo con algo? ¿quieres saber más sobre algún punto en concreto? Pues no seas tímido y escribe un comentario

Enlaces interesantes:

• El Reset CSS de Eric Meyer que uso.
• Motores de renderizado de los navegadores
• Historial sobre estadísticas de uso de los navegadores (bastante fiable)
• Efectos de gradientes con CSS
• YUI Compresor online para CSS y javascript

La odisea de montar un servidor.

Nunca habia tocado -y mucho menos instalado- un servidor en linux -y realmente tampoco su homólogo de Windows-.

Por eso y por otras necesidades nos propusimos -el equipo de WebSoftware 2.o- a montar un servidor con piezas antigüas de ordenadores, instalarle linux -en nuestro caso Ubuntu Server- y configurarlo lo mejor que podamos. Uno de los problemas que tuvimos fue que sólo podíamos conectar un pc a internet (debido a que en mi casa sólo tenemos cable-modem). Pero bueno, después de este pequeño impedimento nos pusimos a trabajar.

Primero montamos el pc, con piezas viejas, reunida por parte de todos los miembros y tratamos de sacar el mejor pc que pudimos a partir de ellas -y que funcionara correctamente claro-. Luego nos pusimos a instalar Ubuntu Server, con lo que formateamos los dos discos duros que teniamos (uno de 40 y otro de 80gb).

Seguidamente, después de conseguir que cogiera internet bien, nos pusimos a actualizar e instalar paquetes que nos hicieran falta. Toda una tarde de prueba-error hasta que conseguimos que funcionara.

Ahora mismo lo tenemos todo instalado pero nada configurado, nos falta experiencia (pasa eso estamos haciendo todo esto) pero con ganas y tiempo seguro que montamos lo que nos queramos.

Entre otras funciones lo utilizaremos como servidor git para nuestros proyectos, además de configurar copias de seguridad de nuestros servidores y base de datos para tener siempre todo almacenado.

El tiempo dirá cuales son los resultados

Configurar Gmate para Ruby on Rails

Después de estos pasos, tendréis un Gmate-Gedit muy similar a Textmate.

Tal como prometí anteriormente voy a deciros mi configuración de Gmate-Gedit que uso para trabajar y desarrollar en Ruby on Rails. Antes de nada, decir que esta es mi configuración personal, cada desarrollador tiene su propio método, sus propios programas y costumbres, lo ideal es que cada uno se haga su propio perfíl según su forma de trabjar. Empecemos:

Para quién no lo recuerde Gmate es un proyecto para modificar el Gedit -editor de texto de Gnome- para que se parezca a Textmate de Mac. Mayormente instalando plugins externos entre otras cosas.

Forma de instalar Gmate:

1. Añade Ubuntu on Rails PPA en System → Administration → Software Sources on Third Party Software (o en synaptics):

     ppa:ubuntu-on-rails/ppa
   

2. Instala gedit-gmate con Synaptic o en consola con:

     $ sudo apt-get install gedit-gmate

Para otras formas de instalación si no funciona esta, id a la página del proyecto (en inglés).

Gedit preference

Esta primera imagen vemos las configuraciones generales de Gedit. Las dos primera vienen activadas de forma predefinidas, las otras que marco se refieren a:

• Mostrar el número de la linea (fundamente )
• Marcar la linea en la que estoy trabajando.
• Marcar el parentesis -o corchete- que empareja con el parentesis -o corchete- en el que tengo el cursos.

Sigamos ahora con la pestaña “Editor“:

Gedit Preference - Editor

Aqui sencillamente lo activo todo, lo que hacemos:

• Convertir cada tabulación en 4 espacios.
• Activamos la sangría automática
• Creamos copias de seguridad (este viene predefinido)
• Decimos que se salve automáticamente cada 3 minutos, aqui no queremos perder trabajo!!

La siguiente pestaña, “Font & Colors”:

Gedit Preference - Font & Colors

Para gustos colores, asi que aqui tenemos una lista bastante larga para elegir el tema que queramos, en mi caso tengo Darkmate, pero cualquiera puede servir.

Si puedo añadir un consejo diría que elijais un tema viendo código para que vayais viendo como se ve. Algunos temás aunque muy bonitos no son prácticos a la hora de programas, pues no distintue entre palabras del lenguaje y cualquier otra palabra, por ejemplo.

Aqui llega el plato fuerte, la pestaña “Plugins“. Vayamos uno por uno (sólo hablaré de los que tengo activados):

1. Align: alinea bloques de texto en columnas
2. Class Browser: en ruby y RoR usamos clases, nos será muy útil este navegador de clases para manejar funciones y variables.
3. Document Statistics: no es primordial pero me gusta saber el número de lineas que llevo escritas, número de palabras, espacios en blanco, etc.
4. External Tools: añade una nueva opción al menú Tools, desde ahi podremos ejecutar comandos como en un shell, muy útil para ejecutar todas las posibilidades de un proyecto Ruby on Rails.
5. File Browser Pane: fundamental. Un navegador de archivos para movernos rapidamente por las carpetas del proyecto.
6. Find in Files: encuentra en todos los archivos de tu root de proyecto (busca en todos los archivos dentro de la carpeta donde te encuentres en el navegador de archivos).
7. Gemini: útil si te acostumbras, cierra parentesis, corchetes y comillas dobles.
8. Go to File: una forma fácil para moverte entre archivos. Potente si lo manejas desde el teclado.
9. Rails Extract Partial: un plugin que nos facilita sacar parciales con sólo pulsar un botón. Muy útil en ciertos momentos.
10. Rails File Loader: identifica si un archivo es parte de un proyecto Ruby on Rails y lo señala como lenguaje.
11. Rails Hot Command: una opción que se nos abre con todas las opciones de comandos que dispone Rails, muy útil si estamos empezando y aún no los sabemos. Aún después nos será de ayuda a veces jeje
12. TabSwitch: se nos activa la posibilidad de cambiar de pestaña con Ctrl-tab.
13. Word Completion: completa la palabra que estemos escribiendo. Es útil pero hay que tener cuidado de no caer demasiado, pues a veces las sugerencias pueden dar caso a error. Es un plugins que necesita aún mejorar.
14. Zen Coding: Este plugins es útil sobretodo si no usamos gemas como haml -el cual recomiendo-. No ayudará a escribir código html, hay varios tutoriales por internet pero basicamente escibes la palabra clave y pulsando Ctrl+E se escribe el codigo HTML.

Eso es todo lo que tengo activado, en otro post escribiré como se pueden usar y en que casos los recomiendo y cuales no.

Espero que sea de provecho para algunos, recordad que cada uno debe encontrar su configuración según su forma de trabajar, el tiempo y la experiencia es la mejor compañera para este tipo de cosas.

Saludos y felices fiestas!!!

Este hilo es una extensión de:

• Textmate en Linux => :Gmate

Desarrollo Web a 0€ y legal

Uniendo mi faceta de desarrollador web y mi afán por el software libre, llegué a un problema el día que decidí pasarme a linux y trabajar desde él. Acostumbrado a programas como Photoshop, Dreamweaver, etc… necesitaba tiempo y fuerza de voluntad para adaptarme a nuevos programas.

¿Cuál es la ventaja? Software libre = legal y gratís (en el caso que nos atañe). Así de simple para mi.

¿Cuál es la desventaja? Nuevos programas, nuevas costumbres. Quizás menos potentes en algunos casos pero aqui el profesional soy yo y no un programa. Por tanto, ni me veo ni quiero ver limitada mi productividad a un programa comercial. Llamadlo cabezonería si quereis

Os pongo una tablita para que os hagais una idea:

1. Sistema Operativo Windows -> 400€
2. Microsoft Office -> 670€
3. Adobe Dreamweaver -> 556€
4. Adobe Photoshop -> 980 €

En total más de 2.600€… no estoy dispuesto a gastarme tanto dinero. La empresa que monte no va a tener que gastarse ese dinero. A nivel individual un usuario puede usar cracks y tenerlo de forma ilegal, pero para una empresa no es nada recomendable.

Si miramos para el software libre tenemos:

1. Linux -> 0€
2. Openoffice -> 0€
3. Bluefish/kompozer/Quanta+/gedit + plugins … -> 0€
4. Gimp -> 0€

Una vez visto todo esto, es buscar información, manuales, metodologías de trabajo -si lo necesitas-, etc… y en este punto puede que os ayuden estos enlaces:

• Charla sobre Desarrollo Web en linux por Jesusda en la Universidad de Murcia y turno de preguntas.
• Alternativas a Dreamweaver en linux.
• Otro listado de alternativa a Dreamweaver (más completo).
• Videotutoriales para Gimp.

Como siempre este tipo de post lo termino con un consejo: “Pasate al software libre, se legal. Te costará tiempo y esfuerzo al principio pero después mejorarás como profesional y serás mas rentable que la competencia“.

Iniciador Málaga Diciembre – Business to Street

Hoy a las 18:00 se celebró el Iniciador de Málaga en el Colegio de Veterinarios de Málaga con la exposición de Gerardo C. Fernandez sobre el E-commerce a pie de calle.

Empezó tal como terminó, siendo una ponencia original. No sólo lo consiguió dándonos unos sobres misteriosos que no podíamos hablar sino también haciendo varias similitudes un tanto extrañas al principio pero no carentes de sentido. Así, fue.

Me quedo con muchas cosas de Gerardo C. Fernandez -con su sitio www.lugardelvino.com- y con la forma de trabajo y ver las cosas en el Grupo Decantia. Así que recuerde ahora mismo:

• “No entiendo porque es normal el salto al comercio electrónico y sin embargo es raro que se baraje la opción de que un comercio electrónico de el paso al mundo real”
• “No hace falta tropezar para aprender de una experiencia. Mantén los ojos abiertos”
• “Hay que ser, estar y parecer. El contenido vendrá con el tiempo”
• “Las grandes ideas se pueden combatir. La buenas ideas, trabajadas, también”

No habrá vídeo resumen pues no se pudo grabar, esperemos pronto poder contar con las diapositivas que se usaron.

Pronto pondrán el resumen y añadiré un enlace desde aquí. Por mi parte me alegra haber visto caras conocidas del iWeekend y de la Asociación de Webmaster de Málaga. Nos veremos de nuevo chic@s!

Reconstrucción de la web principal

Estos días estoy más inactivo del blog porque desde Web Software 2.0 estamos reconstruyendo nuestra web principal.

La actual la hicimos a la prisa para tener una mientras terminábamos dos proyectos en los que estábamos inmersos. Ahora que ya estamos libre de ellos, nos hemos puesto enteramente con nuestra web y de forma paralela con FIEL.

¿Qué es FIEL? No podemos desvelar muchos detalles pues aún está en fase de desarrollo, pero lo que si puedo decir es que en nuestra nueva web habrá una zona de clientes. En ella se podrá ver información interesante como posibles subvenciones que pueden solicitar, la información de su proyecto, sus correos, etc… Aquí es donde entra en acción FIEL -Fast Information Exchange Lace- una herramienta que estamos desarrollando para nosotros mismos y que pensamos liberar para nuestros clientes y demás interesados.

Pronto podréis verlo en acción.

Por ahora seguiremos trabajando en el nuevo diseño y las funcionalidades.

Un abrazo a todos! y pronto… a disfrutar de las fiestas!

Texmate en Linux => :Gmate

¿Cómo trabajamos en Ruby on Rails? La respuesta más fácil es con cualquier editor de texto, pero ya que estamos con programación ágil, ¿por qué no usar un programa que nos ayude aún más?

Para esta respuesta ya tenemos varios variantes, las IDES más conocidas son Aptana (Radrails), Netbeans, Idea, etc… vayamos uno a uno:

• Radrails 2.0: Fue la primera que utilicé -y además en windows… valgame dios!!- en principio parece muy bueno, es fácil acostumbrarse a él y empezar a desarrollar tus diseños. El problema llega para hacer cosas que se salgan un poco de las opciones típicas, y es que instalando gemas nuevas o jugando un poco con el código lo puedes mandar todo al garete.

Pronto saldrá la versión 3, por lo que he podido ver en los videos van a romper un poco los esquemas actuales de Radrails y van a adaptarse más al Textmate de Mac. Se quitan muchas opciones e historias y se simplifica su uso. Estoy ansioso por probarlo

• Netbeans 6.7: Pronto saldrá la versión 6.8. Hablan muy bien de este IDE, yo lo he usado poco y me parecía demasiado engorroso para las ventajas que podrían darme -mirando desde mi forma de trabajar-.
• Idea 8: (de pago) Apuesto por el software libre, al ser de pago no lo he probado pero bueno, dejo constacia de este programa por si alguien quiere echarle un vistazo. Pronto saldrá la versión 9.

Se necesita Rails Plugins para que funcione, lo podéis encontrar en este enlace.

Los afortunados de Mac tiene Textmate, el entorno de programación para Rails más usado. Para los que tenemos PC -en mi caso por poco tiempo – tenemos que buscar otras alternativas, y mis plegarias fueron escuchadas cuando encontré Gmate.

Gmate

Exactamente, Gmate es un trabajo para convertir nuestro Gedit -editor clásico de linux con escritorio Gnome (ubuntu por ejemplo)- en un auténtico clon de Textmate. Podéis encontrar toda la información desde este enlace, veréis algunos videos, como instalarlo e incluso los archivos de todo el proyecto en GitHub.

Llevo unos días usándolo y desde lejos, este es mi mejor consejo: usa Gmate

En siguientes post, diré mis preferencias y configuraciones en los plugins. Espero que sea de provecho!
EDITADO (13/12/09):

Como veo que este post tiene mucho tráfico actualizaré un par de notas.

Por un lado decir que he leido una noticia que hay un plugin para programar en Ruby on Rails con Microsoft Visual Studio, no lo he utilizado nunca así que no puedo decir nada al respecto. Si googleais un poco encontraréis muchos enlaces, os paso el que me comentarón a mi.

Para los fans de jEdit encontré un tutorial para asemejarlo a Textmate, el enlace es este (inglés).

Apuesto por lo legal y nada de copias pirata así que siempre me gustan más las alternativas libres. Nada de CodeGear y otros muchos -al menos por mi parte- que no tienen nada que envidiar a los que he comentado.

Lanzamos – Construcciones Duran e Hijos S.L.

Duran e Hijos S.L.

Haciendo mención al blog de mi compañero Luis Campillos, publico esta noticia sobre el lanzamiento de una nueva web por parte del grupo de WebSoftware 2.0. En esta ocasión se trata de…

Hola,

WebSoftware 2.0 se complace en anunciar la puesta en marcha de la pagina www.duranehijos.com. Se trata de un empresa de construcción en Iznájar (Córdoba) que cubre todo tipo de trabajos desde pequeñas reformas a grandes construcicones como bloques de pisos, etc. También disponen de servicio de contenedores y pluma.

Como valor añadido se ha dispuesto el sitio web con la disponibilidad de seleccionar el idioma, ya sea inglés o castellano.

Sin más queremos desearles suerte y que no les falte el trabajo.

Gracias. Nos vemos.

No tengo más que añadir al mensaje de mi compañero

Presentación Arranka Pegatinas en GuadalInfo de Iznájar (Córdoba)

El equipo de WebSoftware 2.0 ha aceptado la invitación por parte de MTB Los Arrankapegatinas para asistir y presentar la nueva web del club. La infomación podéis verla en su blog, en esta dirección.

El próximo día 4 de diciembre tendrá lugar la presentación de la nueva web del Club MTB Los Arrankapegatinas de Iznájar.

Este Club, de reciente creación, nace del deseo de compartir una pasión como la del ciclismo, un deporte muy completo y hermoso, cada vez más practicado y apreciado.

Acércate el día 4 sobre las 21:00 horas al Centro Guadalinfo y ven a conocer este club y su nueva página web!!

Presentaremos el funcionamiento y uso de la web e intentaremos promover el deporte, la salud y el compromiso social desde WebSoftware 2.0

Nos vemos allí