Figuras da camada inicial
1 - Logo:
Basicamente foi introduzido em um plano de fundo branco o texto de fonte Rage Italic também de cor branca, que para
ser visualizado foi adicionado uma sombra inferior direita negra. Este processo foi realizado no MG PhotoSuite III, que
contribuiu ainda com uma leve inclinação do texto, que depois foi acompanhado por duas linhas paralelas de cor cinza e preta
feitas no Powerpoint.
2 - As mesmas linhas paralelas usadas no logo, só que agora sem inclinação e com tamanho menor posicionaram-se como adereços nas bases dos itens do menu.
A intenção do autor é tentar transparecer no monitor do usuário a escolha de uma alternativa, um "X" representado pela disposição do menu, que significaria escolher algo novo, no caso do autor, aprender construindo um site, e ao mesmo tempo uma leve percepção de um diploma impresso na tela, uma recompensa pelo trabalho finalizado, onde o logo fosse como o título do certificado.
As cores neutras predominantes em todo o site, representariam momentos de aprendizagem, como: o contato dos dedos de um aluno com a caneta esferográfica preta, o apagar de um erro feito a lápis em seu caderno e a folha branca pronta pra novos traços.
Foi empregada o uso de folhas de estilo CSS para construção do layout, onde se destacam o menu da página inicial com listas de diferentes seletores IDs, que determinam diferentes coordenadas entre margens laterais esquerda e superior, incrementando ou reduzindo valores para formação do menu em X (ver seção "menu"), e também na construção das camadas secundárias cujo conteúdo é mostrado ao se clicar no menu.
Como sendo a primeira experiência do autor com conhecimentos adquiridos de forma autodidática e em curto espaço de tempo,é provável que existam algumas limitações para o desenvolvimento do projeto, mas nada que muita pesquisa, disciplina e trabalho não possam ajudar.
Uma das dificuldades percebidas foi encontrar uma forma de desenvolver o site em uma única página, e que as camadas (DIVs) ficassem sobrepostas uma sobre as outras, e quando com o devido evento de um clique no menu da página inicial a camada correposdente ao item clicado se sobressai-se sobre as outras. Ou seja, a intenção, era construir um site onde não houvesse a necessidade de se abrir outras páginas, evitando assim respostas do servidor. Todo o contéudo teria que se resumir em uma única página, sendo que camadas com contéudo ficariam ocultas e somente apareceriam com o comando do usuário ao clicar no menu, comportando-se assim, como se fossem páginas externas.
O autor reconhece que seu conhecimento em javascript é ainda, até então, básico. E somente com ajuda da biblioteca jQuery e uma pesquisa de sua documentação na seção de efeitos foi possível superar esta limitação.
Referências Bibliográficas
EIS, Diego. Centralizando um objeto na Horizontal e Vertical com CSS - Tableless - Desenvolvimento com Padrões Web.
Disponível em: http://www.tableless.com.br/centralizando-um-objeto-na-horizontal-e-vertical-com-css.
Acessado em: 12 de Junho de 2008.
RESIG, John et al. API/1.2/Effects. jQuery JavaScript Library.2007.
Disponível em:http://docs.jquery.com/Effects. Acessado em: 15 de Junho de 2008.
SILVA, Maurício Samy.CSS para Webdesign . Tutoriais e Pensamentos.2003.
Disponível em :http://www.maujor.com/index.php. Acessado em: 14 de Junho de 2008.
Considerações finais
O autor espera que o conteúdo deste site tenha utilidade para alguém, principalmente iniciantes na área de desenvolvimento e design para web. O autor frisa que não é especialista em web e que apenas quis passar o pouco que aprendeu em 6 meses de pesquisa. Todos se sintam a vontade para avaliar e criticar este trabalho. Esperamos que curtem este projeto.
Agradecimentos especiais a todos os sites, blogs e fóruns com conteúdo sobre webdesign, programação e afins, que estão dispostos a fornecer conhecimentos aos internautas interessados.
Autor do site:
Edmilson Francisco do Nascimento (Ed Frannasc).
E o valor da margem superior dos itens que seguem abaixo destes será correspondente ao valor desta soma:
[(border-top= 1px )+(padding-top= 5px )+(padding-bottom= 1px)+(font-size= 13px )+(altura da figura 7= 11px) + (distância entre o item acima = 11)],
TOTAL = 42px, acrescido do valor da margem superior do item antecessor.
O valor da margem esquerda dos itens "idéia central" e "vídeo do trabalho" é de 39px. E os valores dos itens abaixo do item "idéia central", sentido item "outros" e acima do item "vídeo de trabalho", sentido item "visual", serão correspondentes ao valor da margem esquerda do item anterior mais 52,
exceto nos itens "dificuldades" e "como funciona este menu" que se devem acrescentar mais 57.
Conclusão do raciocínio
IDÉIA CENTRAL - margin-left = 39px e margin-top = 0px em relação ao logotipo;
PLANEJAMENTO - margin-left (margim-left do item idéia central + 52) = 91px , e margin-top (margin-top da idéia central + 42) = 42px;
TÉCNICAS USADAS - margin-left (margim-left do item planejamento + 52) = 143px, e margin-top (margin-top do item planejamento + 42) = 84px;
E assim sucessivamente...
Se destacam na construção do site o uso de HTML, CSS, Javascript (biblioteca jQuery), Editor de imagens MGI PhotoSuite III SE, Microsoft Powerpoint e Microsoft Excel.
1 - HTML para inserção do conteúdo;
2 - CSS para formatação do conteúdo, disposição do layout e também na interação com javascript nos efeitos das camadas;
3 - Javascript através da biblioteca JQuery, para efeitos de slideDown, slideOpen, show e hide nas camadas com conteúdo do site;
4 - MGI PhotoSuite III SE, produto da Roxio, para edição construção do logo e alguns tratamentos em pequenas imagens;
5 - Powerpoint, produto da Microsoft, para
construção e conversão dos adereços cinza, branco e preto do menu, e do Esquema Básico de Hierarquia do Conteúdo e Navegação em figuras de extensão jpeg.
6 - Excel, também produto da Microsoft, para construção do Esquema Básico de Hierarquia do Conteúdo e Navegação.
O autor aderiu a técnica Brainstorm e também do questionário abaixo para auxiliá-lo no desenvolvimento;
1- As informações obtidas no brainstorm são suficientes?Meu Primeiro Web Site é um projeto experimental sem fins comerciais, cuja idéia central é descrever o processo de desenvolvimento do mesmo, ou seja, enquanto se cria, tenta-se, na medida do possível, explicar as etapas de criação.
Este é o primeiro trabalho do autor a ser exposto on-line, onde ele preferiu escolher como tema de seu primeiro site, a descrição das etapas de trabalho deste projeto, onde ele pôde praticar os conhecimentos adquiridos em pesquisas.
Este projeto que é baseado em conhecimentos adquiridos em consultas de sites especializados em design e desenvolvimento para web na internet, também tem o intuito de primeiro ser avaliado, pois o autor é consciente de suas limitações técnicas, e segundo, de servir de estímulo para iniciantes assim como ele.