-
Notifications
You must be signed in to change notification settings - Fork 0
/
simplicidade.asp
executable file
·279 lines (271 loc) · 11.7 KB
/
simplicidade.asp
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
<!-- #include file="cabecalho.asp" -->
<!-- #include file="topo.asp" -->
<div id="esquerda">
<!-- #include file="menu.asp" -->
</div>
<div id="conteudo">
<h1>HTML simples com XML e CSS</h1>
<p>
Qualquer um que codifique HTML, ou mesmo use um editor
WYSIWYG, já esbarrou no problema. Se você
trabalha com internet, já deve ter tido também
esse problema. O código se tornou complexo, com
várias tabelas, uma dentro da outra. Vários
frames, com uma porção de scripts para manter o
conteúdo atualizado entre eles. Uma parte da
aplicação rodando em um pop-up, com um script
que atualiza o conteúdo principal.
</p>
<p>
Então, cumprindo a lei de Murphy, um dos seguintes
fatos indesejáveis acontece:
</p>
<ol>
<li>
Um cliente liga reclamando que o site está dando um
tal de "erro de script" quando clica num link, você
tenta, mas não consegue reproduzir o erro em nenhum
navegador.
</li>
<li>
Alguém da diretoria resolve que os títulos
devem ser azuis, não vermelhos. E você se
põe a localizar <font face="verdana" size="5"
color="red"> para poder mudar a cor.
</li>
<li>
Alguma tabela não fechada corretamente está
dando problemas no Netscape, mas o código tem cinco
tabelas aninhadas e você perde um dia tentando achar
o defeito.
</li>
<li>
Você percebe uma certa demora para carregar algumas
páginas, vai conferir o código e descobre
algumas coisas assim: <font
face="Verdana"><b></b><i></i><font
size="1"><b></b></font><font
face="Arial">Texto</font></font>
</li>
</ol>
<p>
Que fazer? É claro que com muito cuidado e talento
esse tipo de problema pode ser evitado, mas isso envolve uma
quantidade de trabalho insana. Já vi muitos projetos
onde se gastou mais tempo preso nas entranhas de um
código complexo do que em qualquer outra fase do
projeto.
</p>
<p>
Tem um pessoal na web que propõe uma
solução bastante interessante para isso.
É a turma do WaSP (www.webstandards.org.) As
soluções não são apenas uma lista
de novas tecnologias, mas também uma filosofia de
desenvolvimento baseada na simplicidade.
</p>
<p>
Baseado nessa filosofia da simplicidade, que tem me rendido
resultados surpreendentes, gostaria de fazer algumas
sugestões interessantes:
</p>
<h1>
XHTML
</h1>
<p>
Quem já trabalha com XML certamente percebeu o poder
da flexibilidade e da simplicidade. É
impossível escrever um XML com erros de sintaxe,
porque os interpretadores reclamam imediatamente. É
muito simples escrever documentos XML, sendo fácil
extrair dados de qualquer banco de dados e
transformá-los em XML (a maioria dos SGBDs incorpora
ou tem planos de incorporar o suporte nativo a XML.)
Através da poderosa linguagem XSL e da farta oferta de
parsers gratuitos, XML pode ser transformado em praticamente
qualquer formato de arquivo.
</p>
<p>
XHTML nada mais é do que uma forma de escrever um
documento HTML de modo que ele também seja um
documento XML válido. Ou seja, seu documento HTML
ganha a coerência e flexibilidade de um documento XML,
podendo ser facilmente lido por ferramentas
automáticas e convertido em outros formatos de
arquivos. Com XHTML torna-se muito fácil oferecer os
dados do seu site através de WAP ou de um RSS
(<a href="http://rssficado.pilger.inf.br">http://rssficado.pilger.inf.br</a>)
por exemplo. Torna-se fácil também transformar
o resultado de uma consulta a banco de dados ou um documento
XML numa página web.
</p>
<p>
A boa notícia é que é muito fácil
escrever XHTML. Qualquer um que escreva HTML pode aprender a
fazê-lo sem muita dificuldade. Existem inclusive uma
série de ferramentas interessantes para tornar esse
processo mais produtivo, como o excelente HTML Tidy
(<a href="http://tidy.sourceforge.net">http://tidy.sourceforge.net</a>)
que tem uma eficiência impressionante para uma
ferramenta automática.
</p>
<h1>
CSS e a Abordagem Semântica
</h1>
<p>
Como você cria um título num documento HTML?
</p>
<p>
O meio comum hoje em dia para fazê-lo é:
<font face="Arial" size="4" color="blue">Texto do
Título</font>.
</p>
<p>
Quando eu estudei HTML, em 1996, aprendi que existia uma tag
específica para criação de
títulos. É a tag h1. Assim, a maneira de se
criar um título em HTML seria: <h1>Texto do
Título</h1>.
</p>
<p>
Extremamente mais simples, não é verdade? E
torna o código também mais significativo. Assim
um interpretador pode saber, por exemplo, onde estão
os títulos no meio do texto. Ou seja, esta abordagem
dá significado semântico ao código.
Aquele tag passa a significar alguma coisa, mesmo que
não seja vista num browser que renderize a fonte maior
e azul que você tinha planejado.
</p>
<p>
Aliás, por falar no texto azul, se você usar a
segunda abordagem seu título será exibido com
os estilos padrão do navegador, e seu azul vai para o
beleléu. Como você não quer perder a
bonita formatação que havia planejado, aqui
entra uma segunda linguagem, o CSS. Com CSS você pode
colocar toda essa informação sobre
formatação num arquivo externo. Assim
você fica com um arquivo HTML apenas com
informação (que fica muito mais simples,
organizado e rápido de se escrever) e mantém
toda a formatação num arquivo externo. Se um
dia seu chefe resolver que todos os títulos do site
tem que ser vermelhos ao invés de azuis (acredite,
isso é muito comum) você só
precisará alterar uma palavra em um único
arquivo e todos os títulos do site estarão
automaticamente ajustados.
</p>
<h1>
No Tables
</h1>
<p>
Tabelas são um recurso muito útil do HTML. Sem
tabelas como exibiríamos informações
como uma lista de produtos, um extrato bancário ou um
calendário? O problema é que tabelas tem sido
usadas para muito mais do que isso. É preciso colocar
o menu ao lado do texto? Cria-se uma tabela. É preciso
que o texto tenha uma largura delimitada? Cria-se uma tabela.
Imagem junto ao texto? Menu no cabeçalho? Duas colunas
de texto? Tabela neles!
</p>
<p>
E como fica, nessa situação, a semântica
do documento? Como você deve imaginar, não
há aqui aquela prática separação
entre informação e formatação.
Além disso, temos um outro sério problema: em
browsers antigos, ou mesmo em browsers modernos mal
desenvolvidos, como o Internet Explorer, as tabelas só
são exibidas depois que a última tag
</table> chega ao navegador.
</p>
<p>
É por isso que, quando você está
conectado via dial-up, em alguns sites a tela fica em branco
durante longos segundos (às vezes minutos) até
que é exibido de uma vez só.
</p>
<p>
Abrir mão de tabelas para montar layouts vai tornar
seu código muito menor, mais simples e organizado. Vai
também centralizar a formatação,
colocando tudo que se refere a layout em um único
arquivo. Imagine a facilidade de manutenção.
Melhora também a experiência do usuário,
pois a informação é exibida
instantaneamente, assim que chega ao browser.
</p>
<p>
Dá-se a esta abordagem o nome de tableless. Apesar do
nome, não é a ausência total de tabelas,
mas o seu uso apenas onde é semanticamente
justificável. De lambuja, um documento tableless bem
pensado vai funcionar em qualquer navegador, em qualquer
sistema operacional, mesmo em PDAs.
</p>
<h1>
No Frames, No Pop-ups, No DHTML
</h1>
<p>
Pense muito antes de aplicar uma solução
baseada em frames, DHTML, scripts absurdos, pop-ups, plugins,
ActiveX, Applets ou qualquer outra tecnologia que quebre
essas duas premissas da internet:
</p>
<p>
- A web é um ambiente multiplataforma.
</p>
<p>
- Cada documento na web tem um endereço associado a
ele.
</p>
<p>
Não vou me alongar nesse tópico, mas gostaria
que você tomasse um tempo para ler:
</p>
<ul>
<li>
<a href="http://www.wired.com/news/culture/0,1284,55675,00.html">
http://www.wired.com/news/culture/0,1284,55675,00.html</a>
</li>
<li>
<a href="http://www.digital-web.com/features/feature_2001-6.shtml">
http://www.digital-web.com/features/feature_2001-6.shtml</a>
</li>
<li>
<a href="http://www.digital-web.com/features/feature_2002-09.shtml">
http://www.digital-web.com/features/feature_2002-09.shtml</a>
</li>
<li>
<a href="http://www.useit.com/alertbox/990530.html">http://www.useit.com/alertbox/990530.html</a>
</li>
<li>
<a href="http://www.useit.com/alertbox/9612.html">http://www.useit.com/alertbox/9612.html</a>
</li>
</ul>
<h1>
Vamos com calma
</h1>
<p>
O interessante dessa abordagem baseada na simplicidade
é que você não precisa fazer tudo de uma
vez. Se está inseguro para começar, pode apenas
eliminar as tags <font> e criar um arquivo CSS
único. Ou pode começar usando os recursos de
XML do seu banco de dados para gerar XHTML, ou criando um
RSS. O importante é começar a simplificar antes
que você fique maluco!
</p>
<hr />
<blockquote>
Elcio Ferreira<br />
<a href="http://elcio.locaweb.com.br/">http://elcio.locaweb.com.br/</a><br />
<a href="mailto:[email protected]">[email protected]</a>
<hr /><br />
<small>Escrito originalmente para o <a href="http://www.freecode.com.br/">Freecode</a></small>
</blockquote>
</div>
<!-- #include file="rodape.asp" -->