2020
W3.CSS Aplicaciones Específicas
de Redes
Implementación y
Elementos de Diseño
Georgina Andrea Mondino
Contenidos
Responsiveness
Colores
Icons
Fuentes
Responsiveness
El diseño web adaptable, adaptativo o responsivo, es
una filosofía de diseño y desarrollo cuyo objetivo es
adaptar la apariencia de las páginas web al dispositivo
que se esté utilizando para visitarlas
Clases Responsivas: Filas y Columnas
Clases Contenedoras: w3-row o w3-row-padding (Crean las Filas)
Clases Contenidas:
➔ En dispositivos mobile
(pequeños) width =
100%
➔ Width (en px o en %)
➔ Subclases (s -small-,
m -medium-, l -large-)
del 1 al 12)
Más Clases para el Diseño Responsive
class= ”w3-col”
style=”width:50%”
class= ”w3-quarter”
class= ”w3-col l9” class= ”w3-col l3”
class= ”w3-col”
class= ”w3-rest”
style=”width: 50px”
Fotografía
Ilustración
Ilustración
Color
Color
Elementos
de
Líneas y Diseño
Puntos
Tipografía
Tipografía
Figuras
Geométricas
Esquemas de Colores: Colores
Los esquemas de color se usan para crear estilo y atracción.
Aquellos colores que provocan una sensación estética cuando
se usan juntos, están comúnmente conexos en el esquema del
color.
Tipos de Esquemas de Colores:
Acromático Monocromático Análogo Complementario Triádico Complementario
Dividido
Ejemplos de Esquemas de Colores:
Complementario
Acromático Monocromático Análogo Complementario Triádico Dividido
Paletas de Colores
Generadores de Paletas: https://color.adobe.com/es/create/color-wheel/
https://www.w3schools.com/w3css/w3css_color_generator.asp
https://colourco.de/
Librerías de Colores:
Algunas Librerías que “vienen” con W3.CSS son:
W3.CSS Default Colors
Material Design
Flat UI
Windows Metro UI
Windows 8
Incluir y usar otras Librerías:
<head>
<link rel="stylesheet"
href="https://www.w3schools.com/lib/w3-colors-hi
ghway.css">
</head>
<body>
<div class=”w3-highway-green"”> Ejemplo </div>
</body>
Icons
Algunas Librerías de Iconos:
Font Awesome
Google Material
Boostrap Icons
Ionic Icons
Colocación de Iconos en el Código:
Es importante incluir la libreria a la que pertenece nuestro icono, por ejemplo
el icono fa fa-home, pertenece a Font Awesome.
Para los iconos se suelen utilizar las tags <i> y <span> como base, y después le
colocamos la clase correspondiente.
Ejemplo de Colocación de un icono:
<head>
<link rel="stylesheet"
href="https://cdnjs.cloudflare.com/ajax/libs/font-aw
esome/4.7.0/css/font-awesome.min.css ">
</head>
<body>
<i class=" fa fa-home w3-large "></i>
</body>
Nombre del Icono
Los iconos se escalan con el
tamaño de letra
Fuentes
Una tipografía poco legible puede resultar molesta al usuario.
Debemos buscar un tipo de letra que sea apropiado para la
audiencia y el mensaje. Algunas recomendaciones respecto al
texto al momento de diseñar un sitio:
➢ Busca un diseño limpio.
➢ Establece jerarquías en el texto.
➢ Busca una fuente legible y usa un buen tamaño.
➢ Usa el contraste sabiamente.
Algunas Librerías de Fuentes:
Google Fonts
DaFont
MyFonts
Incluir fuentes en nuestro Código:
Es importante incluir la Fuente antes de utilizarla en el css, es decir,
en los estilos. Una vez incluida, podemos aplicarla a los <p>,
<h1>-<h6> <label>, etc o a clases particulares
Ejemplo de Colocación de una Fuente:
<head>
<link
href="https://fonts.googleapis.com/css2? family=Lo
bster&display=swap" rel="stylesheet">
</head>
<body>
<h1 class=”Titulo”> Ejemplo </h1>
</body>
.Titulo{
font-family: 'Lobster', cursive;
}
Nombre de la Fuente
Tamaños de fuente
.Titulo{
font-size: 20px;
}
Fuentes
➢ https://www.w3schools.com/w3css/d
efault.asp
➢ https://www.w3schools.com/w3css/w
3css_color_classes.asp
➢ https://www.w3schools.com/w3css/w
3css_color_themes.asp
➢ https://color.adobe.com/es/trends
➢ https://es.wikipedia.org/wiki/Esquem
a_del_color
➢ https://es.wikipedia.org/wiki/Dise%C3
%B1o_web_adaptable
➢ https://www.lawebera.es/diseno-web/elegi
r-tipografia-pagina-web.php#cual-es-la-for
ma-correcta-de-usar-una-buena-tipografia
