La semana pasada os revelamos los secretos de los profesionales en diseño web en: Consejos para el diseño web, hoy nos centramos en la programación web.
Repasaremos los consejos y trucos que hemos recopilado de los profesionales con más experiencia en el sector de la programación web.
La experiencia muchas veces es la base de un buen profesional, aún así, hay atajos. Los consejos que proponemos hoy, vienen dados por trabajadores que a través del ensayo y error, de pelearse horas y horas con el ordenador, han conseguido tener una biblia de programación web infalible para tener buenas habilidades y una metodología de trabajo. Servicios abiertos, hacks de programación móvil y guías de desarrollo para responsive, lo veremos todo.
- Listar los elementos
La clave para que los elementos de la página no se nos desordenen o se nos monte un caos cuando estamos creando la página web, es importante asignar unos porcentajes a cada elemento en la disposición que van a ocupar en la página.
Con esto, pasar de la programación web a la responsive también es mucho más fácil.
- Sandbox
Para desarrollar técnicas, efectos CSS o otros tipos de transiciones créalo desde un proyecto Sandbox. De este modo sabrás en todo momento si se crean errores o si puedes ser susceptible a alguna penalización de Google.
- Inspectores Web
En la programación web hay muchos dilemas y discusiones entorno cuál es el mejor inspector web. Aún así algunos programadores admiten que los mejores navegadores son Chrome y Safari ya que permite ver las actualizaciones al momento. Clicando en un elemento y seleccionando “Inspeccionar elemento”, de este modo todos los CSS aplicados y cambios serán visibles en el panel de inspección.
- Más allá de Firebug
Los navegadores Safari y Chrome tienen un inspector web pero hay algunos expertos de programación web que apuestan por Firefox ya que la tabla de herramientas que propone permite ver todos los errores de CSS cuando se hacen tests de la pantalla en distintos tamaños.
Firebug te permite ver distintos tamaños de pantalla en una sola sin tener que cambiar de navegador.
- Opciones de código
No sigas nunca la misma plantilla, explota las distintas opciones que puede tener tu proyecto por muy pequeño que sea. Con la práctica se aprende, se adquiere experiencia y se perfeccionan habilidades.
- Git: Otros caminos
Trabajando en proyectos de grandes magnitudes se necesita un buen sistema de versiones. Algunos servicios los encontramos con GitHub, pero el problema es que son proyectos privados. Tu código se hace público posteriormente en los servidores de este programa, por eso recomendamos GitLab.
GitLab es muy parecido a Github pero es un servicio libre y fácil de instalar en tu propio servidor. Lo mejor para instalarlo es usando NGINX con Unicorn para mejorar la velocidad y el desarrollo en la programación web.
La mayor ventaja es que tu código se va guardando al momento y se van viendo los cambios.
- Etiqueta, comenta y ponle nombre a tu código
Trabajando en equipo es importante que tus compañeros sepan que es cada cosa. Poniéndole nombres a tus carpetas, archivos y códigos será mucho más fácil. Ponerlo por carpetas y organizarlo por PSDs y FLAs
- Asegura tu web
Antes de terminar el proyecto de programación web, pasalo por ASafaWeb.com. Esta página creada por Troy Hunt, el MVP de Microsoft, analiza las páginas en términos de seguridad y te comenta cómo resolver estos errores.
- Automatizar
No pierdas el tiempo haciendo tests por unidades, automatízalo. El tiempo destinado con NAnt y MSBuild es tiempo ahorrado, sobre todo cuando se acercan las entregas.
- Diseño comparado con resultado
Hay un plugin de Firefox que permite comparar el diseño y la web real una vez programada. Pixel Perfect nos deja tener el diseño de la web mientras se está haciendo la programación web para asegurar que todo ha quedado como se había planeado.
Con estos consejos, y otros que os iremos dando, se agilizará el trabajo y junto la experiencia que se vaya adquiriendo, el proceso de programación web será mucho más eficiente.