lunes, 4 de mayo de 2015

COLORES HEXADECIMALES



Códigos de colores HTML
El sitio web Códigos de colores HTML le proporciona herramientas gratuitas de colores para encontrar colores HTML para su sitio web. Las excelentes herramientas Tabla de colores HTML y Selector de colores HTML harán que esta tarea sea pan comido.
Para empezar rápidamente a usar Colores HTML en su sitio web, échele un vistazo a ¿Cómo usar los códigos de colores HTML?. Si desea aprender qué significa realmente esta combinación de caracteres en Códigos de colores HTML échele un vistazo a la sección Teoría sobre los códigos de colores HTML.
Colores seguros para la Web es la lista de colores que se ven igual en todos los sistemas operativos. Si es daltónico consulte los Nombres de colores HTML para superar ese problema.
Tabla de colores HTML
Con esta Tabla de colores HTML dinámica puede conseguir códigos HTML para los colores básicos. Haga clic en cualquier cuadro de color para conseguir su Código de color HTML. A continuación hay una lista de los colores seleccionados recientemente. Para guardar un color HTML para una próxima visita haga clic en su chincheta.





















































































































































































































































































































































































Selector de colores HTML
Desplace la barra de desplazamiento vertical para elegir el color y después haga clic en el cuadro de colores a la izquierda para conseguir el Código de color HTML para elegir el tono de color deseado.
Puede empezar con su propio color escribiendo su código de color en el campo de entrada superior.


¿Cómo usar los códigos de colores HTML?
Con los Códigos de colores HTML puede establecer el color de fondo del sitio web, el color del texto, de las celdas en las tablas y mucho más.
Usar los códigos de colores HTML para el color de fondo del sitio web:
<body style="background:#80BFFF">

Usar los códigos de colores HTML para configurar el color de la fuente/texto:
<span style="color:#80BFFF">

Usar los códigos de colores HTML para el color de fondo de las tablas:
<table style="background:#80BFFF">

Usar los códigos de colores HTML para los colores de los enlaces:
<a style="color:#80BFFF">

Teoría sobre los códigos de colores HTML
Seguramente se está preguntando: « ¿Tiene algún significado esta extraña combinación de letras y números?» Pues la respuesta es «Sí» y así es como funciona:)

Formato de los códigos HTML:
Cada código HTML comprende el símbolo «#» y 6 letras o números. Estos números se expresan en el sistema de numeración hexadecimal. Por ejemplo «FF» en hexadecimal representa el número 255 en Decimal.

Significado de los símbolos:
Significado de los símbolos: Los dos primeros símbolos del código de color HTML representan la intensidad del color rojo. 00 es el menos intenso y FF es el más intenso. El tercer y el cuarto número representan la intensidad del verde y el quinto y el sexto representan la intensidad del azul. Así, con esta combinación de la intensidad del rojo, verde y azul podemos mezclar cualquier color que deseemos de corazón;)

Ejemplos:
#FF0000 - Con este código HTML le decimos al navegador que muestre la máxima cantidad de rojo y nada de verde ni de azul. El resultado es evidentemente el color rojo puro:     


#00FF00 - Este código HTML muestra solo el verde y nada de rojo ni de azul. El resultado es:     

#0000FF - Este código HTML muestra solo el azul y nada de rojo ni de verde. El resultado es:     

#FFFF00 - Con la combinación de color rojo y verde obtenemos el amarillo:     

#CCEEFF - Cogemos un poco de rojo, un poco más de verde y el máximo de azul para obtener el color del cielo:     

RGB



Modelo aditivo de colores rojo, verde, azul.
RGB (sigla en inglés de red, green, blue, en español «rojo, verde y azul») o RVA (sigla preferida por la ASALE y la RAE) es la composición del color en términos de la intensidad de los colores primarios de la luz.

Modelo de color RGB

RGB es un modelo de color basado en la síntesis aditiva, con el que es posible representar un color mediante la mezcla por adición de los tres colores de luz primarios. El modelo de color RGB no define por sí mismo lo que significa exactamente rojo, verde o azul, por lo que los mismos valores RGB pueden mostrar colores notablemente diferentes en diferentes dispositivos que usen este modelo de color. Aunque utilicen un mismo modelo de color, sus espacios de color pueden variar considerablemente.

Percepción y sensación de color

Los ojos humanos tienen dos tipos de células sensibles a la luz o fotorreceptores: los bastones y los conos. Estos últimos son los encargados de aportar la información de color.
Para saber cómo es percibido un color, hay que tener en cuenta que existen tres tipos de conos con respuestas frecuenciales diferentes, y que tienen máxima sensibilidad a los colores que forman la terna RGB. Aunque los conos, que reciben información del verde y el rojo, tienen una curva de sensibilidad similar, la respuesta al color azul es una veinteava (1/20) parte de la respuesta a los otros dos colores. Este hecho lo aprovechan algunos sistemas de codificación de imagen y vídeo, como el JPEG o el MPEG, "perdiendo" de manera consciente más información de la componente azul, ya que el ser humano no percibe esta pérdida.
La sensación de color se puede definir como la respuesta de cada una de las curvas de sensibilidad al espectro radiado por el objeto observado. De esta manera, obtenemos tres respuestas diferentes, una por cada color.
El hecho de que la sensación de color se obtenga de este modo, hace que dos objetos observados, radiando un espectro diferente, puedan producir la misma sensación. Y en esta limitación de la visión humana se basa el modelo de síntesis del color, mediante el cual podemos obtener a partir de estímulos visuales estudiados y con una mezcla de los tres colores primarios, el color de un objeto con un espectro determinado.

Tratamiento de la señal de vídeo RGB

RGB es el tratamiento de la señal de vídeo que trata por separado las señales de los tres colores rojo, verde y azul. Al usarlo independientemente, proporciona mayor calidad y reproducción más fiel del color.

Visión general

El modelo de color llamado RGB es el que se utiliza en todos los sistemas que forman imágenes a través de rayos luminosos, ya sea emitiéndolos o recibiéndolos.
El modelo RGB está formado por los tres componentes de colores primarios aditivos y como mínimo un componente de sincronismo. Los componentes de color son las señales rojo, verde y azul; siendo transmitidos cada uno independiente y aislado del resto.
De esta forma no hay pérdidas en el tratamiento de la imagen puesto que los colores primarios siguen existiendo como tal en su transmisión. Por el contrario, mediante este sistema hay mucha información redundante, con el consiguiente aumento del ancho de banda necesario respecto a otros métodos de transmisión. Por ejemplo, cada color lleva el valor de brillo de toda la imagen, de forma que esta información está por triplicado.

Emisores RGB

Unos sistemas (los que emiten rayos luminosos) forman las imágenes bien a través de tubos de rayos catódicos (TV, monitores, proyectores de vídeo, etc.), a través de LED (diodos luminosos) o sistemas de Plasma (TV, monitores, etc.).

Señal de luminancia

La sensación de luminosidad viene dada por el brillo de un objeto y por su opacidad, pudiendo producir dos objetos con tonalidades y prismas diferentes la misma sensación lumínica. La señal de luminancia es la cuantificación de esa sensación de brillo. Para mantener la compatibilidad entre las imágenes en blanco y negro y las imágenes en color, los sistemas de televisión actuales (PAL, NTSC, SECAM) transmiten tres informaciones: la luminancia y dos señales diferencia de color.
De esta manera, los antiguos modelos en blanco y negro pueden obviar la información relativa al color, y reproducir solamente la luminancia, es decir, el brillo de cada píxel aplicado a una imagen en escala de grises. Y las televisiones en color obtienen la información de las tres componentes RGB a partir de una matriz que relaciona cada componente con una de las señales diferencia de color.
Para cada uno de los sistemas de televisión se transmiten de diferente manera, motivo por el cual podemos tener problemas al reproducir una señal NTSC en un sistema de reproducción PAL.

Señal de sincronismo

La señal de sincronismo es necesaria para poder marcar la pauta de guiado de la muestra de colores en pantalla, tanto en el sentido horizontal (el avance de la línea de imagen), como en sentido vertical (el salto a una nueva línea de imagen).
El sincronismo puede transmitirse principalmente de tres formas:
  • Sincronismos separados (RGBHV): Mediante este método existe una señal para el sincronismo horizontal HSync y otra señal para el sincronismo vertical VSync, ambas independientes entre sí y entre las señales de colores, teniendo en total 5 señales en la transmisión.
  • Sincronismo compuesto (RGBS): Mediante este método existe una señal con toda la información del sincronismo horizontal y vertical, independiente entre las señales de colores, teniendo en total 4 señales en la transmisión.
  • Sincronismo en verde (RGsB o SoG -Sync on Green-): Mediante este método existe una señal con toda la información del sincronismo horizontal y vertical multiplexada junto con la señal de color verde, teniendo en total 3 señales en la transmisión.
Nótese que este modelo existe solamente en pantallas y combinaciones de luz. No se aplica a los pigmentos (pintura), a los que corresponde el modo sustractivo de luz.1

Receptores RGB

Los sistemas que reciben y capturan luz (capturan las imágenes) son las cámaras digitales de fotografía y vídeo, los escáneres, etc. Gracias al establecimiento de este modelo de color, ha sido posible la creación de todos estos sistemas de emisión y recepción de imágenes. Sin embargo, algunos valores (intensidad de brillo) no pueden ser obtenidos por este método.

Uso de RGB en HTML y en lenguajes de programación

Para indicar con qué proporción es mezclado cada color, se asigna un valor a cada uno de los colores primarios, de manera que el valor "0" significa que no interviene en la mezcla y, a medida que ese valor aumenta, se entiende que aporta más intensidad a la mezcla. Aunque el intervalo de valores podría ser cualquiera (valores reales entre 0 y 1, valores enteros entre 0 y 37, etc.), es frecuente que cada color primario se codifique con un byte (8 bits).
Así, de manera usual, la intensidad de cada una de las componentes se mide según una escala que va del 0 al 255 y cada color es definido por un conjunto de valores escritos entre paréntesis (correspondientes a valores "R", "G" y "B") y separados por comas.

Cubo RGB.
De este modo, el rojo se obtiene con (255,0,0), el verde con (0,255,0) y el azul con (0,0,255), obteniendo, en cada caso un color resultante monocromático. La ausencia de color, es decir el color negro, se obtiene cuando las tres componentes son 0: (0,0,0). La combinación de dos colores a su máximo valor de 255 con un tercero con valor 0 da lugar a tres colores intermedios. De esta forma, aparecen los colores amarillo (255,255,0), cian (0,255,255) y magenta (255,0,255). El color blanco se forma con los tres colores primarios a su máximo valor (255,255,255).
El conjunto de todos los colores también se puede representar en forma de cubo. Cada color es un punto de la superficie o del interior de éste. La escala de grises estaría situada en la diagonal que une al color blanco con el negro.

HTML

En las pantallas, la sensación de color se produce por la mezcla aditiva de rojo, verde y azul. Las pantallas se dividen en puntos minúsculos llamados píxeles formados por tres subpíxeles de colores primarios de luz, cada uno de los cuales brilla con una determinada intensidad.
Al principio, la limitación en la profundidad de color de la mayoría de los monitores condujo a una gama limitada a 216 colores, definidos por el cubo de color, mediante la fórmula 63=216. No obstante, el predominio de los monitores de 24-bit (resultante de 224), posibilitó el uso de 16,7 millones de colores del espacio de color HTML RGB.
La gama de colores de la Web consiste en 216 combinaciones de rojo, verde y azul, donde cada color puede tomar un valor entre seis diferentes (en numeración hexadecimal): #00, #33, #66, #99, #CC o #FF, cuyos valores respectivos en sistema decimal equivalen a 0, 51, 102, 153, 204 y 255, que tienen un porcentaje de intensidad de 0%, 20%, 40%, 60%, 80% y 100%, respectivamente. Esto nos permite dividir los 216 colores en un cubo de dimensión 6.
Se procura que los píxeles sean de un color tal que cuanto más saturado sea, será mejor, pero nunca se trata de un color absolutamente puro. Por tanto la producción de colores con este sistema tiene limitaciones:
·         La derivada del funcionamiento de las mezclas aditivas: sólo pueden ser obtenidos los colores interiores del triángulo formado por los tres colores primarios de luz.
·         La derivada del hecho que los colores primarios usados no son absolutamente monocromáticos.
·         Las diversas pantallas no son iguales exactamente, además de ser configurables por los usuarios, con lo cual varios parámetros pueden variar.
Esto implica que las codificaciones de los colores destinadas a las pantallas se deben interpretar como descripciones relativas, y entender la precisión de acuerdo con las características de la pantalla.

Codificación hexadecimal del color


Colores de la CIE.
La codificación dodecadecimal del color permite expresar fácilmente un color concreto de la escala RGB, utilizando la notación hexadecimal, como en el lenguaje HTML y en JavaScript. Este sistema utiliza la combinación de tres códigos de dos dígitos para expresar las diferentes intensidades de los colores primarios RGB .
El blanco y el negro
Negro
#000000
Los tres canales están al mínimo 00, 00 y 00
Blanco
#FFFFFF
Los tres canales están al máximo FF, FF y FF
En el sistema de numeración hexadecimal, además de los números del 0 al 9 se utilizan seis letras con un valor numérico equivalente; a=10, b=11, c=12, d=13, e=14 y f=15. La correspondencia entre la numeración hexadecimal y la decimal u ordinaria viene dada por la siguiente fórmula:
decimal = primera cifra hexadecimal * 16 + segunda cifra hexadecimal
La intensidad máxima es ff, que se corresponde con (15*16)+15= 255 en decimal, y la nula es 00, también 0 en decimal. De esta manera, cualquier color queda definido por tres pares de dígitos.
Los tres colores básicos
Rojo
#ff0000
El canal de rojo está al máximo y los otros dos al mínimo
Verde
#00ff00
El canal del verde está al máximo y los otros dos al mínimo
Azul
#0000ff
El canal del azul está al máximo y los otros dos al mínimo

Las combinaciones básicas
Amarillo
#ffff00
Los canales rojo y verde están al máximo
Cian
#00ffff
Los canales azul y verde están al máximo
Magenta
#ff00ff
Los canales rojo y azul están al máximo
Gris claro
#D0D0D0
Los tres canales tienen la misma intensidad
Gris oscuro
#5e5e5e
Los tres canales tienen la misma intensidad
A partir de aquí se puede hacer cualquier combinación de los tres colores.
Colores definidos por la especificación HTML 4.01
Color
Hexadecimal
Color
Hexadecimal
Color
Hexadecimal
Color
Hexadecimal
cyan
#00ffff
black
#000000
blue
#0000ff
fucsia
#ff00ff
gray
#808080
green
#008000
lime
#00ff00
maroon
#800000
navy
#000080
olive
#808000
purple
#800080
red
#ff0000
silver
#c0c0c0
teal
#008080
white
#ffffff
yellow
#ffff00

Los colores más saturados y los más luminosos


esquema CIE.
Supongamos tres fuentes luminosas, r, g y b, de las características indicadas en el gráfico adjunto:
Cualquier color que se pueda obtener a partir de esos tres colores primarios tendrá la forma:
(ir, ig, ib)
donde ir, ig y ib son los coeficientes de las intensidades correspondientes a cada color primario.
Si situamos los colores obtenidos en el gráfico, tenemos que:
·         Si dos de los coeficientes son nulos, el color se sitúa en el vértice correspondiente al color de coeficiente no nulo.
·         Si un coeficiente es nulo, el color se sitúa en uno de los lados del triángulo: el conjunto de todos ellos son los colores más saturados.
·         Si ninguno de los coeficientes es nulo, el color se sitúa en un punto del interior; cuanto más parecidos sean los tres coeficientes, más cerca estará del blanco (en el centro).
Al representar combinaciones de tres valores independientes en un diagrama que sólo tiene dos, resulta que a cada punto del diagrama le corresponde toda una familia de colores. Por ejemplo, los siguientes colores tienen la misma proporción de rojo, verde y azul, y por tanto les corresponde el mismo punto del gráfico. Sólo se diferencian en la intensidad.
Variación de las intensidades
100, 50, 0
#643200
Marrón oscuro
200, 100, 0
#c86400
Marrón claro
150, 75, 0
#964b00
Marrón
Si las intensidades ir, ig y ib tienen un límite superior (255), la condición necesaria y suficiente para que un color sea el más intenso de la familia (es decir, de los representados por el mismo punto) es que al menos uno de sus coeficientes sea 255.
Los colores que presentan la máxima saturación y la máxima luminosidad a la vez, son los que reúnen dos requisitos: al menos uno de los coeficientes es 255 y al menos uno de los coeficientes es 0. De esto se deduce que los colores más saturados y más luminosos siguen la siguiente secuencia:
amarillo
(255,255,0)
verde
(0,255,0)
cian
(0,255,255)
rojo
(255,0,0)
RGBR.png
azul
(0,0,255)

rojo
(255,0,0)
magenta
(255,0,255)
enlaces de interes
Esta es una lista de enlaces que son de utilidad a la hora de crear plugins.
Por mi parte, me sirve bastante el regex tester y el IEEE 754.

simplificación
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.
Los contenidos de este apartado son los siguientes:
Publicado por en No hay comentarios:

martes, 28 de abril de 2015

LOREM IPSUM

HISTORIA  DE LOREM IPSUM

Siguiendo la línea del último post me ha parecido interesante hacer una breve introducción a la historia de Lorem Ipsum la cual es una gran desconocida para mucha gente. Lorem Ipsum es usado ampliamente en el mundo editorial, el diseño gráfico y el diseño web.
Es un marcador de texto o texto de relleno usado para demostrar los elementos gráficos de un documento visual como la tipografía, las fuentes o el maquetado. Por norma general es una sección en Latín del texto de la obra Cicerón De finibus bonorum et malorum escrito en el año 45 a.C con algunas palabras o letras eliminadas para eliminar su sentido.
En contra del ideario popular, Lorem Ipsum no tiene ningún tipo de sentido en Latín clásico y nunca ha tenido intención de tenerlo. Aunque no es un texto excesivamente largo, ha servido incluso para maquetar libros completos sin tan siquiera repetir un párrrafo al combinar sus palabras.

Detrás de Lorem Ipsum

Aunque durante mucho tiempo se ha pensado que el texto eran palabras aleatorias en latín, Richard McClintock profesor de latín en Hampden-Sydney, Virginia investigó la palabra menos común del texto, consectetur y descubrió que Lorem Ipsum es latín ofuscado proveniente sin duda del pasaje 1.10.32 y 1.10.33 del texto de Cicerón De finibus bonorum et malorum (Sobre los límites del bien y del mal). El libro fue muy popular durante el Renacimiento. La primera línea de Lorem Ipsum “Lorem ipsum dolor sit amet…“, viene de una linea de la sección 1.10.32 que dice:
Sed ut perspiciatis, unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam eaque ipsa, quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt, explicabo. Nemo enim ipsam voluptatem, quia voluptas sit, aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos, qui ratione voluptatem sequi nesciunt, neque porro quisquam est, qui dolorem ipsum, quia dolor sit amet, consectetur, adipisci[ng] velit, sed quia non numquam [do] eius modi tempora inci[di]dunt, ut labore et dolore magnam aliquam quaerat voluptatem. Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur? Quis autem vel eum iure reprehenderit, qui in ea voluptate velit esse, quam nihil molestiae consequatur, vel illum, qui dolorem eum fugiat, quo voluptas nulla pariatur?
Mientras que el resto del texto viene de la sección 1.10.33:
At vero eos et accusamus et iusto odio dignissimos ducimus, qui blanditiis praesentium voluptatum deleniti atque corrupti, quos dolores et quas molestias excepturi sint, obcaecati cupiditate non provident, similique sunt in culpa, qui officia deserunt mollitia animi, id est laborum et dolorum fuga. Et harum quidem rerum facilis est et expedita distinctio. Nam libero tempore, cum soluta nobis est eligendi optio, cumque nihil impedit, quo minus id, quod maxime placeat, facere possimus, omnis voluptas assumenda est, omnis dolor repellendus. Temporibus autem quibusdam et aut officiis debitis aut rerum necessitatibus saepe eveniet, ut et voluptates repudiandae sint et molestiae non recusandae. Itaque earum rerum hic tenetur a sapiente delectus, ut aut reiciendis voluptatibus maiores alias consequatur aut perferendis doloribus asperiores repellat…
En ambos párrafos puede leerse en negrita las palabras que componen el texto definitivo de Lorem Ipsum:

“Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
El texto que conforma Lorem Ipsum lleva usándose como estándar de maquetación desde principios del siglo XVI cuando algún encuadernador/creador de libros usó dicho texto para hacer una especie de modelo genérico de maquetado y edición para presentar a sus posibles clientes. Lorem Ipsum ha sobrevivido letra por letra hasta nuestros días dando incluso el salto al formato digital de la mano de la Aldus Corporation que lo integraba en su PageMaker hace ya bastantes años. La búsqueda de “Lorem Ipsum” en Google produce 56.900.000 resultados, una cifra nada despreciable.
Como curiosidad comentar que Cicerón fue asesinado (decapitado) por orden de Marco Antonio (cónsul de Roma tras el asesinato de Julio Cesar) en represalia al discurso que publicó atacándole en su obra las Filípicas y que está considerado como una flagrante vulneración de la libertad de expresión.
Lorem ipsum es el texto que se usa habitualmente en diseño gráfico en demostraciones de tipografías o de borradores de diseño para probar el diseño visual antes de insertar el texto final.
Aunque no posee actualmente fuentes para justificar sus hipótesis, el profesor de filología clásica Richard McClintock asegura que su uso se remonta a los impresores de comienzos del siglo XVI.1 Su uso en algunos editores de texto muy conocidos en la actualidad ha dado al texto lorem ipsum nueva popularidad.
El texto en sí no tiene sentido, aunque no es completamente aleatorio, sino que deriva de un texto de Cicerón en lengua latina, a cuyas palabras se les han eliminado sílabas o letras. El significado del texto no tiene importancia, ya que solo es una demostración o prueba, sino que copia de la obra de Cicerón De finibus bonorum et malorum (Sobre los límites del bien y del mal) que comienza con:
Neque porro quisquam est qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit2
A pesar de estar extraído de ese escrito, el texto usado habitualmente es:
Lorem ipsum ad his scripta blandit partiendo, eum fastidii accumsan euripidis in, eum liber hendrerit an. Qui ut wisi vocibus suscipiantur, quo dicit ridens inciderint id. Quo mundi lobortis reformidans eu, legimus senserit definiebas an eos. Eu sit tincidunt incorrupte definitionem, vis mutat affert percipit cu, eirmod consectetuer signiferumque eu per. In usu latine equidem dolores. Quo no falli viris intellegam, ut fugit veritus placerat per.
Ius id vidit volumus mandamus, vide veritus democritum te nec, ei eos debet libris consulatu. No mei ferri graeco dicunt, ad cum veri accommodare. Sed at malis omnesque delicata, usu et iusto zzril meliore. Dicunt maiorum eloquentiam cum cu, sit summo dolor essent te. Ne quodsi nusquam legendos has, ea dicit voluptua eloquentiam pro, ad sit quas qualisque. Eos vocibus deserunt quaestio ei.
Blandit incorrupte quaerendum in quo, nibh impedit id vis, vel no nullam semper audiam. Ei populo graeci consulatu mei, has ea stet modus phaedrum. Inani oblique ne has, duo et veritus detraxit. Tota ludus oratio ea mel, offendit persequeris ei vim. Eos dicat oratio partem ut, id cum ignota senserit intellegat. Sit inani ubique graecis ad, quando graecis liberavisse et cum, dicit option eruditi at duo. Homero salutatus suscipiantur eum id, tamquam voluptaria expetendis ad sed, nobis feugiat similique usu ex.
Eum hinc argumentum te, no sit percipit adversarium, ne qui feugiat persecuti. Odio omnes scripserit ad est, ut vidit lorem maiestatis his, putent mandamus gloriatur ne pro. Oratio iriure rationibus ne his, ad est corrumpit splendide. Ad duo appareat moderatius, ei falli tollit denique eos. Dicant evertitur mei in, ne his deserunt perpetua sententiae, ea sea omnes similique vituperatoribus. Ex mel errem intellegebat comprehensam, vel ad tantas antiopam delicatissimi, tota ferri affert eu nec. Legere expetenda pertinacia ne pro, et pro impetus persius assueverit.
Ea mei nullam facete, omnis oratio offendit ius cu. Doming takimata repudiandae usu an, mei dicant takimata id, pri eleifend inimicus euripidis at. His vero singulis ea, quem euripidis abhorreant mei ut, et populo iriure vix. Usu ludus affert voluptaria ei, vix ea error definitiones, movet fastidii signiferumque in qui.
Vis prodesset adolescens adipiscing te, usu mazim perfecto recteque at, assum putant erroribus mea in. Vel facete imperdiet id, cum an libris luptatum perfecto, vel fabellas inciderint ut. Veri facete debitis ea vis, ut eos oratio erroribus. Sint facete perfecto no vel, vim id omnium insolens. Vel dolores perfecto pertinacia ut, te mel meis ullum dicam, eos assum facilis corpora in.
Mea te unum viderer dolores, nostrum detracto nec in, vis no partem definiebas constituam. Dicant utinam philosophia has cu, hendrerit prodesset at nam, eos an bonorum dissentiet. Has ad placerat intellegam consectetuer, no adipisci mandamus senserit pro, torquatos similique percipitur est ex. Pro ex putant deleniti repudiare, vel an aperiam sensibus suavitate. Ad vel epicurei convenire, ea soluta aliquid deserunt ius, pri in errem putant feugiat.
Sed iusto nihil populo an, ex pro novum homero cotidieque. Te utamur civibus eleifend qui, nam ei brute doming concludaturque, modo aliquam facilisi nec no. Vidisse maiestatis constituam eu his, esse pertinacia intellegam ius cu. Eos ei odio veniam, eu sumo altera adipisci eam, mea audiam prodesset persequeris ea. Ad vitae dictas vituperata sed, eum posse labore postulant id. Te eligendi principes dignissim sit, te vel dicant officiis repudiandae.
Id vel sensibus honestatis omittantur, vel cu nobis commune patrioque. In accusata definiebas qui, id tale malorum dolorem sed, solum clita phaedrum ne his. Eos mutat ullum forensibus ex, wisi perfecto urbanitas cu eam, no vis dicunt impetus. Assum novum in pri, vix an suavitate moderatius, id has reformidans referrentur. Elit inciderint omittantur duo ut, dicit democritum signiferumque eu est, ad suscipit delectus mandamus duo. An harum equidem maiestatis nec.
At has veri feugait placerat, in semper offendit praesent his. Omnium impetus facilis sed at, ex viris tincidunt ius. Unum eirmod dignissim id quo. Sit te atomorum quaerendum neglegentur, his primis tamquam et. Eu quo quot veri alienum, ea eos nullam luptatum accusamus. Ea mel causae phaedrum reprimique, at vidisse dolores ocurreret nam.
Existen múltiples variantes del texto original, algunas casi sin parecido con él. Estas versiones incluyen letras adicionales que no son comunes en latín (como la k, w y z) o palabras sin sentido como zzril, takimata y gubeergren que intentan hacer la distribución aún más parecida al inglés.

"No hay nadie que ame el dolor mismo, que lo busque, lo encuentre y lo quiera, simplemente porque es el dolor."
¿QUE ES Lorem Ipsum?
Lorem Ipsum es simplemente el texto de relleno de las imprentas y archivos de texto. Lorem Ipsum ha sido el texto de relleno estándar de las industrias desde el año 1500, cuando un impresor (N. del T. persona que se dedica a la imprenta) desconocido usó una galería de textos y los mezcló de tal manera que logró hacer un libro de textos especimen. No sólo sobrevivió 500 años, sino que tambien ingresó como texto de relleno en documentos electrónicos, quedando esencialmente igual al original. Fue popularizado en los 60s con la creación de las hojas "Letraset", las cuales contenian pasajes de Lorem Ipsum, y más recientemente con software de autoedición, como por ejemplo Aldus PageMaker, el cual incluye versiones de Lorem Ipsum.
Es un hecho establecido hace demasiado tiempo que un lector se distraerá con el contenido del texto de un sitio mientras que mira su diseño. El punto de usar Lorem Ipsum es que tiene una distribución más o menos normal de las letras, al contrario de usar textos como por ejemplo "Contenido aquí, contenido aquí". Estos textos hacen parecerlo un español que se puede leer. Muchos paquetes de autoedición y editores de páginas web usan el Lorem Ipsum como su texto por defecto, y al hacer una búsqueda de "Lorem Ipsum" va a dar por resultado muchos sitios web que usan este texto si se encuentran en estado de desarrollo. Muchas versiones han evolucionado a través de los años, algunas veces por accidente, otras veces a propósito (por ejemplo insertándole humor y cosas por el estilo).

¿DE DONDE VIENE?
Al contrario del pensamiento popular, el texto de Lorem Ipsum no es simplemente texto aleatorio. Tiene sus raices en una pieza cl´sica de la literatura del Latin, que data del año 45 antes de Cristo, haciendo que este adquiera mas de 2000 años de antiguedad. Richard McClintock, un profesor de Latin de la Universidad de Hampden-Sydney en Virginia, encontró una de las palabras más oscuras de la lengua del latín, "consecteur", en un pasaje de Lorem Ipsum, y al seguir leyendo distintos textos del latín, descubrió la fuente indudable. Lorem Ipsum viene de las secciones 1.10.32 y 1.10.33 de "de Finnibus Bonorum et Malorum" (Los Extremos del Bien y El Mal) por Cicero, escrito en el año 45 antes de Cristo. Este libro es un tratado de teoría de éticas, muy popular durante el Renacimiento. La primera linea del Lorem Ipsum, "Lorem ipsum dolor sit amet..", viene de una linea en la sección 1.10.32
El trozo de texto estándar de Lorem Ipsum usado desde el año 1500 es reproducido debajo para aquellos interesados. Las secciones 1.10.32 y 1.10.33 de "de Finibus Bonorum et Malorum" por Cicero son también reproducidas en su forma original exacta, acompañadas por versiones en Inglés de la traducción realizada en 1914 por H. Rackham.
 CARACTERISTICAS
crito por Super Usuario
El trozo de texto estándar de Lorem Ipsum usado desde el año 1500 es reproducido debajo para aquellos interesados. Las secciones 1.10.32 y 1.10.33 de "de Finibus Bonorum et Malorum" por Cicero son también reproducidas en su forma original exacta, acompañadas por versiones en Inglés de la traducción realizada en 1914 por H. Rackham.
Leer más...

Las secciones 1.10.32 y 1.10.33 de "de Finnibus Bonorum


Escrito por Super Usuario
Lorem Ipsum viene de las secciones 1.10.32 y 1.10.33 de "de Finnibus Bonorum et Malorum" (Los Extremos del Bien y El Mal) por Cicero, escrito en el año 45 antes de Cristo. Este libro es un tratado de teoría de éticas, muy popular durante el Renacimiento. La primera linea del Lorem Ipsum, "Lorem ipsum dolor sit amet..", viene de una linea en la sección 1.10.32
Leer más...

La primera linea del Lorem Ipsum, "Lorem ipsum dolor sit amet.."


Escrito por Super Usuario
Lorem Ipsum viene de las secciones 1.10.32 y 1.10.33 de "de Finnibus Bonorum et Malorum" (Los Extremos del Bien y El Mal) por Cicero, escrito en el año 45 antes de Cristo. Este libro es un tratado de teoría de éticas, muy popular durante el Renacimiento. La primera linea del Lorem Ipsum, "Lorem ipsum dolor sit amet..", viene de una linea en la sección 1.10.32

Otras impresiones muy populares durante el Renacimiento.


Escrito por Super Usuario
Lorem Ipsum viene de las secciones 1.10.32 y 1.10.33 de "de Finnibus Bonorum et Malorum", "Lorem ipsum dolor sit amet..", viene de una linea en la sección 1.10.32 (Los Extremos del Bien y El Mal) por Cicero, escrito en el año 45 antes de Cristo. Este libro es un tratado de teoría de éticas, muy popular durante el Renacimiento. La primera linea del Lorem Ipsum
Leer más...

Texto que tiene sus raices en una pieza clásica de la literatura del Latin

19 Jun
Escrito por Super Usuario
Lorem Ipsum viene de las secciones 1.10.32 y 1.10.33 de "de Finnibus Bonorum et Malorum" (Los Extremos del Bien y El Mal) por Cicero, escrito en el año 45 antes de Cristo. Este libro es un tratado de teoría de éticas, muy popular durante el Renacimiento. La primera linea del Lorem Ipsum, "Lorem ipsum dolor sit amet..", viene de una linea en la sección 1.10.32
USOS

Textos simulados: su función como texto de relleno o como herramienta para comparar el efecto visual de diferentes tipos de letra

Los textos simulados son aquellos textos que, en ausencia de un texto definitivo, sirven como sustituto de futuros contenidos en la producción de maquetas para publicaciones o sitios web. También son llamados textos dummy, ficticios o de relleno. A parte de ser utilzados dentro del sector de la imprenta y del grafismo, algunos compositores de canciones también utilizan textos simulados al componer melodías, cantando estos textos antes de escribir las letras de la canción. Ya en el siglo XVI, los tipógrafos solían usar textos simulados.

La utilidad de un contenido sin sentido

Los textos simulados son también utilizados para comparar variedades tipográficas y para trabajos de maquetación y diseño. El contenido de la mayor parte de estos textos carece de sentido. Debido a su uso difundido como texto de relleno para trabajos de diseño, la ininteligibilidad resulta de gran importancia, ya que la percepción humana puede reconocer ciertos esquemas y repeticiones en textos. Si la repartición de las letras y la longitud de las “palabras” son arbitrarias, la atención del lector quedará fijada en la apreciación del efecto visual y la legibilidad de diferentes caracteres (tipografía), así como en la distribución del texto en la página (maquetación o área tipográfica). Por ello, los textos simulados están compuestos a menudo por una secuencia más o menos arbitraria de palabras o sílabas. Esto evita que los esquemas de repetición puedan turbar la impresión visual general y facilita la comparación de distintos tipos de caracteres. Por otra parte, supone una ventaja que el texto simulado sea relativamente realista, de modo que la maqueta corresponda con el producto final y la futura publicación no sufra cambios.

¿Incomprensibilidad o legibilidad? Esa es la cuestión.

El texto simulado más conocido y extendido es el "Lorem ipsum", cuyo origen parece que se remonta al S. XVI. Lorem ipsum está escrito en un seudo-latín, relativamente cercano al latín real. Pese a contener una serie de palabras latinas y a imitar el ritmo de la mayoría de las lenguas europeas con escritura latina, el Lorem ipsum sigue resultando ininteligible. La ventaja del origen latino y de la falta de sentido del contenido de Lorem ipsum consiste en que el lector no se distrae con el contenido del texto, sino que puede concentrar su atención únicamente en el diseño.
Una desventaja de Lorem ipsum reside en que en latín algunas letras aparecen más a menudo que otras, lo que genera una impresión visual diferente. Además, en latín solamente se escriben en mayúsculas las palabras a principio de oración, por lo que Lorem ipsum no puede por ejemplo, imitar fielmente un texto alemán; idioma en el que cada sustantivo se escribe en mayúsculas. Por esta razón, Lorem ipsum es sólo parcialmente adecuado como sustituto visual de textos alemanes. En caso de que el texto simulado deba servir para comparar singularidades tipográficas, sería recomendable escoger textos que contengan a ser posible, todas las letras y símbolos de la lengua empleada.
Hoy en día, existe una gran cantidad de textos simulados legibles, utilizados básicamente como textos de relleno. Estas alternativas al Lorem ipsum clásico suelen ser divertidas y cuentan pequeñas historias cómicas o sin sentido.

Origen y significado de Lorem ipsum

La mayoría de las fuentes atribuyen el origen de Lorem ipsum a un texto de Cicerón del año 45 a.C. Un profesor de latín pudo dar con el origen de Lorem ipsum, reuniendo todos los ejemplos que encontró de la extraña palabra “consectetur”, para finalmente darse cuenta de que concordaba con uno de los pasajes de “De finibus bonorum et malorum (Sobre los límites del bien y del mal), de Cicerón, una obra muy popular en la Edad Media: "Neque porro quisquam est, qui dolorem ipsum, quia dolor sit, amet, consectetur, adipisci velit [...]" (en sentido literal: "A nadie le gusta el dolor para sí mismo, o lo busca y desea tenerlo, apenas porque es dolor..."). Un texto Lorem ipsum típico sería: "Lorem ipsum dolor sit amet, consectetur adipisici elit, sed eiusmod tempor incidunt ut labore et dolore magna aliqua. Ut enim ad minim [...]".
Parece ser que tan solo ciertos extractos del texto original forman parte de los textos Lorem ipsum utilizados actualmente. Sería posible que con el paso del tiempo, se hubiesen añadido o eliminado una serie de letras en diferentes partes del texto. Esto explicaría que hoy en día existan versiones del texto que difieren ligeramente entre sí. Debido a su fecha de producción, la utilización de Lorem ipsum no está sujeta a derechos de autor, por lo que no puede haber problemas de copyright.
En los años 60, la aparición del letraset (letras adhesivas sobre folio transparente, de uso muy extendido hasta los años 80) que contenía pasajes de Lorem ipsum, contribuyó a que este texto fuese cada vez más conocido entre los tipógrafos y grafistas. Más tarde, algunos programas de DTP (desktop publishing) como por ejemplo Pagemaker, ya incluían directamente versiones del texto.

Reconocimiento automático de un Lorem ipsum durante el trabajo de pre-prensa

Gracias a la difusión del uso de ordenadores y programas de diseño gráfico, los textos simulados ganaron en popularidad. Mientras que antiguamente se repetían solamente algunas líneas del Lorem ipsum para crear un texto simulado, hoy en día el texto completo de Cicerón sirve como base para numerosos generadores de texto simulado o Lorem ipsum. Estos generadores pueden producir automáticamente fragmentos más largos del texto Lorem ipsum o de otros textos de relleno.
La primera secuencia del Lorem ipsum es tan conocida y utilizada actualmente, que muchos programas DTP pueden generar textos simulados que empiecen con la secuencia "Lorem ipsum". Afortunadamente, hoy en día cualquier grupo de palabras que empieza por "Lorem ipsum" puede ser reconocido automáticamente por los sistemas electrónicos de pre-prensa, que en caso de detectar algún texto de relleno, envian una señal de aviso antes de que una publicación pueda ir a imprenta.
El hecho de que los motores de búsqueda automática no sean capaces de reconocer un texto ficticio, es decir, de diferenciar entre una información con o sin sentido, es explotado por ciertos proveedores de Internet: un texto simulado generado con un objetivo concreto, que contenga una combinación específica de términos de búsqueda, puede aumentar la frecuencia de visitas de los usuarios de los motores de búsqueda. Por consiguiente, las ganancias publicitarias, engendradas por el número de visitas a la página web, pueden aumentar notablemente.



 

Publicado por en No hay comentarios:

jueves, 23 de abril de 2015

Diseño Web Responsive Vs Adaptativo

Diseño Web Responsive Vs Adaptativo

Algunas compañías aún se muestran reticentes al cambio, defendiendo la postura de que una web de diseño clásico siempre será más rápida y más ligera. Puede que tengan razón, pero algo es evidente: si la forma de navegar de los usuarios ha cambiado, el diseño debe cambiar con ella. Demos a los usuarios la experiencia de navegación que piden, independientemente de con qué dispositivo nos visiten.
Y se asentó el Smartphone y el Tablet. Y con ellos aparecieron nuevas definiciones y métodos de Diseño como Adaptativo y Responsive (éste último ya se han encargado algunos de traducirlo como Responsivo.

¿Y en qué se diferencian ambos diseños?

Ambos conceptos son parecidos y pueden confundirse. Ambos son métodos de programación flexible que permite que el diseño de la web se adapte visualmente según el dispositivo. La principal diferencia es que el Diseño Responsive se adapta literalmente y el Adaptativo es como si tuviéramos varios diseños diferentes en uno. Uno para cada tipo de dispositivo.

Diseño Adaptativo

Con este sistema tendremos varios diseños diferentes dependiendo de la resolución de la pantalla o del tipo o tamaño del dispositivo. Así pues, podemos tener un diseño para móviles, uno para Tablets de hasta 7 pulgadas, otro para Tablets grandes o SmartTV, otro para PC. O podemos tener uno para Android y otro diferente para iPhone.

Ventajas:

-Enviamos al dispositivo sólo lo necesario para su visualización por lo que será más rápida de cargar.
-Al realizar cada diseño de forma independiente, aumentamos la calidad de la experiencia de navegación del usuario, ya que le mostramos justo lo que queremos.

Desventaja:

-Hasta hace poco el precio. Cuatro diseños no cuestan igual que uno. Pero si que es verdad que últimamente esto está cambiando.

Diseño Responsive

El diseño Responsive se adapta literalmente al dispositivo. La página web envía siempre los mismos datos para todos los internautas y es el navegador el que se encarga de adaptarla a la pantalla. Hasta ahora los tamaños se especificaban fijos, pero jugando con valores de tamaños proporciones y con distintas hojas de estilo css, podemos construir un diseño Responsive.

Ventajas:

-Sólo necesitamos crear un único diseño por lo que el coste es mucho menor.
-El diseño lo veremos siempre de la misma manera en todos los dispositivos. Esto tiene la ventaja añadida de que siempre se verá correctamente y que a la vez, crea la sensación de que estás visitando siempre la misma página web y que no cambia, dando confianza al usuario. Pero tiene la desventaja añadida de que en un teléfono móvil la web se verá muy pequeña, teniendo que utilizar el zoom en todo momento.

Desventajas:

-Envía más información de la necesaria por lo que disminuye la velocidad de carga y aumenta el coste de navegación, no sólo para usuario que utiliza 3G sino para el cliente de la web, que va saturando su servidor ftp donde aloja su web.
-Desde el punto de vista de la publicidad, nos perdemos la posibilidad de desarrollar varias estrategias diferentes de mercado. Porque el usuario que compra desde un Smartphone se comporta de manera diferente al usuario que compra desde un Pc.
El diseño web adaptable o adaptativo, conocido por las siglas RWD (del inglés, Responsive Web Design) 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 visualizarla. Hoy día las páginas web se visualizan en multitud de tipos de dispositivos como tabletas, smartphones, libros electrónicos, portátiles, PCs,... Además, aún dentro de cada tipo, cada dispositivo tiene sus características concretas: Tamaño de pantalla, resolución, potencia de CPU, capacidad de memoria,... Esta tecnología pretende que con un solo diseño web, tengamos una visualización adecuada en cualquier dispositivo.
El diseñador y autor norteamericano Ethan Marcotte creó y difundió esta técnica a partir de una serie de artículos en A List Apart,1 una publicación en línea especializada en diseño y desarrollo web, idea que luego extendería en su libro Responsive Web Design.
ara empezar, cabe decir que la web adaptativa posee distintos diseños para los distintos dispositivos móviles, uno para tablets y otro para smartphones, por ejemplo. Este tipo de diseño nos permite crear tantas versiones como dispositivos pensemos que se van a utilizar para acceder a nuestra web, además, la carga será mucho más rápido, ya que sólo poseerán los elementos necesarios e imprescindibles para su correcto funcionamiento.
Por su parte, la responsive web es aquella la que se adapta al dispositivo, siendo la misma versión para todos los dispositivos y el navegador el que detecta lo que puede mostrar. Cabe señalar que, en este caso, la web es la misma, sin tener distintas versiones, como en el caso de la web adaptativa, por lo que el aspecto de la web, la visualicemos donde la visualicemos, siempre será el mismo.

Publicado por en No hay comentarios:

miércoles, 21 de enero de 2015

CSS

Descripcion de CSS

Las hojas de estilos aparecieron poco después que el lenguaje de etiquetas SGML, alrededor del año 1970. Desde la creación de SGML, se observó la necesidad de definir un mecanismo que permitiera aplicar de forma consistente diferentes estilos a los documentos electrónicos.
El gran impulso de los lenguajes de hojas de estilos se produjo con el boom de Internet y el crecimiento exponencial del lenguaje HTML para la creación de documentos electrónicos. La guerra de navegadores y la falta de un estándar para la definición de los estilos dificultaban la creación de documentos con la misma apariencia en diferentes navegadores.
El organismo W3C (World Wide Web Consortium), encargado de crear todos los estándares relacionados con la web, propuso la creación de un lenguaje de hojas de estilos específico para el lenguaje HTML y se presentaron nueve propuestas. Las dos propuestas que se tuvieron en cuenta fueron la CHSS (Cascading HTML Style Sheets) y la SSP (Stream-based Style Sheet Proposal).
La propuesta CHSS fue realizada por Håkon Wium Lie y SSP fue propuesto por Bert Bos. Entre finales de 1994 y 1995 Lie y Bos se unieron para definir un nuevo lenguaje que tomaba lo mejor de cada propuesta y lo llamaron CSS (Cascading Style Sheets).
En 1995, el W3C decidió apostar por el desarrollo y estandarización de CSS y lo añadió a su grupo de trabajo de HTML. A finales de 1996, el W3C publicó la primera recomendación oficial, conocida como "CSS nivel 1".
A principios de 1997, el W3C decide separar los trabajos del grupo de HTML en tres secciones: el grupo de trabajo de HTML, el grupo de trabajo de DOM y el grupo de trabajo de CSS.
El 12 de Mayo de 1998, el grupo de trabajo de CSS publica su segunda recomendación oficial, conocida como "CSS nivel 2". La versión de CSS que utilizan todos los navegadores de hoy en día es CSS 2.1, una revisión de CSS 2 que aún se está elaborando (la última actualización es del 23 de abril de 2009). Al mismo tiempo, la siguiente recomendación de CSS, conocida como "CSS nivel 3", continúa en desarrollo desde 1998 y hasta el momento sólo se han publicado borradores.
La adopción de CSS por parte de los navegadores ha requerido un largo periodo de tiempo. El mismo año que se publicó CSS 1, Microsoft lanzaba su navegador Internet Explorer 3.0, que disponía de un soporte bastante reducido de CSS. El primer navegador con soporte completo de CSS 1 fue la versión para Mac de Internet Explorer 5, que se publicó en el año 2000. Por el momento, ningún navegador tiene soporte completo de CSS



Sintaxis
CSS tiene una sintaxis muy sencilla, que usa unas cuantas palabras clave tomadas del inglés para especificar los nombres de varias propiedades de estilo.

Una hoja de estilo se compone de una lista de reglas. Cada regla o conjunto de reglas consiste en uno o más selectores y un bloque de declaración (o «bloque de estilo») con los estilos a aplicar para los elementos del documento que cumplan con el selector que les precede. Cada bloque de estilos se define entre llaves, y está formado por una o varias declaraciones de estilo con el formato propiedad:valor;.<!R0>
En el CSS, los selectores marcarán qué elementos se verán afectados por cada bloque de estilo que les siga, y pueden afectar a uno o varios elementos a la vez, en función de su tipo, nombre (name), ID, clase (class), posición dentro del Document Object Model, etcétera.<!R1>
Abajo puede verse un ejemplo de una parte de una hoja de estilos CSS:
selector [, selector2, ...] [:pseudo-class][::pseudo-element] {
 propiedad: valor;
 [propiedad2: valor2;
 ...]
}

/* comentarios */
Uso
Por ejemplo, el elemento de HTML <h1> indica que un bloque de texto es un encabezamiento y que es más importante que un bloque etiquetado como <h2>. Versiones más antiguas de HTML permitían atributos extra dentro de la etiqueta abierta para darle formato (como el color o el tamaño de fuente). No obstante, cada etiqueta <h1> debía disponer de la información si se deseaba un diseño consistente para una página y, además, una persona que leía esa página con un navegador perdía totalmente el control sobre la visualización del texto.
Cuando se utiliza CSS, la etiqueta <h1> no debería proporcionar información sobre cómo será visualizado, solamente marca la estructura del documento. La información de estilo, separada en una hoja de estilo, especifica cómo se ha de mostrar <h1>: color, fuente, alineación del texto, tamaño y otras características no visuales, como definir el volumen de un sintetizador de voz, por ejemplo.
Por otro lado, antes de que estuviera disponible CSS, la única forma de componer espacialmente una página era el uso de tablas <table>. Aunque esta era una técnica cómoda y versátil, ello conllevaba el uso de un elemento con una semántica particular, y en el que la distribución de los datos no se ajustaban al flujo de la información que se obtenía en la vista desde los navegadores habituales, lo que redundaba en una merma en la accesibilidad a la página por parte de otros navegadores (orientados a personas con alguna deficiencia sensorial, o a ciertos dispositivos electrónicos).
Mediante el uso de CSS, se ha permitido eliminar el uso de tablas para el diseño, usándolas solamente para la muestra de datos tabulados, si bien es cierto que obtener la versatilidad que ofrecía el diseño con tablas, es algo más complicado si no se usan.
Propiedad Descripción Valores
contador Contador counter(nombre, estilo)
familia-genérica Familia genérica de fuente cursive | fantasy | monospace | serif | sans-serif
forma Forma rect(top, right, bottom, left)
tamaño-absoluto Tamaño absoluto de fuente xx-small | x-small | medium | large | x-large | xx-large
tamaño-relativo Tamaño relativo de fuente larger | smaller
uri (para imagen de fondo o fuentes web) Dirección absoluta o relativa url("ruta_y_nombre_de_archivo")
Volver al principio de la páginaTipo de letra (fuente)
Propiedad Descripción Valores
font propiedad compuesta [ [ font-style || font-variant || font-weight ]? font-size [ / line-height ]? font-family ] | caption | icon | menu | message-box | small-caption | status-bar
font-family tipo de letra (fuente) [ nombre-fuente | familia-genérica ] [, nombre-fuente | familia-genérica ]*
font-size tamaño tamaño-absoluto | tamaño-relativo | distancia | porcentaje
font-style inclinación (cursiva) normal | italic | oblique
font-variant versalitas normal | small-caps
font-weight grosor del trazo (negrita) normal | bold | bolder | lighter | 100 | 200 | 300 | 400 | 500 | 600 | 700 | 800 | 900
Volver al principio de la páginaTexto
Propiedad Descripción Valores
color color del texto color
direction dirección del texto ltr | rtl
letter-spacing espacio entre carácteres normal | distancia
line-height espaciado entre líneas normal | número | distancia | porcentaje
text-align alineación del texto center | justify | left | right
text-decoration decoración del texto none | blink | line-through | overline | underline
text-indent sangría de la primera línea distancia | porcentaje
text-transform mayúsculas / minúsculas none | capitalize | lowercase | uppercase
unicode-bidi dirección del texto normal | embed | bidi-override
vertical-align alineación vertical baseline | bottom | middle | sub | super | text-bottom | text-top | top | distancia | porcentaje
white-space espacios en blanco, saltos de línea y wrap normal | nowrap | pre | pre-line(+) | pre-wrap(+)
word-spacing espacio entre palabras normal | distancia
Volver al principio de la páginaBordes
Propiedad Descripción Valores
border cuatro bordes simultáneamente border-color || border-width || border-style
border-top borde superior border-color || border-width || border-style
border-right borde derecho border-color || border-width || border-style
border-bottom borde inferior border-color || border-width || border-style
border-left borde izquierdo border-color || border-width || border-style
border-color color de los bordes [ color | transparent ] {1, 4}
border-width grosor de los bordes [ medium | thick | thin | distancia ] {1, 4}
border-style estilos de los bordes [ none | hidden | dashed | dotted | double | groove | inset | outset | ridge | solid ] {1, 4}
border-top-color color del borde superior [ color | transparent ] {1, 4}
border-top-width grosor del borde superior [ medium | thick | thin | distancia ] {1, 4}
border-top-style estilo del borde superior [ none | hidden | dashed | dotted | double | groove | inset | outset | ridge | solid ] {1, 4}
border-right-color color del borde derecho [ color | transparent ] {1, 4}
border-right-width grosor del borde derecho [ medium | thick | thin | distancia ] {1, 4}
border-right-style estilo del borde derecho [ none | hidden | dashed | dotted | double | groove | inset | outset | ridge | solid ] {1, 4}
border-bottom-color color del borde inferior [ color | transparent ] {1, 4}
border-bottom-width grosor del borde inferior [ medium | thick | thin | distancia ] {1, 4}
border-bottom-style estilo del borde inferior [ none | hidden | dashed | dotted | double | groove | inset | outset | ridge | solid ] {1, 4}
border-left-color color del borde izquierdo [ color | transparent ] {1, 4}
border-left-width grosor del borde izquierdo [ medium | thick | thin | distancia ] {1, 4}
border-left-style estilo del borde izquierdo [ none | hidden | dashed | dotted | double | groove | inset | outset | ridge | solid ] {1, 4}

Publicado por en No hay comentarios:
Suscribirse a: Entradas (Atom)