Crear una Web ¿por dónde empiezo? (parte II)

Continuamos con otro artículo, respondiendo a preguntas habituales que recibimos de interesados en el diseño y desarrollo web: ¿qué tecnologías debo aprender? ¿Por dónde empiezo?

En el anterior post, citamos a los dos lenguajes básicos de la web por los que comenzar: HTML y CSS. Deberíamos estar bastante familiarizados con ellos, tanto si queremos ser ‘todoterrenos’ como especialistas en algún área concreta del desarrollo web. A estos dos lenguajes añadiríamos conocimientos sobre los fundamentos de Accesibilidad, Usabilidad y SEO (en este último caso, técnicas de optimización ‘in-page’), es decir,  adquirir buenas prácticas en diseño web desde el principio, teniendo caro la importancia de los estándares, evitando el ‘código basura’  en nuestras páginas y que éstas sean amigables para los visitantes, sean personas (con algún tipo de discapacidad o no) o robots de buscadores. Creemos que es un fallo en la formación de diseñadores o programadores web empezar con herramientas como Dreamweaver o tecnologías como Flash, sin conocer esos mínimos fundamentos que comentamos.  Puede que obtengamos buenos resultados visuales, pero sin esa base, posiblemente no sabremos emplearlas o aplicarlas adecuadamente.

Y con este bagaje técnico ¿cómo seguimos avanzando en nuestro aprendizaje? Para algunos, los conocimientos transversales se acaban en las áreas que hemos comentado y a partir de ahora entraríamos en un campo de especialización: programación ‘front-end’ (en el cliente-navegador) o en el servidor, profundizar en diseño de arquitectura web, accesibilidad, interfaces, diseño gráfico en el entorno web,… Sin embargo nosotros incorporaríamos un lenguaje más a nuestros conocimientos básicos: JavaScript. No significa que sea cual sea nuestro papel en el proceso de creación de webs tengamos que ser expertos programadores en este lenguaje, pero si ser capaces de entender cómo funciona y estar familiarizados con él lo más posible.

Si no has programado nunca, y necesitas empezar desde cero, paso a paso, con un lenguaje muy sencillo, te aconsejamos nuestro curso «Aprende a Programar (con JavaScript)«. Verás que es más fácil (¡y divertido!) de lo que creías.

¿Por qué JavaScript? En un post dimos 10 razones para aprenderlo Es el lenguaje de programación de los navegadores, el estándar abierto (en realidad es el ECMAScript, pero todos lo conocemos por JavaScript) que puede funcionar en todos ellos sin necesidad de plugins adicionales. Es cierto que hay otras tecnologías como Flash (propietaria y cerrada, con lo que ello conlleva) y los Applets de Java que permiten dotar de interactividad y dinamismo al cliente web, pero ni son lenguajes nativos de este medio ni sobre todo estaban pensados para realizar una web con ellos. JavaScript se ha impuesto a la hora de dotar de interactividad a la web y en el apartado de animaciones gráficas, banners y diseños gráficos similares, aunque Flash era una buena herramienta, su falta de soporte en cada vez más plataformas (smartphones, varios navegadores importantes…) hace que se vaya sustituyendo por una nueva alternativa como HTML5 combinado con JavaScript.

Y más en detalle, ¿qué aporta JavaScript?. Pues muchas cosas, pero destacamos su capacidad para manipular e interactuar con el DOM de la página. El DOM (Document Object Model, estándar de la W3C) representa la página HTML y sus diferentes partes, como un conjunto de objetos relacionados en una estructura ramificada en forma de árbol, con nodos interconectados jerárquicamente. Es decir, si un ‘párrafo’ (un nodo o una hoja en ese símil del árbol ) está contenido en un ‘div’ (otro nodo), áquel será una rama de éste como puede verse en la imagen. Eso sí, la imagen suele representarse invertida, con el objeto del documento que contiene a todos los demás arriba.

Mientras HTML pertenece a la familia de los lenguaje de marcado, el DOM es de la familia de la Programación Orientada a Objetos (POO). HTML trata con elementos que pueden tener atributos con unos determinados valores (por ejemplo,  un elemento ‘párrafo’ que tiene  el atributo de identificación ‘id’ con un valor ‘inicio’: <p id=»inicio»>), y en el DOM esos elementos y atributos se convierten en objetos y los valores de esos atributos son propiedades (si no conoces o no estás familiarizado con la terminología de la POO, puedes consultar este post). Todo ello puede ser manipulado por un lenguaje de programación a través de las API que expone el DOM, es decir, métodos que pueden ser llamados por ese lenguaje para crear, eliminar o alterar dichos objetos.

Aunque lo anterior puede sonar farragoso para alguien sin experiencia en programación, el concepto es sencillo. El navegador cuando ‘lee’ la página HTML, además de presentarla en la pantalla construye un DOM, un mapa que proporciona a JavaScript (o a otros lenguajes como PHP, Java…) una interfaz para llamar a funciones que manipulen dinámicamente sus objetos y las propiedades de estos.  Además, también le da una intefaz para trabajar con eventos, es decir, le permite a JavaScript capturar cambios que se producen en el navegador o provocados por el usuario y dar una respuesta realizando cualquier tipo de acción de las que hemos comentado antes. Es decir, en HTML el párrafo es una etiqueta descriptiva, un elemento estático, pero con JavaScript podemos acceder a ellos y cambiar su contenido, aplicarle estilos de presentación, eliminarlos o crear unos nuevos modificando incluso la estructura de la página.

Para visualizarlo, mostramos un ejemplo en el cuadro de abajo. En él, hemos creado con HTML un par de párrafos, identificando el primero con el atributo id=»inicio» y un botón, con el identificativo «cambiar».  Con JavaScript, en la 1ª línea de código, seleccionamos al boton por su identificativo (getElementById=»cambiar») y lo asociamos a un objeto ‘boton’. En la 2ª línea, asociamos  la propiedad ‘onclick’ (ser pinchado) del objeto ‘boton’ a una función, en este caso anónima.  ¿Y qué hace esa función? Pues es la 3ª línea vemos que selecciona el primer párrafo de forma similar a como hicimos con el botón,  y en las 4ª  y 5ª líneas le aplica a ese párrafo escogido un estilo de tamaño de fuente mayor y le cambia el texto que contiene, respectivamente. Si pinchas en la pestaña ‘html’ verás los dos elementos ‘párrafos’ y el botón que hemos comentado y si pinchas en ‘result’ se ejecutará el código mostrando la página. Pincha en el botón y verás el resultado. Aunque es un ejemplo muy simple, nos puede dar una idea de la potencia que nos proporciona la combinación de JavaScript con el DOM.

¿Qué otras cosas podemos hacer con JavaScript? Pues citamos algunas:

• Acceder a los objetos propios del navegador, no solo del documento, y manipular  ventanas (si obtiene permiso) u obtener información detallada del propio navegador del usuario o de la resolución de su pantalla por poner unos ejemplos.
• A partir del input del usuario, procesar esos datos y devolver un resultado. Por ejemplo comprobar que el formato de una dirección email o un NIF que se ha introducido en un formulario es correcto o realizar cualquier tipo de cálculo a partir de unos números que haya introducido el usuario. En definitiva, procesar cadenas de texto, números, arrays, etc… como haríamos con cualquier lenguaje de programación de propósito general, eso sí, limitado al entormo del navegador y sin  acceder a los ficheros y discos del usuario.
• Transmitir y recibir información de un servidor en background, utilizando el objeto XMLHttpRequest, sin necesidad de refrescar toda la página, implementando Ajax en nuestras páginas. Un ejemplo conocido: presentar sugerencias al usuario mientras escribe en un casillero de búsqueda. Cada letra adicional que escribe, hace variar dichas sugerencias.
• Sacar partido de las posibilidades que nos ofrece HTML5 para crear ‘Aplicaciones Web’ y acceder a todas las nuevas API que nos trae este nuevo estándar. Este punto lo ampliaremos en el próximo artículo donde hablaremos precismente de él.

Como ‘extra’ os animaríamos a conocer alguna de la librerías que facilitan mucho la programación con JS y la compatibilidad del código entre navegadores. Podréis realizar cosas avanzadas en cuanto tengáis un poco de dominio. Hay varias muy buenas, pero recomendaríamos jQuery por su popularidad.

Para ver sus posibilidades, mostramos un ejemplo con jQuery también muy simple: una lista de párrafos que se modifican al pulsar el botón ‘cambiar’:

Si quieres ver algo más ‘animado’, puedes ver esta carrera de coches que realizamos como ejemplo en nuestro curso.

En el próximo post hablaremos sobre HTML5 y verás porque es tan importante JavaScript en este nuevo estándar.

Credits: imagen superior ‘Website under construction’ by © Spectral-Design-Fotolia.com / imagen ‘DOM’, elaboración propia