CONSTRUCCIÓN DE PÁGINAS WEB

© Santiago Martín de Jesús

CREACIÓN DE PÁGINAS WEB CON EL
LENGUAJE DE MARCAS

EDITORES – MAQUETADORES WEB

HTML
EDITORES

3
 VISUAL STUDIO CODE
HTML

El editor de texto VSCode ha sido creado y es mantenido por Microsoft. Lo

distribuye con licencia Open Source y por lo tanto en forma gratuita. Lo
debemos descargar del sitio code.visualstudio.com, como podemos
comprobar, está disponible tanto para Windows, Mac y Linux. Permite
tener varios documentos abiertos mediante pestañas, e incluso emplear
varios paneles para aquellos que utilicen más de un monitor.
Es ampliable y
personalizable. Permite
instalar extensiones para
añadir nuevos idiomas,
temas, depuradores y para
conectarte a servicios
adicionales. Las extensiones
se ejecutan en procesos
separados, lo que garantiza
que no lo ralentizarán.
4
 VISUAL STUDIO CODE
HTML

El lenguaje por defecto es Ingles, por lo tanto, lo primero que haremos es

cambiarlo a castellano, instalando una extensión de VS Code para tal fin.
Presionamos el ícono de la izquierda para administrar extensiones y
buscamos 'spanish’ y después de instalarla, debemos reiniciar el programa.

5
 VISUAL STUDIO CODE
HTML

El tema o aspecto visual por defecto es el oscuro, pero podemos cambiarlo

por un aspecto más claro.
Para cambiar el tema presionamos el botón del engranaje en la parte
inferior izquierda y seleccionamos "Tema de color”.

6
 VISUAL STUDIO CODE
HTML

Podemos cerrar la pestaña de bienvenida y tendremos el editor VSCode

dispuesto para empezar a trabajar, sin ningún documento abierto.

7
 VISUAL STUDIO CODE
HTML

Una de las características que tiene el editor de texto Visual Studio Code es
la posibilidad de configurar sus funcionalidades como pueden ser fuentes,
colores, tamaños de fuentes, tabulaciones, modos de presentar en
pantalla el editor etc.
Para acceder a la ventana de configuración
del VSCode lo podemos hacer de varias
formas:
1. Desde el ícono de la rueda dentada
que aparece en la parte inferior
izquierda.
2. Desde la pestaña de configuración,
desde el menú de barra
seleccionando (Archivo ->
Preferencias -> Configuración).
3. También pulsando las teclas (Ctrl + ,).

8
 VISUAL STUDIO CODE
HTML

Una de las opciones fundamentales del editor de texto VSCode es la

posibilidad de agregar características mediante las "extensiones".
Existen miles de "extensiones" con objetivos tan diversos como:
• Temas de iconos de archivo
• Temas de color
• Lenguajes de programación
• Depuradores
• Formateadores de código
fuente
• Teclas de acceso rápido de
otros editores

Para consultar la tienda de extensiones para VSCode podemos visitar

marketplace.visualstudio.com/vscode
9
 VISUAL STUDIO CODE
HTML

Instalación de Extensiones
Para instalar cualquier extensión, pulsamos en el último icono de la barra
lateral izquierda, donde podremos buscar por nombre cualquier extensión
disponible, o desplazarnos verticalmente.
Aconsejo instalar una serie de extesiones que nos van a servir para facilitar
nuestro trabajo de programación:
• Beautify
• Vscode-icons
• ESLint
• HTML CSS Support
• HTML Snippets
• Javascript code snippets
• Autosave on window change
• Color highlight
• Color picker
• Babel Javascript
• Open in browser
• Live server
10
 VISUAL STUDIO CODE
HTML

Beautify
Se utiliza para colocar de un modo adecuado nuestras líneas
de código automáticamente. Principalmente indentaciones.

Vscode-icons
Sirve para poner iconos automáticamente en función del tipo
de archivo. Existen otros pack de iconos, como Material icon
theme.
ESLint
ESLint analiza estáticamente el código para encontrar
rápidamente los problemas, principalmente con JavaScript.

HTML CSS Support

Mejora la experiencia a la hora de «picar código» de HTML o
CSS aún más, además de que soporta una lista de lenguajes
11 bastante extensa además de los dos ya citados.
 VISUAL STUDIO CODE
HTML

HTML Snippets
Los sinippets son fragmentos de código que podemos guardar,
para no tener que escribirlos continuamente.

Javascript code snippets

Con esta extensión tenemos una excelente colección de
snippets, que nos permiten ahorrar tiempo.

Autosave on window change

Guarda los documentos que tenganmos abiertos, en cuanto
nos salgamos de ellos o cambiemos de ventana.

Color highlight
Cuando utilizamos colores en diferentes formatos y lenguajes,
este nos ayuda a poder visualizar tanto en el mini mapa como
12 en el código en sí dichos colores ya renderizados.
 VISUAL STUDIO CODE
HTML

Color picker
Ayuda a generar los códigos de color en diferentes notaciones.

Babel Javascript
Resalta la escritura de JavaScript usando diferentes colores
que nos permiten visualizar más fácilmente el código.

Open in browser
Permite abrir el archivo HTML en curso, en el navegador por
defecto del sistema.

Live server
Crea un servidor local (localhost) para ejecutar el sitio web,
por lo tanto, puedes ejecutar código que requiera de servidor.
13
 VISUAL STUDIO CODE
HTML

Abrir CARPETA
Cuando tenemos que trabajar con un conjunto de archivos (“SITIO”) que se
encuentran en una carpeta lo más conveniente es utilizar la funcionalidad
de "Abrir carpeta" para que se nos muestre la lista de archivos contenidos
en la misma y no tener que abrir en forma individual cada archivo.

• Podemos hacerlo,
pinchando en el primer
icono de la barra lateral
izquierda y luego
pulsando el botón “Abrir
carpeta”.
• También podemos
hacerlo, simplemente
arrastrando la carpeta al
área de trabajo.
14
 VISUAL STUDIO CODE
HTML

Cerrar CARPETA
Cuando se abre una nueva carpeta, se
cierra la carpeta abierta actualmente,
pero si queremos, podemos cerrar la
carpeta abierta actualmente mediante la
opción del menú "Archivo -> Cerrar
carpeta”.
Si tenemos una carpeta abierta y
arrastramos una nueva carpeta al área de
trabajo, nos pregunta si queremos
copiarla a la carpeta abierta. NO
debemos hacer esto, previamente
deberíamos haber cerrado la carpeta que
teníamos abierta.

15
 VISUAL STUDIO CODE
HTML

EMMET
Es un complemento que ya viene integrado en VSCode que
aumenta nuestra velocidad cuando tenemos que codificar
páginas HTML y CSS. https://docs.emmet.io/cheat-sheet/
Consiste en disponer ciertos caracteres y que el editor VSCode
nos sugiera una cadena que sustituya dichos caracteres.
Veamos con
un ejemplo
como
funciona,
creemos un
archivo vacío
llamado
'pagina1.html'
y dentro del
editor
escribamos el
caracter '!':
16
 SUBLIME TEXT
HTML

Sublime Text es un editor de código multiplataforma, ligero y con pocas

concesiones a las florituras. Es una herramienta concebida para programar
sin distracciones. Su interfaz de color oscuro y la riqueza de coloreado de
la sintaxis, centra nuestra atención completamente.
Permite tener varios documentos abiertos mediante pestañas, e incluso
emplear varios paneles para aquellos que utilicen más de un monitor.
Dispone de modo de pantalla
completa, para aprovechar al
máximo el espacio visual
disponible de la pantalla.
El programa cuenta “de
serie” con 22 combinaciones
de color posibles, aunque se
pueden conseguir más. Para
navegar por el código cuenta
con Minimap, un panel que
permite moverse por el
código de forma rápida.

17
 SUBLIME TEXT
HTML

El sistema de resaltado de sintaxis de Sublime Text soporta un gran

número de lenguajes (C, C++, C#, CSS, D, Erlang, HTML, Groovy, Haskell,
HTML, Java, JavaScript, LaTeX, Lisp, Lua, Markdown, Matlab, OCaml, Perl,
PHP, Python, R, Ruby, SQL, TCL, Textile and XML).

El programa dispone de auto-guardado, muchas opciones de

personalización, cuenta con un buen número de herramientas para la
edición del código y automatización de tareas. Soporta macros, Snippets y
auto completar, entre otras funcionalidades. Algunas de sus
características son ampliables mediante plugins.

Sublime Text es un programa de pago, aunque se puede descargar una

versión de prueba, plenamente funcional y sin limitación de tiempo.

18
 SUBLIME TEXT
HTML

Para utilizar de una manera más eficiente Sublime

Text, debemos hacer una serie de configuraciones e
instalaciones:
• Activar el autoguardado:
– Ir a Preferencias
Ir a Setting User y escribir:
“save_on_focus_lost”: true

19
 SUBLIME TEXT
HTML

• Instalar el paque de control para permitir la

instalación de plugins:
– Ir a un navegador (Google Chrome) y vamos a la web:
https://packagecontrol.io/installation
Nos situamos en la pestaña de Sublime Text 3 (ya que es la versión
que tenemos instalada) y copiamos todo el bloque de texto.
• Después vamos a View -> Show Console y en la linea inferior
pegamos el texto que acabamos de copiar y damos ENTER.

20
 SUBLIME TEXT
HTML

• Vamos a Preferencias -> Package Control y escribimos:

– Install Package

• Y a partir de aquí podemos instalar los plugins o paquetes que

queramos.

21
 SUBLIME TEXT (plugins)
HTML

Auto Filename
El primer plugin imprescindible que permite vincular archivos
mediante la sugerencia ya sean imágenes, hojas de estilo al usar
etiquetas como: href, src, en php require_once y otros.

Emmet
Escribir código puede ser tedioso en algunas ocasiones cuando estamos
apurados, pero ahí es donde nos puede salvar Emmet.
Permite generar a través de expresiones varias lineas de código HTML.
Para generar el código HTML existen un variedad de expresiones en la
siguiente pagina:
http://docs.emmet.io/cheat-sheet/
22
 SUBLIME TEXT (plugins)
HTML

ColorPicker
Permite seleccionar en la paleta de color un color especifico, muy bueno
al escribir código CSS. Para usar presione ctrl+alt+c.

Sidebar Enhancement: Mejora la barra lateral y nos deja acceder a más opciones para
gestionar los archivos de nuestro proyecto.
BracketHighlighter: Con este plugin, resaltaremos las etiquetas de apertura y cierre,
nos ayudará a leer mejor y más rápido nuestro código.
SFTP: Integra un cliente FTP en nuestro Sublime Text, simplemente con guardar el
archivo, lo actualiza en nuestro servidor al instante.
LiveReload: Refresca el navegador cuando guardas un archivo para ver los últimos
cambios que hemos realizado
Alignment: Obligado para indentar bien vuestro código, un código bien estructurado
es una buena práctica que debes seguir para tener un código de fácil lectura.

23
 SUBLIME TEXT (plugins)
HTML

SublimeCodeIntel: Se trata de un plugin que permite auto-completar

el código, ir a la definición de funciones y clases, etc. Soporta un
montón de lenguajes de programación como JavaScript, SCSS, HTML,
Sass, HTML5, Less, Node.js, Smarty, PHP, Ruby…
Can I Use: Una vez instalado, seleccionamos una propiedad de
nuestro CSS sobre la que queremos conocer su compatibilidad en
distintos navegadores. Pulsamos ctrl + alt + F y se nos abrirá la web
caniuse.com con información sobre dicha propiedad.
Sublime-Autoprefixer: añade prefijos a las funcionales de CSS3 que
lo requieran. Nos evita tener que escribir los prefijos a mano y a su
vez evitamos que se nos olvide añadirlos. Este es el GitHub de
Sublime-Autoprefixer. Un ejemplo:Si escribimos box-sizing y a
continuación pulsamos Tab, nos escribirá lo siguiente:

24
 SUBLIME TEXT (plugins)
HTML

Para desinstalar cualquier plugin, abrimos el Package

Control (ctrl + shift + P) y escribimos “Remove Package“.
Lo ejecutamos y se nos mostrará un listado con todos los
plugins instalados. Seleccionamos el que nos interese y
quedará desinstalado.

25
 BRACKETS
HTML

Brackets es un editor de código abierto para el diseño y desarrollo web

construido sobre tecnologías como HTML, CSS y JavaScript. El proyecto
fue creado y es mantenido por Adobe, y se distribuye bajo una licencia
MIT .
Brackets se diferencia de los
demás editores gracias a la
facilidad de mostrar el código
específico de acuerdo al
contexto usado, esto mediante
su interfaz tipo Quick Edit UI.
Brackets te permite trabajar
directamente en el navegador
editando el código al instante,
estableciendo breakpoints y
moviéndose con fluidez entre
las diferentes vistas de código y
del mismo navegador.

26
 BRACKETS
HTML

Carácterísticas

• Con características como la vista previa y edición rápida, los soportes agilizan
el desarrollo sin oponerse en tu camino.
• Construido con la web para la web. Hecho con mucho amor y JavaScript,
Brackets es un proyecto de código abierto, con una activa comunidad de
desarrolladores y en crecimiento.
• Un editor de código para la web. Centrarse en una cosa, y hacerlo muy bien.
Brackets está construido desde cero con un enfoque en el desarrollo web.
• Las herramientas no deben ser obstáculo. En lugar de un espacio de trabajo
desordenado con paneles flotantes, barras de herramientas e íconos,
Brackets se centra en la prestación de “edición rápida“, vistas en línea que
proporcionan acceso contextual a su contenido.
• Funciona con el navegador. El navegador es su punto de vista del diseño.
Brackets conecta directamente en el navegador, lo que le permite diseñar y
desarrollar en el mismo entorno en el que se implemente.

27
 BRACKETS
HTML

Vista previa
(navegador)

Gestor de
extensiones

Abre los
Snippets

Elección de
carpeta de
trabajo (sitio)
28
 BRACKETS
HTML

Extensiones o Plugins
Para poder agregar
funcionalidad a Brackets,
debemos instalar diferentes
extensiones o plugins, a
través de su Gestor de
Extensiones:

Archivo -> Gestionar

extensiones

29
 BRACKETS (principales extensiones)
HTML

CSSLint
Este plugin pone de manifiesto los errores de CSS , remarcándolos y las partes del código que
deberían mejorarse. Los errores y los warnings que se muestran con esta extensión están basados
en las reglas de CSS Lint.

Emmet
Es una colección de herramientas y atajos de teclados que pueden ayudarte a desarrollar más
rápido tanto tus códigos CSS como la implementación de maquetas en HTML.

Lorem Ipsum Generator

¿Necesitas algo de texto para rellenar el prototipo de un diseño? La extensión Lorem Ipsum
Generator te ayuda convenientemente a generar texto de prueba. Este texto de prueba es el típico
Lorem Ipsum, un texto en latín que se suele utilizar para rellenar huecos en documentos de diseño
gráfico.

Beautify
Esta extensión te ayudará a mantener tu código HTML, CSS y Javascript siempre bien formateado,
indentado y, lo más importante, legible. Una opción alternativa para esto es la extensión CSSComb,
pero sólo funciona para código CSS. En mi opinión, Beautify es más útil.

30
 BRACKETS (principales extensiones)
HTML

CanIUse
Utiliza la información de la página Can I Use para ofrecerte las estadísticas y características de los
navegadores más populares. De esta manera, puedes verificar qué tecnología admite cada
navegador desde el propio entorno de Brackets y planificar qué otros recursos puedes emplear en
aquellos navegadores que todavía no soportan ciertas tecnologías.

HTML Skeleton
Te ayuda a configurar tus páginas HTML de manera rápida insertando automáticamente elementos
básicos como la declaración doctype, el tag html, el tag head, el tag body...

Color ++
Color++ escanea su archivo CSS y permite visualizar remarcados los colores del documento así como
editarlos en diferentes notaciones. Al hacer click sobre un color ya creado, lo edita.

Documents Toolbar
Brackets Documents Toolbar es una extensión que te permite aumentar la funcionalidad del editor
Brackets mediante la adición de pestañas de todos los documentos que se encuentran abiertos en
el momento.

31
 BRACKETS (principales extensiones)
HTML

Indent for Brackets

Es una extensión que tiene un único propósito: activar las guías con sangrías en este popular editor.

Brackets Minimap
Es una extensión para añadir un mapa de navegación de código parecido al que tiene Sublime Text.

Autosave Files on Window Blur

Cada vez que seleccione una ventana que no sea la de Brackets, los archivos se guardan automáticamente. Esto
es perfecto para cualquier programador o desarrollador, ó al menos para aquellos que estén cambiando entre
programas de editor de imagen, navegador, u otra aplicación que manejen.

Block Selector
Esta extensión introduce el soporte básico para el plegado y despliegue de código. Esto es bastante útil para
quienes tienen grandes cantidades de líneas de código, y desean ocultar aquellos bloques que no se desean ver,
de momento.

HTML comment button

Inspirado por el editor de código de Dreamweaver. Le permite aplicar o quitar comentarios HTML (<! - ... ->) a /
desde el texto seleccionado actualmente sin tocar su teclado.

32
 BRACKETS (principales extensiones)
HTML

Lorem Pixel
Generar imágenes de marcador de posición virtuales a través de URL de Lorem Pixel.

HTML Wrapper
Sólo basta con seleccionar un texto con retornos de carro para convertirlos automáticamente en una lista (li),
celdas de una tabla (tr), hipervínculos (a) o cualquier elemento de HTML que se te ocurra.

Brackets Icons
Esta super extensión añade los iconos típicos de los ficheros en el sidebar de Brackets. Los iconos son un
gran referente visual para identificar de manera sencilla la extensión de los ficheros de un directorio y sobre
todo, saber cómo hay que tratarlos.

Autoprefixer
Añade prefijos automática e inteligentemente a las propiedades CSS con la extensión Autoprefixer. Utiliza los
datos relativos al soporte de navegadores de la extensión CanIUse para decidir si debe poner un prefijo para
el navegador o no. Otra funcionalidad destacada de esta extensión es que elimina los prefijos para
proveedores innecesarios.

JS CSS Minifier
Esta extensión elimina los caracteres innecesarios de tus archivos CSS y Javascript. A este proceso se le llama
minificación, y puede mejorar la velocidad de tu proyecto web.

33
 DREAMWEAVER
HTML

Es un programa editor o maquetador de páginas web.

Existen otros como:
– Google Sites
– WebSite X5
– Adobe Golive
– WebEasy 8 Professional
– Adobe Muse (como Dreamweaver pero sin teclear código)

34
 DREAMWEAVER
HTML

Lo primero que debemos hacer con Dreamweaver es

conectar el programa con el SITIO (carpeta local
donde se van a guardar los archivos).

35
 DREAMWEAVER
HTML

Le indicamos el nombre y carpeta local donde se

guardará el proyecto. Más adelante, podremos
configurar aquí también el servidor para realizar un FTP
de los archivos a nuestro hosting.

36
 DREAMWEAVER
HTML

Ahora ya podemos empezar a crear un nuevo

documento HTML, seleccionando desde el menú la
opción “Más” y eligiendo la versión HTML5 en el tipo de
documento.

37
 DREAMWEAVER
HTML

Al crear un nuevo documento, visualizamos una pantalla

doble. En la parte izquierda veremos el código y en la parte
derecha la previsualización HTML. Por defecto, ya se generan
las líneas de código básicas de la estructura de la página.

38
 DREAMWEAVER
HTML

En la parte superior izquierda de la pantalla, observamos

3 cuadros, Código, Dividir y Diseño, que podremos activar
según nuestras necesidades de trabajo.

Si activamos la ventana de diseño, aparece abajo, una

ventana de propiedades, en la que podemos seleccionar
algunas opciones, como negrita, cursiva, viñetas…)

39
 DREAMWEAVER
HTML

Para poder visualizar en el navegador nuestra página

web, previamente debemos guardarla (Archivo-
Guardar). Siempre debemos ponerle la extensión
.html al documento. Este documento se guardará en
la carpeta que hayamos seleccionado al elegir o
crear el sitio.

Con la tecla de función F12 podemos previsualizar el

archivo en el navegador.

40