FERRAMENTAS QUE AJUDAM NO DESENVOLVIMENTO DE PGINAS

Taciana Campos Thomaz Fernandes

Tcnicas de Negociao e Apresentao 22/09/2011

TEMA DA APRESENTAO

Lumzy Validator

Typetester WhatFont Tool

Color Schemer

Online Scheme Designer HTML-Ipsum Clean CSS

Loads.in

W3C HTML W3C CSS Validator IE

Pingdom Google

Tester Browsershots Opera Mini Simulator Screenfly

DaSilva

Page Speed
Analytics

Ordem da apresentao:
Wireframes; Tipografia; Cor; HTML, CSS; Cross-browser; Acessibilidade; Performance; Uptime; Estatsticas.

Taciana Campos

Thomaz Fernandes

Wireframe: Lumzy

http://www.lumzy.com

Wireframe: Lumzy

http://www.lumzy.com

Tipografia: Typetester

http://www.typetester.org

Tipografia: WhatFont Tool

http://chengyinliu.com/whatfont.html

Cores: Color Schemer Online

http://www.colorschemer.com/online.html

Cores: Scheme Designer

http://colorschemedesigner.com

Cores: Scheme Designer

http://colorschemedesigner.com

HTML: HTML-Ipsum

http://html-ipsum.com

HTML: W3C HTML Validator

http://validator.w3.org

CSS: Clean CSS

http://www.cleancss.com

CSS: W3C CSS Validator

http://jigsaw.w3.org/css-validator

CSS: W3C CSS Validator

http://jigsaw.w3.org/css-validator

Cross-browser: IE Tester

http://www.my-debugbar.com/wiki/IETester/HomePage

Cross-browser: Simulador do Opera Mini

http://www.opera.com/mobile/demo

Cross-browser: Browsershots

http://browsershots.org

Cross-browser: Screenfly

http://quirktools.com/screenfly

Cross-browser: Screenfly

http://quirktools.com/screenfly

Cross-browser: Screenfly

http://quirktools.com/screenfly

Ordem da apresentao:
Wireframes; Tipografia; Cor; HTML, CSS; Cross-browser; Acessibilidade; Performance; Uptime; Estatsticas.

Taciana Campos

Thomaz Fernandes

Acessibilidade: DaSilva

http://www.dasilva.org.br

Acessibilidade: DaSilva (Texto altenativo)

Sem texto alternativo:

<img src=nene.jpg width=500 height=400 />

Com texto alternativo:

<img src=nene.jpg width=500 height=400 alt=Nen fazendo uma enterrada />

http://www.dasilva.org.br

Acessibilidade: DaSilva (Label)

Formulrio com falha Formulrio acessvel

http://www.dasilva.org.br

Acessibilidade: DaSilva (Label)

Formulrio com falha de acessibilidade:

<p>Nome</p> <input type=text size=20 /> <p>Idade</p> <input type=text size=20 /> ...
http://www.dasilva.org.br

Acessibilidade: DaSilva (Label)

Formulrio mais acessvel:

<label for=nome >Nome</label> <input type=text id=nome size=20 /> <label for=idade >Idade</label> <input type=text id=idade size=20 /> ...
http://www.dasilva.org.br

Performance: loads.in

http://loads.in

Performance: loads.in

http://loads.in

Performance: Page Speed

http://code.google.com/intl/pt-BR/speed/page-speed

Performance: Page Speed

http://code.google.com/intl/pt-BR/speed/page-speed

Performance: Page Speed

http://code.google.com/intl/pt-BR/speed/page-speed

Performance: Page Speed

1600 x 1063 293 KB

Imagem: http://www.socwall.com/browse/wpDL.php?wp_id=021116

200 x 133 293 KB

Performance: Page Speed

Redimencionada no HTML Imagem dimencionada

200 x 133 293 KB

200 x 133 17,5 KB

Imagem: http://www.socwall.com/browse/wpDL.php?wp_id=021116

Uptime: Pingdom

http://www.pingdom.com

Uptime: Pingdom (Relatrios)

Grfico Detalhamento

http://www.pingdom.com

Estatsticas: Google Analytics

http://www.google.com/analytics

Lista completa das ferramentas

Lumzy: http://www.lumzy.com Typetester: http://www.typetester.org WhatFont Tool: http://chengyinliu.com/whatfont.html Color Schermer Online: http://www.colorschemer.com/online.html Scheme Designer: http://colorschemedesigner.com HTML-Ipsum: http://html-ipsum.com W3C HTML Validator: http://validator.w3.org CSS Clean: http://www.cleancss.com W3C CSS Validator: http://jigsaw.w3.org/css-validator IE Tester: http://www.mydebugbar.com/wiki/IETester/HomePage Opera Mini Simulator: http://www.opera.com/mobile/demo Browsershots: http://browsershots.org Screenfly: http://quirktools.com/screenfly DaSilva: http://www.dasilva.org.br Loads.in: http://loads.in Page Speed: http://code.google.com/intl/ptBR/speed/page-speed Pingdom: http://www.pingdom.com Google Analytics: http://www.google.com/analytics

Bnus! - Mais ferramentas

Wireframe: Frame Box: http://framebox.org Mockingbird: https://gomockingbird.com Pencil: http://pencil.evolus.vn CSS: CSS LINT: http://csslint.net Cores: kuler: http://kuler.adobe.com Colour Check: http://www.etre.com/tools/colourcheck CheckMyColours: http://www.checkmycolours.com Cross-browser: IE 10 Preview: http://ie.microsoft.com/testdrive ViewLike.us: http://viewlike.us Usabilidade: Usabilla: http://usabilla.com Usaura: http://www.usaura.com Acessibilidade: WAVE: http://wave.webaim.org Colorblind Web Page Filter: http://colorfilter.wickline.org Performance: Pingdom Tools - Full page test: http://tools.pingdom.com/fpt/ Estatsticas: Piwik: http://www.piwik.org

Bnus! - Links complementares

Wireframe: (Vdeo) The Right Way to Wireframe: http://www.youtube.com/watch?v=QSxFpISj1w Tipografia: Google Web Fonts: http://www.google.com/webfonts Cores: (Artigo) O Significado das Cores: http://www.pinceladasdaweb.com.br/blog/ 2011/08/16/o-significado-das-cores/ HTML: (Artigo) 10 HTML Tag Crimes You Really Shouldnt Commit: http://line25.com/articles/10-html-tagcrimes-you-really-shouldnt-commit CSS: (Artigo) Writing CSS For Others: http://coding.smashingmagazine.com/2011 /08/26/writing-css-for-others/ (Artigo) 100 Great CSS Menu Tutorials: http://www.noupe.com/css/100-great-cssmenu-tutorials.html Acessibilidade: Acessibilidade Legal: http://www.acessibilidadelegal.com/ (Artigo) Como as pessoas cegas usam a Internet: http://brasilmedia.com/Cegueira.html Performance: (Artigo) 15 surefire ways to speed up your site: http://www.netmagazine.com/features/15surefire-ways-speed-your-site

FIM
@Taciana_Campos taciana.campos@gmail.com @thomazfc thomazfc@hotmail.com