-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
133 lines (110 loc) · 12.6 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
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8">
<meta name="author" content="Allan Felipe">
<meta name="keywords" content="design, css, cascading, stylesheets, html, js, javascript, design gráfico, w3c, padrões web, visual">
<meta name="description" content="Uma demonstração do que pode ser conseguido visualmente por meio de um design baseado em CSS e Javascript">
<meta name="robots" content="all">
<title>Jardim Web: Local para cultivar idéias e talentos</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style type="text/css">
@import "./css/css.css";
</style>
<link rel="Shortcut Icon" type="image/x-icon" href="favicon.png">
</head>
<!--
Este documento html foi criado de modo a permitir a maior flexibilidade possível na adaptação
do design. Assim, há algumas classes e tags extras que não são realmente necessários.
Em uma situação real, o documento provavelmente seria muito mais limpo.
Ainda assim, eu acredito que todos nós podemos concordar que, mesmo com esses tags extras, o documento
ainda fica muito melhor do que ficaria se tivesse sido construído com tabelas.
-->
<body id="css-web-garden">
<div id="container" class="page-wrapper">
<div class="intro" id="jar-intro">
<div id="jar-header" class="header">
<h1><span>Jardim Web</span></h1>
<h2><span>Local para cultivar idéias e talentos</span></h2>
</div>
<div class="summary" id="jar-summary">
<p class="p1"><span>Uma demonstração do visual construído com <acronym title="Cascading Style Sheets">CSS</acronym>. Escolha qualquer estilo da lista para carregar um novo design.</span></p>
<p class="p2"><span>Faça o download dos arquivos de exemplo <a href="jardim-index.html" title="O código HTML desta página que não deve ser modificado">html</a> e <a href="jardim-estilo.css" title="Este é o arquivo CSS desta página; é o código que você deve modificar">css</a>.</span></p>
</div>
<div class="preamble" id="jar-preamble">
<h3><span>O caminho da evolução</span></h3>
<p class="p1"><span>Entulhando uma escura e aterrorizante estrada jazem as relíquias antigas de elementos específicos a navegadores, <acronym title="Document Object Model">DOM</acronym>s incompatíveis e falta de suporte correto ao padrão <acronym title="Cascading Style Sheets">CSS</acronym>.</span></p>
<p class="p2"><span>Precisamos limpar as nossas mentes das práticas passadas. A evolução Web foi atingida graças aos esforços incansáveis de pessoas como os membros do <acronym title="World Wide Web Consortium">W3C</acronym>, <acronym title="Web Standards Project">WaSP</acronym> e dos criadores dos principais navegadores em uso atualmente.</span></p>
<p class="p3"><span>O Jardim Web convida você a relaxar e meditar nas importantes lições do Mestres. Comece a ver com clareza e aprenda a usar as técnicas consagradas pelo tempo de maneira nova e revigorante.</span></p>
</div>
</div>
<div class="main supporting" id="jar-supporting">
<div class="explanation" id="jar-explanation">
<h3><span>Sobre o que é este site?</span></h3>
<p class="p1"><span>Existe uma clara necessidade de que artistas gráficos e desenvolvedores Web levem o padrão <acronym title="Cascading Style Sheets">CSS</acronym> mais a sério. O Jardim Web tem como alvo entusiasmar, inspirar e encorajar a participação de todos. Para começar, veja alguns dos designs existentes na lista. Ao clicar em qualquer um deles, a folha de estilo correspondente será carregada nesta página. O código permanece o mesmo; a única coisa que muda é o arquivo .css externo. <b>Sério!</b></span></p>
<p class="p2"><span>O <acronym title="Cascading Style Sheets">CSS</acronym> permite o controle completo e total sobre o modo como um documento é renderizado. O único modo pelo qual esse fato pode ser demonstrado de uma maneira que entusiasme as pessoas é demonstrar quão verdadeira é a realidade do mesmo, uma vez que as rédeas são colocadas nas mãos daqueles que são capazes de criar beleza a partir da estrutura. Até o dia de hoje, a maior parte dos exemplos e truques interessantes que podem ser feitos nesta área foram demonstrados por desenvolvedores. Artistas gráficos ainda caminham pouco por este jardim.</span></p>
</div>
<div class="participation" id="jar-participation">
<h3><span>Participação</span></h3>
<p class="p1"><span>Qualquer pessoa podem participar. Você vai modificar o visual desta página e, para isto, uma boa dose de habilidade com o <acronym title="Cascading Style Sheets">CSS</acronym> é requerida, embora os arquivos de exemplo estejam comentados o suficiente para permitir que mesmo novatos com o padrão possam usá-los como uma base para seus experimentos. Para dicas e tutoriais avançados sobre <acronym title="Cascading Style Sheets">CSS</acronym> veja o <a href="http://www.maujor.com" title="ótimo site para aprender CSS">site do Maujor</a>.</span></p>
<p class="p2"><span>Você pode modificar a folha de estilo de qualquer maneira que achar necessária, mas o <strong>código <acronym title="HyperText Markup Language">HTML</acronym> deve ser deixado como está</strong>. Isso pode parecer difícil no começo se você nunca trabalhou desse modo antes, mas use os arquivos de exemplo como guias e o as <a href="http://en.wikipedia.org/wiki/Web_development_tools">ferramentas de desenvolvimento dos navegadores</a>.</span></p>
<p class="p3"><span>Faça o <i>download</i> dos arquivos de exemplo <a href="examplo/jardim-index.html" title="O código HTML destá página que não deve ser modificado">html</a> e <a href="examplo/jardim-estilo.css" title="Este é o arquivo CSS desta página; é o código que você deve modificar">css</a> para trabalhar localmente. Assim que você completar a sua obra-prima (e, por favor, não envie trabalhos incompletos). <strong><a href="plantar/" title="Use o formulário de contato para nos mandar o seu arquivo CSS">Envie seu trabalho</a> para povoar nosso jardim</strong>.</span></p>
</div>
<div class="benefits" id="jar-benefits">
<h3><span>Benefícios</span></h3>
<p class="p1"><span>Para quê participar? Para obter reconhecimento, inspiração, e um recurso ao qual todos nós poderemos nos referir quanto batalharmos pelo uso de designs baseados em <acronym title="Cascading Style Sheets">CSS</acronym>. Um dia esta galeria será uma curiosidade histórica; porém, este dia ainda não chegou.</span></p>
</div>
<div class="requirements" id="jar-requirements">
<h3><span>Requerimentos</span></h3>
<p class="p1"><span>Nós gostaríamos de ver o máximo possível de <acronym title="Cascading Style Sheets, versão 2">CSS2</acronym>. O uso de <acronym title="Cascading Style Sheets, versão 3">CSS3</acronym> deve ser limitado aos elementos suportados pelos navegadores em uso atualmente. O Jardim Web existe para demonstrar o uso prático e funcional do padrões <acronym title="World Wide Web">Web</acronym>. O único requerimento real, entretanto, é que o seu <acronym title="Cascading Style Sheets">CSS</acronym> esteja válido.</span></p>
<p class="p2"><span>Infelizmente, criar o design dessa maneira colocará em evidência as falhas nas várias implementações <acronym title="Cascading Style Sheets">CSS</acronym> disponíveis atualmente. Diferentes navegadores comportam-se de maneira distinta quanto a alguns elementos, mesmo quando o <acronym title="Cascading Style Sheets">CSS</acronym> é válido. Isso pode se converter em uma fonte de frustrações, principalmente quando uma correção para um navegador atrapalha outro. Compatibilidade total com todos navegadores ainda é um sonho e nós não esperamos que você consiga um design perfeitamente preciso até o último pixel em todas as plataformas. Mesmo assim, teste em todas que conseguir.</span></p>
<p class="p3"><span>Nós pedimos que você envie ilustrações originais. Por favor, respeite as leis de copyright. Mantenha o material questionável ao mínimo: pornografia, ou <a href="http://www.dpf.gov.br/institucional/campanhas/crimes-contra-os-direitos-humanos-na-internet">crime</a> será rejeitada imediatamente.</span></p>
<p class="p4"><span>Este é um exercício de aprendizado na mesma medida em que é uma demonstração. Você manterá o copyright completo de todos os seus gráficos, mas pedimos que você libere o seu <acronym title="Cascading Style Sheets">CSS</acronym> sob uma licença Creative Commons idêntica à <a href="http://creativecommons.org/licenses/by-nc/4.0/" title="Veja a informação da licença do Jardim Web">deste site</a> de modo que outros possam aprender do seu trabalho.</span></p>
</div>
<div class="footer" id="jar-footer">
<a class="jar-validate-html" href="http://validator.w3.org/" title="Verifique a validade do XHTML deste site">html</a>
<a class="jar-validate-css" href="http://jigsaw.w3.org/css-validator/check/referer" title="Verifique a validade do CSS deste site">css</a>
<a class="jar-license" href="http://creativecommons.org/licenses/by-nc/4.0/" title="Veja os detalhes da licença deste site, cortesia de Creative Commons">cc</a>
<a class="jar-accessibility" href="http://www.ilearn.com.br/TR/WCAG20/" title="Verifique a acessibilidade deste site de acordo com as WAI Content Accessibility Guidelines 2">aaa</a>
</div>
</div>
<div class="sidebar" id="jar-link-list">
<div class="wrapper">
<div class="design-selection" id="jar-selection">
<h3 class="select"><span>Escolha uma Planta:</span></h3>
<ul>
<li><a href="#" class="design-name">Planta 1</a> por <a href="#" class="designer-name">Fulano 1</a></li>
<li><a href="#" class="design-name">Planta 2</a> por <a href="#" class="designer-name">Fulano 2</a></li>
<li><a href="#" class="design-name">Planta 3</a> por <a href="#" class="designer-name">Fulano 3</a></li>
<li><a href="#" class="design-name">Planta 4</a> por <a href="#" class="designer-name">Fulano 4</a></li>
<li><a href="#" class="design-name">Planta 5</a> por <a href="#" class="designer-name">Fulano 5</a></li>
</ul>
</div>
<div class="design-archives" id="jar-archives">
<h3 class="archives"><span>Arquivos:</span></h3>
<ul>
<li class="next"><a href="#">Próxima Planta <span class="indicator">›</span></a></li>
<li class="previous"><a href="#"><span class="indicator">‹</span> Planta anteior</a></li>
<li class="viewall"><a href="#">Veja todas as espéimes</a></li>
</ul>
</div>
<div class="design-resources" id="jar-resources">
<h3 class="resources"><span>Recursos:</span></h3>
<ul>
<li><a class="view-css" href="#" title="Veja o código do arquivo CSS para o design atual.">Veja o código <acronym title="Cascading Style Sheets">CSS</acronym> do design atual</a></li>
<li><a class="css-resources" href="http://www.csszengarden.com/" title="Link da idéia inicial criado por Dave Shea.">Css Zen Garden</a></li>
<li><a class="jar-submit" href="plantar/" title="Envie o seu próprio arquivo CSS.">Envie seu design</a></li>
</ul>
</div>
</div>
</div>
</div>
<!-- Estas divs e spans extras podem ser usados para adicionar outras imagens de preenchimento -->
<div id="extraDiv1"><span></span></div>
<div id="extraDiv2"><span></span></div>
<div id="extraDiv3"><span></span></div>
<div id="extraDiv4"><span></span></div>
<div id="extraDiv5"><span></span></div>
<div id="extraDiv6"><span></span></div>
</body>
</html>