-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
253 lines (235 loc) · 22.8 KB
/
index.html
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
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="pt-br" lang="pt-br">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Revolução do CSS</title>
<meta name="resource-type" content="document" />
<meta http-equiv="pragma" content="no-cache" />
<meta name="revisit-after" content="7" />
<meta name="classification" content="Internet" />
<meta name="description" content="A Revolução Etc é o site do desenvolvedor web Henrique Costa Pereira sobre diversos assuntos relacionados a webstandards, webdesign, acessibilidade, tableless, XHTML, CSS e outros assuntos infames.A Revolução Etc é o site do desenvolvedor web Henrique Costa Pereira sobre diversos assuntos relacionados a webstandards, webdesign, acessibilidade, tableless, XHTML, CSS e outros assuntos infames." />
<meta name="keywords" content="Henrique Costa Pereira, revolução etc, revolução, webstandards, tableless, semântica web, internet, xhtml, css, webdesign, interface, inclusã digital, desenvolvimento web, browsers, xml, padrões web, blog, atom, rss, feeds, artigos, estudos, layout, acessibilidade, w3c, validação, flávio theruo kaminisse, php, flash, flash mx, javascript, cores, wordpress, Uberlândia, actionscript, devaneios, crítica, política, sociedade, filosofia, cultura, sites, referencias, literatura, cinema, etc " />
<meta name="robots" content="All" />
<meta name="distribution" content="Global" />
<meta name="rating" content="General" />
<meta name="ICBM" content="-18.922, -48.322" />
<meta name="DC.title" content="revoluçã.etc.br" />
<meta name="author" content="Henrique Costa Pereira" />
<meta name="language" content="pt-br" />
<meta name="doc-class" content="Completed" />
<meta name="doc-rights" content="Public" />
<link href="tema/estilos.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="css.js"></script>
</head>
<body>
<div class="background1">
<div class="background2">
<div id="geral">
<div class="navegacao">
<h3 class="menu">Menu:</h3>
<ul class="links">
<li><a href="http://www.revolucao.etc.br" title="Site" accesskey="a">Visite o Revolução Etc </a></li>
<li><a href="http://www.revolucao.etc.br/sobre.php" title="Autor" accesskey="b">Sobre o autor</a></li>
<li><a href="index2.php?folha=padrao" title="Design Principal" accesskey="c">Design Principal</a></li>
<li><a href="http://www.revolucao.etc.br/css/index.htm" title="Download XHTML" accesskey="d">Baixar o <acronym title="Extensible HyperText Markup Language">XHTML</acronym></a></li>
<li><a href="http://www.revolucao.etc.br/css/padrao/estilos.css" title="Download CSS" accesskey="e">Baixar o <acronym title="Cascading Style Sheet">CSS</acronym> principal</a></li>
<li><a href="http://www.revolucao.etc.br/css/padrao/sugestao.css" title="Autor" accesskey="f">Baixar Sugestão de <acronym title="Cascading Style Sheet">CSS</acronym></a></li>
</ul>
<h3 class="escolha">Escolha um Template:</h3>
<ul class="template_list">
<li><a href="index2.php?folha=padrao" title="Revolução Etc" accesskey="1">Tema</a> por <a href="http://www.revolucao.etc.br/" title="http://www.revolucao.etc.br/"><strong>Autor</strong></a></li>
<li><a href="index2.php?folha=padrao" title="Revolução Etc" accesskey="1">Tema</a> por <a href="http://www.revolucao.etc.br/" title="http://www.revolucao.etc.br/"><strong>Autor</strong></a></li>
<li><a href="index2.php?folha=padrao" title="Revolução Etc" accesskey="1">Tema</a> por <a href="http://www.revolucao.etc.br/" title="http://www.revolucao.etc.br/"><strong>Autor</strong></a></li>
<li><a href="index2.php?folha=padrao" title="Revolução Etc" accesskey="1">Tema</a> por <a href="http://www.revolucao.etc.br/" title="http://www.revolucao.etc.br/"><strong>Autor</strong></a></li>
<li><a href="index2.php?folha=padrao" title="Revolução Etc" accesskey="1">Tema</a> por <a href="http://www.revolucao.etc.br/" title="http://www.revolucao.etc.br/"><strong>Autor</strong></a></li>
<li><a href="index2.php?folha=padrao" title="Revolução Etc" accesskey="1">Tema</a> por <a href="http://www.revolucao.etc.br/" title="http://www.revolucao.etc.br/"><strong>Autor</strong></a></li>
<li><a href="index2.php?folha=padrao" title="Revolução Etc" accesskey="1">Tema</a> por <a href="http://www.revolucao.etc.br/" title="http://www.revolucao.etc.br/"><strong>Autor</strong></a></li>
</ul>
<!-- Fim da NAVEGA��O-->
</div>
<div id="conteudo">
<h1>Revolução do <acronym title="Cascading Style Sheet">CSS</acronym></h1>
<div class="intro">
<h2>Introdução. </h2>
<p>Revolução é uma alteração radical do status quo. Revoluções foram feitas por diversas razões, em diversas épocas e representando diversos interesses. Revoluções alteraram regimes políticos, economia, comportamento, métodos científicos, liturgia e conceitos religiosos, sentimentos, fronteiras geográficas , etc. Revoluções são oportunidades de reflexão e alteração das nossas atitudes e de rever conceitos, posturas, opiniões, cultura, decisões, caminhos e planos. </p>
<p>Costuma-se pensar em revolução apenas em um macrocosmo, que afeta milhares de vidas em uma nação ou continente. Uma revolução pode começar pela sua postura profissional, em prezar pela qualidade daquilo que é publicado na web. Esta página foi criada para estimular e encorajar todos os desenvolvedores e webdesigners a levantarem a bandeira dos padrões web, na <strong>Revolução do <acronym title="Cascading Style Sheet">CSS</acronym></strong>! Dramaticidade à parte, esta é uma oportunidade de aprender e de ensinar o que você sabe de <acronym title="Cascading Style Sheet">CSS</acronym>, compartilhando seu trabalho neste espaço. </p>
</div>
<div class="inspiracao">
<h2>Inspiração. </h2>
<p>Como possivelmente centenas de outros sites espalhados pelo mundo foram inspirados no <a href="http://www.csszengarden.com" title="CSS Zen Garden">CSS Zen Garden</a> de Dave Shea também me inspirei nele para fazer o <strong>Revolução do <acronym title="Cascading Style Sheet">CSS</acronym></strong>. Pensando que poderia contribuir e estimular a utilização dos padrões da web no Brasil, resolvi escrever o código desta página de modo que pudesse utilizar o maior número de tags possível, instigando a curiosidade daqueles que querem o desafio de desenvolver um design para esta página utilizando apenas <acronym title="Cascading Style Sheet">CSS</acronym>. </p>
</div>
<div class="publicar">
<h2 class="tit1">Como faço para publicar meu trabalho? </h2>
<p>Para publicar seu trabalho, seria bom que você fosse webdesigner. Não devo ser rígido com o material que receber, mas não se entristeça se eu não publicar seu trabalho. Procure ser criativo com o <acronym title="Cascading Style Sheet">CSS</acronym> o máximo que puder e não altere nada do <acronym title="Extensible HyperText Markup Language">XHTML</acronym> 1.0 Strict .</p>
<p>Sua folha de estilos deve ser 100% validada pela <a href="http://jigsaw.w3.org/css-validator/validator" title="W3C">W3C</a>. Não me envie nenhuma trabalho com erros, inacabado ou ainda no layout. Valide sua folha de estilos antes de submeter seu trabalho. Para desenvolver sua própria versão da Revolução do <acronym title="Cascading Style Sheet">CSS</acronym>, baixe o arquivo de <acronym title="Extensible HyperText Markup Language">XHTML</acronym> aqui, se quiser baixar meu <acronym title="Cascading Style Sheet">CSS</acronym> principal para estudo clique aqui, e após a conclusão do seu trabalho, coloque-o em um servidor e me envie a URL por e-mail.
Se quiser um <acronym title="Cascading Style Sheet">CSS</acronym> com todas as classes já digitadas para te poupar trabalho extra, você pode baixar esta sugestão de <acronym title="Cascading Style Sheet">CSS</acronym> sem nenhum atributo. Nunca envie seu trabalho por e-mail, mesmo que esteja compactado.</p>
<p>Após avaliação, vou solicitar que você me envie seu trabalho compactado para publicação. Todas as folhas de estilos dentro da pasta com o nome do tema, devem ter o nome de "estilos.css". Quero ter o mínimo de trabalho possível na hora de publicar seu trabalho. Imagens e arquivo de <acronym title="Cascading Style Sheet">CSS</acronym> devem ser salvos em uma pasta com o nome do tema do seu design, com exceção do <acronym title="Extensible HyperText Markup Language">XHTML</acronym> que deve estar de fora desta pasta. Devo gastar algum tempo para avaliar e publicar os trabalhos. Se você me enviar um e-mail e eu demorar um pouco para responder não se entristeça. Eu posso demorar mas respondo todos os meus e-mails. </p>
<h2 class="tit2">Aqui vai uma revisão das regras: </h2>
<ol>
<li>Você não pode alterar nada do <acronym title="Extensible HyperText Markup Language">XHTML</acronym>. </li>
<li>Sua folha de estilos deve ser 100% validada pela <a href="http://jigsaw.w3.org/css-validator/validator" title="W3C Validator">W3C</a>. </li>
<li>Não serão aceitos trabalhos que utilizem algum tipo de imagem que possa ser ofensivo. </li>
<li>Você não pode alterar o conteúdo textual desta página por qualquer outro utilizando técnicas de "image replacement". Pode utilizar o quanto de imagem você conseguir, mas certifique-se de que o texto transposto se encontra na imagem. </li>
<li>Para criar sua versão do <strong>Revolução do <acronym title="Cascading Style Sheet">CSS</acronym></strong>, dê o nome de sua folha de estilos de "estilos.css" e salve-a junto com as imagens que utilizar em uma pasta com o nome do tema do seu layout. Não use acentos! </li>
<li>Para submeter seu trabalho, coloque-o em um servidor de sua escolha e me envie apenas a URL por e-mail. </li>
</ol>
</div>
<div class="criativo">
<h2>Seja criativo com a aparência das tags. </h2>
<p>Utilizei várias tags para ampliar o trabalho e o desafio na hora de criar um layout. Nunca deixe de criar um estilo específico para cada tag, por isso será de grande importância para avaliar seu trabalho. Se você não sabe a função de alguma tag, me escreva para sugerir um post. No meu site tenho procurado postar artigos de dúvidas enviados por e-mail. Várias coisas podem ser encontradas na web em português como o <a href="http://www.tableless.com.br" title="Tableless">Tableless</a> do Diego Eis. Estude, pesquise e crie seu trabalho. Procurarei ser o mais atencioso quanto o tempo me permitir. Você pode utilizar minha folha de estilos para estudar, mas não pode copiá-la tecnicamente. </p>
<q>Mais Importante do que saber, é saber onde encontrar.<cite>Albert Eisntein</cite></q>
<p>Essa frase diz tudo sobre como começar um trabalho. Talvez você não tem conhecimento sobre todas as tags usadas aqui, mas saber onde encontrar uma solução nesta hora pode ser muito importante. </p>
<p>Utilizei diversas tags pouco comuns como <code>, <cite>, <caption> e outras. Explore essas tags o quanto puder. No <acronym title="Extensible HyperText Markup Language">XHTML</acronym>, inseri as seguintes divs: </p>
<code>
<div class="background1"> <br />
<div class="background2"> <br />
<div class="absoluto1"> <br />
<div class="absoluto2"> <br />
<div class="absoluto3"> </code>
<p>Elas foram inseridas para que você possa usá-las para inserir backgrounds e imagens com pocisionamento absoluto. Aproveite-as. </p>
</div>
<div class="validacao">
<h2>Sobre as validações e recursos desta página. </h2>
<p>O código desta página foi escrito em <acronym title="Extensible HyperText Markup Language">XHTML</acronym> 1.0 Strict. Validei este documento de acordo com as diretrizes da <a href="http://www.w3c.org" title="W3C">W3C</a> especificadas através do <a href="http://www.w3.org/WAI/" title="Web Content Accessibility Guidelines">Web Content Accessibility Guidelines</a> (<acronym title="Web Content Accessibility Guidelines">WCAG</acronym> - Normas de Acessibilidade de Conteúdo para Internet) validados no mecanismo <a href="http://www.cynthiasays.com/" title="Cynthia Says">Cynthia Says</a> nas modalidades <a href="http://www.section508.gov/" title="Section 508">Section 508 </a> e <a href="http://www.w3.org/WAI/References/" title="WCAG">WCAG 1,2,3 </a>, bem como o <acronym title="Extensible HyperText Markup Language">XHTML</acronym> e o <acronym title="Cascading Style Sheet">CSS</acronym>. Submeti este trabalho também ao validador de acessibilidade brasileiro, Da Silva, produzido pela Acessibilidade Brasil. </p>
<p>Para a navegação, eu utilizei o recurso de Access Keys (Tecla de Acesso) suportado por alguns browsers como o <a href="http://www.mozilla.org/" title="Mozilla Firefox">Mozilla Firefox</a>, que permite saltar para links específicos do site através dessas teclas previamente especificadas. No Windows você pode apertar ALT + TECLA DE ACESSO e para o Macintosh a combinação é CONTROL + TECLA DE ACESSO. </p>
<h4>A relação das teclas são: </h4>
<ul>
<li>A = Visite o Revolução Etc</li>
<li>B = Sobre o autor</li>
<li>C = Design Principal</li>
<li>D = Baixar o <acronym title="Extensible HyperText Markup Language">XHTML</acronym></li>
<li>E = Baixar o <acronym title="Cascading Style Sheet">CSS</acronym> principal</li>
<li>F = Baixar Sugestão de <acronym title="Cascading Style Sheet">CSS</acronym></li>
<li>G = Campo Nome no formulário </li>
<li>H = Campo E-mail no formulário</li>
<li>I = Campo URL no formulário</li>
<li>J = Campo Tema no formulário</li>
<li>K = Campo Comentário no formulário</li>
<li>L = Botão Enviar no formulário </li>
</ul>
<p>Esta postura está vinculada aos recursos utilizados nesta página está relacionada com as seguintes definições: </p>
<dl>
<dt>Semântica:</dt>
<dd>Escrever um código semanticamente correto é utilizar as tags no contexto pelo qual foram criadas.</dd>
<dt>Acessibilidade:</dt>
<dd>O termo "acessibilidade" tem sido muito discutido e citado nos blogs e na web de um modo geral, mas muitos pensam que acessibilidade é igual à inclusão digital . O problema da Inclusão Digital é outra preocupação nacional e está mais relacionado a barreiras econômicas e sociais do que físicas. Acessibilidade representa não só o direito do usuário de acessar a internet, mas também a eliminação de barreiras arquitetônicas, barreiras de disponibilidade do acesso físico a equipamentos e programas adequados para a apresentação da informação em formatos alternativos. Certas técnicas utilizadas aqui foram inseridas para suprimir estas barreiras, e permitir o acesso a outros dispositivos de acesso utilizado por portadores de necessidades especiais.</dd>
</dl>
</div>
<div class="table_gallery">
<h2>CSS Table Gallery </h2>
<p>Inspirado também no trabalho de Chris Heillman, o <a href="http://icant.co.uk/csstablegallery/" title="CSS Table Gallery">CSS Table Gallery</a>, membro do Webstandards Project e ocupado com a parte de DOM Scrip, resolvi inserir uma tabela abaixo onde você pode selecionar outros layouts disponíveis nesta página. Com isso você também poderá exercitar sua criatividade manipulando uma tabela 100% por <acronym title="Cascading Style Sheet">CSS</acronym>. </p>
<table id="tabela" summary="Lista de Layouts">
<caption>Lista de Layouts</caption>
<thead>
<tr>
<th>Tema:</th>
<th>Autor:</th>
<th>Imagens + CSS:</th>
<th>Download do <acronym title="Cascading Style Sheet">CSS</acronym></th>
</tr>
</thead>
<tfoot>
<tr>
<th>Total:</th>
<td colspan="3">6 Layouts </td>
</tr>
</tfoot>
<tbody>
<tr>
<td><a href="#" title="Tema">Tema</a></td>
<td><a href="#" title="Autor">Autor</a></td>
<td>100 kb</td>
<td><a href="#" title="Download">Download</a></td>
</tr>
<tr>
<td><a href="#" title="Tema">Tema</a></td>
<td><a href="#" title="Autor">Autor</a></td>
<td>100 kb</td>
<td><a href="#" title="Download">Download</a></td>
</tr>
<tr>
<td><a href="#" title="Tema">Tema</a></td>
<td><a href="#" title="Autor">Autor</a></td>
<td>100 kb</td>
<td><a href="#" title="Download">Download</a></td>
</tr>
<tr>
<td><a href="#" title="Tema">Tema</a></td>
<td><a href="#" title="Autor">Autor</a></td>
<td>100 kb</td>
<td><a href="#" title="Download">Download</a></td>
</tr>
<tr>
<td><a href="#" title="Tema">Tema</a></td>
<td><a href="#" title="Autor">Autor</a></td>
<td>100 kb</td>
<td><a href="#" title="Download">Download</a></td>
</tr>
<tr>
<td><a href="#" title="Tema">Tema</a></td>
<td><a href="#" title="Autor">Autor</a></td>
<td>100 kb</td>
<td><a href="#" title="Download">Download</a></td>
</tr>
</tbody>
</table>
</div>
<div class="submition">
<p>Obrigado por enviar seu trabalho para o Revolução do CSS. Assim que concluir minha avaliação entro em contato com você.</p>
<form id="form" method="post" action="index2.php">
<fieldset>
<legend>Submeta seu trabalho:</legend>
<div class="campo_bloco">
<label for="nome">Seu nome:</label>
<input id="nome" type="text" size="45" maxlength="60" accesskey="g" title="Coloque seu nome aqui" class="txtfield" />
</div>
<div class="campo_bloco">
<label for="email">Seu E-mail:</label>
<input id="email" type="text" size="45" maxlength="60" accesskey="h" title="Coloque seu nome aqui" class="txtfield" />
</div>
<div class="campo_bloco">
<label for="url">URL:</label>
<input id="url" type="text" size="45" maxlength="60" accesskey="i" title="Coloque a URL aqui" class="txtfield" />
</div>
<div class="campo_bloco">
<label for="tema">Tema do seu trabalho:</label>
<input id="tema" type="text" size="45" maxlength="60" accesskey="j" title="Coloque o nome do seu tema aqui" class="txtfield" />
</div>
<div class="campo_bloco">
<label for="comentariopost">Comentarios:</label>
<textarea name="comentariopost" id="comentariopost" cols="35" class="txtfield" accesskey="k" title="Seus Comentarios" rows="3"></textarea>
<input type="submit" name="Submit" class="botao" title="Submit" accesskey="l" value="Submit" />
</div>
</fieldset>
</form>
</div>
<div class="licenca">
<h2>Licença e Direitos Autorais. </h2>
<p>Criei esta página com uma licença da <a href="http://creativecommons.org/licenses/by-nc-sa/2.0/br/" title="Creative Commons">Creative Commons</a> e consequentemente todo o seu trabalho também estará sujeito à mesma licença, inclusive sua folha de estilos. Esta licença diz que você pode copiar, distribuir, exibir e executar esta obra e criar outras obras derivadas desta desde que não seja com fins comerciais e desde que compartilhe da mesma licença. Para cada novo uso ou distribuição, você deve deixar claro para outros os termos da licença desta obra. Você deve sempre dar crédito ao autor original da obra de forma clara. </p>
</div>
<div class="rodape">
<h2>Validações</h2>
<ul class="rodapevalidacoes">
<li><acronym title="Extensible HyperText Markup Language"><a href="http://validator.w3.org/check?uri=referer" title="XHTML 1.0 Strict">XHTML 1.0 Strict </a></acronym></li>
<li><acronym title="Cascading Style Sheets"><a href="http://jigsaw.w3.org/css-validator/validator?uri=http://www.revolucao.etc.br/css/padrao/estilos.css" title="CSS">CSS</a></acronym></li>
<li><a href="http://www1.acessobrasil.org.br/dasilva/daSilvaWeb.exe/Proc?url=http://www.revolucao.etc.br/css/index.php" title="DaSilva">DaSilva </a></li>
<li><a href="http://www.cynthiasays.com/" title="WCAG"><acronym title="Web Content Accessibility Guidelines">WCAG</acronym> AAA </a></li>
<li><a href="http://www.contentquality.com/mynewtester/cynthia.exe?url=http://www.revolucao.etc.br/css/index.php" title="Section 508">Section 508</a></li>
<li><a href="http://creativecommons.org/licenses/by-nc-sa/1.0/" title="Creative Commons">Creative Commons</a></li>
</ul>
<address>Entre em contato com <a href="http://www.revolucao.etc.br/" title="Henrique Costa Pereira WebSite">Henrique Costa Pereira</a> - [email protected]</address>
</div>
<!-- Fim do CONTE�DO-->
</div>
<!-- Fim do GERAL-->
</div>
<!-- Fim do background 2-->
</div>
<!-- Fim do background 1-->
</div>
<!-- Divs Extras para possicionamento absoluto!-->
<div class="absoluto1"> </div>
<div class="absoluto2"> </div>
<div class="absoluto3"> </div>
</body>
</html>