Acreditación Institucionald eA lta Calidad

DESARROLLO

BACK END
-INTERMEDIO
Autor de contenido
Luz Liliana Herrera Polo

Autor de contenido

EMPEZAR
 Tabla de
Contenido
Presentación

Objetivos del curso (competencias)

Objetivo general
Objetivo específico

Objetivo del módulo

Mapa de contenido de la unidad

Módulo 3: Desarrollo web

3.1. Teoría del desarrollo FrontEnd.
3.2. HTML, CSS, JavaScript y Bootstrap para el desarrollo web
3.3. Seguridad web
3.4. Servidores web
3.5. Instalación de Visual Studio Code, atajos emmet y extensiones.
3.6. HTML5 intermedio
3.7. CSS3 intermedio

Otros materiales para profundizar

Recursos de video

Material complementario

2
 Presentación

En el presente documento está presentada de manera detallada la

propuesta a desarrollar con el curso Desarrollador Backend, ofrecidos
principalmente a personas con educación media culminada que vivan
en Colombia y que estén interesados en aprender en el campo de las
tecnologías de la información. Con este curso se busca que el estudiante
al finalizar la formación sea capaz de desarrollar aplicaciones backend
robustas implementando lógica de programación con JavaScript, bases
de datos y sistemas de control de versiones.

Objetivos del curso (competencias)

Objetivo general
Aprender a desarrollar aplicaciones modernas para procesar, almacenar y
proteger la información de un programa de manera robusta y escalable.
Implementando buenas prácticas y la lógica de programación con JavaScript.

Objetivo específico
- Por medio del pensamiento lógico, el lenguaje de programación y las
bases de datos diseñar y desarrollar aplicaciones de software que se ajusten
a los requerimientos planteados en cualquier problema.

- Organizar la realización de pruebas que verifiquen el correcto

funcionamiento de las aplicaciones de software desarrolladas y verificando
también que el desarrollo se ajusta a los requisitos de análisis y diseño.

- Utilizar un sistema de control de versiones con el fin de gestionar los

cambios en el código fuente a lo largo del tiempo.

3
Objetivo del módulo

El estudiante identifique y reconozca las principales herramientas y tecnologías para el

desarrollo FrontEnd, así como conocer las principales etiquetas de HTML5, y los llamados
y atributos de CSS3, con el fin de poder hacer ejercicios de integración entre el backend
y el frontend del aplicativo.

Mapa de contenido de la unidad

Figura 1. Mapa de contenido del módulo 3

4
 Módulo 3
Desarrollo web

3.1. Teoria del desarrollo Front End

Clase teórica en donde se inicia con definiciones importantes que como desarrolladores
backend se deben entender del desarrollo FrontEnd, debido a que ambas áreas deben
interactuar y complementarse entre sí para poder poner en funcionamiento un aplicativo.

¿Qué es el desarrollo Front End?

Cuando se desarrolla un aplicativo web es muy importante que la aplicación sea amigable
con el usuario, para esto se debe tener en cuenta no solo el cómo estén distribuidos los
elementos dentro de la aplicación, sino también temas estéticos como la tipografía, el
espaciado de los elementos, los colores a usar e incluso animaciones que hagan más
llamativa la aplicación para los usuarios finales. El desarrollo Front End consiste entonces
en la funcionalidad y diseño estético de las aplicaciones web, para ello el desarrollador se
apoya en herramientas como HTML, CSS y JavaScript.

World Wide Web

Las siglas WWW, que corresponden a la World Wide Web, o red informática mundial. Es
un sistema que permite el acceso a cualquier página web y que solo se puede acceder a
través de internet. También puede decirse que es un prefijo que utilizan las páginas web
para demostrar que su acceso es global.

Hipertexto

Los hipertextos nacieron por la necesidad de poder organizar las páginas web de
una forma no lineal, y que a su vez facilitarán la creación, agregación, enlazamiento
y compartimiento de información dentro de la World Wide Web (www). Las páginas
web se estructuran por medio de un etiquetado de hipertexto que permite organizar
la información y que el navegador lee e interpreta para representar la información. El
lenguaje para realizar esto es HTML.

Hoja de estilo

Una hoja de estilo es un documento que contiene instrucciones de cómo deben ser
visualizados los elementos en una página web, en este se encuentra no solo los colores o
tipografía, sino también se puede modificar la forma de los objetos, el tamaño o incluso
su visibilidad. El lenguaje utilizado para ello y que es reconocido por el navegador es
CSS.

5
Script

Es un documento o conjunto de instrucciones que permiten manipular, personalizar o

crear rutinas de ejecución que facilitan la tarea de crear aplicativos web más dinámicos
y llamativos para los usuarios. Para que un navegador pueda leer un script se hace uso
de lenguajes como JavaScript, el cual es soportado por los navegadores y es un lenguaje
interpretado, es decir no hace falta ser compilado para ser ejecutado.

3.2. HTML, CSS, JavaScript y Bootstrap para el desarrollo web

Para comenzar a entender el desarrollo FrontEnd se dará una introducción teórica
de HTML, CSS y JavaScript, de cómo estos funcionan y se complementan para hacer
funcionar en Front End.

¿Qué es HTML?

HTML en inglés HyperText Markup Language, es un enjuague de marcado de hipertexto

que se usa para crear páginas web. Por medio de etiquetas se estructuran los elementos
que van a componer la página web, y las cuales son interpretadas por el navegador
permitiendo visualizar estos elementos según como se hayan organizado.

Anatomía de un elemento HTML

En HTML un elemento se compone de una etiqueta de apertura, el contenido del

elemento y una etiqueta de cierres.

Dado que HTML es un lenguaje estandarizado, la etiqueta de apertura se representa por

“< >” donde en la parte interna de los corchetes va el nombre de la etiqueta, aquí también
se colocan atributos a la etiquetas que agregan funcionalidad o estilo al elemento; por
su parte la etiqueta de cierre se representa por “</ >”, y al igual que en la etiqueta de
apertura va el nombre de la etiqueta. El contenido puede ser un texto, una imagen, un
video o cualquier otro elemento.

fig. Estructura de un elemento HTML. Fuente:

https://developer.mozilla.org/es/docs/Learn/Getting_started_with_the_web/HTML_basics

6
Etiquetas HTML

Como se mencionó anteriormente, HTML es un lenguaje de marcado es decir que se

basa en etiquetas para marcar el contenido y así el navegador sepa que tipo de elemento
es y cómo debe ser mostrado. HTML tiene una lista propia de etiquetas dentro de las
cuales se encuentran:
ETIQUETA DESCRIPCIÓN

<html> </html> Este elemento encierra todo el contenido de la página entera

<head></head> Este elemento encierra toda la información de cabecera de la

página web
<title></title> Esta etiqueta contiene el nombre o titulo de la pagina, este no se
muestra dentro del cuerpo.
<body></body> Esta etiqueta encierra todo el cuerpo de la página web.

<img> Esta etiqueta se utiliza para mostrar imágenes, se acompaña del

atributo “src” para especificar la ubicación de la imagen.
<p></p> Esta etiqueta encierra un párrafo.

<h1></h1>... <h6></<h6> Etiqueta usada para encerrar un título hasta en 6 niveles.

¿Qué es CSS?

Cascading Style Sheets por sus siglas en inglés, es una hoja de estilo en cascada que
tiene la funcionalidad de dar formato o estilo a los elementos en la página web. CSS
permite describir cómo debe ser renderizado el elemento en la pantalla. Se denomina
en cascada ya que va aplicando la hoja de estilos de arriba hacia abajo, es decir primero
se van realizando los estilos de más arriba y continúa con los siguientes, hasta llegar al
final de la hoja.

Estructura CSS

Para aplicar un estilo a un elemento se debe llamar por el nombre de la etiquetas, seguido
de corchetes “{ }”, dentro de los corchetes van los atributos que se van a cambiar, como
pueden ser color, fondo, tipografía, alto, ancho, bordes, márgenes, entre otros.

fig. Estructura elemento CSS. Fuente

https://developer.mozilla.org/es/docs/Learn/Getting_started_with_the_web/CSS_basics

7
¿Qué es JavaScript?

JavaScript es un lenguaje de programación interpretado, ligero y con tipado débil. Es

una de las herramientas principales en la programación web, debido a que es de fácil
implementación y que puede ser ejecutada por cualquier navegador. A diferencia de
otros lenguajes de programación tiene un tipado débil, lo que quiere decir que no se
requiere declarar variables o asignarles un tipo de dato específico. Además es un lenguaje
de programación basado en prototipos, multiparadigma, de un solo hilo, dinámico, con
soporte para programación orientada a objetos, imperativa y declarativa.

JS y el DOM

Document Object Model o DOM, que es una herramienta que ha influido en el desarrollo
de las páginas web dinámicas y aplicaciones más complejas ya que nos permite acceder
y manipular los elementos del documento html. Dentro de las ventajas de JavaScript
está que permite manipular el DOM de una página, permitiendo crear, modificar o
eliminar elementos HTML en una página web de una forma más dinámica.

¿Qué es Bootstrap?

Bootstrap es un framework front-end para desarrollar aplicaciones web y sitios web

mobile-first, es decir, con un diseño que se adapta a la pantalla del dispositivo del usuario.
Bootstrap es un framework CSS desarrollado por Twitter en 2010 para estandarizar las
herramientas de la empresa. En un principio se llamó Twitter Blueprint y poco después,
en 2011, pasó a ser un software de código abierto y cambió su nombre a Bootstrap. Desde
entonces, se ha actualizado varias veces y ahora se encuentra en la versión 4.4.

El marco combina CSS y JavaScript para crear elementos de página HTML. No se trata
solo de cambiar el color de los botones y enlaces. Esta es una herramienta que brinda
interactividad en la página, por lo que brinda varios componentes que facilitan la
comunicación con los usuarios, tales como menús de navegación, controles de página,
barras de estado, etc.

¿Cómo funciona Bootstrap?

Bootstrap consta de una serie de archivos CSS y JavaScript que se encargan de asignar
propiedades específicas a los elementos de la página.
Hay un archivo principal llamado bootstrap.css que contiene las definiciones de todos
los estilos utilizados. Básicamente, la estructura del marco consta de dos carpetas: css,
contiene los archivos necesarios para crear elementos y una alternativa a los temas
sin procesar; y js, contiene el backend del archivo bootstrap.js, que es responsable de
ejecutar aplicaciones de estilo que requieren manipulación interactiva. Para asignar una
propiedad a un elemento, simplemente declaramos la clase apropiada en el atributo
“class” del elemento que se está creando.

8
3.3. Seguridad web

Como desarrollador Back End, una de las funciones que se deben tener aseguradas en
esta área es la seguridad de los aplicativos que se desarrollen. Por esto, en el curso se
expondrán los distintos ataques que pueden sufrir y cómo se pueden evitar.

Conceptos básicos

A grandes rasgos la seguridad web son los mecanismos mediante los cuales se busca
asegurar y proteger los datos en una página web y que así caigan en manos de
ciberdelincuentes o sean usados por terceras personas sin consentimiento. La seguridad
web también sirve para proteger no solo los datos relacionados a los usuarios, sino
también la información que pertenece a la empresa o organización desarrolladora del
sitio web.

Principios de seguridad

Dentro de la seguridad informática existen tres principios fundamentales que se deben

tener en cuenta para el desarrollo de cualquier sistema, la confidencialidad, la integridad
y la disponibilidad.

La confidencialidad hace referencia a que la información se debe proteger de filtraciones,

es decir, protegerla de divulgaciones a personal que no cuente con el nivel de autorización
requerida para conocerla.

La integridad se refiere a que se debe garantizar que la información a la que se acceda

no pueda ser modificada o alterada en ninguna parte del proceso, es decir esta debe ser
consistente para todo el sistema.
La disponibilidad indica que la información debe poder ser accedida para cualquiera
que la necesite consultar, o desde cualquier punto del proceso que sea requerido su
acceso.
CONFIDENCIALIDAD

PRINCIPIOS
SEGURIDAD
INFORMÁTICA
INTEGRIDAD DISPONIBILIDAD

Fig. Principios seguridad informática. Fuente: Elaboración propia

9
Ataques más frecuentes

Como se mencionó anteriormente la seguridad busca resguardar la información de

ataques, pero que tipos de ataques puede recibir una página web:

•Los ataques DDoS buscan alentar la página o de plano dejarla sin funcionamiento.
•Los Malware son un software malicioso que se utiliza principalmente para robar
información de una página, así como de los usuarios.
•Blacklist, consiste en eliminar el sitio web de los resultados de búsqueda de los
buscadores en internet, afectando directamente el tráfico a la página.
•Mostrar anuncios invasivos en la página web.
•Redireccionar a páginas maliciosas.
•Explotación de la información de los visitantes al sitio web, para ser usado por
terceros o robar la información.

Mecanismos de seguridad

Los mecanismos de seguridad son herramientas que permiten garantizar la seguridad

en un sistema. Estos mecanismos pueden ir desde orientados a los dispositivos que
controlan el tráfico en la red, hasta el aplicativo que utiliza el usuario final. En seguridad
web los mecanismos están orientados a proteger a los usuarios desde el aplicativo, para
ello se dispone de firewall en las aplicaciones web, sistemas de cifrado en la información,
certificados de seguridad y políticas de seguridad.

Fig. Seguridad web. Fuente:

Gráficos iales de Internet seguridad Royalty Free Stock SVG Vector (vectorportal.com)

10
Mecanismos detectivos

Tienen como objetivo detectar cualquier acción que se puede considerar una amenaza,
se centra en ubicar el sitio de la vulnerabilidad en el sistema, y la acción que pueda
afectar la integridad del aplicativo. Un ejemplo de estos son equipos de monitoreo de
tráfico o personal capacitado para detectar cualquier anomalía.

Mecanismos correctivos

Se encargan de reparar los errores y daños causados durante un ataque. Se busca que
se vuelva a un punto anterior al ataque para corregir la vulnerabilidad. Se debe tener en
cuenta que en este punto se asume que ya hubo un ataque.
Un mecanismo correctivo muy utilizado por empresas es tener una política de copias de
seguridad periódicas de la página web.

Mecanismos preventivos

Los mecanismos preventivos se encargan como su nombre lo dice, de prevenir ataques.

Su tarea consiste en monitorear la información y los dispositivos, registrando toda
actividad que sucede en la aplicación web o el ingreso de usuarios a la página. También
se encargan de identificar y eliminar cualquier programa que considere peligroso. Un
ejemplo de estos son los programas de antivirus.

Mecanismos básicos de seguridad

Existe una serie de mecanismos que son básicos para cualquier sistema y que garantizan
un nivel mínimo de seguridad en la página web.

•Autenticación: Consiste en verificar la identidad de cualquier usuario que

quiera acceder al sistema, ya sea como administrador de la página o editor
del contenido de esta. Existe valor mecanismo de autenticación, el más común
es mediante una contraseña que a su vez es cifrada mediante algún algoritmo
criptográfico. Cabe destacar que las contraseñas no se deben guardar como
texto plano en una base de datos, esta es cifrada y es ese valor el que se almacena.

•Autorización: Tiene que ver con determinar quién, cómo y cuándo un usuario
puede hacer uso de la información y herramientas disponibles. Tiene que ver con
la asignación de roles dentro de la organización para que accedan a elementos
específicos de información.

11
 •Administración: es el encargado de determinar el nivel de autorización de cada
usuario registrado en la plataforma. Además tiene como objetivo monitorear los recursos
y usuarios que intervienen en la aplicación web.

•Certificados de seguridad: Es un certificado digital que busca proteger la

información de las personas que ingresan a la página web, autentifica la identidad de
la página web y habilita una conexión segura por medio de un protocolo como SSL
(Secure Socket Layer), cifrando la conexión entre el servidor web y el navegador.
Firewall de aplicación web: Un firewall o cortafuegos es un software que permite o no el
tráfico de datos entre el sitio web e internet. Su función es monitorear el tráfico HTTP e
identificar posibles ataques.

•Actualizaciones de software: Muchas de las herramientas usadas para el desarrollo

web hacen uso de tecnologías de terceros para asegurar el correcto funcionamiento y
accesibilidad de la página web. Estas tecnologías están siempre en constante desarrollo,
que además de dar nuevas funcionalidades, buscan mejorar la seguridad en cada nueva
versión, es por ello importante mantener estas herramientas actualizadas y tener un
plan de políticas de actualización de herramientas de terceros.

•Contraseñas fuertes: Los algoritmos de cifrados garantizan que no cualquiera

pueda robar una contraseña, sin embargo la robustez de estos algoritmos dependen
en gran medida de la robustez de la contraseña, es por ello que se recomienda que
las contraseñas tengan un mínimo de caracteres, así como el uso de mayúsculas y
minúsculas, números y caracteres especiales.

•Copias de seguridad: Tener una política clara para la realización de copias de

seguridad, ya que este depende de la disponibilidad de espacio para realizarla, así como
de la periodicidad en los cambios al sitio web.

3.4. Servidores web

Clase teórica en donde se explica de manera detallada el funcionamiento de los servidores

web, y los tipos de servidores web que la actualidad nos ofrece, todo esto con el fin de
que el estudiante se familiarice con este concepto y más adelante pueda ponerlo en
práctica.

Definición

Para entender el concepto de servidor web, primero se debe tener claro la definición
de servidor. Un servidor es una computadora que por lo general cuenta con una alta

12
capacidad de almacenamiento y procesamiento, donde se alojan documentos y archivos
que son accesibles para otros usuarios o clientes (modelo cliente - servidor) por medio
de una conexión, comúnmente por medio de internet.

Fig. Modelo cliente-servidor. Fuente:

File:Cliente-Servidor.png - Wikimedia Commons

Ahora bien un servidor web, son un tipo de servidor que aloja los documentos y
material correspondientes a la página o aplicativo web, dentro de los que se encuentran
los documentos HTML, CSS y JavaScript, así como los archivos de media tales como
documentos PDF, imágenes, videos, logos, audio y todo contenido que el aplicativo
requiera.
Sin embargo el servidor web puede hacer referencia a dos conceptos, según la capa a
la que se haga referencia.

•Servidor Web Hardware: Se refiere a la definición más simple de servidor

web, como dispositivo físico, donde se almacenan los diferentes archivos que
soportan el aplicativo web, y que se conecta por medio de internet.

•Servidor Web Software: Tiene que ver en el cómo se controla el acceso de los
usuarios y las peticiones, que se realizan por medio del protocolo HTTP, por lo
que también se conoce como servidor HTTP. Un servidor HTTP puede ser
accedido a través de los nombres de dominio de los sitios web que almacena, y
entrega el contenido de esos sitios web alojados al dispositivo del cliente.

A diferencia de otro tipo de servidores, los servidores web se comunican con los
dispositivos cliente por medio de internet y a su vez como los navegadores a través del
protocolo HTTP. En este protocolo el cliente realiza peticiones constantes al servidor, el
cual responde con la información solicitada, en una página web.

13
Tipos

Existen tres tipos de servidores web, que se identifican según el alcance que se quiera
llegar con la aplicación web, es decir, para el tipo de población objetivo para el que se
esté pensando hacer uso de la tecnología.

•Servidor compartido: es el tipo de servidor web más común y utilizado, se

centra en el alojamiento de un sitio web al cual pueden acceder muchas
personas. Debido a que su usos no es exclusivo, sino que es usado por muchos
clientes, también se le denomina web hosting. El web hosting, es un servicio
donde la persona paga por un espacio de almacenamiento para que la página
web sea alojada y así ser accedida por cualquier persona en internet.

•Servidor dedicado: es opuesto al anterior, en este caso el servidor solo aloja o

funciona para un servicio en específico. Es especialmente usado por compañías
grandes, que disponen de los suficientes recursos e infraestructura para tener
servidores propios donde almacenar su información.

•Servidor VPS: los Servidores Virtuales Privados, difieren de los dos anteriores
en cuanto a que lo que se quiere con este tipo de servidores es
restringir el acceso a cierto número de personas, es decir, no buscan ser
públicos en la red para cualquier usuario. Este tipo de servidores se usan
más que nada a nivel interno de las organizaciones para garantizar la seguridad
de la información de la compañía.

Fig. Servidor web. Fuente:

https://www.seobility.net/es/wiki/User_Agent

14
Servidores más comunes

Existen varios servidores web, que varían en algunas características. Entre los más
populares se encuentran:
•APACHE: Es un servidor web muy popular, su principal característica es que es
de código abierto y gratuito.

•Microsoft IIS: Es el servidor web desarrollado por Microsoft, por lo que es

compatible con el sistema operativo Windows.

•Google GWS: Es el servidor web desarrollado por Google y en donde soporta

todos los servicios que ofrece la compañía.

•Sun Java System Web Server: Es un servidor web desarrollado por Oracle, está
enfocado principalmente para soportar aplicaciones en Java, aunque puede
soportar otros lenguajes como Python o Ruby.

•Nginx: Es un servidor web de código abierto y muy ligero, además de ser

compatible con varios sistemas operativos. Cuenta con una versión gratuita y
una de pago.

Funciones

Como ya se mencionó anteriormente la comunicación entre el servidor web y el cliente

se realiza por medio del protocolo HTTP a través de peticiones que constantemente hace
el cliente al servidor. Existen varios tipos de peticiones, pero las más comunes son GET y
POST. Las peticiones GEt se encargan de solicitar al servidor algún tipo de información,
mientras que las peticiones POST envían datos al servidor como puede ser datos de un
formulario.

El proceso que realiza el servidor web, después de recibir peticiones es el siguiente:

1. Se resuelve el DNS del sitio web, para ello se ubica la dirección IP del servidor
en un servidor DNS que busca el nombre del dominio del sitio web, y devuelve la
dirección IP.

2. Una vez que el sistema operativo ha resuelto esa consulta DNS, utiliza el
protocolo TCP/IP para comunicar con el servidor remoto que almacena la página
que pretendemos cargar.

3. El servidor web identifica a qué sitio corresponde la petición recibida,

observando su URL. A partir de ella levanta la configuración personalizada de esa
página web, detectando los elementos que debe enviar y definiendo la prioridad
de la petición.

15
 4. Finalmente, el servidor web devuelve al navegador una respuesta que
identifica el tipo de datos enviados, facilitando así su funcionamiento y
mostrando en pantalla la información que hemos solicitado.

3.5. Instalación de Visual Studio Code , atajos emmet y

extensiones.
Clase práctica en donde se instruye al estudiante sobre la instalación de Visual Studio
Code y de las extensiones que le serán de ayuda en el proceso de aprendizaje.

3.6. HTML5 intermedio

Componente práctico en donde se comienzan a desarrollar aplicaciones web utilizando

el lenguaje de marcado HTML, todo esto para que el desarrollador Back End comprenda
la utilidad de esta herramienta en el desarrollo web.

HTML y HTML5

HTML5 es la versión más reciente de HTML, por lo que trae nuevas funcionalidades que
hacen más fácil y eficiente la creación de páginas web. La anterior versión de HTML 4 fue
lanzada en 1999, y HTML5 en 2014.

Dentro de las novedades que ofrece se encuentra la inclusión de elementos multimedia

de una forma nativa en el lenguaje, nuevas etiquetas para facilitar el estructurado de la
página web, y así como la posibilidad de poder realizar animaciones en 2D.

Estructura del documento HTML

Un documento HTML siempre se componen de una estructura inicial básicas, donde se

diferencian tres secciones importantes:

•Tipo de documento: se declara mediante la etiqueta HTML5 <!DOCTYPE html>

•Cabecera: En esta sección se especifican los metadatos de la página, aquí se
incluyen documentos de hojas de estilo CSS y documentos script JS, así como
otra información que no es visible. Se encierra mediante la etiqueta <head></
head>.
•Cuerpo: En esta sección se encuentran todos los elementos que serán
visible en la página web, es donde se agregan textos, enlaces, imágenes,
elementos multimedia, formularios, tablas, botones y todo elemento que se
desee mostrar.

16
Etiquetas HTML

<!–…–> Define un comentario

<!DOCTYPE> Define el tipo de documento

<a> Define un hipervínculo

<article> Define un artículo

<aside> Define el contenido lateral del contenedor de una

página
<audio> Define contenido de sonido

<b> Define texto en negrita

<bdi> Aísla una parte del texto que puede tener un formato
diferente del texto externo
<body> Define el cuerpo del documento

<br> Define un salto de línea

<button> Define un botón clickeable

<canvas> Se usa para dibujar gráficos en pantalla

<div> Define una sección en un documento

<dt> Define un término (un ítem) en una lista de definición

<footer> Define el pie de página de un documento

<form> Define un formulario html

<h1> a <h6> Define encabezados o títulos

<head> Define información acerca del documento

<header> Define la sección de encabezado del documento

<html> Define la raíz del documento

<i> Define una parte del texto de modo alternativo

<iframe> Define un frame en línea

17
<img> Define una imagen

<input> Define un control de entrada de texto

<label> Define el rótulo para un elemento <input>

<li> Define un ítem de una lista

<menu> Define la lista de un menú

<meta> Define un metadato de un documento

<nav> Define un link de navegación

<ol> Define una lista ordenada

<p> Define un párrafo

<script> Define un script del lado cliente

<section> Define una sección de un documento

<select> Define un drop-down list

<span> Define una pequeña sección de un documento

<style> Define un estilo para la información de un do-

cumento
<table> Define una tabla

<tbody> Define el cuerpo de una tabla

<td> Define una celda en una tabla

<th> Define una celda de encabezado en una tabla

<thead> Agrupa los encabezados de una tabla

<title> Define un título para el documento

<tr> Define una fila en una tabla

<var> Define una variable

<video> Define un vídeo o película

<ul> Define una lista desordenada

18
3.7. CSS3 intermedio

Componente práctico en donde se aplican hojas de estilo CSS a los desarrollos aprendidos
con HTML, todo esto para que el desarrollador Back End comprenda la utilidad de esta
herramienta en el desarrollo web.

CSS y CSS3

CSS es uno de los lenguajes base de la Open Web y posee una especificación estandarizada
por parte del W3C. Es un lenguaje de estilos que se usa para describir la presentación
de un documento HTML por lo que CSS lo que hace es renderizar los elementos que
componen la página web.

CSS3 es la versión actual de CSS, la especificación de CSS3 viene con novedades que
permitirán hacer páginas web más elaboradas y más dinámicas, con mayor separación
entre estilos y contenidos. Dando soporte a muchas necesidades de las páginas web
actuales, sin tener que recurrir a trucos de diseñadores o lenguajes de programación.

Reglas predeterminadas

Anteriormente se estudió la estructura básica de una regla en CSS, en esta unidad se

busca profundizar un poco más en su uso y facilidades.

Una regla está definida inicialmente por un selector, este corresponde al nombre de la
etiqueta HTML a la cual se busca aplicar la regla de estilo, en este caso solo es necesario
poner el nombre de la etiqueta y no las llaves “< >”.

Después del selector se abren corchetes “{ }”, dentro de estos corchetes se agregan las
declaraciones de las reglas, al final de cada declaración se coloca “;” para separar cada
declaración.
Las declaraciones están conformadas por dos elementos, una propiedad y el valor de la
propiedad.

La propiedad es el atributo que se quiere modificar de la etiqueta, según el tipo de

equipo esta tiene una propiedades relacionadas, dentro de las más comunes están el
color, el fondo, las márgenes, los bordes, etc. Por otro lado están los valores, estos son
los valores que se le van a asignar a esa propiedad, estos pueden ser numéricos, colores,
palabras reservadas. Para separar una propiedad de un valor de propiedad se usa “:”.

19
Selección de varios elementos

Muchas veces es necesario seleccionar varios elementos que comparten las mismas
propiedades, para ello al momento de crear una regla se separa cada elemento que se
va a afectar con “ , ”.

Tipos de selectores

Otra de las facilidades que ofrece CSS, es la posibilidad de seleccionar elementos que
se agrupan por fuera de las etiquetas HTML. Recordemos que en una etiqueta HTML
podemos agregar atributos, dentro de estos encontramos atributos como “id” que
asigna un identificador único a la etiqueta o “class” que le asigna una clase a la etiqueta.

Muchas veces cuando realizamos una página web queremos modificar un elemento
específico pero su etiqueta se usa en otras partes de la página, para ello cuando
creamos la regla podemos solo seleccionar este elemento por medio de su “id”. Otro
ejemplo es cuando queremos que varios elementos comparten una propiedad para ello
podemos agruparlos por el atributo “class” y luego cuando creemos la regla seleccionar
los elementos que estén agrupados bajo esa clase.

En la siguiente tabla se muestran los tipos de selectores en CSS y su uso.

Nombre del selector Qué selecciona Ejemplo

Selector de elemento Todos los elementos HTML p

del tipo especificado. Selecciona los elemento
<p>

Selector de identificación El elemento en la página #mi-id

(ID con el ID especificado. Selecciona el elemento
<p id=”mi-id>

Selector de clase Los elementos en la página .mi-clase

con la clase especificada. Selecciona los elementos
<p class=”mi-class”> y
<a class=”mi-class”>

20
 Nombre del selector Qué selecciona Ejemplo

Selector de atributo Los elementos en una pá- img[src]

gina con el atributo especi- Selecciona <img src=”mi-
ficado. magen.png”>

Selector de clase Los elementos especifica- a:hover

dos, pero solo cuando esté Selecciona <a>, pero solo
en el estado especificado, cuando el puntero esté
por ejemplo cuando el sobre el enlace.
puntero esté sobre él.

21
 Otros materiales para profundizar

Recursos de video

•Patricio Pérez Pinto. (2015, 13 abril). Curso básico HTML y CSS #1 - Introducción a
HTML [Vídeo]. YouTube. https://www.youtube.com/watch?v=n0ShZoRvvjY

•AMPIVA. (2017, 5 diciembre). 9 - Introducción a JavaScript [Vídeo]. YouTube. ht-

tps://www.youtube.com/watch?v=PjuweDHbuXQ

•Campus Party. (2013, 3 agosto). CPMX4 - Seguridad Web para Desarrolladores [Ví-
deo]. YouTube. https://www.youtube.com/watch?v=dro7HMRi8_g

• render2web. (2020, 27 marzo). Como Instalar, Configurar y Usar Visual Studio

Code [Vídeo]. YouTube. https://www.youtube.com/watch?v=HVzFLw5r2EM

•Ubuntu Colombia. (2020, 12 enero). Fundamentos basicos de HTML5 [Vídeo]. You-

Tube. https://www.youtube.com/watch?v=ejDBLkCXSQk

•MagtimusPro. (2017, 27 abril). diseñando un sitio web - Html5 - Css3 | Servicio |

parte#1 | Desde cero [Vídeo]. YouTube. https://www.youtube.com/watch?v=yMT7R-
pEeIq0

Material complementario

•Las 7 skills que debe tener un desarrollador Front End. (2020, 30 septiembre).
OpenWebinars.net. https://openwebinars.net/blog/las-7-skills-que-debe-tener-un-
desarrollador-front-end/

•Coppola, M. (2022, August 1). Qué es un servidor web, para qué sirve, cómo funcio-
na y ejemplos. Blog de HubSpot. Retrieved December 20, 2022, from https://blog.
hubspot.es/website/que-es-servidor-web

•CSS | MDN. (2022, December 1). MDN Web Docs. Retrieved December 20, 2022,
from https://developer.mozilla.org/es/docs/Web/CSS

22
•HTML5 - Glosario de MDN Web Docs: Definiciones de términos relacionados con
la Web | MDN. (2022, November 29). MDN Web Docs. Retrieved December 20,
2022, from https://developer.mozilla.org/es/docs/Glossary/HTML5

•Qué es un servidor web: funcionamiento y tipos - Cloud Center Andalucía. (n.d.).

Cloud Center Andalucia. Retrieved December 20, 2022, from https://www.cloud-
centerandalucia.es/blog/que-es-un-servidor-web-funcionamiento-y-tipos/#Tipos_
de_servidores_web

•Seguridad Web: ¿qué es y cuáles medidas se pueden ejecutar? (2020, April 26).
Rock Content. Retrieved December 20, 2022, from https://rockcontent.com/es/
blog/seguridad-web/

•Tipos de seguridad informática. (2018, February 21). Viewnext. Retrieved Decem-

ber 20, 2022, from https://www.viewnext.com/tipos-de-seguridad-informatica/

•Admin, A. (2020, 7 octubre). Introducción fundamentos web [HTML, CSS y JS] +

Presentación de HTML básico. Java desde 0. https://javadesde0.com/introduc-
cion-fundamentos-web-html-css-js-presentacion-de-html-basico/

•de Souza, I. (2022, 26 abril). Seguridad web: revisa los factores claves para tener
un sitio web seguro y sólido. rockcontent. https://rockcontent.com/es/blog/seguri-
dad-web/

•de Souza, I. (2019, 14 junio). ¿Qué es un servidor web y para qué sirve en Internet?
rockcontent. https://rockcontent.com/es/blog/que-es-un-servidor/

•10, Minds. (5 de mayo de 2022). Tres tips de Visual Studio Code que debería sa-
ber. #10minds #vscode #visualstudiocode #html #html5 #htmlcoding #htmlcss
#developer #programacion #webdev #webdeveloper [Vídeo] TikTok. https://www.
tiktok.com/@10minds/video/7094334945564445958?is_copy_url=1&is_from_weba-
pp=v1&q=html5&t=1672074767072

23