Abra en Visual Studio Code la página vscode-1.html.
Abra la página vscode-1.html en Firefox y Chrome con los atajos de teclado Ctrl+Alt+f y Ctrl+Alt+c.
Si no se abre el navegador correspondiente, revise los atajos de teclado creados en Visual Studio Code, como se explica en la lección Configuración de Visual Studio Code.
Compruebe que la dirección de la página es file:///C://Users/NombreDeUsuario/Documents/HTMLCSS/ejercicios/puesta-en-marcha/vscode-1.html, donde NombreDeUsuario es el nombre del usuario de Windows.
El resultado en el navegador debe ser el siguiente:
VS Code 1 B - Abrir páginas con Live Preview
Abra en Visual Studio Code la página vscode-1.html.
Abra la página vscode-1.html en Live Preview con el atajo de teclado Ctrl+Alt+p.
Si no se abre el servidor correspondiente ni se muestra la página en Visual Studio Code, revise los atajos de teclado creados en Visual Studio Code, como se explica en la lección Configuración de Visual Studio Code.
Compruebe que la dirección de la página es http://127.0.0.1:3000/ejercicios/pm-vscode/vscode-1.html o similar.
Añada algo de texto a la página web y compruebe que aunque no guarde el fichero, en el navegador la vista se actualiza continuamente.
Lógicamente, Visual Studio Code mostrará un aviso de error hasta que escribamos la etiqueta de cierre </p>.
Cierre la vista previa haciendo clic en el icono del servidor en la barra de estado y eligiendo el comando "Live Preview: Stop Server" en el panel de comandos.
Abra de nuevo la página vscode-1.html en Live Preview con el atajo de teclado Ctrl+Alt+p.
Cierre la vista previa con el atajo de teclado Ctrl+Alt+p.
VS Code 2 - Extensión HTMLHint
Cree en Visual Studio Code la página vscode-2.html en la carpeta pm-vscode.
Compruebe que el fichero creado aparece en su posición correcta:
Copie y pegue el siguiente código HTML en la página vscode-2.html:
<html>
<!DOCTYPE html+css>
<head>
<meta charset=" utf-8 " charset="utf-8">
<link REL="stylesheet" href="">
</head>
<body>
<P id = "a">Esta página web NO es una página HTML válida.
<p id='a'> 5 > 4</p>
<p id="ad"><img src="a.png" /></p>
</body>
</html>
Compruebe que en la barra lateral inferior el indicador de error indica la existencia de 17 avisos. Haga clic en él para ver los errores detectados.
Si no se muestran los 17 avisos, compruebe que la extensión HTMLHint está instalada y revise la configuración de la extensión HTMLHint, como se explica en la lección Configuración de Visual Studio Code.
Corrija algunos de los errores y compruebe que van desapareciendo de la lista a medida que se van corrigiendo:
Hay muchas maneras de resolver los avisos de HTMLHint. Por ejemplo:
<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="utf-8">
<title>Ejercicio 2</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="estilo.css">
</head>
<body>
<p id="a">Esta página web SÍ es una página HTML válida.</p>
<p id="b">5 > 4</p>
<p id="ab"><img src="a.png" alt="imagen"></p>
</body>
</html>
VS Code 3 - CSS Lint
Cree en Visual Studio Code la página vscode-3.css.
Copie y pegue el siguiente código CSS en la página vscode-3.css:
@font-face { }
@test { }
p {
colour: black;
-webkit-flex: flex;
}
a { }
#ab { color red}
Compruebe que en la barra lateral inferior el indicador de error indica la existencia de 7 errores y avisos como mínimo. Haga clic en él para ver los errores detectados.
Nota: El número de avisos puede ser mayor si incluye también los avisos del fichero vscode-2.html del ejercicio anterior. En general, Visual Studio Code muestra los avisos correspondientes a todos los ficheros que se han ido abriendo. Si cierra toda las pestañas de documentos con errores y cierra y abre Visual Studio Code, desaparecerán los mensajes de error hasta que vuelva a abrirlos.
VS Code 4 - Extensión Close HTML/XML Tag
Abra en Visual Studio Code la página vscode-4.html.
Borre la etiqueta de cierre </p> (línea 13).
Compruebe que en la barra lateral inferior el indicador de error indica la existencia de un error. Haga clic en él para ver el error detectado. Compruebe que efectivamente señala la ausencia del cierre de la etiqueta <p>
Si no se muestra el error, compruebe que la extensión HTMLHint está instalada y revise la configuración de la extensión HTMLHint, como se explica en la lección Configuración de Visual Studio Code.
Corrija el error situando el cursor al final del párrafo y pulsando el atajo de teclado Alt+. (punto). Compruebe que se añade el cierre de la etiqueta </p>. Compruebe que el indicador de error ya no muestra ningún error.
Si no se añade la etiqueta, compruebe que la extensión Close HTML/XML Tag está instalada y revise la configuración de la extensión Close HTML/XML Tag, como se explica en la lección Configuración de Visual Studio Code.
VS Code 5 - Extensión Tag Inserter
Abra en Visual Studio Code la página vscode-5.html.
Compruebe que el texto de la línea 11 no está rodeado de etiquetas (sin contar las etiquetas <html> o <body>).
Seleccione el texto de la línea 11 (únicamente el texto, sin los espacios iniciales de la línea ni el salto de línea final).
Pulse el atajo de teclado Alt+Mayús+i. Compruebe que se abre un cuadro de texto en la parte superior, escriba únicamente el nombre de la etiqueta, por ejemplo h2, y pulse Intro.
Si la línea 11 no aparece rodeada de la etiqueta <h2>, compruebe que la extensión Tag Inserter está instalada.
Sitúe el cursor en la etiqueta <h2>. Compruebe que aparece un segundo cursor en la etiqueta de cierre. Borre el nombre de la etiqueta (sin borrar las desigualdades < >) y corríjalo por <h1>. Compruebe que se cambia simultáneamente la etiqueta de cierre </h1>.
Compruebe que también puede modificar ambas etiquetas editando la etiqueta de cierre.
VS Code 6 - Extensión Image Preview / Emmet
Abra en Visual Studio Code la página vscode-6.html.
Abra la página en el navegador. El resultado debe ser el siguiente (el logotipo es muy grande, pues ocupa todo el ancho de la pantalla):
Compruebe que la etiqueta <img> no contiene los atributos width ni height:
Sitúe el cursor encima del nombre de la imagen y observe como se muestra una ventana que contiene una miniatura de la imagen y su tamaño.
Si no se muestra la ventana, compruebe que la extensión Image Preview está instalada.
Nota: Por desgracias, la extensión Image Preview tiene a veces un comportamiento algo errático y deja de funcionar correctamente (por ejemplo pueden no verse las miniaturas de las imágenes, pero pasado un tiempo pueden mostrarse de nuevo).
Haga clic en algún lugar de la etiqueta <img>. Pulse el atajo Ctrl+Alt+e Ctrl+Alt+s y compruebe que se añaden los atributos width = 100 y height = 100.
Guarde la página en Visual Studio Code y actualice la página en el navegador. Compruebe que la imagen ya se muestra al tamaño 100px x 100px.
VS Code 7 - Extensión CSScomb
Abra en Visual Studio Code la página vscode-7.html.
Abra la página en el navegador. El resultado debe ser el siguiente:
Abra la hoja de estilo vscode-7.css. Esta hoja de estilo no es incorrecta, pero no sigue el estilo recomendado en estos apuntes.
BODY {background-color:wheat;font-family : sans-serif ; }
h1 { text-transform : uppercase; text-align : center }
Pulse el atajo Alt+Mayús+c Alt+Mayús+f (en Windows) o Ctrl+Mayús+c Ctrl+Mayús+i (en LliureX) y compruebe que se formatea más o menos correctamente la hoja de estilo (una propiedad por línea, etiquetas en minúsculas, un espacio de separación, orden de etiquetas, punto y coma tras cada propiedad, etc).
Si no obtiene este resultado, compruebe que la extensión CSScomb está instalada y revise la configuración de la extensión CSScomb, como se explica en la lección Configuración de Visual Studio Code.
Notas: CSSComb mejora el formato de la hoja de estilo, pero no corrige todas las situaciones:
CSSComb añade un segundo punto y coma en la propiedad reordenada que antes no tenía punto y coma. El 16/10/2019 abrí la issuecsscomb#622 en el repositorio del proyecto CSSComb para aclarar si es un problema de CSSComb o de la configuración propuesta en estos apuntes. Pero hasta que el desarrollo del proyecto CSSComb no se retome, estos problemas no tendrán solución y se deberán corregir manualmente.
CSSComb mantiene separado con espacios el punto y coma de una de las propiedades.
En 2019 CSSComb no corregía los espacios iniciales de la primera línea. El 16/10/2019 abrí la issuecsscomb#621 en el repositorio del proyecto CSSComb para aclarar si es un problema de CSSComb o de la configuración propuesta en estos apuntes. Este problema parece resuelto.
Guarde la hoja de estilo y actualice la página en el navegador. Compruebe que la página se ve exactamente igual que antes.
A partir de la versión 1.66, Visual Studio Code ha incorporado un formateador de CSS que se aplica con el atajo de teclado Alt+Mayús+f (en Windows) y Ctrl+Mayús+i (en LLiureX) . Es un formateador más elemental que CSSComb, pero se pueden combinar ambos formateadores para obtener un mejor resultado. Pruebe el resultado sobre el ejemplo anterior, aplicando consecutivamente uno y otro de forma repetida hasta dejar de obtener cambios.
VS Code 8 - Extensión Lorem Ipsum
A veces, trabajando con procesadores de texto o editando páginas web, necesitamos fragmentos de texto para poder hacer pruebas de diseño. Lo habitual es copiar y pegar de cualquier otro documento, pero en tipografía se ha utilizado desde hace siglos un texto en latín sin sentido real, aunque al parecer basado en un texto de Cicerón, que comienza por las palabras Lorem Ipsum. Así, los generadores Lorem Ipsum son las aplicaciones que generan texto (u otros elementos), en latín u otros idiomas, basados en textos o diccionarios, pero sin sentido real.
Abra en Visual Studio Code la página vscode-8.html.
Instale la extensión Lorem Ipsum de Daniel Imms.
Ayuda (haga clic aquí si no se le ocurre cómo hacerlo)
Compruebe su funcionamiento
Ayuda (haga clic aquí si no se le ocurre cómo hacerlo)
Sitúe el cursor donde quiera insertar el texto:
Pulse la tecla F1 o el atajo de teclado Ctrl+Mayús+p para abrir la paleta de comandos
Escriba el principio del comando (en este caso Lorem, por ejemplo) y se mostrarán los comandos disponibles. Haga clic en alguna de las opciones:
Por ejemplo, pulsando el comando Lorem Ipsum: Insert a paragraph se insertaría un párrafo de texto:
Por último, cerraríamos la etiqueta de párrafo con el atajo de teclado Alt+.:
Defina atajos de teclado para esta extensión y compruebe su funcionamiento.
Ayuda (haga clic aquí si no se le ocurre cómo hacerlo)
Nota: Por desgracias, la extensión Image Preview tiene a veces un comportamiento algo errático y deja de funcionar correctamente (por ejemplo pueden no verse las miniaturas de las imágenes, pero pasado un tiempo pueden mostrarse de nuevo).
