Material de Diseño de B.dat

Html
Estructura de cuerpo del documento:
< header >: Grupo de elementos de introduccin de un documento (como los h1, h2). No confundir con< head >, la
cabecera HTML que contiene metainformacin no visible.
< nav >: Enlaces de navegacin. Podra contener un men de navegacin horizontal, o lateral.
< section >: Define una seccin en un documento. Por ejemplo, la seccin central con el conjunto de artculos de un
blog, o podramos tener una seccin por cada categora de artculos, con un listado de artculos dentro.
< aside >: Contenidos vagamente relacionados con el resto del contenido de la pgina. Si no es visualizado, el
contenido restante seguir teniendo sentido. Por ejemplo, anuncios, u otros contenidos.
< footer >: Pie de una pgina o seccin.
Dentro del cuerpo:
< article >: Contenido con identidad propia, que podra existir aportando informacin de manera independiente del
resto del documento.
Otros elementos:
< cite >: Ttulo de una publicacin
< address >: Direccin fsica
< time >: Fecha y hora
Como referencia para profundizar en este tema, adems de las mencionadas aadimos la web de Mozilla Developer
Network, que es bastante clara y concisa:https://developer.mozilla.org/es/docs/HTML/HTML5/HTML5_lista_elementos
Siempre que queramos aadir un bloque con contenido a nuestra pgina, es til comprobar si tiene un significado semntico
de entre los incluidos en las etiquetas HTML5. En caso de no coincidir con ninguno, simpre podeos utilizar el bloque de
contenido neutro < div > o el de texto de linea neutro < span >, que estilaremos igualmente por CSS.
Un ejemplo de estructura de pgina utilizando etiquetas semnticas HTML5 sera el siguiente
<!DOCTYPE html>
<html>
<head>
<meta charset=utf8>
<title>Ejemplos curso HTML, CSS y JS</title>
</head>
<body>
<header>
<h1>Ejemplos del curso sobre HTML, CSS y Javascript</h1>
</header>
<nav>
<ul>
<li><a href="index.html">Inicio</a></li>
<li>Ejemplos HTML</li>
<ul>
<li><a href="1-base.html"
>Documento base (blanco)</a></li>
<li><a href="2-primer.html"
>Primer ejemplo</a></li>
<li><a href="3-lista.html"
>Lista</a></li>
<li><a href="4-semanticas.html"
>Etiquetas semnticas
HTML5</a></li>
</ul>
</li>
</ul>
</nav>
<section>
<article><h1>Documento base (en blanco)</h1></article>
<article><h1>Primer ejemplo</h1></article>
<article><h1>Lista</h1></article>
<article><h1>Etiquetas semnticas HTML5</h1></article>
</section>
<footer>Fichero de ejemplo Etiquetas semnticas HTML5 del curso
sobre HTML, CSS y Javascript
</footer>
</body>
</html>
En sublime, elegiremos la opcin de men Project, Save project as, para guardar en un fichero la configuracin
del proyecto actual, por ejemplo Proyecto_curso.
Luego elegiremos en el men Project, Add folder to proyect, y navegaremos hasta la carpeta Ejemplos_curso
que hemos creado antes.
Con esto tendremos nuestro entorno en sublime con el siguiente aspecto:
Conforme necesitemos aadir archivos o carpetas, podemos hacer click con el botn derecho sobre la carpeta
Ejemplos_curso en la zona izquierda de Sublime, y aadirlos con facilidad.
Al cerrar Sublime y volverlo a abrir, comenzar con el ltimo proyecto que tenamos definido.
Podemos cerrar el proyecto actual con Project, Close Project, y volverlo a abrir con Project, Open Project o
todava ms fcilmente con Project, Open Recent
Existe una comunidad muy activa que crea plugins para Sublime y los ofrece como software libre. Para facilitar la
bsqueda e instalacin de estos, es til utilizar en primer lugar el gestor de paquetes llamado directamente
Package Control: https://packagecontrol.io/
Entre los plugins que podemos utilizar, uno sencillo que facilitar trabajar con colores es
ColorHightlighter:https://github.com/Monnoroch/ColorHighlighter
Ccs
Ahora que somos capaces de construir la estructura del contenido de una web, vamos a aprender a aplicar
estilos mediante CSS (Cascade Style Sheets, Hojas de Estilo en Cascada).
El cdigo CSS es un lenguaje muy diferente de HTML, que podemos encontrar incorporado en ciertos trozos del
documento HTML o enlazado mediante archivos externos que solo contienen cdigo CSS.
Hay por tanto tres maneras de incorporar CSS en un documento HTML:
1. Estilo inline, incorporado en la propia etiqueta mediante el atributo style:
<a href="http://www.google.com" style="font-size:90px;">Enlace a Google</a>
2. Etiquetas < style > en < head >

<html>
<head>
<style type="text/css">
.cabecera {
width: 980px;
margin: 0 auto;
}
</style>
</head>
<body>

</body>
</html>
3. Enlace a archivo de estilos externo mediante etiqueta < link > en < head >
<link href="special.css" rel="stylesheet" type="text/css" />
El atributo href especificar la ubicacin del fichero de estilos, y el atributo rel

especfica que se trata de una hoja de estilos. El atributo type con el valor
text/css es opcional.
Los selectores son lo que definen sobre qu elementos se aplican las reglas.
Pueden ser una combinacin de:
Nombre de etiquetas HTML
Nombres de clases, precedidos por carcter .
Identificador de elemento, precedido por carcter #
a{
color: orange;
.example_extract {
background-color: #ccc;
#example_list {
border: 1px solid #3e2f2d;
}
En el ejemplo anterior, podemos ver las siguientes reglas:
Todas las etiquetas < a > sern de color naranja (orange).
Todos los elementos de clase example_extracttendrn un color de fondo de

cdigo #ccc (gris)
El elemento con el identificador example_list tendr un borde slido de 1

pixel de ancho, de color #3e2f2d
Un aspecto importante de las propiedades de los elementos HTML que merece una
explicacin detallada es el llamado modelo de caja.
Cada elemento HTML ocupa un tamao en la pgina web, que viene definido por:
margin: el margen exterior del elemento
border: el tamao del borde del elemento
padding: el margen interior del elemento
Por otro lado, tenemos que hablar de cmo se posicionan los elementos en la
pgina. Hemos visto cmo algunos elementos, como h1, ocupan por defecto el
100% del ancho del contenedor donde se encuentren. Estos elementos tienen una
propiedad CSS llamada display cuyo valor es de tipo block, y entre ellos tenemos:
h1, h2, h3
Etiquetas semnticas como header, nav, section, article
Etiqueta de bloque genrico div

Otros elementos de tipo inline como el texto se van acumulando en la misma lnea,
hasta llegar al final de esta y continuar en la lnea siguiente. Se comportan de este
modo:
El texto
Etiqueta de contenido inline generico span
Algunos elementos, como las imgenes, tienen un comportamiento de tipo inline-

block, de manera que por defecto se muestran insertadas en medio del texto.
Estos valores por defecto pueden ser alterados, de manera que convirtamos un
elemento que por defecto era de tipoblock en inline-block. Al hacer esto, en lugar
de ocupar el 100% del ancho del contenedor, pasar a ocupar el mnimo ancho
posible para albergar su contenido, a menos que especifiquemos un ancho
especfico con la propiedad CSSwidth.
Tambin se comportar como las imgenes, de manera que aparecer incluido en

medio de la lnea de texto donde se haya definido. Si a continuacin del elemento
tenamos algn texto, si no aadimos un retorno de lnea o nuevo prrafo,
aparecer inmediatamente despus del elemento.
Otra propiedad CSS que puede alterar el posicionamiento de los elementos

es float, que al definirse con valores right oleft, provocar que el elemento
afectado omita totalmente su posicin actual para alinearse lo ms posible al lado
indicado dentro de su misma lnea, acumulando el resto de elementos al lado
opuesto. Adems, para elementos tipo block, pasarn a comportarse como inline-
block respecto a su ancho, es decir, ste se ajustara o bien al definido
explcitamente, o al mnimo segn los elementos que contenga.
Si varios elementos consecutivos se definen con el mismo valor de float, estos
empezarn a acumularse (separados por sus mrgenes), hasta forzar una o varias
nuevas lneas. En la prctica, es ms deseable conseguir este efecto utilizando la
propiedad display con valor inline-block, ya que existen ciertos fallos en los
navegadores antiguos (Firefox en este caso) que hace que el comportamiento de
elementos float no sea igual que en el resto de navegadores.
Por ltimo, tenemos la propiedad position, que podemos definir con el

valor fixed para que la posicin del elemento se extraiga del flujo natural del
documento, y pase a ser definido directamente en un tamao en pixel relativo a los
lados de la ventana del navegador mediante las propiedades top, bottom, left o
right.
Tambin podemos posicionar el elemento relativo a los bordes de otro elemento

contenedor. Para ello, definiremos la propiedad CSS position como relative en el
elemento contenedor, de manera que cualquier elemento interior tendr la
propiedad position como absolute.
/* Reglas generales */
* { font-family: sans-serif; }
body { margin: 0 }
a { text-decoration: none; }
a:hover { text-decoration: underline; }
/* Cabecera y navegacin */
header {
background-color: #DFD493;
color: white;
position: fixed;
top: 0;
width: 100%
}
header h1 {
margin: 0; padding: 10px 10px;
font-size: 25px;
}
nav {
background-color: #EAE2B8;
padding: 10px 10px;
width: 100%
}
nav ul {
list-style-type: none;
display: inline-block;
margin: 0; padding: 0;
}
nav ul li {
margin: 0 6px;
}
/* Secciones centrales */
section {
width: 980px;
margin: 30px auto;
padding-top: 60px;
}
article {
background: #ccc;
width: 240px; height: 240px;
margin: 2px 2px;
padding: 15px 15px;
}
article h1 {
font-size: 15px;
}
/* Pie */
footer {
background-color: #CBCD00;
padding: 10px 10px;
margin: 0;
}
Con la llegada de HTML5 tambin llega una nueva versin de CSS3 que, adems
de estandarizar mucho ms el efecto de reglas ya conocidas, introduce algunas
nuevas enormemente tiles para conseguir resultados muy efectistas de manera
sencilla con muy poco cdigo.
border-radius:
Hasta hace poco implementada como un idiom de cada navegador, especifica

el radio para el que los bordes de un elemento ser redondeado.
opacity:
Indica en tanto por uno el nivel de opacidad (o transparencia) del elemento.
transition-duration:
Cuando definamos con una pseudo clase como hover alguna propiedad
diferente, la transicin al pasar el ratn sobre el elemento no ser
instantnea, sino que se realizar de manera fluida segn la duracin
indicada.
box-shadow:
Define la sombra del elemento
text-shadow:
Define la sombra del texto contenido en el elemento

transform:
Define una transformacin sobre el elemento original, que puede tener como
valores:
o scale:
escalado
o rotate:
rotacin
o skew:
inclinacin
o translate:
traslacin
Otras adiciones interesantes son sobre las propiedades que define colores. Con
CSS3 podemos definir de color de fondo complejos gradientes, mediante el valor de
propiedad gradient sin tener que utilizar ninguna imagen para ello. Construir el
cdigo para estos gradientes de forma visual sin es sencillo utilizando servicios
como los de la siguiente pgina: http://www.colorzilla.com/gradient-editor/.
HTML5 ha incorporado con algo de controversia etiquetas < video > y < audio > para
incrustar elementos multimedia en las pginas web sin necesidad de recurrir a
plugins de terceros como Flash.
El problema es que los responsables de navegadores no se han puesto de acuerdo
en cuanto a qu formato de codificacin deben tener esos ficheros. La situacin al
respecto en estos momentos en la siguiente:
video controls >

< source src="devstories.webm"
type='video/webm;codecs="vp8, vorbis"'/>
< source src="devstories.mp4"
type='video/mp4;codecs="avc1.42E01E, mp4a.40.2"'/>
< /video >
Hemos dado un vistazo a las sintaxis de HTML y CSS, las etiquetas y propiedades
ms utilizadas, y por donde expandir nuestro conocimiento de ellas. Un par de
referencias adicionales para completar este captulo son las de los validadores y
preprocesadores.
Si durante los ejemplos has escrito alguno mal y has comprobado el resultado en el
navegador, habrs visto que se desbarata toda la visualizacin de la pgina. Pero
tambin puedes haber comprobado que pequeos errores u omisiones son
corregidos de forma automtica por el navegador, de forma que en el inspector de
cdigo el resultado que ste visualiza es la mejor aproximacin que ha conseguido
hacer al cdigo correcto.
Para comprobar que nuestro fichero carece de estos pequeos errores, que pueden
convertirse en errores graves o incompatibilidades en navegadores, podemos
utilizar el servicio de validacin del
W3C https://validator.w3.org/http://jigsaw.w3.org/css-validator/
Los preprocesadores son otra herramienta til, que nos permite definir cdigo CSS
pero en un lenguaje previo, como LESS o SASS, de manera que podamos aadir a
nuestra especificacin visual el uso de variables y expresiones.
Gracias a esto, si necesitamos cambiar un atributo como un color utilizado en varios

sitios de la especificacin de los estilos, tan solo tendremos que cambiarlo una vez
en la especificacin de la variable.
@lightRed: #fdd;
@lightGreen: #dfd;
@lightBlue: #ddf;
@defaultThemeColor:@lightGreen;
.shape{
display:inline-block;
width:200px;
height:200px;
background:@defaultThemeColor;
margin:20px;
}
El cdigo JavaScript, as como HTML y CSS, permite utilizar espacios y

tabulaciones para separar el contenido de forma que est ms organizado, y sea
ms sencillo entender a simple vista su estructura.
Todos estos espacios en realidad no aportan nada al navegador, por lo que

podramos pensar en una versin equivalente de estos ficheros donde se omitieran,
ganando a cambio algo de reduccin de tamao de ficheros. Cuando tenemos
miles de usuarios cargando el contenido de nuestras pginas, esta reduccin puede
suponer un gran ahorro.
Otro efecto importante de cara a la carga de la pgina, es que es ms ptimo
cargar un solo fichero CSS o JS grande, que muchos ficheros separados pequeos.
Como tambin por orden podemos querer tenerlos separados, otra optimizacin
posible es juntar todos estos pequeos ficheros en uno solo.
Si estamos utilizando un CMS, estos tienen a su disposicin herramientas o plugins

que permiten automatizar estos procesos.
<nav class="navbar navbar-inverse navbar-fixed-top">
<div class="container">
<div class="navbar-header">
<a class="navbar-brand" href="#">Mi proyecto Nuevo</a>
</div>
</div>
</nav>

<div class="jumbotron">
<h1>Apartamentos en margarita</h1>
<p>Testo es una pequea demostracion de como quedara mi pagina nueva de servicios .</p>
<p><a class="btn btn-primary btn-lg" href="#" role="button">Learn more »</a></p>
</div>
</div>

<div class="row">
<div class="col-md-4">
<h2>Heading</h2>
<p>Donec id elit non mi porta gravida at eget metus. Fusce dapibus, tellus ac cursus
commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. </p>
<p><a class="btn btn-default" href="#" role="button">View details »</a></p>
</div>
<h2>Heading</h2>
<p>Donec id elit non mi porta gravida at eget metus. Fusce dapibus, tellus ac cursus
commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus.</p>
</div>
<h2>Heading</h2>
<p>Donec sed odio dui. Cras justo odio, dapibus ac facilisis in, egestas eget quam.
Vestibulum id ligula porta felis euismod semper.</p>
</div>
</div>
<hr>
<footer>
<p>© Company 2017</p>
</footer>
</div> 
Para ello, hemos utilizado las siguentes clases CSS:

navbar y derivados: definicin de la barra superior jumbotron: encabezado
con letras grandes btn y derivados: estilado de un enlace como un botn. row:
define el comienzo de una fila (en el ejemplo tan solo hay una).
col-md-4: Establece que tendremos 3 columnas del mismo ancho (el nmero
4 de la clase es engaoso, no tiene nada que ver con la distribucin de
columnas), y que en dispositivos mviles se reduciran a una para aumentar la
legibilidad.

Material de Diseño de B.dat

Uploaded by

Document Information

Original Title

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

Material de Diseño de B.dat

Uploaded by

Copyright:

Available Formats

Html

Estructura de cuerpo del documento:

< footer >: Pie de una pgina o seccin.

Dentro del cuerpo:

< cite >: Ttulo de una publicacin

< address >: Direccin fsica

< time >: Fecha y hora

Un ejemplo de estructura de pgina utilizando etiquetas semnticas HTML5 sera el siguiente

2. Etiquetas < style > en < head >

El atributo href especificar la ubicacin del fichero de estilos, y el atributo rel

Pueden ser una combinacin de:

Nombre de etiquetas HTML

Nombres de clases, precedidos por carcter .

Identificador de elemento, precedido por carcter #

border: 1px solid #3e2f2d;

Todas las etiquetas < a > sern de color naranja (orange).

Todos los elementos de clase example_extracttendrn un color de fondo de

El elemento con el identificador example_list tendr un borde slido de 1

margin: el margen exterior del elemento

border: el tamao del borde del elemento

padding: el margen interior del elemento

Etiquetas semnticas como header, nav, section, article

Etiqueta de bloque genrico div

Etiqueta de contenido inline generico span

Algunos elementos, como las imgenes, tienen un comportamiento de tipo inline-

Tambin se comportar como las imgenes, de manera que aparecer incluido en

Otra propiedad CSS que puede alterar el posicionamiento de los elementos

Por ltimo, tenemos la propiedad position, que podemos definir con el

Tambin podemos posicionar el elemento relativo a los bordes de otro elemento

Hasta hace poco implementada como un idiom de cada navegador, especifica

Indica en tanto por uno el nivel de opacidad (o transparencia) del elemento.

Define la sombra del elemento

Define la sombra del texto contenido en el elemento

video controls >

Gracias a esto, si necesitamos cambiar un atributo como un color utilizado en varios

El cdigo JavaScript, as como HTML y CSS, permite utilizar espacios y

Todos estos espacios en realidad no aportan nada al navegador, por lo que

Si estamos utilizando un CMS, estos tienen a su disposicin herramientas o plugins

<nav class="navbar navbar-inverse navbar-fixed-top">

<a class="navbar-brand" href="#">Mi proyecto Nuevo</a>

<p><a class="btn btn-primary btn-lg" href="#" role="button">Learn more &raquo;</a></p>

<p><a class="btn btn-default" href="#" role="button">View details &raquo;</a></p>

<p><a class="btn btn-default" href="#" role="button">View details &raquo;</a></p>

<p><a class="btn btn-default" href="#" role="button">View details &raquo;</a></p>

<p>&copy; Company 2017</p>

</div>

Para ello, hemos utilizado las siguentes clases CSS:

You might also like

<p><a class="btn btn-primary btn-lg" href="#" role="button">Learn more »</a></p>

<p><a class="btn btn-default" href="#" role="button">View details »</a></p>

<p><a class="btn btn-default" href="#" role="button">View details »</a></p>

<p><a class="btn btn-default" href="#" role="button">View details »</a></p>

<p>© Company 2017</p>