Desenvolvimento web - O que todo desenvolvedor web deveria saber

Desenvolvimento WEB
O quetododesenvolvedor web deveria saber.
www.denisferrari.com
@denisferrari

Objetivosdaapresentação
Apresentarumavisão de “mundoperfeito” sobre as camadas de interface.
Quebrarparadígmassobre as camadas e suasintegrações.
Apresentardicasparaaumentar a performance das interfaces.
Proporpadrõesde trabalhoparaconstrução de interfaces.

Camadas de interface web

csszengarden.com

HTML 4.01
HTML 4.01 possui 93 Tags parautilização.
11 tags estão com a utilizaçãonãorecomendada, o quenosdeixa com um total de 82 tags.
HTML (Linguagem de Marcação de Hipertexto)
Criada por Tim Berners-Lee e definida em especificações formais na década de 1990.
Maisinformações:
http://www.w3schools.com/html/
http://www.w3schools.com/tags/

Quantas tags vocêconhece?

Vocêbuscaresultado visual ou valor semântico?

Dicassobre HTML
Procure conhecer o maiornúmero de TAGs possível.
Conheça o sentido das tags, duas tags com resultado visual igualpossuemsignificadosdiferentes.
Questione a utilizaçãoda TAGs, vocêpodechegar a resultadosidênticos com estratégiasdiferentes.
Use ospadrõesW3C.
Pesquiseestruturaçõessemelhantes.

Tags (1/6)“Maisconhecidas”
HTML
HEAD
TITLE
BODY
P / BR
A
IMG
TABLE
Maioresinformações:
http://www.w3schools.com/html/html_intro.asp

Tags (2/6)Diversas

!DOCTYPE
HEAD
LINK
META
H1 – H6
OBJECT
PARAM
IMG
MAP
AREA
STYLE
DIV
SPAN
SCRIPT - NOSCRIPT
http://www.w3schools.com/html/html_intro.asp

Tags (3/6)Conteúdo
I - B / EM – STRONG
BIG - SMALL
SUB – SUP
CODE / KBD / SAMP / TT / PRE
DFN
ACRONYM / ABBR
INS / DEL
Q / CITE / BLOCKQUOTE
ADDRESS
http://www.w3schools.com/html/html_formatting.asp

Tags (4/6)Tabelas
TABLE
TR
TD
TH
THEAD
TBODY
TFOOT
COL
COLGROUP
CAPTION
http://www.w3schools.com/html/html_tables.asp

Tags (5/6)Listas
UL
OL
LI
DL
DT
DD
http://www.w3schools.com/html/html_lists.asp

Tags (6/6)Formulário
FORM
LABEL
INPUT
TEXTAREA
BUTTON
SELECT
OPTGROUP
OPTION
FIELDSET
LEGEND
http://www.w3schools.com/html/html_forms.asp

W3C
Porqueusarpadrões?
Qual a dificuldade de usarpadrões?
Metas:
Web paratodos.
Web emqualquerdispositivo.
Web comouma base de conhecimento.
Web confiável e segura.
http://pt.wikipedia.org/wiki/W3C
http://validator.w3.org/

JavaSCRIPT

JS não-obstrutivo (1/2)
O que é?Javascript não obstrutivo diz respeito a scripts que, ao serem desabilitados, não interferem no funcionamento da página.
Porqueutilizar?Simples, JavaScript não obstrutivo é uma das principais maneiras de garantir a acessibilidade, facilitar a manutenção e ganhar tempo na hora de desenvolver seu site.
Maisinformações:
http://nagueva.com/o-que-e-javascript-nao-obstrutivo/

JS não-obstrutivo (2/2)
Nãofaçasuposições.
Construasobreumaestrutura html.
Substitua JS por CSS.
Conheçaos browsers e osusuários.
Trabalhe com eventos.
Use padrões de desenvolvimento.
Pense no próximoprogramador.
Maisinformações:
http://dev.opera.com/articles/view/the-seven-rules-of-unobtrusive-javascrip/

Frameworks JS
Prototype
Jquery
Mootools
YUI
Maisinformaçõesem:
http://www.prototypejs.org/

Componentes JS
Control.Tabs
Image Cropper
Date / Time Picker
Lightbox
ProtoFlow
Protofade
Proto.Menu
Dialog 2.1
Maiscomponentesem:
http://www.scripteka.com/

Utilização de JavaScript
Redução de códigoparapublicação.
Usodistribuído de bibliotecas.
Únicarequisição.
CompactaçãoemGzip.
http://gujs.com.br/blog/2007/04/compactacao-javascript/

Tableless
Tableless é uma forma de desenvolvimento de sites que não utiliza tabelas para disposição de conteúdo na página, pois defende que os códigos HTML deveriam ser usados para o propósito que foram criados, sendo que tabelas foram criadas para exibir dado.
Maisinformações:
http://www.tableless.com.br/
http://www.oficinadanet.com.br/area/31/tableless/
http://maujor.com/index.php

Temas com CSS
Separe a estrutura do design.
Nãoassumaprecedências.
Construaestilosisolados.
Façaumaúnicarequisiçãoparacarregartodo o tema.
Mantenha a organização das folhas de estilo.

Hacks CSS
Pra que servem?Resolver problemas criados por inconsistências de renderização em diferentes navegadores.
Quando utilizar?Em situações onde não é possível alcançar uma renderização específica devido a um comportamento do browser.
Maisinformações:
http://maujor.com/tutorial/hacks-css.php

CSS Reset
Pra que serve?O objetivo dele é resetar todas as propriedades das tagshtmls de marcação para que assim não importe de onde você acessa.
Maisinformações:
http://imasters.uol.com.br/artigo/8505/css/conheca_e_use_o_css_reset/
http://www.monc.se/tripoli/sample.html

Performance

Regras de performance (1/2)
Fazer o minimo de requisições HTTP possível.
Usar mais de um sub-domínio.
Adicionar data de expiração no cabeçalho.
Compactar arquivos externos com Gzip.
Colocar arquivos CSS no cabeçalho do arquivo.
Colocar scripts no final do arquivo.
Evitarexpressões no CSS
Maisinformações:
http://www.meiocodigo.com/category/css/

Regras de performance (2/2)
Colocar Javascript e CSS em arquivos externos.
Reduzir o número pesquisas em DNS.
ComprimirosarquivosJavascript.
Remover scripts duplicados.
Maisinformações:
http://www.meiocodigo.com/category/css/

Extensões do Firefox
Firebug
Yslow
CodeBurner
Web Developer
Maisinformações:
https://addons.mozilla.org/pt-BR/firefox/browse/type:1/cat:4

Trabalhando com imagens
Use a tag IMG apenasparaimagensquecomplementem o conteúdodapágina.
Use imagensem background quando a mesma for meramenteilustrativa.
Agrupeosícones do seuprogramaem um únicoarquivo.
Maisinformações:
http://www.meiocodigo.com/exemplos/bg-position/

Organização dos arquivos de um projeto
Manterosrecursosorganizadosporcategorias.
Separarosrecursoscompartilhados entre projetos.
Manterumaestruturaintuitiva.

Quaissãoosproblemas de performance dasuaplataforma?

Acessibilidade
“Quandofizeralgo, pensequeestáfazendoparaalguemdasuafamília”
Maisinformações:
http://www.maujor.com/w3c/tec_css_acess.html
http://www.acessobrasil.org.br/index.php?itemid=44

Obrigado!
@denisferrari
www.heroisdati.com
www.msdev-es.com.br
www.minhacarreira.com
www.mindworks.com.br

Desenvolvimento web - O que todo desenvolvedor web deveria saber

by Denis Ferrari on Jul 25, 2010

Accessibility

Categories

Tags

Upload Details

Usage Rights

2 Embeds 1,020

Statistics

Desenvolvimento web - O que todo desenvolvedor web deveria saber — Presentation Transcript

http://www.heroisdati.com	1019
http://webcache.googleusercontent.com	1