Adobe Dreaweaver é um programa completo para o desenvolvimento e gestão de websites, que trabalha com tecnologias como HTML, CSS, Javascript e PHP, entre outros. Um detalhe importantíssimo que Dreamweaver tem, é que se você começou a fazer o seu website em um outro programa qualquer, não terá de começar de novo se pretender mudar para Dreamweaver – O programa não irá destruir/alterar o código que você criou! Nesta décima parte do Guia Dreamweaver, vamos-lhe mostrar como introduzir divs com posicionamento absoluto dentro desta aplicação. Está pronto para começar?

Na parte XIV deste Guia Dreamweaver vamos abordar o manuseamento de websites dentro do aplicativo, mantendo a organização e controle dos ficheiros do seu website. Este é um dos processos mais chatos e que mais tempo consome a um web designer. Quando você vê um fantástico website na internet, por trás tudo não passa de um grande conjunto de ficheiros HTML, imagens, ficheiros CSS, código Javascript entre outros, que todos juntos fazem funcionar e levam até si o website. A verdade é que quantos mais ficheiros tiver de manter organizados, maior a probabilidade de você cometer um erro e basta que um simples elemento esteja incorreto e poderá comprometer todo o website, fazendo com que a sua imagem tanto pessoal como profissional saia mal vista.

Não perca os artigos anteriores desta série:

Adobe Dreamweaver CS5

Felizmente os computadores são exímios a executar tarefas que para nós humanos são entediantes e nada empolgantes, então por isso mesmo foi criado o manuseamento de websites em Adobe Dreamweaver, que em termos rápidos lhe permite manter os seus ficheiros organizados e com total controle sobre eles, permitindo ao web designer ou ao desenvolvedor manter o seu foco e concentração naquilo que realmente precisa.

1. ESTRUTURA DE UM WEBSITE

Quando você planeia e constrói um website, provavelmente irá passar várias horas a preparar as linkagens, navegação, conteúdo claro e acessível para os seus visitantes, fazendo com que a arquitetura do website torne fácil para os visitanres perceberem onde estão dentro do mesmo, aumentando assim a usabilidade do seu website. Assim como você organiza o front end do seu website, é imperatório manter organizados os bastidores do mesmo, e como é normal, a organização dos ficheiros faz-se separando-os por áreas recorrendo a diretórios.

Da mesma forma que você organiza os ficheiros no seu computador no dia a dia utilizando os diretórios, irá organizar os ficheiros do seu website, separando-os por áreas. Um exemplo básico de organização dos ficheiros de um website passa pela criação de diretórios onde irão ser separados os ficheiros, e passamos a apresentar um exemplo:

  • Diretório Principal
    • CSS
    • Imagens
      • Nav (imagens utilizadas na navegação)
      • Home (imagens utilizadas na página inicial)
      • Gloabal (imagens usadas em todo o website)
    • Sobre
    • Serviços

Este é um exemplo básico da estrutura dos diretórios de um website. Naturalmente que dependendo das funcionalidades que introduzir no website poderão ser inseridos novos diretórios para fazer a organização, como é o caso da utilização de Spry’s, em que são necessários ficheiros específicos que ficariam dentro da pasta SpryAssets.

2. PONTOS FULCRAIS

Agora passamos a falar sobre alguns pontos a ter em conta quando se faz o manuseamento e organização de um website e da sua estrutura, que certamente o irão ajudar imenso na tarefa. Lembre-se que quando se cria um website tem de se ter em conta que no futuro poderão existir modificações, adições de conteúdo e funcionalidades, pelo que será importante garantir que o website está preparado para poder um dia receber essas alterações.

Pense no futuro

Como é óbvio e tirando algumas excepções, quando um website é criado a intenção é que ele cresça, receba conteúdo, atualizações regulares, que consiga manter o acompanhamento na evolução da linguagem em que tenha sido desenvolvido. Aquando da criação do website você poderá ter apenas conteúdo, palavras e imagens para criar 5 ou 10 páginas, mas daqui a uns meses poderá ter conteúdo para criar um catálogo online com centenas de páginas – e se o seu website não estiver preparado para receber esse volume e essas alterações? Terá de fazer um novo, desperdiçando tempo e dinheiro. É importante que os websites comecem com uma estrutura sólida e organizada que permita alterações futuras sem ser necessário ter de refazer o website.

Outro ponto muito importante e que abordámos no ponto anterior tem a ver com a organização das imagens utilizadas no website, criando diferentes diretórios para as diferentes secções do website. Imagine que tem um catálogo online com imensas imagens, seria um pouco fora do senso comum inserir as imagens do catálogo no mesmo diretório onde tem as imagens da navegação. Então crie um diretório dentro do diretório geral de imagens chamado catalogo e la dentro insira as imagens, simples assim!

Siga a arquitetura do website

Se você no design do website tem determinadas secções, na organização dos diretórios siga essas secções. Se tiver Serviços, Sobre, Localização e Contatos, na organização crie diretórios com esses nomes e separe os ficheiros. É importante que você se mantenha fiel á arquitetura do website e seja disciplinado ao manter a organização ao longo do tempo, caso contrário e com o crescimento do website, poderá perder o controle e entrar num mar de total desorganização, levando a possíveis erros e quebras no serviço.

Organize os ficheiros por tipo

Guia Dreamweaver - Gerenciamento de Websites

Depois de criar os diretórios para cada uma das secções do website, provavelmente irá necessitar de criar novos diretórios para organizar outros tipos de ficheiros, como os ficheiros de imagens, ficheiros CSS, Javascript e outros. Um dos métodos para organizar as imagens de um website é criar um diretório geral de imagens e dentro deste criar sub-diretórios para segmentar as imagens por secção do website. outro dos métodos é criar vários diretórios (do gênero imagens_home, imagens_nav), mas pessoalmente prefiro organizar as imagens criando um diretório principal com sub diretórios segmentados relativamente ás secções do website.

No que toca á organização dos outros tipos de ficheiros, nomeadamente ficheiros de estilização, scripts e outros, é preferível criar um diretório para cada tipo de ficheiros e separá-los, contribuindo assim para uma maior organização e mantendo os ficheiros separados, evitando a possibilidade de existirem erros futuros no manuseamento dos mesmos. Em jeito de conclusão, você poderá utilizar diferentes métodos para organizar os seus ficheiros, de acordo com a sua preferência, e seja ela qual for, simplesmente utilize e organize os ficheiros!

Utilize nomes perceptíveis

Guia Dreamweaver - Gerenciamento de Websites

A utilização de nomes perceptíveis é um ponto bastante importante no que toca á organização de um website.  A utilização de nomes como a.html, b.php, c.js e d.css não são nada explicítos sobre o seu conteúdo ou teor, pelo que você provavelmente na próxima vez que for editar o website não saberá o que cada um dos ficheiros é e qual o seu conteúdo. Estamos a falar de ficheiros mas podemos falar igualmente dos diretórios, e como falámos acima é importante ter diretórios bem organizados, e com nomes nada explícitos essa organização pode ir por água abaixo. Um bom método para aumentar ainda mais a perceptibilidade dos ficheiros é adicionar um prefixo aos mesmos, como por exemplo em imagens que estejam relacionadas com a navegação do website, inserir o prefiro nav_ antes do nome que quer dar ao ficheiro. Desta forma é sabido de antemão que aquele ficheiro está relacionado com a navegação do website.

Pegando em um exemplo concreto, imagine que você cria o website com nomes de diretórios e ficheiros sem nexo e nada explícitos, você hoje sabe o que eles têm e qual o papel no website, mas amanhã saberá? Provavelmente não. No futuro você contrata um freela para trabalhar consigo, ele vai pegar nos ficheiros de um website, saberá ele o que cada uma das pastas tem? Saberá o que cada um dos ficheiros é e qual o seu papel no website? Garantidamente não saberá e será o caos para se trabalhar assim. Então, para seu próprio bem não pense apenas no presente e previna o futuro, crie nomes de diretórios e ficheiros explícitos para que você e algum colaborador que possa vir a ter saibam trabalhar com o website sem ser necessário passar horas a descobrir o que é cada pasta e cada ficheiro presente no website.

Mantenha a consistência enquanto desenvolvedor

Se você utiliza determinados métodos para fazer a organização do seu website criando diretórios e ficheiros de uma maneira, siga sempre esses métodos. Se em um website você deu o nome “imagens” para o diretório das imagens, em um outro website não dê o nome de “gráficos” e noutro website “gráficos_imagens”. Não insira diferentes tipos de ficheiros em diferentes diretórios com diferentes nomes que nada têm a ver com os ficheiros. Se você utiliza um nome para um diretório, utilize sempre esse nome em todos os websites. Desta forma, se você estiver a trabalhar em diferentes websites, os nomes dos diretórios onde estão os ficheiros são os mesmos e o trabalho será facilitado e não dificultado pela incerteza sobre qual o nome do diretório onde estão as imagens ou sobre qual o nome do diretório onde estão os ficheiros de estilização.

Mantenha-se fiel a um determinado tipo de organização e siga-o sempre, desta forma irá tornar-se gradualmente um profissional metódico e com menos probabilidade de cometer erros desnecessários, fazendo com que a sua imagem perante um cliente saia a ganhar.

Abraço!

 

Autor: Diogo Espinha

Blog do Autor | Artigos do Autor:

Workaholic e totalmente viciado em computadores, Internet e desporto motorizado. Adora praticar desporto, é um curioso da programação em PHP, CSS e HTML5 e não dispensa a companhia do seu Mac OSX 86 Snow Leopard!

  • Explorer - Factory Construction & Ship Building Joomla Theme
  • Justice - Attorney and Law Firm Joomla Template
  • OwnFolio - One Page Personal Portfolio / vCard / Resume / Showcase Joomla Template
  • Big Business - Responsive Template
  • Merab - Creative Multipurpose Drupal 8 Theme
  • Fitness Academy Joomla Template
  • Fruition - Business Joomla Template
  • Educate | Education & Courses, Kindergartens Joomla Template
  • Constructive - Contractors Multipurpose Joomla Landing Page Theme
  • Vina Bubox - VirtueMart Joomla Template for Online Stores
  • BizOne - One Page Parallax Drupal Theme
  • LawHouse - Responsive Lawyers Attorneys Joomla Template

Gostou deste artigo? Então torne-se fã do Blog no Facebook!



Comentários dos Alunos

RSS
Twitter
Facebook
Comentários
ASSINANTES
SEGUIDORES
FÃS
COMENTÁRIOS
7794

Subscrever Newsletter
Subscreva a Newsletter:



Aplicativos Android, iPhone e Muito Mais!




Assine a Escola Criatividade Assine a Newsletter da Escola Criatividade Escola Criatividade no Twitter Escola Criatividade no Facebook Escola Criatividade no Youtube Escola Criatividade no Google Buzz