2.
6 - A ESTRUTURA DOS ARQUIVOS DE UM PROJETO
Como todo tipo de projeto de software, existem algumas recomendações quanto à
organização dos arquivos de um site. Não há nenhum rigor técnico quanto a essa
organização e, na maioria das vezes, você vai adaptar as recomendações da maneira que
for melhor para o seu projeto.
Como um site é um conjunto de páginas Web sobre um assunto, empresa, produto ou
qualquer outra coisa, é comum todos os arquivos de um site estarem dentro de uma só
pasta e, assim como um livro, é recomendado que exista uma "capa", uma página inicial
que possa indicar para o visitante quais são as outras páginas que fazem parte desse
projeto e como ele pode acessá-las, como se fosse o índice do site.
Esse índice, não por coincidência, é convenção adotada pelos servidores de páginas
Web. Se desejamos que uma determinada pasta seja servida como um site e dentro dessa
pasta existe um arquivo chamado [Link], esse arquivo será a página inicial a menos
que alguma configuração determine outra página para esse fim.
Dentro da pasta do site, no mesmo nível que o [Link], é recomendado que sejam
criadas mais algumas pastas para manter separados os arquivos de imagens, as folhas de
estilo CSS e os scripts. Para iniciar um projeto, teríamos uma estrutura de pastas como a
demonstrada na imagem a seguir:
Muitas vezes, um site é servido por meio de uma aplicação Web e, nesses casos, a estrutura
dos arquivos depende de como a aplicação necessita dos recursos para funcionar
corretamente. Porém, no geral, as aplicações também seguem um padrão bem parecido
com o que estamos adotando para o nosso projeto.
2.7 - EDITORES E IDES
Existem editores de texto
como Gedit ([Link]), Sublime([Link] Notepad++ (
[Link] que possuem realce de sintaxe e outras ferramentas para
facilitar o desenvolvimento de páginas. Há também IDEs (Integrated Development
Environment), que oferecem recursos como autocompletar e pré-visualização, como
Eclipse e Visual Studio.
2.8 - PRIMEIRA PÁGINA
A primeira página que desenvolveremos para a Mirror Fashion será a Sobre, que
explica detalhes sobre a empresa, apresenta fotos e a história.
Recebemos o design já pronto, assim como os textos. Nosso trabalho, como
desenvolvedores de front-end, é codificar o HTML e CSS necessários para esse resultado.
2.9 - EXERCÍCIO: PRIMEIROS PASSOS COM HTML
1. Ao longo do curso, usaremos diversas imagens que o nosso designer preparou.
Nesse ponto, vamos importar todas as imagens dentro do projeto que criamos antes para
que possamos usá-las nas páginas.
o Copie a pasta mirror-fashion de dentro da pasta Caelum/43 para a área de trabalho
de sua máquina.
o Verifique a pasta img, agora cheia de arquivos do design do site. Além desta pasta,
teremos as pastas js e css, que ainda não usaremos.
2. Dentro da pasta mirror-fashion, vamos criar o arquivo [Link] com a
estrutura básica contendo o DOCTYPE e as tags html, head e body:
3. <!DOCTYPE html>
4. <html>
5. <head>
6. <meta charset="utf-8">
7. <title>Sobre a Mirror Fashion</title>
8. </head>
9. <body>
10. </body>
11. </html>
12. A página deve ter uma imagem com o logo da empresa, um título e um texto
falando sobre ela.
O texto para ser colocado na página está no arquivo [Link] disponível na
pasta textos. São vários parágrafos que devem ser adaptados com o HTML apropriado.
Após copiar o texto do arquivo [Link] coloque cada um dos parágrafos dentro de uma
tag <p>. Coloque também o título História dentro de uma tag <h2>.
Use a tag <img> para o logo e a tag <h1> para o título. Seu HTML deve ficar assim, no
final:
< img src="img/[Link]">
<h1>A Mirror Fashion</h1> <p>
A Mirror Fashion é a maior empresa de comércio eletrônico no
segmento
de moda em todo o mundo. Fundada em 1932, possui filiais
em 124 países........</p>
13. Um texto corrido sem ênfases é difícil de ler. Use negritos e itálicos para destacar
partes importantes.
Use a tag <strong> para a ênfase mais forte em negrito, por exemplo para destacar o
nome da empresa no texto do primeiro parágrafo:
<p>A <strong>Mirror Fashion</strong> é a maior empresa comércio
eletrônico.......</p>
Use também a ênfase com <em> que deixará o texto em itálico. Na parte da História,
coloque os nomes das pessoas e da família em <em>.
14. A página deve ter duas imagens. A primeira apresenta o centro da Mirror Fashion e
deve ser inserida após o segundo parágrafo do texto. A outra, é uma imagem
da Família Pelho e deve ser colocada após o subtítulo da História.
As imagens podem ser carregadas com a tag <img>, apontando seu caminho. Além disso,
no HTML5, podemos usar as tags <figure> e <figcaption> para destacar a imagem
e colocar uma legenda em cada uma.
A imagem do centro de distribuição está em img/[Link]:
< <figure>
<img src="img/[Link]">
<figcaption>Centro de distribuição da Mirror
Fashion</figcaption> </figure>
A imagem da família é a img/[Link] e deve ser colocada na parte
de História:
<figure>
<img src="img/[Link]">
<figcaption>Família Pelho</figcaption></figure>
Verifique o resultado no navegador. Devemos já ver o conteúdo e as imagens na
sequência, mas sem um design muito interessante.