Sesin 3

Formato de texto y prrafo, colores en la web

Fundamentos de desarrollo web

ndice
1. 2. 3. 4. 5. 6. 7. 8. 9. 10. Introduccin Sistema de color RGB Sistema de color RGBA Como elegir los colores para un sitio web Herramientas para seleccionar colores Encabezado Formato de texto y prrafo Etiquetas <div> y <span> Conclusin Links de referencia

 Introduccin:
En esta sesin veremos el uso de etiquetas para formato de texto, prrafo, encabezado y trabajaremos como seleccionar colores para la Web con Adobe Kuler. Usaremos etiquetas como p, h1h6 y reglas CSS para darle formato a los textos y prrafos. Crearemos colores en el sistema RGB para ser insertados como cdigo hexadecimales en el diseo de una web.

Sistema de color RGB

Es un sistema de colores basado en la combinacin de tres colores para su formacin: Rojo, Verde y Azul. Es el sistema utilizado para el diseo de paginas web. Se expresan en valores hexadecimales-

Sistema de color RGBA

CSS3 nos permite aadir un canal alfa (de transparencia) al sistema de color RGB. Esta nueva notacin a la que llamaremos rgba permite gracias a su cuarto canal la posibilidad de indicar la opacidad en tantos por 1, es decir, tomando 0 como la mxima transparencia y 1 como la mxima opacidad.

Cmo Elegir los Colores Para un Sitio Web

Cuando se crea un sitio web, la eleccin de los colores es una tarea delicada, a pesar de parecer fcil. Seleccionar una correcta paleta cromtica es importante para comunicar eficazmente el mensaje, crear conciencia de marca y alcanzar a nuestra audiencia.

Cmo elegir los colores?

1. Utilize una paleta de colores que se relacione con su objetivo:
Hay que elegir los colores pensando en nuestra audiencia. Las personas de diferentes edades tienen diferentes reacciones a los colores.

continuacin
2. Establezca un fuerte contraste entre el fondo de una pgina y el texto.
El color del texto debe estar en contraste con el color de fondo. Esto es muy importante porque el contenido escrito es normalmente el aspecto ms relevante de un sitio web.

continuacin
3. Elija una paleta de colores y sela en todo el sitio.
No use demasiados colores diferentes, con tres o cuatro es suficiente. Todo el resto debera estar en la gama de estos colores principales

Herramientas para seleccionar colores

Kuler.adobe.com

10

continuacin
checkmycolours.com

11

continuacin
colorcombos.com

12

continuacin
colorschemedesigner.com

13

continuacin
cssdrive.com/imagepalette

14

continuacin
Por ejemplo para poner un fondo negro a una caja div:

Pero gracias a CSS3 podemos incluir un valor ms para cada color: su opacidad. Entonces hablaramos de RGBA, siendo A=Alpha, que nos permitir especificar la opacidad del color. El valor de A es un nmero entre 1 y 0, siendo 1 totalmente opaco y 0 totalmente transparente. Si seguimos el ejemplo anterior del fondo negro y queremos que tenga una opacidad del 50% haremos:

15

continuacin
Como vemos hemos situado su opacidad al 50% por lo que si hubiera algo debajo de ese DIV se vera. Existe ya una propiedad en CSS3 para conseguir la opacidad de un elemento. Se trata de opacity. Por ejemplo:

La propiedad RGBA en estos momentos la soporta Safari, Chrome, Firefox 3 y Opera 10. Internet Explorer no la soporta.

16

Encabezado
HTML acepta seis encabezados para definir la estructura jerrquica de los prrafos en un documento:

17

continuacin

http://www.hatshop.com/

18

continuacin

http://www.hatshop.com/

19

Formato de texto y prrafo

Cuando carguemos una pgina web en nuestro navegador, el formato de texto o de prrafo, que se utilizar por defecto ser el que indique las propiedades del navegador. Esto suceder siempre y cuando la pgina web no indique nada al respecto

20

Etiquetas <em> y <strong>

La etiqueta <em> marca un texto indicando que su importancia es mayor que la del resto del texto. La etiqueta <strong> indica que un determinado texto es de la mayor importancia dentro de la pgina

21

Etiquetas <ins> y <del>

La etiqueta <ins> define un texto en subrayado. La etiqueta <del> define un texto en tachado.

22

Etiquetas <p> y <br>

La etiqueta <p> define un bloque de prrafo. La etiqueta <br> define un salto de lnea.

http://www.hdlive09.co.uk/

23

continuacin

24

Etiqueta <hr>
La etiqueta <hr> define una linea horizontal.

http://www.awwwards.com/

25

continuacin

26

Etiqueta <pre>
La etiqueta <pre> define un texto preformateado.

27

Etiqueta <blockquote>
La etiqueta <blockquote> sirve para poder dar formato con sangra a un prrafo.

28

Etiquetas <div> y <span>

Las directivas <div> y <span> son como cajas vacas que llenamos de contenido. La directiva <div> agrupa el contenido en un bloque mientras <span> aparece entre lneas, como parte de un prrafo.

29

Cuando debo usar span?

Hay varios usos en cuanto a la implementacin de la etiqueta span, por ejemplo: 1. Edicin de frases en prrafos: a veces queremos aplicar estilos a frases especficas de un prrafo o texto, por ejemplo: 2. Creacin de botones: esta es una buena idea, usar span para poder dar un padding a un enlace, creando el efecto de botn 3. Agrupar diferentes elementos en una lnea: Por ejemplo, aunque no es tan comn, podemos definir y acomodar elementos como imgenes, textos o enlaces en una sola lnea, aplicar estilos para cada uno de ellos, y mostrarlos en lnea sin que salten de una lnea a otra, esto ayuda a tener una alineacin buena y no tener contenido desalineado.

Fuente: http://www.vidamrr.com/2011/04/aprendiendo-html-diferencias-entre-div.html

30

continuacin

http://www.petitpraline.com.br/

31

Cuando debo usar Div?

1. Maquetacin web: para crear la estructura de tu sitio web, al poder contener todos los elementos es fcil crear la forma que va a tener tu sitio usando hojas de estilo. 2. Crear contenido flotante: es la mejor opcin si quieres crear un men, imagen o algn tipo de elemento flotante ya que se ajusta muy bien a la propiedad CSS float, por lo que si ves algn elemento flotante o que se mueve es porque tiene una capa. 3. Contenedor de ms contenedores: es curioso pero puedes poner un div dentro de otro div y as sucesivamente, aunque para ello no hay que exagerar tampoco. Otros contenedores que podemos colocar con p, span y cualquier tipo de elemento HTML.

32

http://www.petitpraline.com.br/ 33

Conclusin
El objetivo de esta sesin fue identificar y aplicar las etiquetas para textos y prrafos mediante la reglas CSS. Al finalizar esta sesin podrs hacer uso de las etiquetas para textos y prrafos as mismo estars en la capacidad de crear tus propios colores para ser implementados a una web.

34

La semntica Web enriquece el diseo y contenido en los buscadores de una web y es un punto a tomar en cuenta en los estndares de calidad.

35

Links de referencia
http://www.ideaschicago.com/como-elegir-los-colores-para-un-sitio-web/ http://anibaldesigns.com/2010/10/02/psicologia-del-color-en-productosy-marcas/ *** http://www.smashingapps.com/2009/12/17/50-best-free-tools-to-createperfect-color-combinations.html http://www.hongkiat.com/blog/best-color-tools-for-web-designers/ http://www.bookmarkbliss.com/tools/bookmark-bliss-10-tools-to-helpyou-select-a-web-20-color-palette/

36