DWB

DOCUMENTACIÓN

DISEÑO
WEB BÁSICO

Hello World!
 INTRODUCCIÓN
DWB

HELLO WORLD!
¿QUÉ ES UNA PÁGINA WEB?

HISTORIA Y EVOLUCIÓN DE INTERNET

LAS CAPAS DE LA WEB Y EL PERFIL DEL DISEÑADOR WEB

FUNDAMENTOS WEB: USABILIDAD, COLORES...

PLANIFICACIÓN WEB

OPTIMIZACIÓN DE IMÁGENES

CONCEPTO BANNER / CREACIÓN GIFS ANIMADOS

N N T E
A N I MAC I Ó FRO
T M L 5 a d >
H <h e
5 e a d > Á
HTML <h N DA R E S C S S 3 E S T
E S T Á
 HTML5 / CSS BÁSICO | Diseño Web Básico

¿QUÉ ES UNA PÁGINA WEB?

Podemos definir una página web como una fuente de información,
accesible a través de un dispositivo (ordenador, tablet, movil...) con
WORLD WIDE WEB
conexión a la red. GRAN TELARAÑA MUN-
DIAL
Accedemos a las páginas web a través de los navegadores (Firefox,
Google Chrome, Safari, Edge, etc) que son aplicación que permiten su Sistema de ordenadores conecta-
visualización. dos intercambiandose documen-
tos a través de la red, formando
La información se presenta generalmente en formato HTML y puede así una gran telaraña de datos.
contener enlaces a otras páginas web, constituyendo así la gran red
enlazada, WWW, o teleraña mundial. La www hace referencia a la in-
mensa red de ordenadores conectados entre sí a lo largo del planeta, HTML
intercambiandose información de todo tipo. LENGUAJE DE MARCA-
DO DE HIPERTEXTOS
ANATOMÍA DE UNA WEB Html es el lenguaje estándar en
internet. Está basado en marcas
1- Identidad / Logotipo (de la empresa, marca, producto…) o etiquetas que encierran a un
2- Cabecera (elemento visual situado en la parte superior, indica elemento (por ejemplo texto)
y le aportan un formato y un
titulo o temática de la web) significado.
3- Menú de navegación / Vínculos
4- Zona principal de contenidos NAVEGADORES
5- Textos de diferentes niveles (Títulos, subtítulos, párrafos...)
6- Imágenes (en diferentes formatos: GIF, JPG, PNG, vectoriales...)
WEB
7- Hipervínculos (enlaces internos o externos a la web) Un navegador web es una aplica-
ción que nos permite visualizar
8- Elementos Multimedia (banners, videos, animaciones…) páginas web.

A C I Ó N
D N I M
Firefox

N
Safari

E A
M L 5
HT Opera Microsoft Edge
Iexplorer

E S C S S 3
D A R
ÁN Android Google Chrome

e a d > >
<h y
Aulacreactiva - Escuela de creativos

o d
 HTML5 / CSS BÁSICO | Diseño Web Básico

UN POCO DE HISTORIA: DE “ARPANET” A LA “WEB3”

Los orígenes de Internet se remontan al año 1969, cuando se esta-
bleció la primera conexión conocida como ARPANET. La idea inicial
estaba ligada a la seguridad militar de EEUU, aunque su verdadera
evolución tuvo lugar alrededor del mundo académico, conectando
ordenadores entre unas universidades en California, Utah y Los An-
geles… consistía únicamente en un intercambio de información en
formato texto.

Posteriormente, hacia el 1990, Tim Berners-Lee desarrollo en el cen-

tro CERN (el laboratorio europeo de física de partículas, en Ginebra,
Suiza) un medio de compartir información entre los físicos de alta
energía de todo el mundo.

Este medio se denomina como La WWW (World Wide Web o La

telaraña mundial) o simplemente web. La WWW (o La Web), es el
sistema de documentos interconectados entre si, como una gran El W3C (Consorcio de la WWW
telaraña de datos. Es una red de redes. Esta es la web tal y como la trabaja para que internet con-
conocemos hoy en dia. tinue evolucionando de una
manera estandarizada, estable-
Desde 1994, La evolucion de la WWW está en manos del Consorcio ciendo unas normas o criterios
W3 (W3C), que pretende promover estandares y permitir un desarro- de desarrollo.
llo ordenado del mismo.

Hacia el año 2000, surge el termino Web 2.0, que se refiere a una segunda generacion en el desarrollo
web, que amplia el mundo web no solo a profesionales sino a cualquier usuario, como por ejemplo con
las redes sociales, youtube, blogs, etc.

Actualmente nos encontramos inmersos en la web 3.0, facilita la accesibilidad de las personas a la infor-
mación y nos encontramos con un internet más inteligente, donde los usuarios pueden también hacer
búsquedas más cercanas y estar más conectados entre diferentes plataformas y dispositivos.

Web 3.0 es la explosión de internet: La web semántica (con mayor significado), inteligencia artificial, el
internet de las cosas, realidad virtual, metaverso, criptomonedas...

arpanet internet W3C css1 GOOGLE Web2.0 Web3.0

www estandares css2 redes Transición Html5
html sociales css3

1969 1990 1994 1996 1998 2000 actualidad

Aulacreactiva - Escuela de creativos

 HTML5 / CSS BÁSICO | Diseño Web Básico

INTERNET COMO MEDIO DE COMUNICACIÓN

Existen diversos medios de comunicación: radio, cine, televisión, prensa… e Internet. Internet es un me-
dio de comunicación multimedia que se compone de texto, imágenes fijas, imágenes en movimiento y
elementos multimedia como video, sonidos, etc.

A diferencia de otros medios de comunicación, el usuario de internet puede decidir el tiempo que emplea
en asimilar la información de cada pagina, la información no es lineal ya que puede saltar de un punto a
otro. (Elegimos que paginas navegar, en que momento y por cuanto tiempo.) Ademas, el usuario puede
interactuar haciendo comentarios, debatiendo en foros, e incluso creando contenidos, blogs, subir videos
a youtube, intercambiar información...

SERVICIOS QUE OFRECE INTERNET

La web es como
un ser vivo. Información
Portales de Noticias, Diccionarios, Traductores, Wikipedia, Cursos On-
line, Webs Ayuntamientos, Organizaciones, Empresas, etc.

Comunicación
Redes Sociales, Envío y recepción de correo electrónico, conversacio-
nes y reuniones online, Chats, Foros, etc.

CAMBIANTE
CAMBIANTE: Intercambio de archivos o contenidos

Acceso remoto a otras máquinas

estándares lenguajes
técnicas programas Compras online de productos o servicios
segundamano, vuelos, viajes, hoteles, entradas
dispositivos recursos

MBIANTE tendencias
compañías
necesidades
navegadores
Televisión on-line - Juegos en linea - Publicidad

dares lenguajes INTERNET ES “EL MEDIO”

as programas
Internet es un medio que contiene en él otros medios:
itivos recursos La radio on-line es radio. La prensa on-line es prensa. La televisión
ncias necesidades on-line es televisión.

añías navegadores Por tanto, Internet se entiende como un CANAL de comunicación.

Aulacreactiva - Escuela de creativos

 HTML5 / CSS BÁSICO | Diseño Web Básico

LAS CAPAS DE LA WEB: FRONT-END Y BACK-END

Cuando un usuario navega por un sitio web, aprecia sólo el aspecto visual, llamado FRONT-END. Es la
capa de la web que interactua con el usuario.

Sin embargo, en el diseño y desarrollo web es tan importante lo que vemos como lo que no.

Detrás del aspecto visual (diseño) encontramos una capa técnica, el mundo de los códigos, conocida
como el BACK-END.

FRONT-END
ES LA CAPA FRONTAL
DE LA WEB,
EL ASPECTO VISUAL. ES
LA CAPA CON LA QUE
INTERACTUA
EL USUARIO.

BACK- END
ES “LA PARTE DE
ATRÁS”, EL ASPECTO
MÁS TÉCNICO...
¡DONDE HABITAN LOS
CÓDIGOS!

Aulacreactiva - Escuela de creativos

HTML5 / CSS BÁSICO | Diseño Web Básico

UBICANDO EL PERFIL DEL DISEÑADOR WEB

EL DISEÑO WEB NO TIENE,

EN OCASIONES, UNOS LIMITES
CLAROS.
Y el mercado actual busca perfiles profesio-
nales “todoterreno”.

No obstante, vamos a tratar de ubicar el

perfil del diseñador web front-end en el
mercado creativo actual.

ia

El diseño WEB... ¡es el campa-

mento base que lo conecta todo!

Aulacreactiva - Escuela de creativos

 HTML5 / CSS BÁSICO | Diseño Web Básico

INTRODUCCIÓN A “USABILIDAD WEB”

CUANDO UN USUARIO UTILIZA UNA HERRAMIEN-

TA, BUSCA CUMPLIR UN OBJETIVO DE LA MANE-
RA MÁS FÁCIL POSIBLE.
Podemos definir “Usabilidad Web” como la facilidad que tenemos
que dar a un usuario cualquiera para que navegue por una página
web de manera sencilla y rápida, sin tener que investigar ni pensar
demasiado, para que cumpla su objetivo.
El usuario NO QUIERE PENSAR.

En la imagen de la derecha puedes ver la apariencia de la web de

Google en 1998. Debajo, la apariencia de Google en la actuali-
dad, después de más de 25 años.

¿Porqué no ha cambiado mucho su estética, en esencia?

¿Crees que Google no tiene dinero para hacer una página web aluci-
nante, atractiva y con contenidos en 3D?

SIMPLEMENTE NO ES NECESARIO. UNA WEB

TIENE QUE SER ATRACTIVA, PERO SOBRE TODO
ÚTIL.
Cuando entramos en Google es porque vamos a hacer una busque-
da, y queremos cumplir nuestro obejtivo cuanto antes y de la ma-
nera más sencilla posible, sin pensar demasiado, sin tener que hacer
muchos clicks.

Si una web no carga rápido... TE VAS. ¿verdad?

USABILIDAD ES ALGO TAN COMPLEJO Y TAN FÁCIL COMO

PENSAR EN EL USUARIO.

“Cuanto más rápidas son las conexiones a internet,

menos paciencia tienen los usuarios. Dicen los estudios que no
esperamos más de 3 segundos para que una página web cargue y
nos cautive.”

Aulacreactiva - Escuela de creativos

HTML5 / CSS BÁSICO | Diseño Web Básico

GENERALIDADES USANDO MAC, ¿Tú eres de Mac

FRENTE A PC: o de Windows?

1
3

1- Preferencias del Sistema

(El panel de control en PC)

2- Spotligth
Lupa superior derecha para hacer
busquedas de archivos, progra-
mas, etc.
4
3- Macintosh HD
Disco duro (Mi pc)

4- Dock
Es la barra inferior de acceso a los
programas instalados.

El Sistema operativo de Macin-

tosh en muy facil de manejar.

SHIFT En general, frente a Pc, se sustitu-

ye la Tecla Control por Comando
(Cmd). (Los tipicos atajos de
ALT COMANDO
teclado como por ejemplo Ctrl+C
para copiar, se sustituyen por
Cmd+C)

Forzar salidas =
Comando+ALt+Escape

(Como finalizar tareas en Pc

(Ctrl+Alt+Supr)

Deja de buscar!
En Macintosh, los iconos para ce-
rrar o minimizar ventanas estan a
la izquierda de los paneles.
(Al contrario que en Pc)

Aulacreactiva - Escuela de creativos

 HTML5 / CSS BÁSICO | Diseño Web Básico

INTRODUCCIÓN COLORES EN LA WEB / GAMA RGB

En diseño gráfico para impre-
sión, la gama de colores con la
que se trabaja es la Cuatricromía
(CMYK). La unidad de medida
habitual son milimetros o centi-
metros, y la resolución de ima-
gen óptima para imprenta es de
300 ppp.
R G
En el diseño web se trabaja con
los colores Luz: hablamos de la
gama RGB, compuesta por tres
colores primarios que son Rojo
(R), Verde(G) y Azul(B).

En una composición de color B

RGB, cada color primario tiene un
valor entre 0 y 255. A través de
la gama RGB obtenemos más de
16 millones de colores.

Ejemplos de color RGB:

ROJO: 255, 0, 0 BLANCO: 255, 255, 255 NEGRO: 0, 0, 0

COLORES HEXADECIMALES
Es un método universal y extendido en el mundo web para definir colores RGB. Un color hexadecimal es
un código precedido por una almohadilla y formado normalmente por 3 parejas de digitos que indican el
valor correspondiente a cada color primario. Los números hexadecimales provienen de las matemáticas,
son números en base 16 que utilizan las primeras letras del abecedario (A,B,C,D,E,F) a parte de los núme-
ros, para poder representar valores como el 255 en sólo 2 dígitos.

Ejemplos de color Hexadecimal:

ROJO: #FF0000 BLANCO: #FFFFFF NEGRO: #000000

SELECTOR DE COLOR
A través de programas como
Photoshop y otras herramientas
de diseño, podemos seleccionar
un color y ver su composición en
diferentes gamas: CMYK, RGB,
Hexadecimal, HSB...

Aulacreactiva - Escuela de creativos

HTML5 / CSS BÁSICO | Diseño Web Básico

PLANIFICACIÓN WEB
ANTES DE CONSTRUIR UNA WEB, DIBÚJALA

Dibujar lo que tienes en la cabeza antes de lanzarte a programar o a diseñar un sitio web puede resultar-
te de gran ayuda. Recuerda que es en esta fase inicial cuando más sencillo y menos traumático resulta
introducir cambios.

MAPA WEB / DIAGRAMA DE FLUJO / BLUEPRINT / MAPA DE ARQUITECTURA

Son esquemas que representan la estructura y el flujo de navegación de un sitio, por lo tanto, una buena
manera de planificar la estructura general de la web. El aspecto gráfico que tendrá la web y los detalles
son lo de menos en esta fase, lo importante es mostrar los diferentes apartados que tendrá y la navegabi-
lidad entre ellos.

El diagrama de presentación es el que debe mostrar las formas de organización visual de los contenidos
en las páginas principales, por ejemplo: la página inicial, las páginas interiores, páginas de productos,
etc. Este diagrama no pretende representar el diseño gráfico o diseño visual en detalle, sino especificar el
esqueleto organizativo de la interfaz.

IMÁGENES DE MALLA /
WIREFRAMES / MAQUETAS

Son bocetos o esquemas que muestran como serán los apartados de una página web, y que también se
deben elaborar antes de construir la web. En esta representación esquemática no se muestran elementos
gráficos definitivos, porque lo importante es establecer el contenido y el comportamiento de las diferen-
tes páginas. La creación de las imágenes de malla nos ayuda en el proceso de concepción de una página
web, y también se utilizan para comentar con el cliente las partes de las que constará, cambios, etc.

Tanto lo diagramas de flujo como las maque-

tas nos proporcionan una excelente oportuni-
dad para “discutir” el proyecto con el resto del
equipo y, por supuesto, con el cliente antes de
empezar a programar y diseñar, de forma que
los malentendidos y los cambios y modifica-
ciones no resulten demoledores.

Aulacreactiva - Escuela de creativos

 HTML5 / CSS BÁSICO | Diseño Web Básico

DEL BOCETO AL DISEÑO ESTÁTICO

Tras el proceso de planificación es el momento de pasar al diseño estático de la página pero sin funcio-
nalidad real. Es decir, uno o varios pantallazos de cómo va a ser la web. Con programas de diseño como
pudieran ser Photoshop o Illustrator, diseñamos al menos la pantalla inicial y varios apartados, hacien-
do una simulación de los contenidos.

Hacer una propuesta de diseño estático es útil por varios motivos: Por un lado, nos permite hacer una o
varias propuestas de diseño a un cliente, y recibir su feedback antes de construir la web. Por otro lado,
realizar una propuesta de diseño nos permite a los diseñadores tomar decisiones profesionales acerca
de la composición, colores, tipografías, etc. Y sin duda, será más facil construir finalmente una web si lo
hacemos a partir de un diseño estático.

En esta fase, el cliente puede hacer modificaciones o correcciones, y estos cambios los podemos asumir
ya que aún no hemos avanzado demasiado el proyecto. Pero algunas modificaciones en el futuro, si el
proyecto esta muy avanzado, pueden ser demoledoras.

DISEÑO CONSTRUCCIÓN
MAPA WEB MAQUETAS ESTÁTICO FINAL

Aulacreactiva - Escuela de creativos

HTML5 / CSS BÁSICO | Diseño Web Básico

USO DE RETÍCULAS WEB (GRID / REJILLA / GRILLA)

¿QUÉ ES UNA RETÍCULA?

Una retícula web, también conocida como “grid” en inglés, es una estructura invisible de líneas (guías)
horizontales y verticales que se utilizan en el diseño gráfico y web para organizar el contenido de una
página de manera visualmente coherente y funcional.

Es como una cuadrícula que sirve como guía para colocar elementos como texto, imágenes y otros
elementos visuales, de manera que queden bien alineados, aportando consistencia, uniformidad, orden
visual y facilitando la disposición de elementos.

COLUMNAS

Existen diferentes tipos de retí-

culas, con diferente número o
disposición de columnas.

Por ejemplo retículas sencillas de

2 o 4 columnas, hasta una retícu-
la versátil de 12 columnas.

MARGENES / GUTTERS

los huecos entre las columnas de

una retícula también pueden ser
llamados “espacios” o “márgenes”.
“gaps”.

Los términos “gutters” y “gaps”

pueden utilizarse de manera más
común en el contexto del diseño
web y gráfico en inglés.

DESCARGAR GRIDS
“Algunos programas de maquetación como In-
https://1440px.com/ design o Herramientas de UI como Figma fa-
cilitan el trabajo con retículas. También
https://www.freeimages.com/
es posible descargar plantillas con retí-
illustrations/psd/grid
culas preparadas para otros programas como
https://dribbble.com/...... Photoshop o Illustrator, o incluso crear
tus propias retículas.”
https://bringyourownlap......

https://1200px.com/

Aulacreactiva - Escuela de creativos

 HTML5 / CSS BÁSICO | Diseño Web Básico

OPTIMIZACIÓN DE IMÁGENES

Cuanto más rapida es la conexión a internet, menos paciencia tiene el usua-

rio. En la web, es muy importante que los contenidos se descarguen lo más
rapidamente posible. Las imagenes utilizadas tienen que estar correctamen-
te optimizadas, para que pesen lo menos posible.

La optimización es el equilibrio entre el peso y la calidad de una imagen. Lo

ideal es encontrar un ajuste de optimización que disminuya al máximo el
peso del archivo, con la minima perdida de calidad.

Unidades de peso de archivos:

1 Gigabyte (GB) = 1024 Megabytes (MB) La unidad de peso más utilizada en la web son
1 Megabyte (MB) = 1024 Kilobytes (KB) los Kilobytes. Una imagen intermedia,
1 Kilobyte (KB) = 1024 bytes correctamente optimizada puede pesar 5 kb,
10 kb, 20 kb, 50kb, depende de varios factores...

FORMATOS DE IMAGEN UTILIZADOS EN WEB

JPG GIF PNG

-Son las siglas para Joint Pho- -Son las siglas para Graphics -Son las siglas para Portable
tographic Experts Group. Interchange Format. Network Graphics, que reune
características de los anterio-
-Soporta más de 16 millones -Como máximo tiene 256 res formatos.
de colores. colores.
-Soporta más de 16 millones
-tipo de formato muy extendi- -tipo de formato muy extendi- de colores.
do y compatible. do y compatible.
-PNG 24 Bits de profundidad,
-Tiene una muy buena relación -Soporta transparencias pero soporta transparencia de gran
calidad/peso. limitadas (transparencia calidad.
binaria)
-No soporta transparencias. -PNG 8 Bits de profundidad es
-Permite animación. igual que un GIF.

¿Cuando utilizarlo? ¿Cuando utilizarlo? ¿Cuando utilizarlo?

En general, para cualquier ima- -Cuando el Gif sea animado. Practicamente siempre que
gen que no necesite transparen- -Cuando necesitemos trans- necesitemos transparencias
cia. Sobretodo, para imagenes parencia sencilla en la imagen. de calidad.
con tonos degradados, fotogra- Tambien para formas con bor-
fias, etc. des definidos y colores planos
como logotipos

Aulacreactiva - Escuela de creativos

HTML5 / CSS BÁSICO | Diseño Web Básico

OPTIMIZANDO IMÁGENES DESDE

PHOTOSHOP E ILLUSTRATOR

1 Teniendo abierta la imagen que queremos optimizar, hacemos click en el menú

Archivo -> Exportar -> Guardar para web.

2 Aparece el Panel de Optimización, donde establecemos los ajustes como el tipo de formato (JPG,
GIF o PNG), Calidad o perdida de imagen, transparencias...

3 Hacemos click en Guardar.

Ventana de Photoshop de Guardar para Web, con vista 4 Copias.

Consejo Creactivo. Optimizar imágenes es un proceso que hay que tener en cuenta en todo
momento. No te asustes con tantas opciones, en el fondo son siempre las mismas 4 cosas.

Aulacreactiva - Escuela de creativos

 HTML5 / CSS BÁSICO | Diseño Web Básico

BANNERS / GIFS ANIMADOS

Un BANNER es una pieza publicitaria online, que al hacer click sobre ella, enlaza con un sitio web que
contiene más información. Los banner pueden ser estáticos o animados.

Una de las posibilidades para crear banners animados es hacerlo con programas como Photoshop, y
exportarlo como GIF ANIMADO.

Hablamos de lo que se conoce como Animación fotograma a fotograma, o animación de cuadros, don-
de una secuencia de imagenes (fotogramas) recrean la animación completa.

Para controlar la velocidad de la animación, se establece el Tiempo de duración de cada fotograma en

décimas de segundo. Para fotogramas rápidos y transiciones, podemos aplicar una duración de aproxi-
madamente 1 décima y conseguiremos un resultado fluido para el ojo humano.

ALGUNOS TAMAÑOS DE BANNERS POPULARES:

Megabanner: 728x90px Vertical 300x600px

Robapáginas: 300x250px 970x250px

Ejemplo de Story Board:

-Diseño estático tipo comic, que

plasma como será la animación y
el diseño de las pantallas.

-Paso previo a la animación defi-

nitiva de los banners.

Consejo Creactivo. Intenta que tus animaciones sean ágiles y fluidas, no aburras al usuario pero
da tiempo a que pueda leer la información si está interesado.

Aulacreactiva - Escuela de creativos

HTML5 / CSS BÁSICO | Diseño Web Básico

GIF ANIMADO EN PHOTOSHOP

MENÚ VENTANA -> LINEA DE TIEMPO -> CREAR ANIMACIÓN DE CUADROS

Intercalar
Fotograma Duración de
o Estado Repetir Reproductor Crear o borrar fotograma en
animación de previsuali- fotogramas décimas de
en bucle zación segundo

Seleccionando 2 fotogramas consecutivos y haciendo click en el icono INTERCALAR, podemos hacer

muy facilmente una intercalación o interpolación. Photoshop creará los fotogramas que queramos como
intermedios entre el primero y ultimo.

Consejo Creactivo. Recuerda guardar siempre el archivo original editable de tu animación (por
ejemplo el psd) y a parte el archivo Gif exportado.

Para previsualizar un Gif animado en Mac, lánzalo a un navegador web.

Ten cuidado no te excedas en el uso de fotogramas. Más fotogramas, más peso.

Aulacreactiva - Escuela de creativos

 HTML5 / CSS BÁSICO | Diseño Web Básico

PARTICULARIDADES Y OPCIONES EXTRAS

- Cada elemento que vaya a tener una animación independiente debe estar en una capa diferente.

- Cuando creamos un cuadro nuevo este es un duplicado del cuadro anterior.

- Photoshop aporta soluciones para estas situaciones, pero no hay una combinación mágica. En función
del tipo de animación que hagamos podremos beneficiarnos de unas opciones u otras.

- Modificaciones como posición del objeto, efectos u opacidad, son cambios por defecto independientes
en cada cuadro.

- Modificaciones como por ejemplo el tamaño de un objeto, tipografía o el color del objeto se aplican por
defecto a todos los cuadros donde aparece dicho objeto.

- Si por ejemplo queremos modificar el tamaño de un objeto en cuadros diferentes, tenemos que duplicar
la capa de dicho objeto en cada cuadro, para independizarlo.

En el Panel de Animación, haciendo click en el menu contextual encontramos algunas opciones extras
interesantes (accesibles también a través del panel o click derecho):

-copiar y pegar cuadros.

-invertir cuadros seleccionados
-convertir capas a cuadros
-intercalar cuadros...

Aulacreactiva - Escuela de creativos

HTML5 / CSS BÁSICO | Diseño Web Básico

CREACIÓN DE MOCKUPS WEB

UN “MOCKUP” ES UN MONTAJE QUE PERMITE “CONTEXTUALIZAR” UN DISE-
ÑO EN UN ENTORNO REAL, PARA MOSTRARLO DE UNA MANERA ATRACTIVA
Y ELEGANTE.
Existen muchos recursos online que facilitan la creación de mockups de todo tipo, mockups para logoti-
pos, identidad, packaging, cartelería, producto, papelería, y por supuesto, mockups para diseño web.

LO MÁS POPULAR ES UTILIZAR MOCKUPS EN FORMATO PSD / PHOTOSHOP

WEBS DESCARGAR MOCKUPS:

https://graphicburger.com/

https://www.mockupworld.
co/

https://unblast.com/free-
website-mockup-psd/

https://www.freepik.es/

https://mockupgratis.com/

https://mockupplanet.com/

En esencia, el proceso consiste en localizar en el panel de capas

de Photoshop, el objeto inteligente sobre el que hacer doble click,
para inscrutar y ajustar en su interior nuestro diseño.

Aulacreactiva - Escuela de creativos

 DISEÑO WEB BÁSICO
DWB

LENGUAJE
HTML5
BÁSICO
EL LENGUAJE ESTÁNDAR DE LA WEB

N T E
FRO
T M L 5 a d >
H < h e
L 5 h e a d > TÁ
H T M < A R E S C S S 3 E S
S T Á N D
S S 3 E > d y >
C <he a d <bo
d y > S A B I
<bo N D E B U
N T E Ñ O W
FRO DISE N T E N D D
 HTML5 / CSS BÁSICO | Diseño Web Básico

ORGANIZACIÓN SITIO WEB / CARPETA RAÍZ

Las páginas web están formadas por diversos archivos (documentos html, hojas de estilo, imágenes, tipo-
grafias, videos, etc) El SItio Web hace referencia a la carpeta principal en el ordenador (Llamada carpeta
RAIZ) que contiene todos los archivos finales que forman un proyecto web completo.

Trabajando en diseño web, tenemos que ser muy ORGANIZADOS desde el principio, no podemos esperar
a terminar un proyecto y pretender que el programa lo organice en el último momento. Surgen constan-
temente rutas entre los diferentes archivos y un montón de particularidades técnicas que nos obligan a
trabajar controladamente en todo momento.

Tenemos que ser conscientes de en que carpeta del ordenador estamos trabajando y guardar los archivos
organizadamente.

EJEMPLO ORGANIZACIÓN
index.html
CARPETA RAIZ / SITIO WEB

productos.html

PROYECTO contacto.html
WEB logotipo.jpg

Organización imagenes
imagen2.jpg
desde el minuto 1

A C I Ó N
I M
END A
estilos

N
facebook.jpg

T M L 5
PRECAUCIONES H EN EL NOMBRAMIENTO
DE ARCHIVOS Y CARPETAS

E S C S S 3
D A R
ÁN
Para evitar errores al publicar una página web, debemos tener cuidado con el nombre que le damos a los
archivos de una web (imágenes, carpetas, htmls, hojas de estilo...)

e a d > >
RECUERDA SIEMPRE LAS SIGUIENTES PRECAUCIONES:

<h
< b o d
-No utilizar espacios
y foto 1.jpg foto_1.jpg

IL I DA D
-No utilizar puntos
-No utilizar tildes galería.html
-No utilizar mayúsculas
galeria.foto1.jpg

Contacto.html
galeria_foto_1.jpg

E B
-No utilizar Ñ diseño.html

EÑO W
-No caracteres extraños (!?€%&#...) logo%.gif

DIS DA R E S
Aulacreactiva - Escuela de creativos
 HTML5 / CSS BÁSICO | Diseño Web Básico

HTML
EL LENGUAJE ESTÁNDAR DE LA WEB
HYPERTEXT MARKUP LANGUAGE -> LENGUAJE DE MARCADO DE HIPERTEXTOS
En el mundo de las páginas web pueden convivir diferentes lenguajes, pero entre ellos es el Html el len-
guaje base, estándar ,de creación de contenidos. La última versión estándar del lenguaje es el HTML5.

Es un lenguaje de información que utiliza marcas o “etiquetas” que encierran a un elemento (por ejemplo
un trozo de texto), aportándole un formato y un significado.

Tan importante es el formato (resultado visual) que producen las diferentes etiquetas del html como el
significado que añaden en el código, importante para los robots.

Un documento de hipertexto es un documento en internet, como por ejemplo un documento en formato

html. Originariamente, los documentos de hipertextos estaban compuestos por textos, imágenes y enlaces.

SINTAXIS GENERAL DE LAS ETIQUETAS EN EL HTML

La mayoria de etiquetas en el html (salvo algunas excepciones) estan formadas por una etiqueta de aper-
tura o comienzo, y una etiqueta de cierre que se reconoce porque incluye una barra transversal /

Estas etiquetas de apertura y cierre atrapan a un elemento o contenido en su interior.

<etiqueta> .... </etiqueta>

ETIQUETAS ESTRUCTURALES DE UN DOCUMENTO HTML5

Forman el esqueleto, es decir, la estructura básica de un documento html:

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>

</body>
</html>

Aulacreactiva - Escuela de creativos

HTML5 / CSS BÁSICO | Diseño Web Básico

<!DOCTYPE html>

-Etiqueta DOCTYPE: Declaración de tipo de documento. Esta etiqueta define el comienzo de un docu-
mento html5.

<html>
</html>

-Esta etiqueta html indica a los navegadores que el código que van a encontrar en el interior es html,
para que así lo interpreten correctamente. Esta etiqueta contiene en su interior al resto de etiquetas que
vamos a conocer.

<head>
</head>

-Este bloque head guarda información relativa al documento, como el titulo de la pestaña superior, meta-
datos y conexiones con otros lenguajes y recursos.

<meta charset=”UTF-8”>

-Esta etiqueta es importante ya que permite a los navegadores que interpreten correctamente la codifi-
cación de caracteres especiales como tildes, eñes, apostrofes, letras y caracteres extraños, etc, en diversos
idiomas.

UTF-8 es un sistema de codificación muy extendido, llamado Unicode, que unifica los distintos sets de
caracteres en un único sistema.

<title>Document</title>

-La etiqueta title define el titulo para el documento, que será visible en la pestaña superior del navegador.

<body>
</body>

La etiqueta body hace referencia al CUERPO del contenido y contiene en su interior a otras etiquetas que
hacen referencia al contenido visible, como imagenes, titulos y subtitulos, textos, enlaces, etc.

Aulacreactiva - Escuela de creativos

 HTML5 / CSS BÁSICO | Diseño Web Básico

ETIQUETAS DE CONTENIDO BÁSICAS

(TIENEN LUGAR DENTRODE LA ETIQUETA BODY)

<p> Esto es un párrafo </p> Texto normal: Párrafos

<strong> ... </strong> Texto en negrita.

<em> ... </em> Texto en cursiva.

HEADERS (TITULOS O ENCABEZADOS DE DIFERENTE NIVEL)

<h1> ... </h1> Título de primer nivel. H1 es el título más importante del documento.

<h2> ... </h2> Encabezado 2 (Título de segundo nivel) / Ejemplo Subtitulos).

<h3> ... </h3> Encabezados o títulos de menor nivel.

...

<h6> ... </h6>

<br> Etiqueta para generar salto de linea: (observamos que es

excepcional, pues a diferencia de otras etiquetas, esta no tiene
etiqueta de cierre.

<span>...</span>
Esta etiqueta span se utiliza normalmente para encerrar en su
interior a elementos pequeños como trozos de texto, palabras
o letras, iconos...

No aporta ningún significado en especial, su uso puede surgir

por una necesidad de diseño a través de hojas de estilo.
Entenderás su uso proximamente.

Aulacreactiva - Escuela de creativos

HTML5 / CSS BÁSICO | Diseño Web Básico

VER CÓDIGO FUENTE / INSPECCIONAR

EL HTML ES UN LENGUAJE PÚBLICO, LIBRE Y UNIVERSAL.

a través de los navegadores web es posible “ver” el código fuente que habita detrás de cualquier web.
Inicialmente por curiosidad, y más adelante con objetivos más técnicos, ver el código fuente de una
página web es posible a través de navegadores web, de las siguiente manera.

MENÚ SUPERIOR “VER-> CLICK DERECHO-> CLICK DERECHO->

OPCIONES -> VER VER CÓDIGO FUENTE INSPECCIONAR
CÓDIGO FUENTE

¡QUE FUERTE!
Me estas desnudando con
la mirada...

Aulacreactiva - Escuela de creativos

 HTML5 / CSS BÁSICO | Diseño Web Básico

CREAR VÍNCULOS / ENLACES

Vínculos, HiperVínculos, Enlaces, Hiperenlaces, Links, HiperLinks...

hacen referencia a lo mismo: A una conexión desde un punto de la
red a otro.

Por ejemplo, un vínculo desde nuestra página web a otra página web.
Es posible insertar vínculos que enlacen con Archivos Html (externos
o internos), imágenes, archivos pdf, etc...

El estilo por defecto de un enlace es azul y subrayado.

TIPOS DE VÍNCULOS:
EXTERNOS: Hacen referencia a una conexión con un recurso externo, es decir, un enlace a una página
web fuera de mi sitio. Cuando un vínculo es externo debemos escribir la dirección completa, conocida
como URL: ej: http://www.youtube.com

INTERNOS: Hacen referencia a una conexión entre los archivos de nuestro propio sitio web. Por ejemplo,
vinculos entre los diferentes apartados de nuestra página o archivos (htmls, imagenes, pdfs, etc)

ETIQUETA HTML DE VÍNCULO:

Etiqueta HTML de un Vínculo:

<a href=”http://www.youtube.com”>
enlace a youtube</a>

En la etiqueta de apertura del enlace observamos la propiedad href en la que aparece la url con el que se está conec-
tando, en este ejemplo, la web de youtube.

<a href=”http://www.youtube.com” target=”_blank”>

enlace a youtube</a>

La propiedad target (destino) permite controlar como se va a abrir el enlace. En este ejemplo, “_blank” permite que
el vínculo se abra es una pestaña o ventana nueva, a diferencia de la opción por defecto según la cual el vínculo se
produce en la misma ventana.

Aulacreactiva - Escuela de creativos

HTML5 / CSS BÁSICO | Diseño Web Básico

INSERTAR COMENTARIOS EN EL HTML

Los comentarios html son fragmentos de código que los navegadores ignorarán, por lo tanto podemos
usarlos para escribir anotaciones personales o aclaraciones en cualquier punto del código, así como para
inhabilitar temporalmente partes de código.

La sintaxis para escribir un comentario en el html es la siguiente:

<!--Esto es un comentario html -->

LISTAS HTML
A través de listas html podemos generar un listado de elementos, que puede ser ordenado o desordenado.

Una lista ordenada presenta una numeración para cada elemento de la lista, mientras que una lista desorde-
nada muestra un circulito, bolo o viñeta, para hacer referencia a cada elemento de la lista.

LISTA DESORDENADA:

Ejemplo de lista desordenada, que presenta viñetas o bolos para cada elemento de la lista.

<ul> hace referencia al conjunto de la lista y las etiquetas <li> hacen referencia a cada elemento de la lista

<ul>
<li>elemento de lista</li>
<li>elemento de lista</li>
<li>elemento de lista</li>
<li>elemento de lista</li>
</ul>

LISTA ORDENADA:

Ejemplo de lista ordenada, que presenta una numeración para cada elemento de la lista. En este caso,
la diferencia es que se utiliza la etiqueta <ol> para hacer referencia al conjunto de la lista

<ol>
<li>elemento de lista</li>
<li>elemento de lista</li>
<li>elemento de lista</li>
</ol>

Aulacreactiva - Escuela de creativos

 HTML5 / CSS BÁSICO | Diseño Web Básico

CONCEPTO RUTAS

Cuando trabajamos en un proyecto web se generan o memorizan RUTAS constantemente. Por ejemplo, al
insertar una imagen dentro de un html o al hacer un vínculo entre varios htmls.

Una RUTA es el camino a seguir por el editor o el navegador, para localizar un archivo.

Es vital entender como funcionan las rutas para poder generar conexiones entre archivos de un sitio web
y poder resolver posibles problemas o controlar determinadas situaciones.

RUTAS ABSOLUTAS:
Rutas absolutas son las que se utilizan normalmente cuando hacemos enlaces externos (http://www.
youtube.com) Una ruta absoluta es el camino COMPLETO a seguir para localizar un archivo.

RUTAS RELATIVAS:
Una ruta relativa es el camino a seguir para localizar un archivo, pero en este caso dependerá de donde
nos encontremos. Por ejemplo, si insertamos una imagen dentro de un html, la ruta se generará desde
dicho html hasta la imagen.

Cuando trabajamos conectando diversos archivos que forman parte de nuestro propio sitio web, lo
habitual es trabajar con rutas relativas al documento, entrando o saliendo de las carpetas del sitio hasta
localizar los archivos correspondientes.

-Para entrar en una carpeta, se menciona el nombre de la carpeta seguido de una barra transversal.
-Para salir de una carpeta, se escribe ../

1
index.html

imagen1.jpg 1

carpeta raiz
galeria imagen2.jpg

imagenes.html 2
productos.
html 2

1 EJEMPLO RUTA 1: galeria/imagen1.jpg

2 EJEMPLO RUTA 2: ../productos.html

Aulacreactiva - Escuela de creativos

HTML5 / CSS BÁSICO | Diseño Web Básico

ETIQUETA PARA INSERTAR IMÁGENES

Antes de insertar una imagen en el html es importante que la imagen este guardada
organizadamente dentro del sitio, habitualmente dentro de una carpeta imagenes junto al html.
Además lo ideal es haber preparado previamente dicha imagen, controlando su tamaño y peso.

Etiqueta HTML de una imagen:

<img src=”imagenes/logotipo.jpg” alt=”Texto alt”>

-Observamos que la etiqueta de imagen es excepcional, ya que no tiene cierre como la mayoría de eti-
quetas.

-En la propiedad SRC (source) aparece la ruta que permite localizar la imagen.

-En la propiedad ALT podemos escribir el Texto Alternativo: Texto breve a modo de título o descripción
para la imagen, para aportar mayor información a los buscadores que no pueden interpretar una imagen
como lo hace un humano..

<img src=”imagenes/logotipo.jpg” alt=”Logotipo de Studio

Project, tu tienda de fotos en Madrid, que ofrece servi-
cios de fotografía para eventos.”>

Aulacreactiva - Escuela de creativos

 HTML5 / CSS BÁSICO | Diseño Web Básico

ESTILOS POR DEFECTO DE NAVEGADORES

Cuando visualizamos un documento html en un navegador, la información html se muestra con una esté-
tica básica y general, determinada por los navegadores, que aplican estilos por defecto al documento.

A través de hojas de estilo css será posible personalizar todas las cuestiones relacionadas con la aparien-
cia del documento, pero hasta que llegue ese momento, observamos los estilos por defecto.

ESTILOS POR DEFECTO QUE APLICAN LOS NAVEGADORES:

-Margen alrededor del documento (body) de 5 pixels.

-Fondo del documento (body) en color blanco y textos en negro.

-Tamaño de texto normal (párrafos) de 16px.

-Tipografía por defecto: Times New Roman.

-Tamaño de titulos (h1, h2, h3, etc...) en proporción al tamaño general de los textos.

-Sangrado en las listas html, y en este ejemplo, circulitos, bolos o viñetas para cada elemento de la lista.

-Enlaces de color azul y subrayados.

¡Los navegadores se ponen

deacuerdo en esto!

Aulacreactiva - Escuela de creativos

HTML5 / CSS BÁSICO | Diseño Web Básico

EMBEDIR / INCRUSTAR CONTENIDO

Contenido embedido es aquel que insertamos en nuestra página, desde otras web externas. La filosofía
habitual es copiar un código para insertar un determinado elemento. Dicho código suele estar atrapado
dentro de una etiqueta <IFRAME> que actua como un marco contenedor.

INSERTAR VIDEO DE YOUTUBE EN NUESTRA PÁGINA WEB

1 Visitamos la página de youtube: www.youtube.com

2 Buscamos y reproducimos el video que queremos insertar.

3 Bajo el Video, buscamos el botón COMPARTIR y después hacemos click en

INSERTAR

4 Copiamos el Código html que nos da Youtube.

5
Pegamos el código con la etiqueta <iframe> dentro de nuestro html, en el
lugar donde queremos hacer la inserción.

VENTANA COMPARTIR EN VIMEO:

Aulacreactiva - Escuela de creativos

 HTML5 / CSS BÁSICO | Diseño Web Básico

INSERTAR MAPA DE GOOGLE EN NUESTRA PÁGINA WEB

1 Visitamos la página de googlemaps: www.maps.google.es

2 Escribimos y encontramos una localización.

En la parte izquierda del mapa, donde aparece la información del lugar

3
que hemos buscado, hacemos clic en Compartir

Se abrirá una ventana donde tenemos que hacer clic en Insertar un mapa
4
Copiamos el código html, o bien lo personalizamos antes.

5 Pegamos el código dentro de nuestro html, en el lugar de nuestro código

donde queremos hacer la inserción.

No se donde vivo.
:(

Aulacreactiva - Escuela de creativos

HTML5 / CSS BÁSICO | Diseño Web Básico

TABLAS HTML
El objetivo fundamental de las tablas es mostrar una serie de datos de forma ordenada. En la actualidad su
uso no es tan extendido como en un pasado y tienen un especial protagonismo en el mundo del diseño de
mailing.

Las tablas están formadas por un conjunto de celdas, que se distribuyen en filas (horizontalmente) y colum-
nas (verticalmente).

TABLA

FILA

COLUMNA

En el código html, la etiqueta <table>

de apertura y cierre hace referencia a <table>
la tabla completa.
<tr>
En su interior, se generan etiquetas <td>
<tr> y <td>.
contenido celda1
Las etiquetas <tr> vienen del inglés
</td>
“table row” y su función es abrir y
cerrar cada fila horizontal. <td>
Dentro de las filas, las etiquetas <td> contenido celda2
(“table data”) crean las columnas que
</td>
pueden contener datos / elementos en
su interior. </tr>
</table>

Cuando creamos una tabla en html y

no hemos aplicado estilos css, la tabla <table border>
se muestra invisible.
...
Para trabajar con más claridad y ver
los bordes de la tabla y las celdas, po-
</table>
demos aplicar la propiedad border en
la etiqueta <table>

Aulacreactiva - Escuela de creativos

 HTML5 / CSS BÁSICO | Diseño Web Básico

FUSIONAR/COMBINAR CELDAS CON “COLSPAN” Y “ROWSPAN”

Es posible combinar celdas horizontal o verticalmente, para crear disposiciones como las que se muestran
en estos ejemplos:

PROPIEDAD “COLSPAN” PROPIEDAD “ROWSPAN”

Esta propiedad se utiliza para fusionar celdas hori- Esta propiedad se utiliza para fusionar celdas ver-
zontalmente. Se aplica en la etiqueta de apertura ticalmente. Se aplica en la etiqueta de apertura de
de una columna (etiqueta td) y mediante una una columna (etiqueta td) y mediante una numera-
numeración indicamos el tamaño que esa columna ción indicamos el tamaño que esa celda va a ocupar
va a tener (numero de celdas que va a ocupar) verticalmente. (numero de filas que va a ocupar)

<table border> <table border>

<tr> <tr>
<td colspan="2"> <td rowspan=”2”>
celda1 celda1
</td> </td>
</tr> <td>
<tr> celda2
<td> </td>
celda2 </tr>
</td> <tr>
<td> <td>
celda3 celda3
</td> </td>
</tr> </tr>

VISUALIZA

Aulacreactiva - Escuela de creativos

HTML5 / CSS BÁSICO | Diseño Web Básico

ELEMENTOS HTML DENTRO DE CELDAS

Dentro de las celdas es posible insertar

cualquier otra etiqueta del html, como
por ejemplo h1, h2, párrafos, o incluso
enlaces, imágenes, listas, etc.

En un momento dado, y si facilita nuestro

trabajo, se puede insertar una tabla ani-
dada. Una tabla anidada es simplemente
una tabla insertada en alguna celda de la
tabla principal. (Una tabla dentro de otra).

ESTILIZANDO LA TABLA MEDIANTE HOJAS DE ESTILO CSS

Hemos visto como crear tablas desde el punto de vista del html, presentando la información en bruto,
sin estilizar.

Para personalizar la estética de una tabla y controlar cuestiones como tamaños, colores o alineación de
elementos, utilizaremos hojas de estilo css cuando llegue el momento.

Aulacreactiva - Escuela de creativos

DISEÑO WEB BÁSICO
DWB

HOJAS DE
ESTILOS CSS
DEFINICIÓN

TIPOS DE SELECTORES

EL MODELO DE CAJA

CONCEPTO BOXED Y FULLWIDTH

CREAR ESTRUCTURAS CON ETIQUETAS DIV

FLOTACIONES

MENÚS DE NAVEGACIÓN Eres el CSS

de mi html

FUNDAMENTOS DISEÑO RESPONSIVE

ETIQUETAS SEMÁNTICAS BÁSICAS

HTML5 / CSS BÁSICO | Diseño Web Básico

CSS: HOJAS DE ESTILO

EN CASCADA
El fundamento principal de las hojas de estilo CSS es ocuparse d elas cuestiones estéticas del html,
de una manera limpia y separada. Por un lado, el html permite mostrar una información a través de
un código limpio, y por otro lado, las Hojas de estilo embellecen dicha información.

LAS HOJAS DE ESTILO CSS “PONEN BONITO” EL HTML

Las hojas de estilo en cascada

(Cascade style sheets) reciben
su nombre por la forma en que
se aplican, atendiendo a priori-
dades entre diferentes niveles HTML
de CSS, entre etiquetas del html
CSS
CONTENIDO PRESENTACIÓN
(padres e hijos), etc.

Las hojas de estilo CSS son, junto

al html, un gran pilar en el mun-
do del diseño web. Su uso en
la actualidad tiene un potencial
increíble.

APLICACIÓN DE LAS CSS

¿Donde se guardan o memorizan las CSS? Existen varias formas de aplicar estilos:

1 ESTILOS EN LINEA: Los estilos css se integran dentro de las etiquetas html

2 ESTILOS INTERNOS: Los estilos se guardan en un solo documento html, concretamente dentro
del bloque <head> donde surge la etiqueta <style>...</style>

3 ESTILOS EXTERNOS: Los estilos se guardan en un archivo formato .css externo, lo que supone
una manera más organizada de trabajar. El Código html resultante es más limpio y además las
hojas de estilo pueden afectar a varios documentos html a la vez.

TIPOS DE SELECTORES
DIFERENTES MECANISMOS PARA APLICAR ESTILOS A LAS ETIQUETAS DEL HTML

Trabajando con Hojas de estilo se utilizan diferentes “selectores”, que aportan mecanismos más o menos
específicos para aplicar propiedades Css a diferentes etiquetas o elementos del html.

Aulacreactiva - Escuela de creativos

 HTML5 / CSS BÁSICO | Diseño Web Básico

ESTILOS INTERNOS / EXTERNOS

Como hemos mencionado en la página anterior de introducción a CSS, Los estilos se pueden guardar de
diferentes maneras.

ESTILOS INTERNOS
Bajo esta modalidad, los estilos CSS se guardan unicamente en el documento html en el que estamos
trabajando, concretamente dentro del bloque <head> donde surge la etiqueta <style>...</style>

<head>
...
<style>
Etiqueta
<style> h1{
de apertura y
cierre guarda
font-size:52px; Selectores y
propiedades
en su interior color:white; de CSS
los diferentes
estilos css }
</style>
</head>

ESTILOS EXTERNOS
Bajo esta modalidad, los estilos se guardan en un archivo html
formato .css externo, lo que supone una manera más
organizada de trabajar. CSS
html html
El Código html resultante es más limpio y además las
hojas de estilo pueden afectar a varios documentos
html a la vez.

Cuando creamos una hoja de estilo externa, surge una conexión con el archivo de css dentro del bloque
<head> a través de la etiqueta <link>

<head>
<link rel=”stylesheet” href=”estilos.css”>
</head>

Aulacreactiva - Escuela de creativos

TIPOS DE
SELECTORES
CSS
1 - SELECTOR DE ETIQUETA:
-Este tipo de selector es muy general y tiene una relación directa con las etiquetas del html (p, h1, h3,
body, a...)

-Es un selector poco específico, pues sirve para aplicar estilos css a todas las etiquetas de un grupo.

-Por ejemplo podemos aplicar estilos a todos los encabezados h1 del documento, o a todos los párrafos,
o a todos los enlaces de la página...

-También se usa este selector de etiqueta para aplicar estilos a la etiqueta BODY, y así trabajar en las
propiedades generales del documento, como el color de fondo, imagen de fondo, modo de repetición y
posición del fondo, color y tipografía de todos los textos en general, márgenes del documento, etc.

EJEMPLO DE ESTILOS INTERNOS, APLICADOS A LAS ETIQUETAS BODY Y H1:

<head>
...
<style>
body{
background-color:black;
color:white;
}
h1{
font-size:52px;
}
</style>
</head>

OBSERVEMOS QUE:
Dentro del bloque <head> se definen los estilos internos a través de la etiqueta <style>

Dentro de la etiqueta <style> se definen los estilos para etiquetas determinadas, en este ejemplo,
body y h1.

Para recoger los estilos css de cada etiqueta, se utilizan corchetes { } y en su interior surgen dife-
rentes propiedades de css.

Al final de cada propiedad de css, la linea termina con un punto y coma ;

Aulacreactiva - Escuela de creativos

 TIPOS DE
SELECTORES
CSS
2 - SELECTOR CLASE:
-A diferencia del selector de etiqueta, este tipo de selector no está directamente relacionado con ningu-
na etiqueta html concreta.

-El selector de clase aporta flexibilidad en su uso y es más específico que un selector de etiqueta.

-Al crear el estilo para una clase, le damos un nombre que nosotros elegimos y después establecemos
sus propiedades css. Al crear la clase, el nombre debe comenzar con un puntito. Ejemplos:
.titulo .subtitulo .texto1 .parrafodestacado

-Precauciones al nombrar un clase: Evitar que comiencen con numero y evitar espacios.

-Para que una clase tenga efectividad, finalmente hay que aplicarla a alguna etiqueta del html,
independientemente de que etiqueta html sea. Para aplicar una clase a alguna etiqueta se usa la propie-
dad class en la etiqueta de apertura, de esta manera:

<h1 class=”titulo”> Esto es un titulo </h1>

<p class=”texto1”> Lorem ipsum dolor sit, amet consectetur adipisicing elit. </p>

-Una clase se puede aplicar a varias etiquetas, es decir, una clase se puede reutilizar.

EJEMPLO DE ESTILOS INTERNOS, CREANDO Y APLICANDO UNA CLASE:

<head>
...
<style>
.mititulo{
background-color:black;
color:white;
}
</style>
</head>
<body>
<h1 class=”mititulo”> Aquí el título</h1>

OBSERVEMOS QUE:
-Por un lado, dentro de los estilos se crea la clase comenzando por un puntito: .mititulo y se defi-
nen sus propiedades.

Por otro lado, dentro de body, dicha clase se aplica a una etiqueta mediante la propiedad class,
para que tenga efectividad.
Aulacreactiva - Escuela de creativos
HTML5 BÁSICO | Diseño Web Básico

EL MODELO DE CAJA
A través de estilos CSS, podemos conseguir que cualquier elemento del html se visualice o comporte
como una CAJA (también llamado cuadro o bloque). Las diferentes propiedades que forman parte del
modelo de caja son:

1 WIDTH Y HEIGHT: Dimensiones de la caja:

ancho (width) y alto (height).

2 BORDER: Borde de la caja (border): hace referencia a los limites de la caja. Debemos especificar el
grosor del borde (width), el color del borde y el tipo de borde (style:solid es un borde normal)

*El borde se suma a las dimensiones de la caja.

3 MARGIN: Espacio vacío hacia fuera de la caja, llamado margen, que actua como una separación.

4 PADDING: Espacio vacío hacia en interior de la caja, llamado relleno, que hace que el contenido
“respire” hacia dentro.

*El padding se suma a las dimensiones de la caja.

Estas propiedades se pueden establecer en todos los lados de la caja o de manera independiente.

Para ello, se hace referencia al lado Superior (TOP), inferior (BOTTOM), izquierdo (LEFT) y derecho (RIGHT)

WIDTH
MARGIN
TOP

PADDING

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut nunc

sem, elementum non placerat eu, tincidunt elementum orci.
Morbi mollis aliquam lacus ac molestie. Nam vulputate nisi vel HEIGHT
LEFT pharetra tincidunt. Maecenas et massa finibus, consequat eros
sed, euismod metus. Nunc eget tempor metus. Aliquam accum-
san felis in consequat tempus.
RIGHT

BORDER
BOTTOM

Aulacreactiva - Escuela de creativos

 HTML5 / CSS BÁSICO | Diseño Web Básico

PROPIEDADES CSS BÁSICAS

Color plano de fondo para el elemento.
background-color:black; El color se puede especificar por su nombre en
inglés o bien através de diferentes codificaciones
(color hexadecimal, color rgb, etc)

Imagen de fondo. Imagen de mapa de bits, inser-

background-image:url(...); tando su localización dentro de la propiedad url();

Modo de repetición de la imagen de fondo.

background-repeat:repeat; Por defecto la imagen se repite en todos los ejes.
Otros valores posibles: no-repeat, repeat-x, repeat-y

color:#ffffff; Color de texto

Tipo de letra / Tipografía. En principio estamos

font-family: sans-serif; limitados al uso de tipografias de sistema, es decir,
tipografías comunes que cualquier usuario tiene
normalmente instaladas.

Tamaño de texto. Como referencia, los párrafos

font-size:60px; tienen un tamaño de 16 pixels.

Alineación de texto. Alineación a la izquierda,

text-align:center; derecha, centrado, etc.

Interlineado (Altura de la linea). Separación

line-height:32px; entre las lineas de un párrafo, por ejemplo.

width: 80%; Ancho de un elemento / caja

height:50px; Alto de un elemento / caja

Padding: espacio hacia el interior. Para especificar el

padding:20px; padding en un lateral concreto se utiliza: padding-top,
padding-bottom, padding-left, padding-right.

Margin: espacio hacia el exterior de la caja. Para

margin:20px; especificar el margin en un lateral concreto se utiliza:
margin-top, margin-bottom, margin-left, margin-right.

Border: Contorno alrededor de la caja. Para especifi-

border:5px solid red; car el borde en un lateral concreto se utiliza:
border-top, border-bottom, border-left, border-right.

Aulacreactiva - Escuela de creativos

HTML5 / CSS BÁSICO | Diseño Web Básico

COLORES EN CÓDIGO
MÉTODOS PARA CODIFICAR COLORES EN CSS:

1 NOMBRE DEL COLOR EN INGLÉS:

color:black; background-color:red;

2 A TRAVÉS DEL COLOR HEXADECIMAL:

Referencia alfanumérica que comienza por una almohadilla # y representa los diferentes valores
de cada color de la gama RGB:

color:#000000; background-color:#FF0088;

*Existen variantes de los colores hexadecimales genéricos, como por ejemplo colores hexadecimales
abreviados en 3 dígitos, o colores hexadecimales que memorizan al final un valor que corresponde
con la transparencia.

3 A TRAVÉS DE LA GAMA RGB:

Especificando el valor de cada color primario entre 0 y 255

color:rgb(0,255,80); background:rgb(0,0,200);

4 A TRAVÉS DE LA GAMA RGBA (COLORES TRANSPARENTES - ALFA)

Especificando el valor de cada color primario entre 0 y 255 y en el cuarto valor, la opacidad del
color (entre 0 y 1)

color:rgba(0,255,80,0.5);

WWW.HTMLCOLORCODES.COM
UN RECURSO WEB ÚTIL PARA MANEJAR CODIGOS DE COLOR

Aulacreactiva - Escuela de creativos

 HTML5 / CSS BÁSICO | Diseño Web Básico

ETIQUETAS DIV
LAS ETIQUETAS DIV SON BLOQUES ESTRUCTURALES Y CONTENEDORES.
Se utilizan para crear diferenets zonas de diseño y así, estructuras web. Además sirven para agrupar con-
tenidos, es decir, pueden contener a otros elementos html en su interior.

<div>
<h1>Titulo</h1>
<h2>Subtitulo</h2>
<p>Lorem Ipsum dolor sit amet.</p>
</div>

EJEMPLO DE DOS DIVS

DIFERENTES, CON CLASES <div class=”cabecera”>
APLICADAS: ...
Para aplicar estilos a una etiqueta </div>
DIV, es habitual utilizar un selector de <div class=”contenido”>
clase o identificación ID.
...
Estos selectores de css nos permiten
diferenciar los divs existentes en una es- </div>
tructura web y darles estilos diferentes.

Aulacreactiva - Escuela de creativos

TIPOS DE
SELECTORES
CSS

3 - SELECTOR ID (IDENTIFICACIÓN):
-Este tipo de selector se usa para aplicar estilos a un elemento html ÚNICO, que esta identificado median-
te un nombre ID. Cualquier etiqueta del html puede tener una identificación.

-El fundamento teórico es que al identificar un elemento le hacemos único y por lo tanto no debe-
mos identificar varios elementos con el mismo nombre. A diferencia de la clase, la identificación
NO se reutiliza, es decir, NO se aplica a varios elementosm sino sólo a un único elemento.

-Por ejemplo, el logotipo de la web, la cabecera o el pie pueden considerarse elementos únicos que no se
repiten y serían merecedores de tener una identificación que les diferencia del resto de elementos.

-Un selector de ID es muy específico (concreto), tiene más fuerza que una clase o un selector de etiqueta.

-Un selector ID se reconoce porque al nombre le precede una almohadilla (#nombreid)

*Las identificaciones también tiene usos más allá de las hojas de estilo: Se pueden usar para asociar a un
elemento una determinada programación, crear desplazamientos mediante “anclajes”, o por ejemplo en
la recogida de datos en un formulario.

-Para identificar una etiqueta del html se usa la siguiente sintaxis:

<h1 id=”titulounico”> Esto es un titulo </h1>

<div id=”cabecera”> .... </div>

*Precauciones al crear una identificación: Evitar que comiencen con numero y evitar espacios.

Para crear el estilo correspondiente a una etiqueta identificada, la sintaxis es:

#titulounico #cabecera ...

EJEMPLO DE ESTILOS INTERNOS PARA UN ELEMENTO IDENTIFICADO

<head>
<style>
#cabecera{
background-color:black;
color:white;
}
</style>
</head>
<body>
<div id=”cabecera”> ... </div>

Aulacreactiva - Escuela de creativos

 TIPOS DE
SELECTORES
CSS

4 - SELECTORES COMBINADOS DESCENDIENTES:

-Los selectores combinados reciben su nombre porque son una mezcla de los selectores anteriores: ID,
clases o etiquetas.

-Un selector combinado atiende a una jerarquía de etiquetas padre/hijas. Sirven para aplicar estilos a
etiquetas hijas que estan contenidas dentro de una determinada etiqueta padre.

-Para entender un combinado descendiente debemos leerlo al revés, es decir, de derecha a izquierda.

-Los combinados pueden ser útiles y cómodos antes diversas situaciones.

EJEMPLO
Supongamos esta estructura de etiquetas dentro de body:

Observamos la existencia de dos

<body> divs padres, uno identificado como
#caja1 y otro con la clase .cajatexto
<div id=”caja1”> aplicada.
<h2>Titulo</h2>
Estos divs contienen en su interior a
<p> ... </p> etiquetas hijas: h2 y párrafos.
</div>
<div class=”texto2”>
<p> ... </p>
<p> ... </p>
</div>

Finalmente observamos estos

<style> combinados de ejemplo (leyéndolos
de derecha a izquierda para
#caja1 h2{ entenderlos)
... El primer combinado #caja1 h2
} hace referencia a que aplicamos
estilos a todas las etiquetas h2 que
.texto2 p{ esten dentro (sean hijas) del ele-
mento #caja1
...
} El segundo combinado .texto2 p
hace referencia a que aplicamos
estilos a todas las etiquetas p que
esten dentro (sean hijas) del ele-
mento .texto2

Aulacreactiva - Escuela de creativos

HTML5 / CSS BÁSICO | Diseño Web Básico

RESUMEN SELECTORES CSS

DIFERENTES OPCIONES / MECANISMOS PARA APLICAR ESTILOS A LAS
ETIQUETAS DEL HTML

SELECTOR ETIQUETA SELECTOR CLASE

Selector muy general que sirve para aplicar Selector más flexible y específico.
estilos a la etiqueta body y a otros grupos de
etiquetas: Por ejemplo, a todos los parrafos, o Definimos el nombre de la clase comenzando
a todos los h2, o a todos los enlaces... con un puntito:

<style>
<style> .subtitulo{
body{ color:red;
background-color:black; }
color:white; </style>
}
p{ Para que la clase tenga efectividad, la aplica-
font-size:14px; mos a una o varias etiquetas del html:
color:blue;
} <h2 class=”subtitulo”> Titulo
</style> </h2>

*Una clase se puede repetir, reutilizar.

(aplicar a varios elementos)

SELECTOR ID COMBINADOS
Selector muy específico, se usa para aplicar Combinación de los selectores anteriores.
estilos a elementos ÚNICOS que no se repiten.
Permite aplicar estilos a elementos hijos que es-
Etiqueta identificada: tan dentro de un elemento padre determinado.
<div id=”cabecera”> ... </div>
El compuesto lo entendemos leyéndolo de
derecha a izquierda.
Al crear el estilo correspondiente, definimos Ejemplos:
la ID comenzando con una almohadilla:

<style> <style>
#cabecera{ #cabecera h2{
... }
} .contenido p{
</style> }
#menu a{
*Una Id NO se debe repetir, reutilizar. }
Se aplica a un elemento único) </style>

Aulacreactiva - Escuela de creativos

 HTML5 / CSS BÁSICO | Diseño Web Básico

DIFERENCIAR IMAGEN CONTENIDO/ IMAGEN FONDO

Trabajando con imágenes en html / css se presentan dos opciones: Insertar las imágenes como contenido
en el html, o insertar las imágenes como fondo a través de css.

IMAGENES COMO CONTENIDO

Cuando insertamos una imagen como contenido en el html, surge la etiqueta <img>

<img src=”imagenes/logotipo.jpg” alt=”Texto alt”>

-La imagen como contenido <img> ocupa espacio en el código junto al resto de elementos y, de alguna
manera, aporta información. Forma parte del contenido.

-En la propiedad ALT podemos escribir texto alternativo para aportar mayor información para los robots.

-Una imagen <img> puede ser un vínculo.

IMAGENES COMO FONDO

Cuando insertamos una imagen como fondo, oo hacemos a través de estilos css, mediante la propiedad
background-image.

body{
background-image:url(“imagenes/fondo.jpg”);
background-repeat:no-repeat;
}

-El objetivo de insertar una imagen como fondo es puramente estético, para embellecer el documento.

-Una imagen de fondo “no aporta información”.

Aulacreactiva - Escuela de creativos

HTML5 / CSS BÁSICO | Diseño Web Básico

CONCEPTO CONTAINER / CAJA

El concepto de caja (boxed) en diseño web hace referencia a utilizar una etiqueta DIV a modo de
“envoltorio”, conteniendo en su interior al otros bloques y alineando todo al centro (margin: auto),
dejando aire a los lados.

Esta etiqueta DIV tambien pue-

de llamarse #container o #wrap-
per, y en un esqueleto web
sencillo puede contener en su
interior a los bloques cabecera,
menú, contenido, pie, etc.

#container{
width:80%;
margin:auto;
}

EL OBJETIVO DE UTILIZAR ESTE CONCEPTO DE CAJA EN EL DISEÑO WEB, ES

CENTRAR EL CONTENIDO GENERANDO UN “ORDEN VISUAL” Y ALINEACIÓN
DE CONTENIDOS HACIA EL CENTRO.

El concepto de caja puede convivir con otro concepto en diseño web, más abierto y atractivo. Es el con-
cepto Fullwidth, en el cual el contenido se abre hasta el ancho completo, el 100% de la ventana.

Aulacreactiva - Escuela de creativos

 HTML5 / CSS BÁSICO | Diseño Web Básico

CONCEPTO FULLWIDTH 100%

ANCHO COMPLETO

El concepto FULLWIDTH en diseño web hace referencia a utilizar bloques DIV con un ancho comple-
to del 100%, ocupando todo el espacio disponible de la ventana.

El concepto Fullwidth es atractivo y se puede combinar con el concepto de caja.

#fullwidth{
Fullwidth 100%
width:100%;
}
caja

COMBINACIÓN DE CONCEPTOS FULLWIDTH Y CAJA

Alternar ambos conceptos permite crear bloques amplios y atractivos visualmente, con un 100% de an-
cho (fullwidth) pero encerrando a su vez el contenido interior dentro del concepto de caja, para conseguir
una uniformidad y alineación al centro que genere un orden visual.

#fullwidth{
.caja
width:100%;
}
.caja{ .caja
width:80%;
margin:auto;
}

Crear una clase nos permite uti-

lizar varias veces el mismo estilo
para los bloques interiores.
.caja

Aulacreactiva - Escuela de creativos

HTML5 / CSS BÁSICO | Diseño Web Básico

FLOTACIONES
Las flotaciones css permiten colocar los elementos hacia los lados,
es decir, en horizontal.

Un elemento puede flotar (desplazarse) hacia la izquierda o hacia

la derecha del espacio disponible. Cuando un elemento flota, deja
hueco libre al lado contrario y el siguiente elemento pueden ocupar
ese hueco.

#elemento{ Al aplicar FLOAT:LEFT a un elemento, este se desplaza hacia la parte

float:left; de la izquierda, y lo más importante, deja hueco libre a la derecha
para el siguiente elemento.
}

#elemento{ Al aplicar FLOAT:RIGTH a un elemento, este se desplaza hacia la

parte de la derecha y deja hueco libre a la izquierda para el siguiente
float:right; elemento.
}

-En una flotación sencilla (imagen y texto) puede ser suficiente con que el primer elemento flote.

-Cuando trabajamos con flotaciones con etiquetas DIV, todos los div tienen que tener alguna flotación,
no sólo el primero.

CLEAR .limpiar{
(LIMPIAR FLOTACIONES)
clear:both;
Limpiar flotaciones sirve para conseguir que un determinado ele-
mento “rompa” la horizontalidad, es decir, deje de flotar y baje hacia
}
abajo, recuperando lo que sería su posición normal.

Clear:left limpia flotaciones de la izquierda, clear:right limpia flotaciones de la derecha.

A efectos prácticos, clear:both hace una limpieza de flotaciones en general, a ambos lados.

float:left; float:left; float:right;

clear:both

Aulacreactiva - Escuela de creativos

 HTML5 / CSS BÁSICO | Diseño Web Básico

LIMPIAR FLOTACIONES DENTRO DE UN CONTENEDOR

PADRE QUE NO TIENE ALTURA
Cuando un bloque padre (por ejemplo un div) no tiene una altura
definida, la altura que toma depende del contenido que hay en su
interior. En muchas ocasiones no aplicamos una altura definida a los
bloques padre para que sea automática y el contenido fluya.

Cuando en el interior del bloque padre que no tiene altura, hay ele-
mentos flotando, dicho bloque padre se “despista” en altura y no es
capaz de crecer hasta el final de los elementos hijos.

Para ayudar al bloque padre a crecer y definir hasta donde llegan

los elementos hijos, tenemos que limpiar la flotación, colocando un
elemento que limpie las flotaciones (clear: both) justo después del
último elemento que esté flotando.

Es una práctica interesante y habitual, utilizar un div vacio con tal ob-
jetivo. Además, si usamos una clase para aplicarle estilos, podremos
reutilizarlo las veces que necesitemos. .limpiar

Resumiendo, es recomendable limpiar las flotaciones para ayudar

al bloque padre a crecer, especialmente cuando no tiene altura. .limpiar{
clear:both;
Limpiamos las flotaciones justo después del último elemento que
está flotando. }

.limpiar

Aulacreactiva - Escuela de creativos

HTML5 / CSS BÁSICO | Diseño Web Básico

APLICAR ESTILOS A ENLACES

ALGUNA PARTICULARIDADES
El estilo por defecto de un enlace html es azul y subrayado, pero a
<a href=”#”> través del potencial de las css podemos personalizarlo a nuestro gusto,
teniendo en cuenta las siguientes particularidades.
click aquí
click aquí
</a>

ESTILOS CSS
Un buen comienzo puede ser aplicar un color de fondo al enlace, para visualizar claramente su tamaño. A
continuación nos preocuparemos por su tamaño, color, alineación de texto, etc.

a{ Esta propiedad de css nos permite eliminar el subrayado.

text-decoration:
none;}

Los enlaces tienen un comportamiento llamado en linea, y esto provo-

display:block; ca que, por su naturaleza, no obedezcan a propiedades del modelo de
caja, como ancho y alto.

A través de la propiedad display:block conseguimos que los enlaces se

comporten como un bloque y entonces obedezcan a dichas propiedades.

height:50px; Con este truco conseguimos que el texto quede centrado verticalmen-
te en la caja del enlace. Aplicamos el mismo interlineado que altura
line-height:50px; tiene el enlace.

EFECTO ROLLOVER
El efecto “rollover” hace referencia al cambio que se produce cuando pasamos el ratón por encima de un
elemento, como por ejemplo, un botón.

A través del selector a:hover aplicamos las propiedades que queremos que cambién cuando pasemos el
ratón por encima del enlace.

a:hover {
click aquí click aquí
}

Aulacreactiva - Escuela de creativos

 HTML5 / CSS BÁSICO | Diseño Web Básico

CREAR MENÚ BÁSICO CON LISTA

El método profesional, estándar, correcto, limpio y que aporta significado estructural a una barra de na-
vegación es hacerlo a través de un listado de enlaces. Lo habitual es utilizar una lista desordenada y una
serie de estilos css para trabajar en la apariencia del menú.

HTML: LISTA DESORDENADA DE ENLACES

<div id=”menu”>
<ul>
<li><a href=”#”>Home</a></li>
<li><a href=”#”>Servicios</a></li>
<li><a href=”#”>Galería</a></li>
<li><a href=”#”>Contacto</a></li>
</ul>
</div>

APLICANDO ESTILOS CSS

1 A la hora de aplicar estilos css al menú se recomienda pensar de fuera hacia dentro y de grande a pe-
queño. Empezamos aplicando estilos al bloque principal del #menu (tamaño, color de fondo, etc.)

2 Para continuar, aplicamos estilos a la etiqueta <ul> que es la “culpable” de la existencia de circuli-
tos (bolos) para cada elemento de la lista y espacios vacios (margin y padding)

#menu ul (ejemplo de compuesto que podemos utilizar)

- List-style-type: NONE (Para eliminar los circulitos por defecto de la lista)

- Padding y margin: 0px (Para eliminar espacios por defecto de la lista)

#menu ul{
list-style-type:none;
padding:0px;
margin:0px;
}

Aulacreactiva - Escuela de creativos

HTML5 / CSS BÁSICO | Diseño Web Básico

3 En este punto e ignorando a las etiquetas <li>, es el momento de aplicar estilos directamente a los
enlaces (etiquetas <a> del menú)

#menu a (ejemplo de compuesto que podemos utilizar)

Al aplicar estilos a los enlaces, corresponde
#menu a{ recordar las particularidades que hemos
visto recientemente:
. . .
} -Text-decoration:none para eliminar subrayado.

-Display:block para conseguir que los enlaces

obedezcan a propiedades como ancho y alto.
text-decoration:none; -Alineación de textos con text-align (horizon-
tal) y line-height...

-Si queremos crear un menú horizontal, po-

demos aplicar flotación a los enlaces.
display:block;

“No todos los menús se

construyen de la misma mane-
height:50px; ra. Pero de momento, necesi-
line-height:50px; tamos aprender el mecanismo”

4 Para terminar y después de aplicar el estilo inicial de los enlaces, pasamos a aplicar estilo a los enla-
ces cuando pasamos el ratón por encima (efecto rollover.)

Las propiedades anteriores no hay que re-

#menu a:hover{ petirlas, se heredan. Por lo tanto sólo espe-
cificamos las propiedades que cambian. Por
. . . ejemplo cambiamos el color de la tipografia
} y el color de fondo.

HOME SERVICIOS GALERÍA CONTACTO

Aulacreactiva - Escuela de creativos

 HTML5 / CSS BÁSICO | Diseño Web Básico

MÁRGENES POR DEFECTO

Algunas etiquetas en el html crean márgenes por defecto. Por ejemplo los títulos, subtitulos, párra-
fos, listas ul... incluso body.

En principio, los márgenes por defecto son apropiados, pero en ocasiones pueden surgir conflictos y
debemos controlar la situación.

La etiqueta body siempre aplica

body{ un margen alrededor del docu-
mento de unos 5 pixels.
margin:0px;
} Mediante margin:0px lo que ha-
cemos es eliminar dicho margin.

COLAPSO DE MÁRGENES DE H1, H2, H3... Y PÁRRAFOS

Etiquetas como h1, h2, h3... y
párrafos también aplican por
defecto un margen proporcional
a su tamaño, tanto hacia arriba
(margin-top) como hacia abajo
(margin-bottom).

Lamentablemente, en ocasiones
estos márgenes “desbordan” o
“colapsan” hacia fuera del blo-
que padre contenedor, generan-
do “huecos indeseados”.

SOLUCIONES ANTES DESBORDAMIENTO (COLAPSO) DE MARGENES:

1 Aplicar estilos al elemento 2 Aplicar algo de padding al bloque padre que contiene a los
que produce los márgenes elementos que generan los márgenes, ayudando a definir sus
por defecto y eliminarlos, límites.
por ejemplo:

h1{ #cajapadre{ También puede fluir una mezcla

de ambas ideas: eliminar márge-
margin-top:0px; padding:20px; nes por defecto y a la vez aplicar
padding al bloque padre.
} }

Aulacreactiva - Escuela de creativos

HTML5 / CSS BÁSICO | Diseño Web Básico

RESPONSIVE WEB DESIGN

DISEÑO WEB RESPONSIVE (RWD)

EL DISEÑO RESPONSIVE MEZCLA UNA SERIE DE TÉCNICAS QUE PERMITEN

A NUESTRA PÁGINA WEB ADAPTARSE AL TAMAÑO DE LA VENTANA O DIS-
POSITIVO A TRAVÉS DEL CUAL ACCEDE EL USUARIO.
Una web responsive se visualiza correctamente en cualquier dispositivo, desde un móvil hasta una pantalla
grande de escritorio.

En diseño responsive, el documento responde a la anchura del dispositivo; ajustando sus tamaños, tipografías,
sistemas de navegación, ocultando elementos, etc.

ALGUNAS CLAVES
-Maquetación flexible permitiendo que los contenidos “fluyan”.

-Maquetación mediante porcentajes.

-Imágenes responsive.

-Ajustes según condiciones de tamaño con MediaQueries (Breakpoints).

-Etiqueta Viewport para ajustar area de pantalla y evitar escalado en dispositivos.

-Dimensiones máximas y mínimas para establecer límites en los elementos.

-Tamaños de textos relativos (unidades rem, %, wh...)

Aulacreactiva - Escuela de creativos

 HTML5 / CSS BÁSICO | Diseño Web Básico

MAQUETACIÓN MEDIANTE PORCENTAJES

La primera clave para crear una maquetación responsive, es establecer los anchos de los elementos me-
diante porcentajes. Con respecto a la altura, o bien seguimos definiendola en pixeles o mayormente no
la especificamos, permitiendo que la altura sean automáticas, flexibles.

El ancho en porcentaje de los elementos se calcula con respecto a la totalidad del elemento padre.(100%)

EJEMPLO 1

CONTAINER: 80% El ancho del Container es del

80%, con respecto al total de la
ventana.

COL1: 40% COL2: 60% Los porcentajes de Col1 y Col2

se calculan con respecto al
100%, independientemente del
porcentaje que tiene el ele-
mento padre.

-La suma de porcentajes de

Col1 y Col2 será como máximo
del 100%, para llenar el espacio
disponible.

EJEMPLO 2

El ancho del menú es del 100%,

MENÚ: 100% con respecto al total de la ventana.

25% 25% 25% 25% Los 4 botones suman el 100%

del menú.

25% 50% 25%

Los bloques de contenidos
suman el 100%

Aulacreactiva - Escuela de creativos

HTML5 / CSS BÁSICO | Diseño Web Básico

PADDINGS Y MARGINS TAMBIÉN EN PORCENTAJES

Al establecer paddings y margins para conseguir que los elementos se separen y/o respiren hacia el inte-
rior, podemos establecer dichas propiedades también en porcentajes.

Debemos tener en cuenta que según el modelo de caja tradicional, el padding se suma a las dimensiones
de las cajas, y que el margin crea un espacio extra. Por lo tanto, tendremos que restar estas propiedades a
la dimensión total de las cajas.

100%
Por ejemplo, tenemos dos co-
lumnas dentro de una caja con-
tainer. La primera columna tiene
un ancho de 30% y la segunda 30% 70%
un 70%, sumando entre ambas
el total de 100%;

Supongamos que en la primera 2%

columna añadimos un padding
(espacio interior) de 2%. Dicho
padding se suma a la anchura de 30% 70%
la caja, que se hace más grande. 5%

Solución: Restamos el padding

que se suma a ambos lados,
para que los cálculos encajen de
nuevo.

SELECTOR UNIVERSAL Y PROPIEDAD BOX-SIZING

La propiedad box-sizing: border-box; establece un nuevo modelo, según el cual, padding y
border ya no se sumarán a las dimensiones de la caja. Si queremos aplicar dicha propiedad a todas las
etiquetas del html de un solo golpe, podemos usar el truco del asterisco, que funciona como un comodín
afectando a todas las etiquetas del html, para que el padding se aplique pero sin aumentar el tamaño de las
cajas.

*{ ¡El truco para que

padding y border NO
box-sizing: border-box;
aumenten el tamaño de
} la caja!

Aulacreactiva - Escuela de creativos

 HTML5 / CSS BÁSICO | Diseño Web Básico

IMAGENES RESPONSIVE <img>

Cuando insertamos una imagen como contenido en el html (etiqueta

<img>) es muy fácil hacer que sea responsive a través de css. .imgresponsive{
Una imagen responsive se adaptará al espacio disponible dentro del width:100%;
contenedor padre.
display:block;
A través de estilos css, aplicamos a la imagen width:100% y }
display:block; La altura la dejamos libre, automática.

-Mediante width:100% la imagen se expande dentro del espacio

disponible. No necesariamente todas las
imágenes del documento deben
-Con Display:block eliminamos posibles espacios que la imagen pueda ser responsive.
generar por defecto.
Si trabajamos con una clase,
podremos aplicar el estilo corres-
pondiente a las imágenes que
queramos.

<img src=”imagen.jpg” class=”imgresponsive”>

EL TAMAÑO ES RELATIVO: ENCONTRAR UN EQUILIBRIO

El tema del tamaño se vuelve muy relativo. Al preparar una imagen que va a ser responsive, hay que tratar
de encontrar un equilibrio entre el tamaño y el peso de la imagen, para que:

-Tenga buena calidad al visualizarse en pantallas grandes.

-No pese demasiado cuando tiene que cargarse en pantallas pequeñas.

Aulacreactiva - Escuela de creativos

HTML5 / CSS BÁSICO | Diseño Web Básico

ETIQUETAS SEMÁNTICAS
Llamamos Html Semántico a aquel que aporta un significado a nivel de código, independientemente de la
capa de diseño. Antes de la llegada del Html5, se utilizaban exclusivamente etiquetas Div para crear esqueletos web.
Las etiquetas Div crean zonas de diseño pero no son etiquetas descriptivas, es decir, no aportan un significado concreto.

Con tal fin, se incorporan etiquetas nuevas que sí aportan un significado a las diferentes zonas de una página web.
Su uso es importante de cara al posicionamiento en buscadores, ya que ampliamos la información que reciben los robots.

Las etiquetas div no mueren, siguen significando lo mismo: un conjunto de elementos. No se transforma
en una etiqueta tonta sino más bien en un ayudante. “Seguimos usando divs para agrupar contenidos,
pero... siempre y cuando no exista una etiqueta semántica que represente mejor ese papel.”

HEADER (ENCABEZADO/CABECERA)
-Sirve para crear la cabecera de una página web, conteniendo normalmente información
<header> introductoria como por ejemplo el logotipo, un texto o claim, iconos de redes sociales...
</header> -La etiqueta Header no es exclusiva para crear la cabecera principal de una página
web. También se podría usar para introducir un contenido (Por ejemplo para crear la
cabecera de un artículo o noticia).

NAV (MENU DE NAVEGACIÓN)

-Sirve para crear el menú de navegación de la página, conteniendo en su interior normal-
<nav> mente un listado de enlaces.
</nav> -No todos los enlaces deben estar contenidos dentro de <nav>, simplemente los enla-
ces del menú principal.

MAIN (CONTENIDO PRINCIPAL)

-Esta etiqueta hace referencia al contenido principal de la información, dejando fuera
<main> normalmente a la cabecera, menú y pie de página.
</main> -La etiqueta main hace el papel del típico div “contenido”, encerrando en su interior al
resto de la información.

-Sólo debe existir un bloque main en el documento.

-No puede estar dentro de un header, article, footer, aside o nav.

ASIDE (BARRA LATERAL)

-Hace referencia normalmente a un bloque o panel lateral, que aporta información extra,
<aside> añadida, pero sin gran relevancia respecto al contenido principal. (Por ejemplo un truco o
una nota, una nube de palabras clave, un banner animado, enlaces a páginas amigas... )
</aside>
-Si esta etiqueta aside desapareciese, el resto de contenido seguiría teniendo sentido.

Aulacreactiva - Escuela de creativos

 HTML5 / CSS BÁSICO | Diseño Web Básico

FOOTER (PIE)
-Sirve para crear el pie de página, conteniendo normalmente un menú secundario,
<footer> datos del autor, datos de contacto, iconos de redes sociales, textos legales, iconos...
</footer> -En ocasiones, al igual que ocurre con la etiqueta header, footer podría usarse como
cierre de un contenido. (el pie de una noticia o artículo)

SECTION (SECCIÓN O APARTADO)

-La manera más facil de interpretar la etiqueta section es traducirlo como “sección” o
<section> “apartado”. Hace referencia a una zona, sección o apartado general dentro del do-
cumento, creando una agrupación temática de contenido: Sección noticias, sección
</section> contacto, sección productos...

-La etiqueta section abre un gran abanico de posibilidades y esta abierta a diferentes
interpretaciones. No hay normas estrictas sobre su utilización.

-En esencia la etiqueta section es un divisor estructural, al estilo de una etiqueta div,
pero añadiendo una carga mínima de significado. Section agrupa contenido similar.

-Lo más habitual es que la etiqueta Section actúe como padre de otra etiqueta llama-
da article, aunque podrían darse situaciones al contrario.

ARTICLE (ARTÍCULO)
-La etiqueta article hace referencia al contenido primordial de la página, importante,
<article> aquello que queremos resaltar.
</article> -Un artículo puede entenderse como un contenido autónomo o independiente, es
decir, que podría existir o tener sentido por si sólo, sin estar acompañado del resto de
contenido.

<header>

<nav>

<main>
<aside>

<footer>

Aulacreactiva - Escuela de creativos

HTML5 / CSS BÁSICO | Diseño Web Básico

VÍNCULOS A ANCLAJES
LOS VÍNCULOS A ANCLAJES SON VÍNCULOS QUE SE PRODUCEN DENTRO
DE UN MISMO DOCUMENTO HTML Y SE PUEDEN DEFINIR COMO SALTOS O
DESPLAZAMIENTOS A PUNTOS CONCRETOS DEL CONTENIDO.
ANCLAJES

Por un lado, tendremos uno o varios “anclajes” distribuidos a lo largo del contenido. Los anclajes son
como una referencia del punto del contenido al que queremos desplazarnos.

Técnicamente, en el html, un anclaje es cualquier etiqueta que tenga una identificación ID. Lo más
claro en la mayoria de los casos es utilizar divs vacios como anclajes.

<div id=”anclaje1”></div>

VÍNCULOS A ANCLAJES

Por otro lado, para crear un vínculo (desplazamiento) hasta un anclaje determinado, usamos la etiqueta
de vínculo y en la ruta href especificamos el nombre dee anclaje que corresponda, precedido por una
almohadilla #

<a href=”#anclaje1”> click </a>

<div id=”anclajesuperior”></div>

<h1>Titulo</h1>

<p>Lorem ipsum dolor sit amet consectetur adip.</p>

<a href=”#anclajesuperior”>SUBIR</a>

AÑADIENDO DESPLAZAMIENTO ANIMADO SUAVE CON CSS

html{
scroll-behavior: smooth;
} ¡MOLA!

Aulacreactiva - Escuela de creativos

 HTML5 / CSS BÁSICO | Diseño Web Básico

GOOGLE WEB FONTS

Hasta el momento hemos estado limitados en el uso de tipografias en la web, ya que apenas podiamos
elegir unas cuantas tipografías comunes, tipografías de sistema, que cualquier usuario tiene normalmen-
te instaladas.

“Google web fonts” es un catálogo de tipografías online orien-

www.fonts.google.com/ tado para su uso en la web. No necesitamos descargar ninguna
tipografía, simplemente localizar la tipografía que queremos
utilizar dentro del catálogo y copiar y pegar un par de códigos
en nuestro proyecto.

Google fonts es un recurso muy completo con muchas opciones de

personalización y búsquedas de fuentes. Podremos buscar fuentes
por categorías (con o sin serif, manuscritas...), propiedades de las
fuentes (tipos con determinados números de familias, grosor, incli-
nación y anchura). Además nos permitirá introducir un texto, para la
previsualización de la tipografía, entre otras opciones.

INSERTAR UNA TIPOGRAFÍA DE GOOGLE FONTS EN NUESTRA PÁGINA

1 Una vez seleccionada la tipografía, hacemos clic en “+ select this
style” de la tipografía que queremos.

2 Se abrirá un panel lateral desde el cual, en la sección “Em-

bed” copiaremos el código <link> y lo pegaremos en nuestro
<head>.
3
Después copiaremos el estilo font-family que pegaremos en el
selector que queremos que tenga esa tipografía.

h1 { Copiar en CSS
font-family: 'Zen Loop'; Copiar en <head>

Aulacreactiva - Escuela de creativos

 DISEÑO WEB BÁSICO
DWB

EDITOR
“VISUAL STUDIO
CODE”
El editor de código de
moda, gratuito y multipla-
taforma de Microsoft.

N N T E
A N I MAC I Ó FRO
T M L 5 a d >
H <h e
5 e a d > Á
HTML <h N DA R E S C S S 3 E S T
E S TÁ
CS S 3 a d > o d y >
<he <b
dy> SAB
 HTML5 / CSS BÁSICO | Diseño Web Básico

TRABAJANDO CON EL EDITOR

“VISUAL STUDIO CODE”
El editor de moda, profesional, gratuito y multiplataforma, de Microsoft:
https://code.visualstudio.com/

EXPLORADOR DE ARCHIVOS: BIENVENIDA Y ABRIR CARPETA

Para comenzar a trabajar organizadamente en un proyecto o ejercicio, a través del explora-

dor de archivos podemos ABRIR CARPETA de trabajo y visualizar y gestionar los archivos
que contiene.

Atajo de teclado para abrir y cerrar el explorador: Comando + B (En PC-> Control + B)

A C I Ó N
D N I M
T E N A
L 5
BUSQUEDA EN ARCHIVOS
M
H T Similar a través de la busqueda con atajo

> S S S 3
de teclado Comando + F

D A R E C
TÁN
e a d > >
<h b o d y< Aulacreactiva - Escuela de creativos
HTML5 / CSS BÁSICO | Diseño Web Básico

AJUSTES

LA PALETA DE COMANDOS es un panel

superior donde podemos escribir comandos
concretos para ejecutar algunas funciones.

Este panel también es accesible a través del

menu Ver-> Paleta de comandos.

Atajo de teclado: Shift + Comando + P

CAMBIAR EL IDIOMA DEL EDITOR A ESPAÑOL

1 Abrir el panel de comandos.

2 escribimos “configure display language”.

3 seleccionamos “SPANISH”.

4 Hacemos click en “INSTALAR”.

5 Reiniciamos el editor “RESTART”.

Aulacreactiva - Escuela de creativos

 HTML5 / CSS BÁSICO | Diseño Web Básico

DIVIDIR EDITOR / ABRIR NUEVAS PESTAÑAS

El icono DIVIDIR EDITOR nos permite abrir nuevas pestañas para tener varios archivos abier-
tos a la vez. A través del menu VER, encontramos algunas opciones al respecto.

INTERFAZ: TEMA DE COLOR Y TEMA DE ICONO

1 En AJUSTES-> Tema de color, se abre el

panel de comandos superior, mostran-
do diferentes opciones de color que po-
demos elegir para la interfaz del editor.

2 En Tema de icono podemos elegir si

1
queremos que se muestren iconos
2 representativos para los diferentes
formatos de archivos en el explorador.
Ejemplo opción SETI:

Aulacreactiva - Escuela de creativos

HTML5 / CSS BÁSICO | Diseño Web Básico

ATAJOS DE TABULADOR “EMMET”

Los atajos de tabulador provienen de una popular extensión de otros editores, llamada Em-
met. Estos atajos permiten escribir codigo rápidamente a través de abreviaturas, y en Visual
Studio Code no hace falta instalar nada para que funcionen.

Escribimos la abreviatura correspondiente y después presionamos la tecla tabulador ->

lorem30 -> Inserta 30 palabras de texto ficticio Lorem ipsum

p -> Inserta una etiqueta de parrafo.
h1 -> Inserta una etiqueta h1
p>lorem15 -> Inserta un parrafo y en su interior 15 palabras de texto.
p*3 -> Multiplica, en este ejemplo, se insertan 3 parrafos

A medida que avancemos seguiremos ampliando el uso de estos atajos.

Para crear todo el código estructural del html5 existe un atajo espectacular, que consiste en
escribir el simbolo ! y darle al tabulador. ¡Tachán!

SITUARNOS EN VARIOS LINEAS DEL CÓDIGO A LA VEZ

En Visual Studio Code podemos presionar la tecla ALT para hacer click en varias lineas del
código a la vez y editarlas al mismo tiempo.

A través del menu SELECCION podemos cambiar este atajo para usar la tecla COMANDO en
lugar de ALT.

Aulacreactiva - Escuela de creativos

 HTML5 / CSS BÁSICO | Diseño Web Básico

EXTENSIONES

Existen multitud de extensiones

gratuitas que amplian las funcio-
nalidades del editor.

Al hacer click en el editor de ex-

tensiones podemos realizar una
busqueda y acceder a infomación
sobre ellas antes de INSTALARLAS.

A continuación vamos a ver las ex-

tensiones más interesantes desde
la perspectiva del diseñador web,
que facilitaran nuestro trabajo.

AYU

Esta extensión añade nuevos temas de color y una nueva opción de iconos para el explora-
dor de archivos.

BLAKAI

Nuevo tema de color oscuro, cool y elegante.

COLOR MANAGER

Extensión muy util para gestionar

y elegir colores. A través del click
derecho en el codigo, podemos
acceder a sus opciones: Selector
de color (Color picker), guardar
paletas, etc.

Aulacreactiva - Escuela de creativos

HTML5 / CSS BÁSICO | Diseño Web Básico

PRETTIER

Esta extensión es muy util, ya que permite aplicar un formato correcto a nuestros codigos
(ordenar) en cuestión de un segundo.

Tras instalar la extensión, cuando hace-

mos click derecho sobre cualquier código,
nos aparecerá la opción “Dar formato al
documento”.

Atajo de teclado Alt + Shift + F

CSS PEEK / CSS NAVIGATION

Estas dos extensiones tienen la misma utilidad. Permiten acceder rapidamente a la edi-
ción de CSS desde el codigo HTML. Esta opción en otros editores se llama Edición rapida
(Quick Edit)

Hacemos click derecho sobre algun elemento que tenga estilos aplicados externamente, y
seleccionamos la opción “Ir a definición”. Automaticamente se abre una pestaña con las hojas
de estilo que corresponden.

QUICK HTML PREVIEWER / LIVE PREVIEW

Estas dos extensiones facilitan la visualización del diseño final de aquello en lo que
estás trabajando a través de código.

QUICK HTML PREVIEWER

Tras instalar la extensión, y con un archivo abierto, abrimos el PANEL DE COMANDOS y escribimos:

SIDE PREVIEW -> Para abrir una vista sincronizada en el lateral.

FULL PREVIEW -> Para abrir una vista sincronizada a toda pantalla.

LIVE SERVER
Para abrir una vista previa en un navegador, hacemos click derecho y activamos “Open with Live Server”

Aulacreactiva - Escuela de creativos

 DISEÑO WEB BÁSICO
DWB

CONCEPTOS
NUBE
DOMINIO, ALOJAMIENTO, SERVIDOR Y FTP

PUBLICACIÓN ARCHIVOS WEB A TRAVÉS DE “FILEZILLA”

A C I Ó N
D N I M
N N T E N A
5
A C I Ó FR O H T M L
T M L 5 a d > S 3
H <h e A R E S C S
3 S TÁ N D
S C S S E >
h e a d y >
> o d y > <
< b o d
< b DA D
A B I L I
U S
W E B W E B
ÑO ÑO
HTML5 / CSS BÁSICO | Diseño Web Básico

DOMINIO, ALOJAMIENTO,
SERVIDOR Y FTP
DOMINIO:
Es el nombre o dirección de un sitio web.
Los dominios se dividen en:

genéricos: indican actividad de la empresa

.com .org .net .edu ...
estatales: indican localización, nacionalidad.
.es .fr .uk .eu .it ...

Para publicar un sitio web en la red, es necesario disponer un dominio,

que estará asociado a un hosting.

ALOJAMIENTO O HOSTING:
El alojamiento es el espacio disponible, asociado a un dominio,
donde se guardan o “suben” los archivos de un sitio web.

SERVIDOR:
Hace referencia a una máquina física, un ordenador grande, con
mucha potencia y capacidad, y conectada 24 h a la red.
En el servidor es donde realmente se guardan los archivos muchos
sitios web.

FTP: FILE TRANSFER PROTOCOL

Protocólo de transferencia de archivos. Es un método a través del
cual conectamos con el servidor para publicar, modificar, borrar los
archivos de un sitio web.

Podemos conectar vía FTP con programas concretos para ello, como
por ejemplo FileZilla, Cyberduck, Transmit...

FileZilla Cyberduck Transmit

Aulacreactiva - Escuela de creativos

 HTML5 / CSS BÁSICO | Diseño Web Básico

APLICACIONES FTP
Estos programas sirven concretamente para conectar con un servidor y subir o borrar archivos. La filosofía
es la misma en cualquiera de estas aplicaciones, y no es otra que la de conectar nuestro ordenador con el
Host para poder transferir los archivos que componen nuestro sitio web.

Filezilla
Para poder establecer la conexión
debemos añadir los datos de
conexión al servidor, que son:

NOMBRE DEL SERVIDOR FTP

NOMBRE DE USUARIO
CONTRASEÑA

Estos programas suelen tener un

interface divididos en dos partes,
la izquierda corresponde a la ubi-
cación local (nuestro ordenador)
y la derecha, la ubicación remota
(el Host)

Web de Filezilla
Una vez conectado al
servidor, basta con
arrastrar los archi-
vos a la ventana re-
mota para publicar-
los en la red...
¡y que sean visibles
al mundo!
Interfaz de Cyberduck

Aulacreactiva - Escuela de creativos

HTML5 / CSS BÁSICO | Diseño Web Básico

RECURSOS ONLINE ÚTILES

MANIPULACIÓN Y OPTIMIZACIÓN BANCOS DE IMÁGENES GRATIS:
IMÁGENES ONLINE: https://www.pexels.com
https://www.iloveimg.com/es https://pixabay.com
https://imagecompressor.com/ https://www.freepik.es
https://www.birme.net/ https://www.freeimages.com
https://www.remove.bg/es

WEBS PARA INSPIRARSE: WEBS SOBRE COLOR:

https://www.awwwards.com/ https://htmlcolorcodes.com
https://www.behance.net https://color.adobe.com
https://www.yorokobu.es/ https://color.hailpixel.com/
https://www.siteinspire.com/ https://www.design-seeds.com/
https://themeforest.net/ https://colorhunt.co/

WEBS TIPOGRAFÍAS: DESCARGAR MOCKUPS:

https://fonts.google.com/ https://graphicburger.com/
https://www.dafont.com/es/ https://www.mockupworld.co/
https://www.fontsquirrel.com/ https://unblast.com/free-website-mockup-
psd/
https://www.freepik.es/
EDITORES CÓDIGO ONLINE: https://mockupgratis.com/
https://replit.com/ https://mockupplanet.com/
https://codepen.io/

HERRAMIENTAS IA:
https://chat.openai.com/
https://bard.google.com/
https://www.bing.com/create
https://www.pixelcut.ai/
https://clipdrop.co/
https://www.deepl.com/es/translator
Huy! Este finde no
https://brandmark.io/
salgo...
:)
RETÍCULAS WEB:
https://1440px.com/
https://www.freeimages.com/psd
https://dribbble.com/......
https://bringyourownlaptop.com/......
https://1200px.com/

Aulacreactiva - Escuela de creativos

 HTML5 / CSS BÁSICO | Diseño Web Básico

¡ GRACIAS !

N N T E
A N I MAC I Ó FRO
T M L 5 a d >
H <h e
5 e a d >
HTML <h N DA R E S CSS3 EST
E S TÁ
CS S 3 a d > o d y >
<he <b
o d y > U S A B
<b N D E B
O N T E E Ñ O W
FR DIS NT E N D D
Aulacreactiva - Escuela de creativos