Antaviana. Open type i css3. El inicio de un prometedor noviazgo.

559 views

Published on

Presentació de Josep Patau al 5è. Congrés Internacional de Tipografia. València y Madrid. Junio de 2012.

Published in: Business
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total views
559
On SlideShare
0
From Embeds
0
Number of Embeds
2
Actions
Shares
0
Downloads
2
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

Antaviana. Open type i css3. El inicio de un prometedor noviazgo.

  1. 1. CSS3 + OpenTypeEl inicio de unprometedor noviazgo El refinamiento tipográfico que se avecina
  2. 2. Los padres de él Los padres de ella SGML 1970El Abuelo La MadreTrue 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. 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. 4. ¿Cómo funciona? Open TypeUtiliza sufijos de 4 letras, para separar losdiferentes conjuntos de funcionalidades liga DLIG ONUM swsh SALT CALT init FINA SMCP Pau Riba Pau Riba versalitas
  5. 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. 6. ¿Qué podemos hacer con Open Typeeste montón de letras? Afiché
  7. 7. Propiedades de los sufijos Open Typeliga ligaduras Afiché Afiché
  8. 8. Propiedades de los sufijos Open Typeliga + DLIG ligaduras discrecionales Afiché Afiché
  9. 9. Propiedades de los sufijos Open Typeliga + DLIG + init formas iniciales Afiché Afiché
  10. 10. Propiedades de los sufijos Open Typeliga + DLIG + init + FINA formas finales Afiché Afiché
  11. 11. Propiedades de los sufijos Open TypeCALT alternativas contextuales ¡Confín! ¡ Confín! Evitan los vecinos "chungos" o problemáticos
  12. 12. Propiedades de los sufijos Open TypeSALT alternativas estilísticas hugle hugle
  13. 13. Propiedades de los sufijos Open TypeSWSH caracteres decorativos Artes Artes
  14. 14. Propiedades de los sufijos Open TypeSS01 conjuntos SS02 SS03 SS04 SS… estilísticos E E EE E E
  15. 15. Propiedades de los sufijos Open TypeONUM NUMERALES ESTILO ANTIGUO 1678 1678
  16. 16. Propiedades de los sufijos Open TypeSUPS NUMERALES SUPERIORESUSA(1) USA(1)
  17. 17. Propiedades de los sufijos Open TypeSINF NUMERALES CIENTÍFICOS INFERIORESXp(6-1) Xp(6-1)
  18. 18. Propiedades de los sufijos Open Typepnum numerales proporcionales 10.111.111 10.111.111 20.456.823 20.000.000 12.540 12.540
  19. 19. Propiedades de los sufijos Open Type & etc…FRAC ORNM ordn tnum …
  20. 20. Tradicionalmenteorientado a programasde autoedición
  21. 21. Pero no todos losprogramas soportanlas funcionalidadesde opentype Señores de Adobe. Ya os vale!
  22. 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. 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. 24. Open CSS3 Type¿Cómo unirlos?
  25. 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. 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. 27. Tipos de licencia Gratis Pago único Subscripción Subscripción Servidor anual por peso anual y Servidor propioexterno 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. 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. 29. Vista de los estilos en Adobe Dreamweavera punto para dar formato a los textos
  30. 30. DDos distintos géneros de impresión se conocían antes del os distintos géneros de impresión se conocíandescubrimiento de Gutenberg: la xilografía o grabado de antes del descubrimiento de Gutenberg: lacaracteres en tablas de madera, y la calcografía o impresión xilografía o grabado de caracteres en tablas deen 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 lacon fecha conocida de un grabado en metal destinado a segunda, pues la más antigua prueba con fecha conocidala impresión, es un San Bernardo del año 1454 que existe de un grabado en metal destinado a la impresión, es un Sanen 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, alestampaban naipes grabados en madera, principalmente en paso que ya en el siglo xiv se estampaban naipes grabadosAlemania 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 engeneralizado, que ya fue objeto de prohibiciones, tanto por España, pues estaba el uso de ellos tan generalizado, que yaAlfonso XI como por Juan I de Castilla(1). Como quiera que fue objeto de prohibiciones, tanto por Alfonso xi comofuese, los libros impresos xilográfica o calcográficamente, por Juan i de Castilla(1). Como quiera que fuese, losen 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 esencialmentede 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) fuemovibles. Éstos fueron grabados en un principio letra por xilográfica; la segunda en caracteres movibles. Éstos fueronletra, con separación y singularmente, pero muy pronto se grabados en un principio letra por letra, con separaciónllegó a fundirlas en matrices, primero grabadas en hueco, y y singularmente, pero muy pronto se llegó a fundirlas enluego hincadas por medio de punzones. Si la historia de la matrices, primero grabadas en hueco, y luego hincadas porTEXTO España se halla incompleta y casi en el mismoImprenta en TEXTO medio de punzones. Si la historia de la Imprenta en EspañaDESCUIDADO años hace el P. Méndez, que noestado 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,
  31. 31. http://letterror.com/develop/css3/kosmik/
  32. 32. http://hacks.mozilla.org/2010/11/firefox-4-font-feature-support/
  33. 33. ¿Os gusta verdad? DEMASIADO BONITO PARA SER CIERTO ¡Hablemos de los problemas!
  34. 34. ProblemasNecesita más tiempo para =el formateo del texto ygente con experiencia enortotipografía para aplicarcorrectamente los estilos.
  35. 35. ProblemasLas 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 previsualizacorrectamente en su navegador.
  36. 36. ProblemasLos navegadores de iPad y iPhone no soportan OpenType
  37. 37. ProblemasHablar de OpenType es hablar detipografías con un extenso número decaracteres que generan archivos pesadosque ralentizan la carga de la página web
  38. 38. ¡Hablemos del progressive enhancement!* cojones ¡ya!ConclusionesUnos brotes verdesestán apareciendo, pero…* Enriquecimiento progresivo
  39. 39. El enriquecimientoprogresivo, 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;
  40. 40. ConclusionesConfiad en navegadores no integrados en el sistemaoperativo, y con frecuentes actualizaciónes
  41. 41. Muchas Gracias Por Vuestra AsistenciaTrajana Sans Farrerons Serif Paralex Valliciergo ConfettiAgradecimientos Lletraferits

×