Richard Duchatsch Johansen
Front-end Developer, expert HTML5/CSS3, SEO, Validation Cross-browser, Semantic Web, Open Web, Responsive Design and Accessibility Specialties: Certification of HTML5 and CSS3 by W3C.br; Visie the Advanced CSS / Tableless;
Os caminhos da web
- em ALTA RESOLUÇÃO -
http://goo.gl/7nVz1
Richard Duchatsch Johansen
@ridjohansen | fb.com/ridjohansen
gILBERTO cRESPO
www.gilcrespo.com
Imagem de alta resolução
JPEGmini
http://www.jpegmini.com/
tinypng
http://tinypng.org/
Retina display
Retina Display
Imagens Responsivas
IMAGEM E BREAKPOINT
ART DIRECTION
ESTRUTURA TAG <picture>
SOLUCIONANDO COM FORESIGHT.JS
PROS:
- TESTE DE CONEXÃO À INTERNET
- ESCALABILIDADE COM URI find/replace
- SUPORTA IMAGENS ALTA DENSIDADE (1.5x ou 2x)
CONS:
TAG <noscript> != SEO
http://goo.gl/cuWdi
Focal point css
http://goo.gl/0Rv6f
Iconografia
http://goo.gl/St2Rb
image Sprites
image sprites
PROS
- MENOR QUANTIDADE DE REQUESTS
- ICONES COLORIDOS / TRANSPARENTES
- CROSS-BROWSER MAIS SIMPLIFICADO
CONS
- DIFÍCIL MANUTENÇÃO
- RETINA DISPLAY
- SABER UTILIZAR DE FORMA EXTENSÍVEL
Image Sprites
Ferramentas interessantes:
-
Spritecow - http://www.spritecow.com/
-
Stitches - http://draeton.github.com/stitches/
- CSS Sprites Generator - http://css-sprit.es/
font icons
font icons
PROS
- Menor quantidade de requests
- Retina display suport
- Suporta CSS3
CONS
- Requer conhecimento de IMG vetoriais
- Exige bom dominio CSS
- Não possui icones coloridos
Font icons
Ferramentas interessantes:
- Icomoon - http://icomoon.io/
-
Fontello - http://fontello.com/
- Pictonic - https://pictonic.co/fontbuilder
-
Pictos - https://my.pictos.cc/builder/
- Zurb Icon Font - http://foundation.zurb.com/icon-fonts.php
SVG ICONS
SVG Icons
PROS
- Menor quantidade de requests
- Retina display suport
- Suporta CSS3
- Possui icones coloridos nativos
CONS
- Requer conhecimento de imagens vetoriais
- Exige bom dominio CSS
- Para personalização, exige conhecimento em SVG
SVG Icons
Ferramentas interessantes:
-
http://jefff.co/misc/svg/
- Raphäel SVG icons - http://raphaeljs.com/icons/
- Zurb Social SVG icons http://foundation.zurb.com/social-icons.php
- SVG Icon Generator
http://www.kkj.no/apps/windows-phone-svg-icon-generator.htm
Artigos citando sobre SVG Icons:
- http://blog.jamesflorentino.com/2012/07/21/svg-spriting-in-css.html
- http://dev.webonomic.nl/unleash-the-power-of-svg-sprites
-
http://www.broken-links.com/2012/08/14/better-svg-sprites-with-fragment-identifiers/
Vale a pena conferir
- http://webplatformtools.org/
- http://bradfrost.github.io/this-is-responsive/
- http://mobile.smashingmagazine.com/2013/05/29/
the-state-of-responsive-web-design/ -
http://coding.smashingmagazine.com/2012/08/20/
towards-retina-web/ - http://tableless.com.br/utilizando-icones-formato-font/
- http://www.geekchamp.com/news/
windows-phone-svg-icon-generator -
http://coding.smashingmagazine.com/2012/01/16/
resolution-independence-with-svg/
Perguntas
Obrigado
Os caminhos da web em ALTA RESOLUÇÃO - Dicas e truques
By Richard Duchatsch Johansen
