Diseño web i

Diseño de sitios con

17/11/2021
CSS hojas de estilo
Lenguajes de marcas HTML en cascada

Framework CSS para

crear proyectos ágile

Ing. Ramiro Miguel Calizaya Callpa.

Diseño de sitios con Lenguajes de marcas HTML
1.1. Navegadores web
1.2. Introducción a los lenguajes de marcación html,
xml, xhtml, html5 u otros.
1.3. Enternos de Desarrollo Integrado (IDE)
1.4. Estructura básica html en su última versión.
1.5. Etiquetas
1.6. Listas, enlaces
1.7. Tablas
1.9. Manejo de imágenes y videos
1.10. Formularios web
Navegadores Web
Un navegador web es un software que te lleva a cualquier lugar de Internet, permitiéndote ver
texto, imágenes y vídeos de cualquier parte del mundo.
Recupera información de otras partes de la web y la muestra en tu escritorio o dispositivo móvil.
La información se transfiere mediante el Protocolo de Transferencia de Hipertexto (HTTP), que
define cómo se transmiten el texto, las imágenes y el vídeo en la web. Esta información debe
compartirse y mostrarse en un formato consistente para que las personas que utilizan cualquier
navegador, en cualquier parte del mundo, puedan ver la información.
Cuando el navegador web obtiene datos de un servidor conectado a Internet, utiliza un software
llamado motor de renderizado para traducir esos datos en texto e imágenes. Estos datos están
escritos en "lenguaje de marcas de hipertexto" (HTML) y los navegadores web leen este código
para construir lo que vemos, escuchamos y experimentamos en Internet.
Navegadores Web
Los hipervínculos permiten a los usuarios seguir una ruta a otras páginas
o sitios en la web. Cada página web, imagen y vídeo tiene su
propio Localizador Uniforme de Recursos (URL), que también se conoce •Google Chrome (57,4%)
como dirección web. Cuando un navegador visita un servidor en busca
•Safari (13,5%)
de datos, la dirección web le dice al navegador dónde buscar cada
elemento que se describe en el html, que luego le dice al navegador •Internet Explorer (6,8%)
dónde situarlo en la página web. •Firefox (6,5%)
•Opera (3,2%)

Cookies (no de las que se comen)

Los sitios web guardan información sobre ti en archivos
llamados cookies. Se guardan en tu ordenador para la
próxima vez que visites ese sitio. A tu vuelta, el código del
sitio web leerá ese archivo para saber que eres tú de
nuevo.
Introducción a los lenguajes de marcación html, xml, xhtml, html5 u otros
¿Qué es HTML?
HTML (Hypertext Markup Language) es el lenguaje de marcado de documentos para construir
páginas web. Por lo tanto, los comandos de formato utilizados en los contenidos para web se
refieren a la estructura del mismo y al diseño que se mostrará en el navegador.
Es decir, los navegadores leen el documento con el formato HTML y lo procesan en la pantalla
mediante el examen de los elementos HTML insertados en el documento, que se considera un
archivo de texto con la información que se debe publicar.
Por eso, podemos generar un archivo HTML utilizando el Bloc de notas de nuestra
computadora, por ejemplo.
Introducción a los lenguajes de marcación html, xml, xhtml, html5 u otros

XML es el acrónimo de Extensible Markup Language, es decir, es un lenguaje de marcado que define
un conjunto de reglas para la codificación de documentos.
El lenguaje de marcado es un conjunto de códigos que se pueden aplicar en el análisis de datos o la
lectura de textos creados por computadoras o personas. El lenguaje XML proporciona una plataforma
para definir elementos para crear un formato y generar un lenguaje personalizado.
¿Y cuáles son las diferencias entre XML y HTML?
•El XML es un lenguaje de marcado basado en texto que tiene una estructura de auto-descripción y puede
definir efectivamente otro lenguaje de marcado. Por otro lado, el HTML es un lenguaje de mrcado
predefinido y tiene una capacidad limitada;
•El XML proporciona la estructura lógica del documento, mientras que la estructura del HTML está
predefinida, utilizando tags heads e body;
•Cuando se trata de lenguaje, el HTML es insensible a mayúsculas y minúsculas. En cambio, el XML
distingue entre mayúsculas y minúsculas;
•El HTML fue diseñado con un énfasis en las características de presentación de los datos. En contraste, el
XML es específico de datos;
•El XML no permite ningún error en el código. En contraste, en el HTML, pequeños errores pueden ser
descuidados;
•Los espacios en blanco en el XML se utilizan para un fin específico, pues considera todos los caracteres el
HTML, en cambio puede ignorar espacios en blanco;
•las tags de XML están necesariamente cerradas, mientras que en HTML una etiqueta abierta también
puede funcionar bastante bien;
•En XML la sintaxis es de gran importancia. El HTML, por otro lado, no se preocupa mucho por este aspecto.
 Introducción a los lenguajes de marcación html, xml, xhtml, html5 u otros
• ¿Qué es HTML5?
• Es un lenguaje de marcas utilizado para el desarrollo de páginas web.
• Define la estructura y contenido que debe tener una web.
• No define el estilo visual que tendrá para eso se usará CSS.
• Ha sido establecido como estándar de diseño web por el W3C.
• Los navegadores deben saber interpretar este lenguaje de manera correcta (no siempre IE)
• Sobre HTML se desarrollan tecnologías para facilitar a los usuarios el diseño de una web.

• Evolución:
• En 1997 nace HTML4 publicado por el W3C como estándar de diseño web.
• En 1999 nace XHTML 1.0 que extiende HTML4
• En 2001 se publica la nueva versión de XHTML, la 1.1
• En 2002 se prepara un borrador para una nueva versión de XHTML
• En 2008 naceHTML5 como el sucesor de HTML4 y XHTML 1.1
Entornos de desarrollo integrado (IDE)
Un entorno de desarrollo integrado, también conocido por sus siglas IDE, puede
considerarse como un entorno digital utilizado para desarrollar software, juegos o
cualquier cosa relacionada con la codificación. Un IDE ofrece integración desde los pasos
más básicos del desarrollo de software, como escribir su código, depurar o incluso
compilar sus aplicaciones en un lenguaje que las computadoras puedan entender.
La mayoría de los IDE contienen depuradores que puede utilizar sin abrir nuevas
ventanas de terminal. No necesita recordar todos los comandos que necesita, por
ejemplo, para generar código automáticamente a partir de marcos, para construir su
aplicación o cualquier otra cosa, ya que probablemente haya un botón que lo haga por
usted en el IDE.
Entornos de desarrollo integrado (IDE)
A continuación se presentan los elementos

a. Un editor de texto.
b. Un compilador.
c. Un Intérprete.
d. Un depurador.
e. Un cliente .
f. Lenguajes de Programación.
g. Ambiente gráfico.
h. Multiplataforma.

Cada uno de estos elementos es un componente en un diagrama de

estado EPS.
Editor de Texto
Conjunto de aplicaciones de software
donde se desarrollan los componentes
que formarán parte de la solución
informática.

EDITOR DE TEXTO CON AMBIENTE GRÁFICO

EDITOR DE TEXTO PLANO
Compilador
Lenguaje de
alto nivel
Lenguaje de
tales como:
máquina, es
Ruby, BASIC, COMPILADOR decir, un
Perl, Java, C,
archivo
C++, Pascal,
ejecutable.
COBOL, PHP,
etc.

Un compilador es un conjunto de aplicaciones de software que traducen

instrucciones de un lenguaje de programación de alto nivel a otro lenguaje de
programación que la computadora o cualquier otra máquina pueda procesar. Por
lo general el lenguaje al que es traducido, es el lenguaje de máquina o a un
código intermedio llamado bytecode.
La máquina virtual de java
Class bucle1{

public static void

main(String arguments[]){
int i,cont,n;
n=4;
cont=0;

for(i=1;i<=n;i++){ COMPILADO JVM

cont=cont+i;

System.out.println("\n"+cont);

}
}

Java1.java Java1.class Archivo ejecutado en

cualquier plataforma

Una máquina virtual de JAVA interpreta y ejecuta instrucciones

Expresadas en un código binario especial llamado el
bytecode de JAVA el cuál es generado por el compilador de JAVA.
Interprete

Programa Traducción y
Intérprete ejecución línea a
fuente
línea

Un intérprete es un conjunto de aplicaciones de software cuya función

es analizar y ejecutar programas escritos en un lenguaje de alto nivel.
Los intérpretes realizan la traducción a lenguaje de máquina a medida
que sea necesaria, típicamente instrucción por instrucción, y
normalmente no guardan el resultado de dicha traducción.
Depurador

Un depurador es un conjunto de aplicaciones de software utilizado

para identificar errores y fallas en los programas. Esto facilita
enormemente su corrección y mejora. En la figura se muestra el
depurador JGRASP para Java que identifica el error en la que no se
cerró la instrucción if.
Cliente

Cliente es la plataforma en la que se desarrollan las soluciones

informáticas. Como ejemplo tenemos la plataforma cliente de
NetBeans.
Lenguajes de programación
Las IDE se caracterizan porque manejan una suite de lenguajes
de programación y como ejemplo tenemos los siguientes:

• La IDE de Mono: C#, mono BASIC(La versión para mono de

visual Basic), Java y Python.
• La IDE de NetBeans: C, C++, AJAX, Java, JSP y PHP.
• La IDE de JGrasp: Java, Ada 95, C, C++, VHDL, Objetive C.
• La IDE de Visual Studio: Visual C++, Visual C#, Visual J#,
ASP.NET y Visual Basic.NET.
• La IDE de eclipse: C, C++, Java, Java SDK.
 Ambiente Gráfico
También conocida como GUI ( Interfaz Gráfica de Usuario) . Es un conjunto de aplicaciones
de software representado por imágenes sencillas que describen la función de los comandos y
por su facilidad de uso el programa es intuitivo, es decir, veces no se requiere de una
capacitación previa para su uso.

LAS IDE se caracterizan por su ambiente gráfico incluyendo las gratuitas y las de software
libre como en el caso de la IDE de MONO.

MULTIPLATAFORMA
Se refiere a las aplicaciones de Software que pueden funcionar en cualquier plataforma. Por
ejemplo una aplicación multiplataforma se puede ejecutar en una plataforma Windows, Linux o
en un ambiente Mac OSX.
Estructura básica html en su última versión.
 <HTML>… </HTML>
 Delimita el Documento HTML
 <HEAD> … </HEAD>
 Delimita el encabezado del Documento HTML
 En general incluye los metadatos del documentos y Scripts.
 <BODY> … </BODY>
 Delimita el Cuerpo del Documento HTML.
 Es donde se incluyen los contenidos visibles del documento.
 Ejemplo
<html>
<head>
Aquí se incluyen os distintos elementos del encabezado
</head>
<body>
Aquí se incluyen los distintos elementos contenedores o scripts
</body>
</html>
Alguno de los elementos factibles de incluir en el HEAD son:
 <TITLE> … </TITLE>
 Define el título del documento HTML
 <SCRIPT> … </SCRIPT>
 Se utiliza para incluir programas al documento. En general se tratan
de Javascripts.
 <STYLE> … </STYLE>
 Especifica un estilo CSS para ser utilizado en el documento.
 <META> … </META>
 Permite especificar información de interés como: autor, fecha de
publicación, descripción, palabras claves, etc.
Etiquetas.
Las etiquetas HTML son pequeños bloques de código, que indican al navegador como debe
interpretar el contenido recogido entre dichas etiquetas. Las etiquetas HTML comienzan
siempre con el símbolo “<” y finalizan con el símbolo “>”. Entre medias de estos dos símbolos irá
el nombre de la etiqueta que queremos que el navegador interprete.
Hay una serie de etiquetas que son las más usadas para crear cualquier
documento HTML, a continuación las explicamos:
•<body> para el contenido
•<head> para información sobre el documento
•<div> división dentro del contenido
•<a> para enlaces
•<strong> para poner el texto en negrita
•<br> para saltos de línea
•<H1>…<H6> para títulos dentro del contenido
•<img> para añadir imágenes al documento
•<ol> para listas ordenadas, <ul> para listas desordenadas, <li> para elementos
dentro de la lista
•<p> para parágrafos
•<span> para estilos de una parte del texto
 Parrafos
 Es el contenedor mas común.
 Su sintaxis es: <P> … </P>
 Encabezados
 Indican una jerarquía de secciones dentro del documento
 Su sintáxis: <h1>…</h1>, <h2>…</h2>, <h3>…</h3>,.. <h6>…</h6>,
 Listas
 Listas de Definiciones (consistente de pares de términos y definiciones)
 <dl>…</dl> Crea la lista
 <dt>…</dt> Crea un nuevo término
 <dd>…</dd> Crea una nueva definición
 Lista Ordenada Enumerada
 <ol> … </ol> Crea una nueva lista
 <li> … </li> Crea un nuevo ítem en la lista
 Lista Ordenada No Enumerada
 <ul> … </ul> Crea una nueva lista
 <li> … </li> Crea un nuevo ítem en la lista
 Capas
 Permiten agrupar y diagramar contenidos en los documentos.
 Su sintaxis es: <DIV> … </DIV>
 <table> … </table> Crea la tabla
 <tr> … </tr> Crea una nueva fila
 <td> … </td> Crea una nueva celda dentro de la fila

Por ejemplo: Creación de una tabla de 2 x 2

<table>
<tr>
<td> … </td>
<td> … </td>
</tr>
<tr>
<td> … </td>
<td> … </td>
</tr>
</table>
Listas, enlaces
Las listas en HTML nos permite crear conjuntos de elementos en forma de lista dentro de una
página, todos los cuales irán precedidos, generalmente, por un guión o número.
Los tipos de listas en HTML son los siguientes:
•Listas ordenadas
•Listas desordenadas
•Listas de definiciones

Listas Ordenadas
Las listas en HTML ordenadas son aquellas que nos muestran los elementos de la lista en orden. Para
representar el orden tendremos los elementos numerados. Es decir, cada uno de los elementos irá precedido
de un número o letra que establezca su orden.
Las listas en HTML ordenadas se representan mediante el elemento OL. <ol>….</ol>
Cada uno de los elementos de la lista ordenada se representará mediante el elemento LI.
Número de inicio de la lista: start
El atributo start nos permite indicar el número por el cual queremos que empiece la lista, ya que por
defecto las listas ordenadas en HTML empiezan por el número 1. <ol start=“numero”>…</ol>

Tipo de lista ordenada: type

De igual manera podemos indicar el tipo de lista ordenada en HTML que queremos representar.
Entre los tipos de listas que podemos representar tenemos:
•1 - Listas decimales
•a - Listas alfabéticas en minúsculas
•A - Listas alfabéticas en mayúsculas
•i - Listas de números romanos en minúsculas
•I - Listas de números romanos en mayúsculas

<ol type="tipo"> ... </ol>

Listas Desordenadas
Las listas desordenadas en HTML nos sirven para mostrar los elementos sin ningún tipo de
orden, simplemente precedidos por una viñeta que puede ser un punto, un cuadrado,…
Para definir una lista desordenada en HTML utilizamos el elemento ul.

Para representar los elementos de la lista desordenada utilizamos el mismo elemento que
con las listas ordenadas, es decir, el elemento li.

Listas anidadas
Cuando estemos manejando listas podemos anidar unas en otras independientemente
del tipo de lista que estemos anidando.
 Imágenes en HTML

Para poner una imagen simple en una página web, utilizamos el elemento <img>. Se trata de un
elemento vacío (lo que significa que no contiene texto o etiqueta de cierre) que requiere de por lo
menos de un atributo para ser utilizado: src (a veces denominado por su nombre completo, source).
El atributo src contiene una ruta que apunta a la imagen que quieres poner en la página, que puede
ser una URL relativa o absoluta, de la misma forma que el elemento <a> contiene los valores del
atributo href.

<img src="dinosaur.jpg">

Texto alternativo

El próximo atributo que veremos es alt. Su valor debe ser una descripción textual de la
imagen para usarla en situaciones en que la imagen no puede ser vista/mostrada o tarde
demasiado en mostrarse por una conexión lenta a internet.
 Anchura y altura
Puedes usar los atributos ancho (width) y alto (height) para
especificar la anchura y altura de tu imagen. Puedes encontrar el
ancho y el alto de tu imagen de diversas maneras. Por ejemplo, en
Mac puedes usar Cmd + I para mostrar información del archivo de
imagen.

<img src="images/dinosaur.jpg" alt="La cabeza y el torso de un esqueleto de dinosaurio; tiene una cabeza grande con dientes largos y
afilados" width="400" height="341">

Título de imágenes
Al igual que con los enlaces, también puedes añadir atributos title a las imágenes para
proporcionar más información de ayuda si es necesario.
<img src="images/dinosaur.jpg" alt="La cabeza y el torso de un esqueleto de dinosaurio;
tiene una cabeza grande con dientes largos y afilados" width="400" height="341"
title="Exposición de un T-Rex en el museo de la Universidad de Manchester.">
En HTML5 se introduce la interesante posibilidad de mostrar videos directamente desde nuestro navegador. De
hecho, si arrastramos un video a la ventana del navegador, veremos que comienza a reproducirse en él. Para
poder insertar videos en nuestras páginas HTML tenemos que utilizar la etiqueta <video>, que junto a la
etiqueta <source> podremos utilizar estas capacidades multimedia de HTML5.
<video src=“video.mp4" width="640" height="480" autoplay muted loop></video>
 Imágenes en HTML
Los formularios en HTML sirven al propósito de recolectar información proporcionada por los visitantes del sitio, la cual
es luego enviada nuevamente al servidor. Para su correcto funcionamiento es importante que el formulario provisto
en HTML sea acompañado de un código del lado servidor, al que denominaremos "agente procesador", que se
encargará de recibir y procesar la información como el autor vea conveniente. Este procesamiento puede consistir en,
por ejemplo, el almacenamiento de la información o su envío mediante correo electrónico.
Un formulario (form) es básicamente un contenedor para controles. Cada control en un formulario está pensado para
recolectar información ingresada por los usuarios, en formas que pueden ir desde líneas de texto a subida de archvios,
pasando por opciones, fechas, contraseñas y mucho más. Una vez que los usuarios han rellenado el formulario con los
datos, pueden enviarlo de regreso al servidor para que el agente procesador administre la información recolectada.
Etiqueta <form>
Utilizaremos la etiqueta <form> para indicar al navegador que el elemento será un formulario.
<form> se emplea para cualquier tipo de formulario HTML, ya sea uno de contacto, suscripción, registro, login,
encuesta, etc.
<form> …Aquí irán los campos del formulario... </form>

Etiqueta <input>
Crear los campos en el formulario es tan sencillo como utilizar la etiqueta <input> antecedida de lo que deseas
obtener. Por ejemplo:
<form> Tu nombre: <input/> Tu apellido: <input/> </form>

Existen varios tipos campos para formularios HTML y

también debemos especificar que tipo de campo es un
elemento del formulario, para ello aprenderemos a utilizar
el atributo TYPE.
Atributo type
El atributo type va dentro de la etiqueta <input> y su valor indicará que tipo de campo se está creando.
Veamos algunos valores que puede tomar el atributo type en un formulario HTML:

Valores de atributo type en formularios HTML

•Text: para campos de texto
•Password: para campos de contraseña
•Checkbox: para casillas de verificación
•Radio: para casillas de selección
•Submit: para botones de envío
•Reset: para botones de resetear
•File: para campos de selección de archivo
Crear una desplegable con opciones HTML
Etiqueta <select>
Utilizaremos la etiqueta <select> para crear un campo desplegable, este tipo de campos en HTML
permiten seleccionar una opción del desplegable y además son muy útiles en esas ocasiones en las
que buscamos buena presentación de espacio en el formulario.

Etiqueta <option>
Utilizaremos la etiqueta <option> dentro de la etiqueta <select>. <option> contiene una opción del
desplegable y podemos implementar la cantidad de opciones que deseemos.
CSS hojas de estilo en cascada para
dar formato a páginas web
2.1. Introducción a css, separar contenido y forma, colocar
estilos en un documento
2.2. Sintaxis, unidades, selectores básicos
2.3. Atributos de estilos, para textos, párrafos, cajas
2.4. Selectores y pseudo elementos
2.5. Maquetación CSS modelo de caja: posicionamiento
relativo, posicionamiento, absoluto, layouts, anchuras fijas y
adaptables
2.6. Buenas prácticas
Introducción a css, separar contenido y forma, colocar estilos en
un documento
Hojas de Estilo en Cascada (Cascading Style Sheets)
es el lenguaje utilizado para describir la
presentación de documentos HTML o XML. CSS
describe como debe ser renderizado el elemento
estructurado en pantalla.

CSS es uno de los lenguajes base de la Open Web y

posee una especificación estandarizada por parte del
W3C. Desarrollado en niveles, CSS1 es ahora
obsoleto, CSS2.1 es una recomendación y CSS3,
ahora dividido en módulos más pequeños, está
progresando en camino al estándar.
 Al principio las páginas web estaban hechas sólo
con HTML, sin embargo pronto se vio que este
lenguaje tenía muchas limitaciones cuando se
quería hacer el diseño de la página y el estilo de
sus elementos.

Para solucionar esto se creó el lenguaje CSS. Con

CSS separamos los dos aspectos de la página. Por
un lado con HTML nos ocupamos del contenido, y
por otro con CSS nos ocupamos del estilo.

De esta manera, aunque tenemos que utilizar dos códigos

diferentes, los códigos quedan mucho más claros.
CSS tiene una sintaxis simple, y usa un conjunto de palabras clave en inglés para
especificar los nombres de varias propiedades de estilo.

Una hoja de estilos consiste en una serie de reglas. Cada regla, o conjunto de reglas
consisten en uno o más selectores, y un bloque de declaración.

Establecer propiedades CSS a valores

específicos es la función principal del
lenguaje CSS. Un par de propiedades y
valores se denomina declaración , y
cualquier motor CSS calcula qué
declaraciones se aplican a cada
elemento de una página para poder
disponerla y diseñarla.
Las declaraciones se agrupan en bloques , es Estos bloques son llamados
decir en una estructura delimitada por una naturalmente bloques de
llave de apertura, ' {‘ y una de cierre, ' }' declaración y las declaraciones
dentro de ellos están separadas
A veces, los bloques pueden anidarse, por lo que por un punto y coma, ‘ ;’. Un
los tirantes de apertura y cierre deben coincidir. bloque de declaración puede
estar vacío, que contiene una
declaración nula.
CSS permite aplicar diferentes Cada bloque de declaración (válido) está
declaraciones a diferentes partes precedido por uno o más selectores
del documento asociando que son condiciones seleccionando
condiciones con bloques de algunos elementos de la página.
declaraciones.

El bloque de declaraciones de grupo selector de parejas se denomina

conjunto de reglas o, a menudo, simplemente una regla .
 Separación del
contenido y la
presentación

Accesibilidad
Consistencia
del sitio

Formateo de Ancho de
página banda
a.btnAzul {
display: block;
width: 250px;
height: 60px;
padding: 25px 0 0 0;
margin: 0 auto;

background: #4682B4;
background: -moz-linear-gradient(top, #87CEEB 0%, #4682B4 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #87CEEB), color-stop(100%, #4682B4));

box-shadow: inset 0px 0px 6px #fff;

-webkit-box-shadow: inset 0px 0px 6px #fff; <div id="contenedor">
border: 1px solid #62C2F9;
border-radius: 10px;
<a href="#" class="btnAzul">Da Click</a>
</div>
font: bold 25px Helvetica, Sans-Serif;
text-align: center;
text-transform: uppercase;
text-decoration: none;
color: #3090C7;
text-shadow: 0px 1px 2px #62C2F9;
}
 Como se inserta CSS en HTML

Las hoja de estilo externas no debrían contener

La etiqueta <LINK> se coloca en la cabecera
HEAD del documento. El atributo opcional
TYPE se usa para especificar un tipo de
medio --text/css para una hoja de estilo en
cascada-- permitiéndole a los navegadores
omitir los tipos de hoja de estilo que no
soportan.
ninguna etiqueta HTML como <HEAD> o <STYLE>. La
hoja de estilo solo debería consistir simplemente de
reglas de estilo o sentencias. Un archivo que solo
consista de
P { margin: 2em }
podría usarse como una hoja de estilo externa.

<LINK REL=StyleSheet HREF="estilo.css" TYPE="text/css" MEDIA=screen>

<LINK REL=StyleSheet HREF="color-8b.css" TYPE="text/css" TITLE="estilo de color 8-bit" MEDIA="screen, print">
<LINK REL="Alternate StyleSheet" HREF="color-24b.css" TYPE="text/css" TITLE="estilo de color 24-bit" MEDIA="screen, print">
<LINK REL=StyleSheet HREF="aural.css" TYPE="text/css" MEDIA=screen>
 Atributos de estilos, para textos, párrafos, cajas

Familia tipográfica en CSS

La propiedad font-family para la familia tipográfica

Gracias a la propiedad font-family podemos definir el tipo de letra o familia tipográfica para cualquier elemento
de texto que tengamos, estos pueden ser por ejemplo: un párrafo, títulos, subtítulo, enlaces, etc.
Existen dos tipos de nombres de familias de fuente:
•Familia de fuentes: una familia especifica (como: times new roman, courier o arial, etc.)
•Familia genérica: un grupo de familia de fuentes con un aspecto similar (como: serif, fantasy o monospace, etc.)
Valores genéricos
La propiedad font-family puede tomar cualquier familia tipográfica, a continuación describimos algunas
genéricas.
•initial.- Señala que tipo de letra debe ser el establecido por defecto en el navegador.
•inherit.- El tipo de letra debe ser heredado de su elemento padre.
•serif.- Fuente genérica con serif como, por ejemplo, el tipo de fuente Times.
•sans-serif.- Fuente genérica sin serif como, por ejemplo, el tipo de fuente Arial.
•monospace.- estilo de fuente genérica Monospace, como por ejemplo Courier.
•cursive.- Estilo de fuente genérica cursiva, como por ejemplo Script.
Tamaño de fuente CSS
La propiedad font-size para establecer tamaño de fuente
La propiedad font-size indica el tamaño de fuente para nuestros elementos de texto. Podemos establecer el tamaño de letra con
palabras clave o indicando una medida exacta con sus respectivas unidades. Se suele emplear palabra clave cuando no se desea que
el usuario modifique el tamaño de letra.
Valores con palabra clave
Las palabras clave para indicar el tamaño de letra son:
•small: pequeño
•medium: mediano
•large: grande
•x-large: muy grande
Ejemplo
Valores numéricos
Generalmente, para establecer el
tamaño de letra se trabaja con valores
numéricos y sus respectivas unidades
de medida que pueden ser píxeles o
ems.
•Píxeles.- Los píxeles permiten
establecer un tamaño exacto.
•Ems.- Permite establecer un tamaño
relativo, el texto puede ser
redimensionado por los navegadores
web.
Equivalencia entre píxeles y ems
1px equivale a 16em, por lo tanto
podemos emplear la fórmula de
conversión: em=px/16
Aplicando la conversión podemos
afirmar que 32px equivalen a 2em, si
empleamos cualquiera de ellos en los
valores para la dimensión de letra,
producirán el mismo resultado.
Estilo de fuentes CSS
La propiedad font-style nos permite
establecer un texto en cursiva, los valores
que puede tomar esta propiedad son:
Valores para font-style CSS
•normal.- el texto se muestra normal, sin
efectos.
•italic.- el texto se muestra en cursiva.
•oblique.- texto en oblicua, es parecido
a italic.
Si recuerdas, la etiqueta HTML <i> hace
que el texto se muestre en cursiva
¿Verdad? Pues el valor italic para estilo de
fuente lo hace en CSS.
Propiedad font-variant para variantes de fuente
La propiedad font-variant sirve para cambiar el texto a mayúsculas pequeñas, es tan simple como eso,
veamos lo valores que puede tomar.
Valores para font-variant CSS
•normal.- no aplica ningún cambio.
•small caps.- establece que las letras deben ser mayúsculas pequeñas.
•inherit.- Hereda el estilo del elemento padre que lo contiene.
Color de letra CSS
Poner color a un texto en CSS es tan simple como apuntar al elemento mediante un selector y establecer la
propiedad color, dentro del valor podemos colocar el color que deseamos y existe más de una forma de
hacerlo.
Valores de la propiedad color
•Podemos establecer el valor del color utilizando palabras clave en ingles
como: red (rojo), blue (azul), green (verde).
•Otra forma de colocar el color es mediante valores hexadecimales, se trata de un # seguido de 6 o 3 valores
alfanuméricos, por ejemplo el amarillo es: #FFFF00
•La tercera forma es empleando valores RGB (Rojo, Verde, Azul)
Aquí tienes un selector de color que muestra los valores RGB:
Veamos los equivalentes a los colores rojo, verde y azul en Hexadecimales y RGB.
Propiedad tex-align para
alinear el texto
horizontalmente
La propiedad text-align es la que nos permite
determinar la alineación de los elementos de
texto con CSS, por defecto los textos están
alineados a la izquierda en cualquier navegador
web, sin embargo podemos modificar e indicar
que sea a la derecha, al centro o justificado.
Valores para la propiedad de text-align
•left.- indica que el texto debe ser alineado a la
izquierda.
•right.- indica que el texto debe ser alineado a
la derecha.
•center.- establece texto con alineación al
centro.
•justify.- hace que el texto se justifique,
quedando las líneas estiradas de principio a fin
para que todos queden iguales.
Alinear el texto verticalmente en CSS
La propiedad vertica-align se emplea en general para establecer la alineación vertical de un elemento HTML dentro de otro;
en este caso nos enfocaremos para texto y mencionaremos los aspectos más importantes.
Valores para vertical-align
Por ejemplo los valores empleados para celdas de tablas son:
•top.- Indica que el texto se ubica en la parte superior.
•middle.- establece que el texto se ubica en al medio.
•bottom.- Ubica al texto en la parte inferior.
 Menu horizontal nav a{
text-decoration:none;
color:inherit;
font-size:14px;
}
<nav><ul> nav li{
<li><a href="#">Inicio</a></li> display:inline-block;
<li><a href="#">Quiénes somos</a></li> width:10%;
<li><a href="#">Servicios</a></li> padding:5px 10px;
<li><a href="#">Blog</a></li> background-color:#000;
<li><a href="#">Contacto</a></li> border:1px solid #000;
</ul></nav> text-align:center;
color:#fff;
}
nav li:hover{
background-color:#fff;
color:#000;
}
 Menu horizontal
<div id="header"> <ul class="nav">
<li><a href="">Inicio</a></li>
<li><a href="">Servicios</a> <ul>
<li><a href="">Submenu1</a></li>
<li><a href="">Submenu2</a></li>
<li><a href="">Submenu3</a></li>
<li><a href="">Submenu4</a> <ul>
<li><a href="">Submenu1</a></li>
<li><a href="">Submenu2</a></li>
<li><a href="">Submenu3</a></li>
<li><a href="">Submenu4</a></li>
</ul>
</li> </ul> </li> <li><a href="">Acerca de</a>
<ul>
<li><a href="">Submenu1</a></li>
<li><a href="">Submenu2</a></li>
<li><a href="">Submenu3</a></li>
<li><a href="">Submenu4</a></li> </ul>
</li>
<li><a href="">Contacto</a></li> </ul> </div>
* { margin:0px; padding:0px; } #header
{ margin:auto; width:500px; font-
family:Arial, Helvetica, sans-serif; }
ul, ol { list-style:none; } .nav > li
{ float:left; } .nav li a {
background-color:#000; color:#fff;
text-decoration:none; padding:10px
12px; display:block; } .nav li a:hover
{ background-color:#434343; } .nav li
ul { display:none; position:absolute;
min-width:140px; } .nav li:hover > ul
{ display:block; } .nav li ul li {
position:relative; } .nav li ul li ul
{ right:-140px; top:0px; }
VOLVER AL
INICIO
 Framework CSS para crear
proyectos ágiles.
- Estilos avanzados
- Diseños responsive
- Manejo de framework css actuales para crear diseños
responsive.
- Proyecto web, página web completa.
Framework CSS para crear proyectos ágiles.

Un Framework para Aplicaciones Web (WAF) consiste de una plataforma modular reusable y
semicompleta que puede ser especializada para producir aplicaciones web. Estas aplicaciones
comúnmente son utilizadas por navegadores Web vía el protocolo http. Un WAF incluye un
conjunto de servicios y componentes esenciales para la construcción de sistemas sofisticados y
ricos en funcionalidades.
En la actualidad existen varios frameworks para el desarrollo de aplicaciones web, siendo en su
mayoría open source. Esta característica permite a los desarrolladores disponer del código fuente, y
con esto, aprender de otros desarrolladores y reutilizar algún patrón en su trabajo.
Estilos Avanzados.
Al margen de la selección «básica» de elementos a través de CSS, que suele realizarse
mediante clases e IDs, existe un amplio abanico de métodos para seleccionar
elementos dependiendo de la estructura del documento HTML denominados combinadores
CSS:
Diseños responsive
Un diseño web responsive es el que es capaz de adaptarse a pantallas de diferentes
tamaños con un solo sitio web. El sistema detecta automáticamente el ancho de la
pantalla y a partir de ahí adapta todos los elementos de la página, desde el tamaño
de letra hasta las imágenes y los menús, para ofrecer al usuario la mejor experiencia
posible.

En ocasiones, se confunde el responsive con las webs para móviles, pero no se

trata de lo mismo. En el caso del diseño responsive, tenemos un solo sitio web que
puede adaptarse para dispositivos de todo tipo, desde ordenadores de escritorio con
grandes monitores hasta móviles, pasando por tablets y otros. En cambio, crear un
sitio móvil implica diseñar desde cero una web independiente, cuyos contenidos y
formato están especialmente adaptados para funcionar mejor en dispositivos
móviles.
 ¿Qué elementos hay que tener en cuenta para diseñar un
buen sitio responsive?

•Las tipografías. El tamaño de letra tiene que ser diferente en función de la pantalla, de
manera que podamos leer los textos sin necesidad de hacer zoom. Esto implica, por ejemplo,
que no debemos incluir columnas con un ancho predeterminado en un sitio responsive.
•Las imágenes y los vídeos. Los elementos visuales de la página deben seguir una
proporción lógica en función del dispositivo donde se muestren, de manera que podamos
verlos con comodidad.
•El formato horizontal o vertical. En particular, es necesario tener en cuenta que los
usuarios de móviles suelen preferir el vertical, pero pueden alternar entre ambos para
visualizar un contenido determinado.
•La usabilidad. Los usuarios de móviles y tablets usan pantallas táctiles para interactuar
con los contenidos, mientras que en los ordenadores esta interacción tiene lugar a través
del ratón. Esto implica que los menús, los botones y demás elementos deben repensarse
para ofrecer una buena experiencia de usuario en ambos casos.
•Los tiempos de carga. Intentar cargar una web de escritorio desde un teléfono móvil
puede ser una experiencia extremadamente frustrante para el usuario y hacer que
abandone fácilmente. Por eso, es necesario optimizar al máximo los tiempos de carga en
todos los dispositivos.
•Los efectos. Por ejemplo, el hover funciona en ordenadores de escritorio, pero no en
móviles, así que si colocas en él el "leer más" de un artículo o noticia los usuarios móviles
no podrán acceder a él.
Para trabajar correctamente en diseños responsive hay que tener en
cuenta que debemos trabajar con unidades relativas e intentar evitar
las unidades fijas o estáticas, las cuales no responden a la adaptación
de nuestros diseños flexibles:
Otra forma interesante de trabajar esa respuesta de los diseños responsive es utilizar
propiedades como min-width o max-width, donde definimos tamaños mínimos o
máximos, para que los elementos de nuestra página puedan ampliar o reducirse según sea
necesario dependiendo de la pantalla del dispositivo utilizado.
Con estas propiedades podemos crear diseños que aprovechen al máximo toda la pantalla
de dispositivos pequeños (como móviles o tablets), mientras que establecemos unos
máximos en pantallas de dispositivos grandes, para crear unos espacios visuales que hacen
que el diseño sea más agradable:
Como se puede ver en la siguiente imagen, en un diseño responsive se utilizan ciertos
«puntos de control».
Por ejemplo, se suele pensar que en una resolución de escritorio queremos mostrar
la información dentro de una cuadrícula (grid) de 4 ó 5 celdas de ancho, mientras que
en la versión de tablet será sólo de 3 celdas de ancho (el resto se desplazará a la
siguiente fila) y en móviles será una sola celda de ancho, mostrándose el resto de
celdas haciendo scroll hacia abajo:

Esta forma de trabajar nos proporciona múltiples ventajas:

•Es mucho más sencillo mostrar la misma información desde diseños de pantalla grande.
•Ayuda a evitar la mala práctica de ocultar bloques de información en dispositivos móviles.
•Incentiva a diseñar siguiendo buenas prácticas para facilitar la creación responsive.
 Manejo de framework css actuales para crear diseños responsive

En el mercado existe un gran surtido de frameworks y grids orientados a crear

páginas web con diseño responsive que se adapten a todo tipo de pantallas.
Cualquier gestor de un portal online debe asumir como algo irrenunciable la puesta
en marcha de este tipo de desarrollos como única vía para garantizar que los
usuarios y potenciales clientes, si se trata de un portal de negocio, puedan explorar
en su máxima expresión la web independientemente del dispositivo a través del cual
lo hagan: ordenador, portátil, tablet o smartphone. Es obvio que buena parte de la
información contenida en las webs ajenas al modelo responsive es dilapidada, si la
navegación tiene lugar desde pantallas pequeñas.
VENTAJAS
•Creación de páginas web con una inversión moderada y en un corto período de tiempo.
•Comodidad del profesional que trabaja en ello, ya que, al tener incorporadas
funcionalidades de uso rutinario en el desarrollo de páginas web, queda liberado del
esfuerzo adicional de razonar sobre la manera de hacer un formulario de contacto
o slider.
•Agilidad en la entrega del trabajo de programación, puesto que el diseño arranca de un
punto de partida considerable. Pero el aprovechamiento en toda la magnitud de esa
agilidad exige un experimentado manejo del framework y el conocimiento profundo de
las funcionalidades.
•Tratándose de un soporte al que recurren multitud de desarrolladores, cualquier
incidencia sobrevenida que dificulte el proceso podrá ser sometida a consulta con alta
probabilidad de encontrar solución rápida en la Red.
•La inclusión de plugins de JavaScript en los frameworks más vigorosos permite
incorporar en las páginas web responsives soluciones más avanzadas sin necesidad de
recurrir a su implementación.
INCONVENIENTES
•Cada framework tiene un funcionamiento distinto, por lo que esta actividad exige horas de
formación específica para hacerse con un buen bagaje sobre el potencial de las
funcionalidades.
•Suelen incorporar una sobrecarga de código pensando en la infinidad de necesidades que
un webmaster puede llegar a tener. Por ello, es harto improbable que vayan a utilizarse
todas las funciones que incluye un framework para la web que se está construyendo.
•Conllevan una evidente complicación semántica, ya que utilizan un sistema de grid con
clases extra que permite identificar el número de columnas que van a ocupar, pero cuyos
nombres están más bien ideados hacia la funcionalidad.
•Se corre el riesgo de que el aspecto final de una página web desarrollada con este
sistema se asemeje llamativamente al de otras, lo cual puede suceder en el caso de que
no se personalicen los CSS a conciencia.
Manejo de framework css actuales para crear diseños responsive

•Bootstrap: http://getbootstrap.com. Es uno de los más utilizados. Este

framework ofrece una gran variedad de componentes. La cuadrícula es muy
interesante porque da la posibilidad de conseguir diseños distintos en función del
ancho de la pantalla.

•Foundation: http://foundation.zurb.com/. Framework tan utilizado como

Bootstrap. Los componentes y funciones que ofrece son muy similares. Este
framework también necesitaría un libro entero.
Manejo de framework css actuales para crear diseños responsive

•Semantic UI: http://semantic-ui.com. Framework muy completo y con un código

HTML/CSS muy potente.

•Gumby: http://gumbyframework.com. Framework con numerosos componentes de

interfaz y grandes posibilidades de personalización.

•HTML KickStart: http://www.99lime.com/elements/. Framework que nos ofrece todos

aque-llos componentes que esperamos que nos ofrezca un buen framework.
VOLVER AL
INICIO