Fundamentos del desarrollo web

Navegadores

Los navegadores son los encargados de interpretar nuestro código HTML, CSS y Javascript,
estos navegadores tienen distintas versiones y la compatibilidad con nuestro código puede
variar tanto por las versiones como por el navegador.
W3C y WHATWG

La W3C es la organización encargada de recomendar y desarrollar estándares para asegurar el

crecimiento de la world wide web.

Mientras que el WHATWG se encarga de mantener desarrollar estándares y mejoras

exclusivamente para HTML y tecnologías conexas.

Actualmente ambas organizaciones colaboran para las mejoras y estándares de HTML.

HTML5

HTML como todos los lenguajes tiene distintas versiones, la más reciente HTML5 es la que
estaremos aprendiendo, en realidad las versiones anteriores son obsoletas y será muy raro
encuentren una página que no esté construida bajo los estándares de HTML5.

En el curso cuando hablemos de HTML nos estaremos refiriendo a a versión 5.

Cuerpo de un documento HTML
Anatomía de un elemento HTML
Elementos vacíos
Los elementos vacíos no tienen etiqueta de cierre ya que no tienen contenido.
Comentarios

Cuando trabajamos con un documento html podemos agregar comentarios de la

siguiente manera:

Los comentarios sirven principalmente para documentar nuestro código y facilitar que
otros programadores puedan entenderlo.

El atajo para hacer comentarios en la mayoría de los editores es ctrl + }

Semántica

Los elementos HTML tienen un propósito y debemos de utilizarlos de manera correcta para
que los navegadores pueda interpretar el contenido adecuadamente, la principal ventaja de
utilizar correctamente los elementos es que nuestra página se posiciona correctamente en
los buscadores (SEO), pero hay otras ventajas como ayuda para personas con
discapacidades e incluso facilidad para trabajar en equipo.
Algunas de las etiquetas más comunes
Actividades
A continuación tendrán 20 minutos para realizar 2 actividades que se explican a
continuación, al terminar las actividades aleatoriamente elegiremos 10 estudiantes para
mostrar/explicar el resultado.
Ejercicio #1:
Escribe el HTML que consideres adecuado para 3 notas/posts
de un blog, las notas deben de incluir:
Título, subtítulo, imagen y texto.

Tip: Para las imágenes del blog puedes buscar cualquier imagen en internet, das clic derecho sobre la
imagen y seleccionas abrir imagen en nueva pestaña, esto te abrirá una ventana con la imagen, lo
único que tienes que hacer es copiar la url y utilizarla en el atributo src del elemento img.
Ejercicio #2:
Utilizando las herramientas de desarrollador del navegador ingresa a algún sitio web e
identifica algún elemento HTML, después en el siguiente enlace HTML elements reference - HTML:
Hypertext Markup Language | MDN busca este elemento y lee el propósito del mismo.

Sitios web recomendados:

● Mozilla
● W3C
● Google
● Cualquier sitio pionero en tecnología

Para ingresar a las herramientas de desarrollador del navegador das clic derecho y seleccionas
inspeccionar elemento, en la pestaña elements puedes ver todo el HTML del sitio web.
Más etiquetas comunes
Más etiquetas comunes
CSS3

CSS también ha tenido varias versiones, la versión más reciente y con la que
estaremos trabajando es CSS3, así que siempre que hablemos de CSS nos
estaremos refiriendo a esta versión.
CSS
CSS es un lenguaje de estilos que se utiliza para dar estilo a nuestros sitios web, por ejemplo,
para cambiar el tamaño de fuente, para asignar colores, espacios, entre muchas otras
características que veremos a través del curso.
Regla CSS
Una regla CSS es un grupo de una o más propiedades que son aplicadas a uno o más
elementos HTML, las partes de una regla CSS son las siguientes.
Selector de tipo.
En CSS podemos utilizar distintos tipos de selectores, en la siguiente imagen vemos que el
selector es h1, esto hace referencia a la etiqueta h1 que vimos anteriormente y lo que indica la
regla css es que todos los elementos h1 tendrán un color de texto rojo, en la misma forma en la
que usamos la etiqueta h1 podríamos utilizar una etiqueta p, div, button, etc para aplicar estilos
a estos elementos.
Selector de clase.
Otro selector es el de clase y se utiliza de la siguiente manera:

A las clases podemos asignarles cualquier nombre que deseemos, a esta clase la llamamos
text-red. La parte más importante es el punto ya que este punto indica que
se trata de una clase.
Selector de clase.
La ventaja del selector de clase es que podemos agregar esta clase solo a los elementos que
deseemos modificar.

* Si a un elemento le agregamos una clase que no hayamos creado no veremos ningún cambio, así que tenemos que
asegurarnos de crearla y de utilizar exactamente el mismo nombre en el elemento HTML.
Selector de clase.
A un mismo elemento podemos agregarle más de una clase, solo tenemos que dejar un espacio
entre las clases que agreguemos.
Algunas propiedades comunes - creando un botón.
Enseguida crearemos un botón y le daremos estilos utilizando las siguientes propiedades
mientras las vamos explicando.
Actividad
Tendrán 25 minutos para realizar la siguiente actividad, después de esto elegiremos
aleatoriamente a 5 estudiantes para mostrar y explicar su código.
También resolveremos dudas que hayan surgido.
Ejercicio #3
Debes crear el html y css para los siguientes botones, utilizando todo lo que hemos aprendido.

Puedes encontrar estos botones en el siguiente enlace

https://bulma.io/documentation/elements/button/
Ejercicio #4
Debes crear el html y css para las siguientes etiquetas utilizando todo lo que hemos aprendido.
Estos elementos no ejecutan ninguna acción por lo cual lo recomendado es utilizar el elemento
span.

Puedes encontrar estas etiquetas en el siguiente enlace

https://bulma.io/documentation/elements/tag/
Explicando cómo resolver el ejercicio
Veremos cómo es que el instructor haría el código de los 2 ejercicios anteriores.
Selector de id
Los selectores de id se utilizan para aplicar estilos a un elemento que tenga el atributo id y
como valor tenga el mismo texto que utilizamos como selector.

* El id debe de ser único, es muy mala práctica que en nuestra página tengamos varios elementos con el mismo id y esto
nos dará problemas principalmente con javascript.
Selectores de atributo
Los selectores de atributo nos permiten agregar estilos a un elemento del cual el valor de uno
de sus atributos cumpla cierta regla.
Resumen selectores

● De tipo - identificados por la etiqueta del elemento

● De clase - inician con un punto y el nombre lo asignamos nosotros
● De id - toman como referencia el valor del id de un elemento
● De atributo - toman como referencia alguna condición cumplida por un atributo de un
elemento
● Universal - Aplica estilos a todos los elementos
Actividad
Tendrán 15 minutos para realizar la siguiente actividad, después de esto elegiremos
aleatoriamente a 5 estudiantes para explicarnos sus conclusiones.
Ejercicio #5
Realiza lo siguiente y responde la pregunta:

Crea las siguientes clases:

Agrega ambas clases a un mismo elemento.

¿qué color de fondo tiene el elemento y por qué crees que tiene este color?
 Ejercicio #6
Escribe el siguiente código y responde la pregunta

¿Cual es el color de texto del h1 y por qué crees que es de este color?

https://www.w3schools.com/css/css_specificity.asp
Convenciones de evaluación para HTML y CSS
Explicaremos cuáles son las convenciones que se utilizarán para las evaluaciones.
Elementos en bloque y elementos en línea

Elementos en bloque Elementos en línea

● Ocupan todo el espacio que tienen ● Ocupan el espacio necesario para mostrar
disponible su contenido
● Podemos cambiar su alto y ancho ● No podemos cambiar su alto y ancho
● Podemos agregar margin tanto en el eje x ● Solo podemos agregar margin a los lados
como el eje y ● Al agregar padding el elemento cambia de
tamaño pero no respeta al resto de
elementos

https://www.w3schools.com/html/html_blocks.asp
Elementos inline-block

Si queremos aprovechar las ventajas de los elementos en línea y los elementos en bloque
basta con agregar la propiedad display con el valor inline-block, de esta manera tenemos
las ventajas de ambos elementos y no tenemos los problemas que teníamos con los
elementos inline
Actividad
Tendrán 25 minutos para realizar la siguiente actividad, después de esto elegiremos
aleatoriamente a 10 estudiantes para explicarnos sus conclusiones.
Ejercicio #7:
Desarrolla el siguiente menú en codepen
Ejercicio #8:
Desarrolla el siguiente componente
Propiedades CSS más comunes
Espacios
● Margin
● Padding
Tipografía
● Color
● Text-align
● Font-family
● Font-weight
● Font-size
○ px
○ rem (relativa al elemento raíz, que es el html)
○ em (relativa al font-size del elemento)
● Display (visto anteriormente con los elementos en bloque y
elementos en línea)
○ Block
○ Inline
○ Inline-block
○ none
Propiedades CSS más comunes
Tamaños
● Width y max-width, min-width
● Height y max-height, min-width
● Porcentajes (relativo al elemento padre)
● VH (relativo al height del viewport)
● VW (relativo al width del viewport)
Sombras
● box-shadow
○ Posición horizontal
○ Posición vertical
○ Difuminado
○ Propagación
○ Color
○ Inset

Más propiedades https://www.w3schools.com/cssref/

Propiedades CSS más comunes
Fondos
● Imagen
○ background-position
○ background-size

Bordes
● border-width
● border-style
● border-color
● border (shorthand)

Desbordamiento
● Overflow

Más propiedades https://www.w3schools.com/cssref/

Actividad
Tendrán 20 minutos para realizar la siguiente actividad, después de esto elegiremos
aleatoriamente a 5 estudiantes para explicarnos sus conclusiones.
Ejercicio #9:
Desarrolla el siguiente componente
Evaluación 1 (parte 1) - Creando componentes
Desarrolla los siguientes componentes y verifica que
cumpla con todos los requisitos de la tarea en classroom
Evaluación 1 (parte 2) - Creando componentes
Desarrolla los siguientes componentes y verifica que
cumpla con todos los requisitos de la tarea en classroom
Errores comunes en evaluación
● Dejar muchos saltos de línea
● Espacio en class =_ ‘class-name’
● Ponen muchos h1
● Usar span en lugar de <a>
● Algunos solo hacen lo necesario (funciona pero es mejor si lo hacen
lo mejor que puedan)
Encuesta primer semana
Responder encuesta de Google Forms
Pendiente creación de formulario
Combinación de selectores
Combinación de selectores
Combinación de selectores

Más detalles:
https://developer.mozilla.org/en-US/docs/Learn/CSS/Building_blocks/Selectors/Combinators
Pseudoclases
Una pseudoclase CSS es una palabra clave que se añade a los selectores y que especifica un estado
especial del elemento seleccionado.
Tabla a rayas usando nth-child

Lista completa pseudoclases

https://developer.mozilla.org/es/docs/Web/CSS/Pseudo-classes
https://developer.mozilla.org/es/docs/Web/CSS/:nth-child
Semana 2