Texto en ujos de trabajo Responsive Web Design (v. 2016) www.xpert.video
Marlon Ceballos - @adobexpert Adobe Community Professional / Adobe CertiďŹ ed Instructor
pert pert
Learn design & code Learn design & code
www.xpert.video
CERTIFIED INSTRUCTOR Web C E R Design T I F I E DMaster I N S T R/ U C T OMaster R
Design Master / Web Master
CERTIFIED INSTRUCTOR
Design Master / Web Master
www.linkedin.com/in/marlonceballos/
Learn
pert
design & code
www.xpert.video
CERTIFIED INSTRUCTOR
Design Master / Web Master
Learn
Learn
pert
design & code
pert
design & code
www.xpert.video
CERTIFIED INSTRUCTOR
Design Master / Web Master
Fuentes web
Learn
pert
design & code
www.xpert.video
CERTIFIED INSTRUCTOR
Design Master / Web Master
Importante! Mantener legibilidad y consistencia visual del texto entre dispositivos.
Learn
pert
design & code
www.xpert.video
CERTIFIED INSTRUCTOR
Design Master / Web Master
Fuentes web • Usar fuentes de calidad • Limitar el número de fuentes al mínimo posible • Elegir las fuentes de acuerdo al contenido.
Learn
pert
design & code
www.xpert.video
CERTIFIED INSTRUCTOR
Design Master / Web Master
La elección • Tener las fuentes en mi servidor • Usar un servicio online de fuentes.
Learn
pert
design & code
www.xpert.video
CERTIFIED INSTRUCTOR
Design Master / Web Master
Font stacks • Elegir cuidadosamente las fuentes fallback • www.cssfontstack.com • www.ffffallback.com (bookmarklet).
Learn
pert
design & code
www.xpert.video
CERTIFIED INSTRUCTOR
Design Master / Web Master
Facilidad de lectura • Longitud de líneas de texto • 45-75 caracteres (aprox.) • http://codepen.io/chriscoyier/pen/atebf (Bookmarklet).
Learn
pert
design & code
www.xpert.video
CERTIFIED INSTRUCTOR
Design Master / Web Master
Cómo funcionan las fuentes web? • http://blog.typekit.com/2010/10/05/type-rendering-on-the-web/ • http://blog.typekit.com/2010/10/15/type-rendering-operatingsystems/.
Learn
pert
design & code
www.xpert.video
CERTIFIED INSTRUCTOR
Design Master / Web Master
Unidades de medida • px: absoluta • ems: relativa al contexto • rems: relativa al root (<html>) • vw: 1/100 ancho del viewport • vh: 1/100 alto del viewport • vmax: 1/100 del lado mas largo del viewport • vmin: 1/100 del lado mas corto del viewport.
Learn
pert
design & code
www.xpert.video
CERTIFIED INSTRUCTOR
Design Master / Web Master
Flowtype.js • www.simplefocus.com/flowtype/ • www.github.com/simplefocus/FlowType.JS • www.smashingmagazine.com/2013/09/introducing-flowtype-js/.
Learn
pert
design & code
www.xpert.video
CERTIFIED INSTRUCTOR
Design Master / Web Master
Mul$-columns
Learn
pert
design & code
www.xpert.video
CERTIFIED INSTRUCTOR
Design Master / Web Master
Soporte
Learn
pert
design & code
www.xpert.video
CERTIFIED INSTRUCTOR
Design Master / Web Master
Referencias • www.w3.org/TR/css3-multicol/ • https://drafts.csswg.org/css-multicol-1/ • www.w3schools.com/css/css3_multiple_columns.asp • www.sitepoint.com/css-multi-column-layout-tutorial-for-beginners/.
Learn
pert
design & code
www.xpert.video
CERTIFIED INSTRUCTOR
Design Master / Web Master
Principales propiedades • column-width: <length> | auto (ancho óptimo) • column-count: <integer> | auto • columns: <‘column-width’> || <‘column-count’>.
Learn
pert
design & code
www.xpert.video
CERTIFIED INSTRUCTOR
Design Master / Web Master
column-gap • column-gap: <length> | normal • El valor normal generalmente es 1em • Debe ser un valor positivo.
Learn
pert
design & code
www.xpert.video
CERTIFIED INSTRUCTOR
Design Master / Web Master
rule / línea • column-rule-color: <color> • column-rule-style: <border-style> (solid, dashed, etc) • column-rule-width: <border-width> • column-rule: <‘column-rule-width’> || <‘column-rule-style’> || [ <‘column-rule-color’> | transparent ].
Learn
pert
design & code
www.xpert.video
CERTIFIED INSTRUCTOR
Design Master / Web Master
Recursos Identificar fuentes: • www.whatfontis.com (imágenes) • http://chengyinliu.com/whatfont.html (Bookmarklet o extensión) • www.whatfontapp.com (iOS) • https://chrome.google.com/webstore/detail/whatfont/ jabopobgcpjmedljpbcaablpmlmfcogm (plug-in Chome).
Learn
pert
design & code
www.xpert.video
CERTIFIED INSTRUCTOR
Design Master / Web Master
Recursos • www.mqtest.io (características de dispositivos)
Learn
pert
design & code
www.xpert.video
CERTIFIED INSTRUCTOR
Design Master / Web Master
Learn
pert
design & code
Gracias!
Learn
pert
design & code
www.xpert.video
CERTIFIED INSTRUCTOR
Design Master / Web Master
Esta presentaciรณn (y otras)
www.xper.co/presenta
Learn
pert
design & code
www.xpert.video
CERTIFIED INSTRUCTOR
Design Master / Web Master
Recursos
www.delicious.com/marliton
Learn
pert
design & code
www.xpert.video
CERTIFIED INSTRUCTOR
Design Master / Web Master