Diferencias entre CSS y CSS3

¿Que es CSS?

Hojas de Estilo en Cascada (Cascading Style Sheets), es un mecanismo simple que describe cómo se va a mostrar un documento en la pantalla, o cómo se va a imprimir, o incluso cómo va a ser pronunciada la información presente en ese documento a través de un dispositivo de lectura. Esta forma de descripción de estilos ofrece a los desarrolladores el control total sobre estilo y formato de sus documentos.

¿Que es CSS3?

CSS3 es la última evolución del lenguaje de las Hojas de Estilo en Cascada (Cascading Style Sheets), y pretende ampliar la versión CSS2.1. Trae consigo muchas novedades altamente esperadas , como las esquinas redondeadas, sombras, gradientes , transiciones o animaciones, y nuevos layouts como multi-columnas, cajas flexibles o maquetas de diseño en cuadrícula (grid layouts).

Las partes experimentales son particulares para cada navegador y deberían ser evitadas en entornos de producción, o usadas con extrema precaución, ya que tanto la sintaxis como la semántica pueden cambiar en el futuro.

Diferencias

• CSS3 funciona con modulos mientras que el CSS no lo hace , eso permite que sean compatibles.
• CSS3 ahorra mucho tiempo ya que no se necesita de otros programas para ciertos efectos.
• CSS3 carga mucho mas rapido en la web.
• CSS usa imagenes para lograr bordes mientras que CSS3 lo hace sin ellas
• CSS3 posee nuevas propiedades
• Define mejor el comportamiento de los medios y de caracteristicas concretas
• CSS es mas estable ya que tiene mas tiempo en la web
• Mejor soporte con los medios 
• CSS3 tiene un soporte inestable aun

etiquetas y usos en tablas

ETIQUETAS Y SUS USOS

CÓDIGO :

PANTONE

PANTONE

Pantone, propiamente dicho, es una corporación/empresa norteamericana creadora del Pantone Matching System (PMS), un sistema que permite identificar colores para impresión por medio de un código determinado, en otras palabras, es un sistema propietario de igualación de colores.

Pantone produce las internacionalmente conocidas Guías Pantone (o también llamadas, Cartas Pantone”, que no son otra cosa más que tiras de papel-cartón de determinado gramaje y textura (coated, uncoated) con la impresión de una muestra de color, su nombre y formulas para obtenerlo (en porcentajes, gramos, etc), pero, ¿por qué son tan mencionadas y socorridas en el mundo del diseño?

Hay varias razones, pero la más importante es que estas guías, te permiten, independientemente del sistema operativo que uses, monitor o pantalla, programa de edición de imágenes o de gráficos vectoriales de tu preferencia, tomando en cuenta que las pantallas muestran el color en modo RGB, que el color de salida en impresión sea el correcto, ya sea en Plotter o en Offset o en Offset digital, lo cual permite que siempre veamos el mismo amarillo de McDonald’s o el rojo de Coca-Cola (en CMYK).

¿POR QUE SE DEBE USAR?

Para empezar, partamos de la siguiente problemática: ¿Cómo explicar a la imprenta de forma exacta y precisa qué color queremos que impriman en nuestros artículos promocionales?

Evidentemente, podemos enviar por e-mail una imagen, pero nunca los colores serán iguales porque éstos no se visualizan de igual forma en cada pantalla. Cada pantalla o monitor de ordenador es diferente, las impresoras también son distintas, y aunque el equipo esté calibrado con tinta PANTONE, lo que se percibe en la pantalla no será totalmente exacto porque contiene numerosos matices.

Es por esto que se han creado los colores PANTONE. Se trata, ni más ni menos, de un código para identificar los colores a fin de facilitar la comunicación e impedir que se cometan errores. Así, cuando digamos a nuestro impresor: “quiero imprimir en color rosa 1767C”, podemos estar absolutamente seguro que el resultado será justo el que deseamos. O cuando nuestro cliente nos diga: “el fondo del dibujo es de color verde” podremos mostrarle los colores PANTONE para que escoja el tono exacto en el que está pensando.

COLORES PANTONE : TODOS LOS COLORES PANTONE ESTAN CONSIGNADOS ES EL SIGUIENTE LINK : http://www.instaladoresonline.com/colores_pantone.html

MAS INFORMACION EN :https://dpublicitario.wordpress.com/2009/11/24/%C2%BFque-es-pantone-y-por-que-se-utiliza/

RGB Y CMYK

RGB

Este espacio de color es el formado por los colores primarios luz, Rojo, Verde y Azul. De hecho, RGB son las siglas en inglés de los colores Red, Green y Blue. Este sistema es el más adecuado para representar imágenes que serán mostradas en monitores y que, finalmente, serán impresas en impresoras de papel fotográfico.

Las imágenes RGB utilizan tres colores para reproducir en pantalla hasta 16,7 millones de colores. RGB es el modo por defecto para las imágenes de Photoshop y, por lo general, el modo en el que vienen nuestras cámaras de fotos aunque ambos perfiles pueden cambiarse.

Los monitores de ordenador muestran los colores con el modelo RGB lo que significa que al trabajar con imágenes que tengan un modo de color diferente Photoshop preguntará qué perfil de color queremos utilizar para convertir temporalmente los datos a RGB para su correcta visualización.

El modo RGB asigna un valor de intensidad a cada píxel que oscila entre 0 (negro) y 255 (blanco) para cada uno de los componentes RGB de una imagen en color. Por ejemplo, un color rojo brillante podría tener un valor R de 246, un valor G de 20 y un valor B de 50. El rojo más brillante que se puede conseguir es el R: 255, G: 0, B: 0.

Cuando los valores de los tres componentes son idénticos, se obtiene un matiz de gris. Si el valor de todos los componentes es de 255, el resultado será blanco puro y será negro puro si todos los componentes tienen un valor 0. Este espacio de color tiene su representación en el selector de color de Photoshop.

color rojo = (#FF0000)

color amarillo = (#FFFF00)

color azul = (#0033CC)

CMYK

Los colores del modo CMYK son los que se corresponden con los colores primarios luz, es decir, con el cyan, el magenta, el amarillo al que se le suma el color negro. Este modelo se basa en la cualidad de absorber y rechazar luz de los objetos. Si un objeto es rojo esto significa que el mismo absorbe todas las longitudes de onda componentes de la luz exceptuando la componente roja. Los colores sustractivos (CMY) y los aditivos (RGB) son colores complementarios. Cada par de colores sustractivos crea un color aditivo y viceversa.

En el modo CMYK de Photoshop, a cada píxel se le asigna un valor de porcentaje para las tintas de cuatricromía. Los colores más claros (iluminados) tienen un porcentaje pequeño de tinta, mientras que los más oscuros (sombras) tienen porcentajes mayores.

Por ejemplo, un rojo brillante podría tener 2% de cyan, 93% de magenta, 90% de amarillo y 0% de negro.

En las imágenes CMYK, el blanco puro se genera si los cuatro componentes tienen valores del 0%. Se utiliza el modo CMYK en la preparación de imágenes que se van a imprimir en cualquier sistema de impresión de tintas. Aunque CMYK es un modelo de color estándar, puede variar el rango exacto de los colores representados, dependiendo de la imprenta y las condiciones de impresión.

mas contenido en : http://www.fotonostra.com/grafico/rgb.htm

TEORÍA DEL COLOR EN DISEÑO WEB

TEORÍA DEL COLOR

Sin mucho color ni gráficos, cualquier web se convertiría en el sueño de Jakob Nielsen. Aunque la filosofía de Nielsen de arquitectura web esencial tiene las ventajas de la accesibilidad y usabilidad, la mayoría de los diseñadores web quieren añadir un toque personal a sus webs con muchos elementos de diseño. Afortunadamente, un diseñador puede añadir color a una web sin perder accesibilidad y usabilidad si la web está diseñada teniendo en cuenta estas capacidades. Aunque muchos diseñadores se sienten cómodos diseñando una web para muchos usuarios, estos mismos diseñadores se pueden sentir incompetentes cuando se trata de elegir colores y gráficos.

En este apartado, trataremos los conceptos básicos del color y tres combinaciones cromáticas sencillas para que os podáis sentir seguros a la hora de elegir los colores para vuestra web. Continuaremos este apartado con otra parte sobre cómo simplificar estas selecciones de colores. Al fin y al cabo, es más divertido disfrutar de los cumplidos sobre el diseño de la web que sudar a la hora de elegir las opciones de colores.

Colores, tonos y matices

Los colores, o tonos, se han dividido tradicionalmente en colores primarios, secundarios y terciarios. Loscolores primarios son el rojo, el amarillo y el azul, y se denominan primarios porque no hay que mezclar colores para conseguirlos. Si queréis traducir estos colores en colores web, podéis reproducirlos utilizando sus equivalentes hex (hexadecimales) #ff0000, #ffff00 y #0033cc.

Los colores secundarios se mezclan a partir de los colores primarios, y son los siguientes:

• Rojo + amarillo = naranja (#ff9900)
• Amarillo + azul = verde (#00cc00)
• Azul + rojo = violeta (#660099)

Los colores terciarios se mezclan a partir de los colores secundarios y se encuentran entre los colores primarios y secundarios mostrados en la rueda anterior.

Los colores terciarios se mezclan a partir de los colores secundarios y se encuentran entre los colores primarios y secundarios mostrados en la rueda anterior.

Aunque los colores web son diferentes de los colores normales "de los pintores", puede ser útil tener una rueda de colores (como la que se ve en la figura 2) y tenerla a mano mientras aprendéis las diferentes combinaciones de colores. Además, una rueda de colores os mostrará todos los colores, tonos y matices para empezar a ver las posibilidades de colores de las que disponéis. A continuación, se enumeran algunos términos importantes que hay que aprender:

• Tono (tint): el color resultante cuando se añade blanco.
• Tonalidad (tone): el color resultante cuando se añade gris.
• Matiz (shade): el color resultante cuando se añade negro.

Las flechas de la figura 2 indican cosas diferentes, a saber:

• Lado más exterior: color terciario de amarillo naranja (amarillo + naranja).
• Segundo lado: tono de este color terciario (blanco añadido).
• Tercer lado: tonalidad del color (gris añadido).
• Lado más interior: matiz sobre la rueda imprimida (negro añadido).

Como se puede ver en la rueda de colores anterior, la cantidad de blanco, gris y negro añadido a un color es mínima, pero suficiente para alterar el color original y crear lo que se conoce como combinación de colores monocromática.

Combinaciones de colores monocromáticas

Las combinaciones de colores existen desde hace siglos, de manera que no hay que reinventar la rueda de colores. Aunque el color de la web sea diferente del color imprimido, los conceptos son los mismos. Sólo es necesario cambiar los números hexadecimales por nombres de colores y hacer que coincidan lo máximo posible. Una herramienta de la Red que recomendamos para esta tarea es Color Scheme Generator II.

Combinaciones de colores complementarios

La siguiente familia de combinaciones de colores que cabe descubrir es la combinación de complementarios, donde se emparejan los colores que se encuentran directamente opuestos entre ellos en la rueda de colores, como se puede ver en la siguiente imagen.

 Colores cálidos y colores fríos

Las combinaciones de colores complementarios son geniales para utilizarlas en las webs porque contienen colores cálidos y fríos al mismo tiempo. El uso de estos colores proporciona contraste y es muy fácil recordar qué colores son cálidos y qué colores son fríos, como se puede ver en la siguiente imagen.

 Combinaciones de colores triádicas

Una combinación de colores triádica se crea eligiendo un color y después eligiendo dos colores más equidistantes entre ellos en torno al círculo, así:

Combinaciones de colores tetrádicas

Cuantos más colores elijáis, más complicada será la combinación de colores. No obstante, un truco es encontrar un tono, tonalidad o matiz y limitarse a estas zonas del tablero en vez de mezclar colores puros y sus tonos, tonalidades y matices. Este método funciona bien con una combinación de colores como la combinación tetrádica de cuatro colores. Esta combinación es casi igual que la combinación complementaria, con la diferencia de que se utilizan dos complementarios equidistantes.

mas contenido en: http://mosaic.uoc.edu/ac/le/es/m2/ud3/ 

TABLA Y LISTA EN HTML

Aca les muestro la tabla y la lista hecha con codigo html

lo que hice fuela siguiente:

<!DOCTYPE HTML PUBLIC>
<html>
<meta charset="utf-8">
<head>
<title>tabla y lista</title>
</head>
<body>
<center><h1>lista y tabla html</h1></center>
<br>
<br>
<br>
<table border="1">
<tr><th align="center" colspan="50">Titulo</th></tr>
<tr>
<th>Nombre</th><td>Cristan David</td><th colspan="2">Apellido</th><td colspan="2">Diaz Romero</td>
</tr>
<tr>
<th>Cedula</th><td>1032475837</td><th>Curso</th><td>Introduccion Web y Multimedia</td><th>facultad</th><td>Ingenieria De Sistemas</td>
</tr>
<tr>
<td colspan="6"><ol>
<li type="disc">descripcion</li>
</ol>
<dl>
<dt>aficiones</dt>
<dd>jugar</dd>
<dd>comer</dd>
<dd>deportes</dd>
</dl>
</td>
</tr>
</table>
</body>
</html>
como podemos ver usa etiqueta table con etiqueta th y td para titulos y texto , use atributos colspan border y align para acomodar las cosas

ya el resto solo es abrir y cerrar etiquetas el oreden mientras se cierren no afectan el resultado

use etiquetas ol y dl para las listas una corta lista donde use ol para el titulo descripcion , y la etiqueta dl para las aficinoes y las distintas aficiones que tengo.

cerre las etiquetas principales y haci hicimos nuestra primera tabla.

LISTAS EN HTML

Con frecuencia se usan listas en los documentos. El lenguaje HTML incorpora unas listas con viñetas sencillas o también letras o números. Para dar más vistosidad a las páginas, se suelen emplear también imágenes que se colocan delante de cada párrafo. Vamos a ver algunas de las posibilidades que tenemos.

 Listas con viñetas desordenadas

He aquí el ejemplo más sencillo de una de estas listas:

escribimos en html	se verá como
<ul> <li>Primer término de la lista <li>Segundo término <li>Tercer término </ul>	Primer término de la lista Segundo término Tercer término

Como ves, la lista se declara con la etiqueta <UL> y finaliza con el cierre de la misma </UL>. También podemos modificar las viñetas por medio del atributo TYPE= circle, disc o square (círculo, disco o cuadrado) y añadir sublistas.

escribimos en html	se verá como
<ul> <li type= disc>Primer término de la lista <ul> <li>Sublista <li>Otro elemento </ul> <li type=circle>Segundo término <li type=square>Tercer término </ul>	Primer término de la lista Sublista Otro elemento Segundo término Tercer término

Otro atributo interesante es compact para reducir el espacio entre los elementos

 Listas con viñetas ordenadas

Estas listas se caracterizan porque aparecen números o ciertos caracteres que ordenan sus elementos. La etiqueta usada es <OL> junto con su correspondiente de cierre </OL>. El atributo TYPEtoma ahora los valores 1, a, A, i, I. Un ejemplo de estas listas es el siguiente

escribimos en html	se verá como
<ol type=i> <li >Primer término de la lista <li >Segundo término <li>Tercer término <li>Cuarto <li>Quinto </ol>	Primer término de la lista Segundo término Tercer término Cuarto Quinto

 Listas de definición

Estas listas se forman con el elemento que se define y su definición. Las etiquetas son <DL> y </DL> para la lista y <dt> y <dd> para los elementos y sus definiciones. Un ejemplo:

escribimos en html	se verá como
<dl> <dt >Término 1º <dd>Definición del elemento 1º <dt>Término 2º <dd>Definición del elemento 2º <dt>Término 3º <dd>Definición del elemento 3º </dl>	Término 1º Definición del elemento 1º Término 2º Definición del elemento 2º Término 3º Definición del elemento 3º

bibliografia:
http://platea.pntic.mec.es/~abercian/guiahtml/listas.htm