Guía » Para empezar en el Diseño y Desarrollo Web

No hay duda de que sea difícil empezar algo desde cero. Quizás el tema del Diseño y el Desarrollo Web también está dentro del saco, pero solo leyendo, entendiendo, investigando y experimentando se aprende al igual que cualquier otro tema. Esa no es la razón de esta guía, pues eso es lo que tú por tu propia cuenta debes hacer. Nosotros podemos ofrecerte todo el material y ayuda que desees, pero sin tu parte, el tema no sería tan interesante como ya lo es.

El propósito es, que esta lectura sea lo primero que leas antes de lanzarte a la aventura. Vamos a empezar de lo más básico hasta irnos por las ramas.

1. Diseño Web

El diseño web agrupa diversas tecnologías y técnicas que deberemos dominar en el tiempo para crear páginas web, y con ellas, un sitio web. Estas no se aprenden de un día para otro, ni las encontrarás inmediatamente. Aunque todos los conceptos estén agrupados, algunos deben aprenderse antes que otros debido a su complejidad y jerarquía.

2. Sitio web

Es el conjunto de páginas web y archivos enlazados entre sí bajo un nombre de dominio como www.google.com o www.documentoweb.com. Cada sitio en Internet está alojado o hosteado en alguna computadora a la que llamamos el servidor o hosting.

3. Página Web

Es la principal forma que da vida a internet. Corresponde a una plana que contiene diversos elementos insertados, primordialmente:

• Información
• Enlaces

Solo he puesto dos, porque realmente solo esto es lo que se rescata para darle sentido a un sitio: La información porque sin ella no habría sentido en entrar a algún sitio (principio básico, y muchas veces se olvida de ello) y los enlaces porque sin ellos nos quedaríamos estancados en lo primero que vemos quitándonos la valiosa navegación.

De forma secundaria, podemos encontrar:

• Imágenes
• Vídeos
• Archivos
• Y todo tipo de formatos multimedia

Esto último también es importante ya que da el apoyo para lo primero. Ya sea visual, audiovisual o cualquier tipo de apoyo en otro formato como PDFs o animaciones Flash, nos sube de forma muy agradable la experiencia dentro de cualquier sitio. ¡Navegar solo con texto es aburrido no?

Detrás de una página web, existe toda una estructura y códigos (invisibles hasta ahora) a seguir para lograr mostrar todo lo mencionado y mucho más.

4. Estructura de una Página Web

Ya tenemos los conceptos básicos y necesarios, ahora veremos la parte más técnica como mencionamos en el punto 1 y al final del 3.

Una página web se crea con diversos códigos. El primero se llama HTML, el "esqueleto" de una página web. El segundo es el CSS, quien le da todo el estilo a este esqueleto.

4.1. HTML

El HTML es un lenguaje de marcas. Identifica cada elemento dentro de la página web con su significado. Para dar ejemplos concretos: marca qué parte del texto escrito es el título, cual parte es un párrafo, dónde estan los enlaces, cual es una lista de items, donde está una imagen o un formulario. Todos estos elementos y muchos más son parte del HTML, que se pueden escribir y configurar a nuestro antojo dentro de la página.

El lenguaje puede ser leído por cualquier medio, ya sean los distintos navegadores que existen en internet, el de tu teléfono móvil o algunos que ni siquiera se ven, como los lectores de pantalla, el mismísimo Google que recopila datos de las páginas o un futuro software o hardware. Por ello, es indispensable utilizar correctamente el lenguaje, utilizar cada cosa para lo que fue hecha y no para el uso que estimes conveniente, ya que en un futuro, ese código mal configurado acarreará consecuencias.

Hoy en día el HTML ha evolucionado. Ya hemos pasado la versión del HTML 4 y actualmente nos encontramos en la versión del XHTML 1.0 (podría decirse un HTML extendido) que es la que oficialmente se recomienda. En el futuro, el nuevo HTML será el HTML5 (o bien eso es lo que queremos) que está en fase experimental y tiene muchas cosas prometedoras (pero no nos saldremos de nuestras casillas).

4.2. CSS

El CSS es otro lenguaje y complementa al anterior, identifica los elementos del HTML para otorgarles una apariencia y así lograr una agradable presentación.

El llamado estilo CSS se crea en una Hoja de estilo, un documento independiente del documento HTML. Esta es una de las grandes ventajas, pues, al modificar tu hoja para cambiar alguna apariencia que ya no te ha gustado, esta se aplicará en todas las páginas que la tengan enlazada (y pueden ser millones).

Aunque los antiguos navegadores que aún se utilizan no respetan bien la sintaxis de nuestro código CSS, es indispensable para un diseñador dominar las técnicas para lograr buenos resultados y en todos los navegadores que el mundo utiliza.

En la actualidad nos encontramos con la versión CSS 2.1, aunque solo la llamamos CSS. Está en implementación el CSS3 que es bastante prometedor, pero aún no es soportado por todos los navegadores webs, así que nos quedaremos y bastará con el mencionado.

5. Ideologías y técnicas

Si bien luego de aprender estos dos maravillosos lenguajes complementarios, no basta para completar un sitio. Se necesitan ciertos conocimientos como base para empezar a trabajar con ellos, tales como:

• Accesibilidad
• Usabilidad
• Experiencia del usuario
• Cross-browser
• Web 2.0

5.1. Accesibilidad

Se refiere a que no se restrinja el acceso a un sitio web. Que cualquier persona incluso con discapacidades de cualquier tipo, pueda tener el acceso.

Este principio es usado por todo el mundo y la web no se queda afuera. Quizás has notado que en los costados de las escaleras hay subidas planas (sin escalones) con barandas, que en los baños hay uno mucho mas grande con barandas o que en el autobús siempre hay reservado un asiento para personas con discapacidades.

Ya sea por ceguera, daltonismo, discapacidades motrices, el dispositivo que se use o incluso la edad, nuestro deber como diseñador es que ninguna persona se quede afuera, que el diseño no sea débil y que sea útil para nuestros usuarios o clientes. Para ello el uso óptimo del XHTML y CSS es extremadamente esencial.

Un sitio debe poder utilizarse en las condiciones más extremas: como sin javascript, sin imagenes o incluso sin hoja de estilo.

5.2 Usabilidad

El uso óptimo de la navegación dentro del sitio, la facilidad con que se llega a alguna parte de él o lo resumido que están sus contenidos ofreciendo más, es parte de esta técnica llamada usabilidad, que no es más como la palabra lo dice.

Si nuestros visitantes pueden llegar a algún contenido de nuestro sitio con muy pocos clics, se dice que es usable. Si completaron un formulario sin complicaciones, también se dice que es usable. Si leyeron un texto en 5 segundos, se dice lo mismo. Si tuvieron que esperar una semana para recibir un "no" como respuesta, eso no sería nada de usable.

El término se relaciona mucho con la facilidad, la intuitividad y la efectividad. No aburrir a alguien dándole lo que quiere de una forma muy fácil y que no se necesite explicar es muy cómodo para el visitante, y también para tí.

5.3. Experiencia del usuario

Se relaciona mucho con la usabilidad. A medida que un visitante navega por tu sitio, reconoce y va aprendiendo como funciona.

Entregarle nuevas cosas cuando el hace clic sobre algo o invitarlo y conversar con el hará que su experiencia sea maravillosa, que se sienta como en casa desde la primera vez que entra en el sitio.

Cuando alguien abandona tu sitio, debe llevarse una muy buena impresión y saber bien qué te ofrecía aquel sitio, para contarle a sus amigos o sus colegas empresarios, que se yo.

5.4. Cross-browser

Ya nos topamos con este tema. Se refiere a diseñar para todos los navegadores sin exclusión de alguno.

Para lograrlo debemos dominar el CSS, saber los defectos de los navegadores, sobre el uso correcto de las tipografías o los formatos de imagen que son admitidos por ejemplo.

5.5. Web 2.0

Uno de los puntos más importantes es este. Si bien la web 2.0 no se puede definir específicamente se puede tratar. Me gusta explicarla como una ideología, ya que es un conjunto de ideas para sacarle provecho a las nuevas tecnologías web sobre nuestro sitio más el uso por sus usuarios.

En una Web 2.0 existe una multidirección de información. Si antes una persona o un grupo selecto de ellas administraba un sitio subiendo contenidos, hoy ocurre algo distinto: todas las personas forman la web.

Alguna vez dije que la web 2.0 fue causada por el campo de formulario, y sigo pensándolo. Un campo de formulario del HTML permite a una persona escribir, y ello conduce a usar sus escritos para formar un sitio web completo y dinámicamente, que crece con la comunidad de personas.

6. Más allá del diseño: el Desarrollo Web

Detrás del diseño y su estructura hay algo aún más importante: se trata del Desarrollo Web. 

Este término se emplea para el uso de las tecnologías del lado del servidor y del cliente que involucran algunos o muchos procesos a fin de realizar tareas para el usuario o simplemente mostrar información.

Por el lado del servidor se refiere a aquellos lenguajes que actúan y son interpretados desde la computadora (el servidor) y que arrojan un resultado para que sea leído por el navegador. Entre los más usados y en la mejor combinación está el PHP y el SQL.

Por el lado del cliente se refiere a aquellos que actúan en el navegador (el cliente) donde su interpretación depende totalmente de él (y de ningún estándar). Sin duda aquí entra aquí el JavaScript.

6.1. PHP

Es uno de los grandes lenguajes de programación. Se caracteriza por su dinamismo y flexibilidad.

PHP interpreta el código y entrega un resultado, por defecto en HTML. Se utiliza principalmente para captar y jugar con los datos dentro de una página en conjunto de una base de datos. Para explicarme mejor, podemos por ejemplo guardar los datos de un formulario de registro y posteriormente mostrarlos en una tabla del HTML en el orden y con los datos que quisiésemos, o guardar un comentario y mostrarlo si se cumple una fecha determinada. También validar un formulario si no se escribe un campo o mostrar resultados según la URL de la página.

En fin, podemos crear infinidades de cosas con el y cuando se domina, tenemos una gran herramienta de trabajo con la que sería innecesario crear tantas páginas en HTML cuando podemos hacerla con un poco de PHP.

PHP es algo mayor, no lo recomiendo para aprenderlo en conjunto del HTML y CSS. Primero se debería dominar muy bien ambos para lanzarse a este nuevo nivel. 

6.2. MySQL

MySQL es un gestor de bases de datos basado en el lenguaje SQL. Es una muy buena ayuda visual con toda su interfaz gráfica para entender como funciona y se estructuran todas las bases de datos.

En conjunto de PHP es tremendamente poderoso: nos entrega organización y mucha más flexibilidad en la obtención de datos por medio de ambos lenguajes.

El SQL un lenguaje muy simple comparado con PHP, y lo recomiendo enormemente trabajarlo en conjunto asi como se hace con el HTML y el CSS.

6.3. JavaScript

JavaScript nos permite controlar con dinamismo la experiencia dentro del sitio modificando o agregando elementos dentro del código HTML como efectos visuales o manipulación de los elementos.

El uso de JavaScript está presente en todos lados, siendo el AJAX su nueva implementación. Ajax nos permite manejar ciertas cosas dentro de una página web sin recargar la misma, siendo esto una muy buena experiencia para el visitante.

Existen muchas librerías que nos permiten usar JavaScript de forma muy fácil, y que se han dedicado para que los resultados sean los mismos en todos los navegadores (recordar javascript es interpretado con diferencias en cada navegador, pues no es un estándar).

Si utilizas JavaScript, asegúrate de que no sea intrusivo, es decir que aunque lo eliminemos, el sitio siga funcionando perfectamente [accesibilidad]. No todo en el mundo usa o tiene JavaScript.

7. ¿Quién está detrás de todo esto?

La organización que implementa el HTML, el CSS y otros lenguajes, es el consorcio de la red global mundial o W3C, quien pone todas las normas a seguir y es nuestra autoridad en la web. Ellos nos ofrecen materiales y herramientas que podemos usar para construir nuestros sitios.

La organización de PHP es otra, ubicada en PHP.net quien nos ofrece toda su documentación al igual que MySQL.

8. Software

Existe distinto software para crear todo lo mencionado. Pero, algunos crean demasiado, siendo que el aprendizaje no evolucione mucho que digamos.

• Procesadores de texto actuales además de permitirnos escribir y guardar archivos en muchos formatos, nos ayudan visualmente coloreando la sintaxis de los lenguajes. Tales como Notepad++ o alguno otro gratuito.
• Software de "Diseño Web" te permiten "diseñar" páginas web de forma automática, sin mucha interferencia tuya. He aquí un programa que a muchos les duele (incluyéndome): el llamado Dreamweaver. Si realmente deseas aprender, no lo utilices.
• Navegadores Web los necesitas todos ya que tus diseños deben visualizarse correctamente (no necesariamente igual, pero sin errores) en todos ellos [cross-browser]. Existe IETester para comprobar diseños en las distintas versiones de Internet Explorer.
• Programa de diseño gráfico como Photoshop o Gimp para crea gráficos o editar imágenes.
• Apache XAMPP server u otro para utilizar PHP y MySQL.

Y no necesitas nada más, a excepción de Google.

Twitter Facebook Feed RSS

www.DocumentoWeb.com - Licencia Creative Commons