Deck: Videoconferencia semana 3

Debugging

Es el proceso de identificar problemas, encontrar el por qué del problema y resolver el problema.

Validadores de código

Analizan el código y encuentran errores de sintaxis.

Recomiendo usarlos antes de una entrega, incluso si no hay algo específico que no funcione porque podrán identificar errores y tendrán mejor calificación.

Validadores en línea

Validador de HTML validator.w3.org/#validate_by_input

Validador de CSS jigsaw.w3.org/css-validator/

Validar en CodePen

Se puede, pero no es muy riguroso.

Validar en CodePen

Dependiendo del tema, marca errores sin necesidad de hacer más (DuoToneDark, por ejemplo).

En los paneles de código, escoger "Analyze HTML/CSS" y explicará errores

Importante: No depender de la validación de CodePen porque NO marca todos los erroes (por ejemplo: "center" no es un posible valor de display, lo veremos esta semana semana). Que CodePen no muestre errores no quiere decir que no los hay.

Inspeccionar con Developer Tools

Los navegadores tienen Developer Tools. Son de gran ayuda durante el desarrollo, entre otras cosas para investigar por qué algo no funcina.

Click derecho + Inspect o Inspect Element
Command+Option+C (Mac)
Control+Shift+C (Windows, Linux, Chrome OS)
Menú Firefox: Tools > Web Developer > Inspector
Menú Chrome: View > developer > Inspect Element

Problemas a resolver

https://codepen.io/matrosero/pen/OJQpxWm

Columna de texto demasiado ancha, debería ser más angosta y estar centrada
Título no debería ser rojo
Una imagen que no aparece
“Sobre el capítulo” es un título de sección pero no se distingue del texto. Debería tener un borde abajo.
El padding del recuadro personajes no es uniforme a los 4 lados
Recuadro de personajes debería centrado horizontalmente
Título debería estar centrado verticalmente

Demo versión móvil de componente

Wireframes

Este nivel de fidelidad está bien para los wireframes, lo que quiero es saber que están planeando para la versión desktop.
No espero perfección en wireframes. Por ejemplo en “por leer” hay 2 en móvil y 3 en ordenador. Pero se entiende la intención.
Basándome en esos wireframes, vamos a CodePen
Ejercicio terminado