Antaviana. Open type i css3. El inicio de un prometedor noviazgo.
0 recomendaciones581 vistas
El documento explora la integración de OpenType y CSS3, destacando cómo OpenType permite un refinamiento tipográfico a través de características como ligaduras y estilos alternativos, mientras que CSS3 proporciona el formato necesario para presentaciones en navegadores web. También se discuten las limitaciones actuales de soporte de OpenType en diversos navegadores y los efectos en la carga de páginas web. A pesar de algunos inconvenientes, se reconoce un progreso hacia la mejora progresiva en la tipografía digital.
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;
- 6. ¿Qué podemos hacer con Open Type este montón de letras? Afiché
- 7. Propiedades de los sufijos Open Type liga ligaduras Afiché Afiché
- 8. Propiedades de los sufijos Open Type liga + DLIG ligaduras discrecionales Afiché Afiché
- 9. Propiedades de los sufijos Open Type liga + DLIG + init formas iniciales Afiché Afiché
- 10. Propiedades de los sufijos Open Type liga + DLIG + init + FINA formas finales Afiché Afiché
- 11. Propiedades de los sufijos Open Type CALT alternativas contextuales ¡Confín! ¡ Confín! Evitan los vecinos "chungos" o problemáticos
- 12. Propiedades de los sufijos Open Type SALT alternativas estilísticas hugle hugle
- 13. Propiedades de los sufijos Open Type SWSH caracteres decorativos Artes Artes
- 14. Propiedades de los sufijos Open Type SS01 conjuntos SS02 SS03 SS04 SS… estilísticos E E EE E E
- 15. Propiedades de los sufijos Open Type ONUM NUMERALES ESTILO ANTIGUO 1678 1678
- 16. Propiedades de los sufijos Open Type SUPS NUMERALES SUPERIORES USA(1) USA(1)
- 17. Propiedades de los sufijos Open Type SINF NUMERALES CIENTÍFICOS INFERIORES Xp(6-1) Xp(6-1)
- 18. Propiedades de los sufijos Open Type pnum numerales proporcionales 10.111.111 10.111.111 20.456.823 20.000.000 12.540 12.540
- 19. Propiedades de los sufijos Open Type & etc… FRAC ORNM ordn tnum …
- 20. Tradicionalmente orientado a programas de autoedición
- 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
- 23. http://www.congresotipografia.com/wp-content/themes/5cti-default/style.css /* =Menu -------------------------------------------------------------- */ CSS3 #access { #access .menu-header ul, width:740px; div.menu ul { } list-style: none; #access .menu-header, div.menu { margin: 0; font-size: 14px; } font-family:'PT Serif', serif; #access .menu-header li, font-weight:700; div.menu li { margin-left:0px; width:110px; text-align:left; border-top:#000000 solid 8px; } float: left; #access .menu-header ul.sub-menu { margin-right: 16px; font-size: 14px; position: relative; font-family:'PT Serif', serif; } font-weight:400; margin-left:0px; #access ul.sub-menu li { margin-right: 16px; width:110px; width: 110px; border-top:#000 solid 1px; text-align:left; float: left; } position: relative;
- 24. Open CSS3 Type ¿Cómo unirlos?
- 25. <html> <head> <title>Farrerons OT Test</title> <style type="text/css"> 1 @font-face { font-family: FarreronsSerif; src: url(fonts/FarreronsSerifRegular.woff ) format("woff"), Vincula la fuente url(fonts/FarreronsSerifRegular.otf ) format("opentype"); } body { font-family: FarreronsSerif, serif; } 2 .ligaduras { -moz-font-feature-settings: "dlig=1"; } .liga-pnum { -moz-font-feature-settings: "dlig=1,pnum=1"; } .iniciales{ -moz-font-feature-settings: "init=1"; } Crea los estilos .finales { -moz-font-feature-settings: "fina=1"; } .versalitas { -moz-font-feature-settings: "smcp=1"; } .superiores { -moz-font-feature-settings: "sups=1"; } 3 </style> <body> Personaliza! <p class="ligaduras">Machito y el Sr Cactus</p>
- 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.
- 40. Problemas Los navegadores de iPad y iPhone no soportan OpenType
- 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;
- 44. Conclusiones Confiad en navegadores no integrados en el sistema operativo, y con frecuentes actualizaciónes
- 45. Muchas Gracias Por Vuestra Asistencia Trajana Sans Farrerons Serif Paralex Valliciergo Confetti Agradecimientos Lletraferits