Antes de empezar un proyecto web.

…
A veces es complicado escoger un tema para desarrollar un post. Lo ideal es tratar sobre un tema actual que capte la atención de los navegantes y por lo tanto pueda convertirse en una visita a tu blog.

He de reconocer que hoy me meto en arenas movedizas con este post, ya que no soy un experto en la materia. Pero me parece tan importante que hoy quiero dar algunas pistas a aquellos que quieran acometer un nuevo proyecto web o mejorar lo existente.

Me he pasado las Navidades buscando documentación y traduciendo algunas infografías que considero de máximo interés para entender los asuntos que voy a mencionar más adelante. Espero que os parezca interesante porque son aspectos clave para comenzar con buen pie un nuevo proyecto web.

26 Cosas que debes saber antes de desarrollar una web.

¿Qué aspectos son cruciales y debes tener en cuenta si quieres desarrollar una página web? Pixaal nos los cuenta en esta infografía que menciona desde el diseño, hasta el hosting, pasando por muchos más aspectos, 26 en total. Todo un hallazgo para todo el que quiera lanzarse a tener su propio site en Internet.

Poner una web en marcha es muy sencillo, lo complicado es conseguir objetivos. No olvidemos empezar por lo más básico para conseguirlo. Aquí os he adelantado algunos puntos. Esto es como construir una casa, cuanto mejor sean los cimientos y los materiales, mejor será la edificación.

Diseño Responsive: Diseño web adaptable o adaptativo.

Con la aparición de los tablets y los smartphones el abanico de tamaños de pantalla se ha expandido considerablemente, apareciendo muchísimas dimensiones diferentes y rebajando incluso los porcentajes de los formatos más estándares.

Desde hace ya unos años en el desarrollo web se ha sustituido en cierta medida el problema de la compatibilidad de navegadores (gracias a que poco a poco todas las compañías se están ciñendo a los estándares con HTML5/CSS3 y otras se basan directamente en web-kit) por el problema de las resoluciones de los dispositivos.

La solución técnica que se le ha dado en el desarrollo web al problema de esta diversidad de resoluciones web se llama Responsive Web Design que permite hacer interfaces adaptadas al entorno del usuario mediante estructuras e imágenes fluidas gracias a media-queries de CSS. Las media-queries son una serie de órdenes que se incluyen en la hoja de estilos que indica al documento HTML cómo debe comportarse en diferentes resoluciones de pantalla.

Para entenderlo mejor, los diseños de las Páginas Web, al igual que los periódicos y las revistas, están basados en columnas, entonces con la filosofía del Diseño Adaptativo, si una web a resolución de PC (1024×768 px) tiene 5 columnas, para una Tablet (800×600 px) necesitaría sólo 4, y en el caso de un smartphone cuyo ancho suele ser entre 320 px y 480 px las columnas usadas serían 3.

El Responsive Web Design es la mejor solución para pantallas desde 27 a 7 pulgadas o incluso un poco menos; pero cuando se trata de desarrollar para smartphones los procesos deben ser distintos ya que su caso de uso es distinto y por tanto se debería crear una versión o vista específica para este tipo de dispositivos.

De todas las formas os dejo una tabla que refleja estadísticamente a nivel mundial, europeo y de España las resoluciones de pantalla más usadas:

Google recomienda webmasters que sigan la mejor práctica de utilizar Responsive Web Design, es decir, que tengan el mismo HTML para todos los dispositivos y utilizando sólo consultas de medios CSS para decidir la prestación en cada dispositivo industria.

SEO o no SEO, esa es la cuestión.

Según Wikipedia, el SEO es

“El posicionamiento en buscadores u Optimización de motores de búsqueda es el proceso de mejorar la visibilidad de un sitio web en los resultados orgánicos de los diferentes buscadores. También es frecuente nombrarlo por su título inglés, SEO (Search Engine Optimization).”

La razón más importante por la que es necesario el SEO es porque hace más útil tu página web tanto para los usuarios como para los motores de búsqueda ya que, aunque estos últimos cada día son más sofisticados aún no pueden ver una página web como lo hace un humano, el SEO es necesario para ayudar a los motores de búsqueda a entender sobre que trata cada página y si es o no útil para los usuarios.

Aunque existen miles de factores en los que un motor de búsqueda se basa para posicionar una página u otra se podría decir que hay dos factores básicos: la autoridad y la relevancia.

• La Autoridad es básicamente la popularidad de una web, cuanto más popular sea una página o una web más valiosa es la información que contiene.
• La Relevancia es la relación que tiene una página frente a una búsqueda dada, esto no es simplemente que una página contenga un montón de veces el termino buscado, si no que un motor de búsqueda se basa en cientos de factores on-site para determinar esto.

A su vez el SEO se puede dividir en dos grandes grupos: el SEO on-site y el SEO off-site.

• On-site: El SEO on-site se preocupa de la relevancia, asegurándose de que la web está optimizada para que el motor de búsqueda entienda lo principal, que es el contenido de la misma. Dentro del SEO On-site incluiríamos la optimización de keywords, tiempo de carga, experiencia del usuario, optimización del código y formato de las URLs
• Off-site: El SEO off-site es la parte del trabajo SEO que se centra en factores externos a la página web en la que trabajamos. Los factores más importantes en el SEO off-site son el número y la calidad de los enlaces, presencia en redes sociales, menciones en medios locales, autoridad de la marca y rendimiento en los resultados de búsqueda, es decir, el CTR que tengan nuestros resultados en un motor de búsqueda.

Os dejo dos enlaces:

• Factores de posicionamiento web en 2013 de Social Mood
• 75 Pasos para hacer SEO y mejorar YA tu posicionamiento en buscadores de Bruno Vázquez-Dodero

Leyendo sobre la temática del posicionamiento en buscadores he encontrado esta interesante infografía que resume claramente y de modo intuitivo el peso que determinados factores tienen a la hora de posicionar nuestras páginas web en los buscadores. La infografía en cuestión proviene de Search Engine Land. La infografía en su formato original las podéis ver aqui y está traducida por Focus Soluciones.

Desarrollo de Páginas Web – El Ciclo de Vida.

El proceso del desarrollo web puede ser dividido entre diferentes pasos de un ciclo de vida. Esto puede ayudar a repartir efectivamente al equipo, y los estándares y procedimientos que pueden ser adoptados para lograr la máxima calidad.

En la infografía superior podemos ver la secuencia de hitos que plantea John Furness , un cronograma muy extendido que se puede encontrar en numerosas entradas de internet. Lo que más me gusta de este planteamiento es que evidencia una constante interacción entre cliente y diseñador, aunque lo más correcto sería decir entre cliente y proveedor de servicios, ya que es muy raro que una sola figura acometa un proyecto web de forma global.

Es posible que muchos proyectos web no sigan este discurso de forma literal, pero seguro que se observan todos y cada uno de sus hitos en algún momento del desarrollo. Por supuesto, este cronograma es orientativo, ya que cada proyecto es un mundo y los objetivos determinan la envergadura real del trabajo a realizar.

Hoy en día hay muchas formas de acometer el proyecto web y casi siempre el alcance del mismo está subordinado al nivel de inversión que se pueda realizar. Hay dos aspectos relevantes que inciden en el coste final del proyecto: el diseño y la codificación. Un diseño muy exigente puede obligar a construir una web desde cero y por ende un código fuente que lo soporte. Todos estos factores encarecerán y alargarán el tiempo de ejecución.

Una opción muy recurrida en la actualizad es la utilización de gestores de contenidos opensource como WordPress, Drupal,  Joomla, Magento o Prestashop (estas dos últimas orientadas al comercio electrónico) cuyo código base ya está creado y cuya funcionalidad puede ser incrementada con Plugins o Widgets ya creados por otros desarrolladores. La personalización de estas plataformas se hace mediante la utilización de temas que pueden ser adaptados hasta conseguir un acercamiento a la imagen corporativa de cualquier empresa. Obviamente, este tipo de desarrollos favorecen los plazos de ejecución así como los gastos de producción.