1.

1 Introducción

Mitzayapa.Mihai (CC BY-SA)

Las páginas web actuales, a las que accedemos diariamente en la world wide web y en
nuestras redes corporativas privadas o intranets, han evolucionado muy rápidamente
desde sus inicios en la década de los noventa del siglo XX. Los lenguajes empleados
para su construcción han sido los responsables de esa evolución, su simplicidad relativa
y su capacidad de adaptación han permitido que HTML, CSS y JavaScript hayan
acompañado ese vertiginoso recorrido de la web desde su nacimiento hasta la
actualidad. Cerca de 30 años de evolución constante. 

Las expectativas del usuario de la web también han cambiado. De la mera consulta de
información a la necesidad de que el acceso a los contenidos sea rápido, seguro, fácil y
atractivo. Además, este acceso debe facilitarse para una infinidad de dispositivos con
diferentes características: desde el ordenador personal hasta tabletas o teléfonos
móviles, pasando por televisores, vehículos, relojes, electrodomésticos... A la
complejidad que esta variedad de aparatos provoca, se une la necesidad de proporcionar
accesibilidad a todos los usuarios, sin importar o minimizando sus diferentes
capacidades.

El curso HTML, CSS y JavaScript avanzado que vas a realizar surge como continuación
del curso de iniciación a los lenguajes HTML, CSS y JavaScript del Centro de Recursos
y Formación del Profesorado en TIC —CRFPTIC—. El curso pretende, apoyándose en
los conocimientos y destrezas adquiridos en el curso inicial, profundizar en los tres
lenguajes sobre los que se apoya la web actual, por lo que resulta fundamental tener la
base proporcionada por el curso inicial. Al inicio de cada tema se indicarán los
conocimientos básicos necesarios para poder iniciarlo sin problemas; si no se dispone de
esa base, es muy recomendable repasar los contenidos indicados antes de profundizar en
los de este curso.

Se proporcionan  retos y ejemplos para poder ver en funcionamiento los conceptos que
se van presentando. Es muy importante dedicar tiempo a estudiar esos ejemplos y
modificarlos, así como intentar la realización de los retos antes de consultar su solución.
Se trata de escribir código, de entenderlo y ser capaces de reescribirlo para adaptarlo a
nuestras necesidades. En las materias relacionadas con el desarrollo web (y en general
en cualquier materia con una carga creativa importante) hay que seguir un proceso de
desarrollo, comenzando por la definición de nuestro objetivo: qué vamos a construir,
cómo va a ser nuestro sitio web; antes de desarrollarlo (escribir su código). Es muy
tentador invertir el proceso: primero escribir el código y, una vez visto el resultado,
definir nuestro objetivo. Con este segundo método finalizaréis el curso antes, pero no os
habrá servido de mucho, por eso os animamos a que le dediquéis el tiempo necesario,
experimentéis y os planteéis vuestros propios retos; tenéis a vuestros compañeros y el
equipo de tutores dispuestos a ayudar. 

1.2 Editores de código

Aplicaciones para PC
Ocultar

Para escribir documentos HTML, CSS o código javascript no necesitamos más que un
editor de texto plano o texto sin formato, como el bloc de notas de los sistemas
Windows. No obstante, puede ser de utilidad emplear otros editores de texto orientados
a la programación informática, ya que incorporarán ayudas como el autocompletado de
etiquetas, el resaltado de sintaxis o el cierre automático de elementos que nos serán de
ayuda al escribir en estos lenguajes.

Algunos ejemplos de editores especialmente diseñados para su uso con los lenguajes de
programación web son:

Atom, gratuito, multiplataforma y software libre: https://atom.io/ 

Notepad++, para Windows, gratuito y software libre: https://notepad-plus-plus.org/

Sublime Text, multiplataforma y gratuito para evaluación, se requiere la compra de una

licencia si se va a usar de manera continua: https://www.sublimetext.com/

Coda, para Mac OS, de pago: https://panic.com/coda/

Todos ellos cumplen sobradamente como editores para HTML, CSS o Javascript.
Deberemos configurarlos para el lenguaje que deseemos y estarán listos para ser usados.
Además admiten el uso de extensiones o plugins que facilitarán el desarrollo web para
entornos más profesionales.

Editores web
Ocultar

Además de los programas mencionados en el apartado anterior, existen editores web

que no precisan instalación, sino que se accede a ellos desde un navegador web, que
también nos pueden ser de utilidad para crear los documentos HTML, CSS o javascript. 
Glitch es, quizá, el editor más simple de esta categoría, pero permite crear proyectos
web completos de manera sencilla. Es gratuito y admite la edición por parte de varios
usuarios de forma simultánea: https://glitch.com

Share Code nos va a facilitar el trabajo colaborativo, ya que permite a varios

desarrolladores editar al tiempo el mismo documento. Incluye, además, un videochat
integrado. Requiere registro gratuito si queremos almacenar el código más de 24 h en
sus servidores. https://codeshare.io/

CodeAnyWhere es otro editor online que incluye numerosas y útiles funcionalidades,

pero su uso más allá de una demo de 7 días requiere el pago de una cuota anual.
https://codeanywhere.com/

CodeSandbox es un editor online gratuito con múltiples entornos preconfigurados

https://codesandbox.io/

StackBlitz. Otro editor similar a CodeSandbox, también gratuito y con integración con
la mayoría de bibliotecas de javascript. https://stackblitz.com/

Codepen
Ocultar

A pesar de la gran cantidad de herramientas, tanto de escritorio como online,

disponibles para escribir código HTML, CSS o Javascript; para pequeños proyectos o
para probar de forma rápida el código, existe un servicio web que destaca por su
simplicidad: Codepen https://codepen.io/ Es el que se empleará para mostrar los
ejemplos que ilustran los contenidos del curso. Su uso es gratuito, aunque disponen de
una suscripción de pago para activar características añadidas, que no necesitaremos
durante el curso. De hecho no es necesario siquiera registrarse para poder ver e
interactuar con los ejemplos propuestos; aunque sí es necesario el registro gratuito si
deseamos almacenar en nuestra cuenta el código que modifiquemos o creemos.

Los ejemplos de Codepen tienen este aspecto:

Se integran en los contenidos en ventanas que mostrarán el código (HTML, CSS o
Javascript) junto con una vista previa del resultado de ejecutar ese código. Estas
ventanas tienen sus barras de desplazamiento para permitirnos ver la parte del código
y/o del resultado que pudiera no estar visible en el espacio disponible. Además, en la
parte superior, aparecen unos botones para seleccionar (o deseleccionar) la vista que
deseemos: HTML, CSS, Javascript (JS) o el resultado (Result). Pulsando en ellos
activamos o desactivamos los paneles respectivos. Si pulsamos sobre el botón JS, por
ejemplo, nos mostrará el código javascript del fragmento. Si volvemos a pulsar sobre el
botón JS ocultaremos el panel de código, dejando toda la ventana para la vista del
resultado. Sucederá lo mismo si pulsamos HTML para ver el código correspondiente y,
después, pulsamos sobre el botón «Result»: el resultado desaparecerá dejándonos toda
las ventana para ver el código HTML. Pulsando de nuevo sobre el resultado lo
activaremos.

Es posible que determinados fragmentos de código no permitan la vista previa

dentro del curso (aquellos que incluyen elementos que no están permitidos en la
plataforma, como lenguajes de script o iframes). Son los menos y siempre se nos
ofrecerá un enlace para verlo dentro del editor en Codepen.

Por último, si deseamos trabajar con ese código, podemos pulsar sobre el enlace de la
esquina superior derecha («Edit on Codepen») que nos llevará a la página del fragmento
de código en el editor. Desde allí podremos tener una mejor vista del código, ya que se
ofrecen los tres paneles (HTML, CSS y JS) junto con la vista del resultado. Con el
botón «Change View» podremos personalizar cómo se muestran estos paneles; y
mediante el botón «Fork», situado en la parte derecha de la barra inferior, se creará
una copia del código para modificarla y guardarla en nuestra carpeta de
trabajo  (siempre que estemos registrados).

1.3 Servicios web

A lo largo del curso se emplearán una serie de servicios web específicos para la
realización de determinadas tareas. Son servicios que pretenden ayudarnos y simplificar
el uso de elementos complejos de los lenguajes. Se irán viendo en los apartados
correspondientes. No obstante, hay algunos servicios que, por su utilidad, se usarán a lo
largo de todo el curso:
Lipsum: Cuando diseñamos una página web, en ocasiones necesitaremos elementos de
relleno que nos permitan ver la apariencia del sitio, antes de contar con el contenido
definitivo. Para los textos se suele emplear un texto seudoaleatorio conocido como
lorem ipsum (surgido a partir de un texto de Cicerón). Existen multitud de generadores
de este texto, útil porque simula el tamaño de palabras y frases en idiomas de raíz latina
occidentales. Se viene usando desde el siglo XVI para rellenar textos cuando no se
disponía del contenido final. La web https://www.lipsum.com/, como otras muchas, nos
va a permitir indicar un número de párrafos, palabras, elementos de lista... y se encarga
de crearlos para poderlos copiar y pegar en nuestra página.

Dummyimage: Es un servicio similar al anterior, pero para su uso con imágenes. Estas
imágenes de relleno se emplean para ver el aspecto general del sitio hasta que se
disponga de las definitivas. Existen muchos servicios web que ofrecen imágenes de
relleno. Uno de ellos es https://dummyimage.com/ que destaca por la sencillez de
manejo: se pueden generar las imágenes de forma muy rápida y sencilla, bien a través
de un formulario que permite indicar tamaño, colores, formato y texto; o bien por medio
de la propia dirección URL: https://dummyimage.com/600x400/000/fff.png 
Caniuse: Se trata de un página que informa de manera gráfica de las posibilidades de
uso de determinados elementos de los lenguajes. Hay que tener en cuenta que tratamos
con lenguajes vivos, en continua evolución, que crecen día a día. Esto hace que, incluso
las últimas versiones de los navegadores web, no sean capaces de interpretar la totalidad
de los elementos del lenguaje, ya sea HTML, CSS o Javascript. En Caniuse podemos
hacer consultas sobre determinados elementos, y nos ofrecerá los navegadores y
versiones de los mismos que son capaces de interpretarlos. Por ejemplo, si consultamos
por el nuevo elemento de HTML details https://caniuse.com/#feat=details vemos
que las actuales —diciembre 2020— versiones de Internet Explorer y Opera Mini no
son capaces de interpretarlo. Firefox lo hace desde su versión 49 y Chrome desde la 12.
Vemos también, en la parte superior, qué porcentaje de usuarios verán correctamente el
elemento (teniendo en cuenta estadísticas de uso de cada versión de los navegadores).
En este caso el 96.04 % de los usuarios. (Web consultada en diciembre de 2020).

W3schools: Es una de las web de referencia para la consulta y el aprendizaje de los

lenguajes de programación orientados a la web. Es especialmente útil la sección de
referencia de cada uno de los lenguajes: HTML, CSS, Javascript, etc., ya que ofrece un
listado completo de los elementos de cada lenguaje, junto con una descripción de su
uso, ejemplos y, en muchos casos, un editor online para probarlos en vivo. Eso sí, en
inglés.

PostImage: es un servicio gratuito de almacenamiento de imágenes. Nos puede ser de

utilidad para subir imágenes y obtener enlaces a las mismas para usar en nuestras
páginas web. Siempre será más eficiente y obtendremos un mejor rendimiento si las
subimos a nuestro propio servidor, pero para practicar y hacer nuestras primeras pruebas
funciona perfectamente y nos libera de la necesidad de contar con un alojamiento
propio. Se puede configurar el tamaño y el tiempo que estarán accesibles las imágenes
subidas. https://postimages.org/