Antaviana. Open type i css3. El inicio de un prometedor noviazgo.
1. CSS3 + OpenType
El inicio de un
prometedor noviazgo
El refinamiento tipográfico que se avecina
2. Los padres de él Los padres de ella
SGML 1970
El Abuelo La Madre
True Type
PostScript
World Wide Web Consortium
El Padre
CHSS SSP
Håkon Wium Lie Bert Bos
CSS1
CSS2
Open Programas de
autoedición CSS3
Type
Navegadores Web
3. ¿Y quién es él? Open
Type
Es un formato de tipografía
digital que incluye un lenguaje
de programación interno que
permite substituir los caracteres
básicos por el de otros conjuntos
4. ¿Cómo funciona? Open
Type
Utiliza sufijos de 4 letras, para separar los
diferentes conjuntos de funcionalidades
liga DLIG ONUM swsh SALT CALT
init FINA SMCP Pau Riba Pau Riba
versalitas
5. ¿Cómo funciona? Open
Type
SMCP
cajabaja versalitas
abcdefghij abcdefgh
klmnopqrs ijklmnop
tuvwxyz12 qrstuvw
34567890 feature smcp { # Small Capitals
xyz123456
# Latin
sub @cajabaja by @versalitas;
7890
} smcp;
21. Pero no todos los
programas soportan
las funcionalidades
de opentype
Señores
de Adobe.
Ya os vale!
22. ¿Quién es ella? CSS3
Las CSS sirven para dar formato
o estilo a los textos y objetos de los
documentos HTML y XML, utilizados
por los navegadores web para la
visualización de los contenidos
26. <html>
<head>
<title>Farrerons OT Test</title>
Vinculando la fuente
<style type="text/css">
@font-face {
font-family: FarreronsSerif;
src: url(fonts/FarreronsSerifRegular.woff ) format("woff"),
url(fonts/FarreronsSerifRegular.otf ) format("opentype");
Servidor propio Servidor externo
27. Tipos de licencia
Gratis Pago único Subscripción Subscripción
Servidor anual por peso anual y
Servidor propio
externo o propio Servidor externo
barra libre*
Servidor externo
Depende del precio de Typical price is $7.50/year
la tipografia per font
* Consultad planes de suscripción
28. body { font-family: FarreronsSerif, serif; }
Creando estilos
.ligaduras { -moz-font-feature-settings: "dlig=1"; }
.liga-pnum { -moz-font-feature-settings: "dlig=1,pnum=1"; }
.iniciales{ -moz-font-feature-settings: "init=1"; }
.finales { -moz-font-feature-settings: "fina=1"; }
.versalitas { -moz-font-feature-settings: "smcp=1"; }
.superiores { -moz-font-feature-settings: "sups=1"; }
</style>
<body>
Nombre Sufijos de las funcionalidades OpenType
del estilo que se desean aplicar al estilo
29. Vista de los estilos en Adobe Dreamweaver
a punto para dar formato a los textos
30. D
Dos distintos géneros de impresión se conocían antes del os distintos géneros de impresión se conocían
descubrimiento de Gutenberg: la xilografía o grabado de antes del descubrimiento de Gutenberg: la
caracteres en tablas de madera, y la calcografía o impresión xilografía o grabado de caracteres en tablas de
en planchas de metal, ora en medio relieve, ora en dulce. La madera, y la calcografía o impresión en planchas de metal,
primera precedió a la segunda, pues la más antigua prueba ora en medio relieve, ora en dulce. La primera precedió a la
con fecha conocida de un grabado en metal destinado a segunda, pues la más antigua prueba con fecha conocida
la impresión, es un San Bernardo del año 1454 que existe de un grabado en metal destinado a la impresión, es un San
en la Biblioteca de París, al paso que ya en el siglo XIV se Bernardo del año 1454 que existe en la Biblioteca de París, al
estampaban naipes grabados en madera, principalmente en paso que ya en el siglo xiv se estampaban naipes grabados
Alemania o los Países-Bajos. De suponer es también que se en madera, principalmente en Alemania o los Países-Bajos.
imprimiesen naipes en España, pues estaba el uso de ellos tan De suponer es también que se imprimiesen naipes en
generalizado, que ya fue objeto de prohibiciones, tanto por España, pues estaba el uso de ellos tan generalizado, que ya
Alfonso XI como por Juan I de Castilla(1). Como quiera que fue objeto de prohibiciones, tanto por Alfonso xi como
fuese, los libros impresos xilográfica o calcográficamente, por Juan i de Castilla(1). Como quiera que fuese, los
en tablas o láminas, y por consiguiente en caracteres fijos libros impresos xilográfica o calcográficamente, en tablas o
é inmóviles, precedió a la Tipografía, que se diferencia láminas, y por consiguiente en caracteres fijos é inmóviles,
esencialmente de las impresiones anteriores por la movilidad precedió a la Tipografía, que se diferencia esencialmente
de los tipos. La primera edición del Catholicon Johannis de las impresiones anteriores por la movilidad de los tipos.
Januensis(2) fue xilográfica; la segunda en caracteres La primera edición del Catholicon Johannis Januensis(2) fue
movibles. Éstos fueron grabados en un principio letra por xilográfica; la segunda en caracteres movibles. Éstos fueron
letra, con separación y singularmente, pero muy pronto se grabados en un principio letra por letra, con separación
llegó a fundirlas en matrices, primero grabadas en hueco, y y singularmente, pero muy pronto se llegó a fundirlas en
luego hincadas por medio de punzones. Si la historia de la matrices, primero grabadas en hueco, y luego hincadas por
TEXTO España se halla incompleta y casi en el mismo
Imprenta en TEXTO
medio de punzones. Si la historia de la Imprenta en España
DESCUIDADO años hace el P. Méndez, que no
estado en que la dejó cien MIMADO
se halla incompleta y casi en el mismo estado en que la dejó
pasó de los incunables, o libros impresos en el siglo XV, la cien años hace el P. Méndez, que no pasó de los incunables,
37. ¿Os gusta verdad?
DEMASIADO BONITO PARA SER CIERTO
¡Hablemos de los
problemas!
38. Problemas
Necesita más tiempo para
=
el formateo del texto y
gente con experiencia en
ortotipografía para aplicar
correctamente los estilos.
39. Problemas
Las funcionalidades OpenType sólo las soporta Firefox 4 y superiores,
Internet Explorer 10 beta y Google Chrome en Windows.
Actualmente, solo una fracción de los usuarios lo previsualiza
correctamente en su navegador.
41. Problemas
Hablar de OpenType es hablar de
tipografías con un extenso número de
caracteres que generan archivos pesados
que ralentizan la carga de la página web
42. ¡Hablemos
del progressive
enhancement!*
cojones ¡ya!
Conclusiones
Unos brotes verdes
están apareciendo, pero…
* Enriquecimiento progresivo
43. El enriquecimiento
progresivo, va a llegar! Navegador Navegador
Obsoleto Actualizado
/* Firefox v3.6+ */
background-image:-moz-linear-gradient(50% 0% -90deg,rgb(241,241,241) 0%,rgb(189,189,174) 100%);
/* safari v4.0+ and by Chrome v3.0+ */
background-image:-webkit-gradient(linear,50% 0%,50% 100%,color-stop(0, rgb(241,241,241)),color-stop(1, rgb(189,189,174)));
/* Chrome v10.0+ and by safari nightly build*/
background-image:-webkit-linear-gradient(-90deg,rgb(241,241,241) 0%,rgb(189,189,174) 100%);
/* Opera v11.10+ */
background-image:-o-linear-gradient(-90deg,rgb(241,241,241) 0%,rgb(189,189,174) 100%);
/* IE v10+ */
background-image:-ms-linear-gradient(-90deg,rgb(241,241,241) 0%,rgb(189,189,174) 100%);
background-image:linear-gradient(-90deg,rgb(241,241,241) 0%,rgb(189,189,174) 100%);
width:338px;
height:220px;
/* Firefox v1.0+ */
-moz-border-radius:25px 25px 17px 25px;
/* Safari v3.0+ and by Chrome v0.2+ */
-webkit-border-radius:25px 25px 17px 25px;