From Labmm2

Contents 1 Intro 2 No início… Logotipo e Layout 3 Estrutura HTML: 4 Estrutura CSS 5 Estrutura javasript 6 Especificações técnicas ou “Vamos ao que interessa” 6.1 Logotipo: 6.2 Facebook, Twitter, MySpace e Yahoo: 6.3 .corner 6.4 As galerias 6.5 Formulário 7 Conclusão

Intro

Com a ciação do meu portfólio online pretendo mostrar o meu lado criativo como designer gráfico e web. Também quero mostrar qual é a importancia das novas tecnologias da comunicação hoje em dia e porque escolher um designer em vez de um template gratuito. Quero cativar clientes para que possa abrir o meu caminho profissional como freelancer, e quem sabe, talvez conseguir algo mais do que freelancer.

No início… Logotipo e Layout

Primeiro criei o meu logotipo, pois queria dar uma imagem pessoal e criativa ao projecto. Comecei a elaborar o template para o site. O template Nº 1 era pouco maduro para os fins pretendidos. O template Nº2 era demasiado “site dos anos 90”. O template Nº 3 era visualmente agradável mas tinha um defeito: as letras brancas não tinham legibilidade. Encontrei o background actual de uma maneira curiosa: quando estava à procura de “mini-icons” de links para o Facebook, Twitter, e-mail e afins, apareceu uma sugestão muito interessante de um possível background, um padrão que se assemelhava aos antigos sacos de café e, realmente, apercebi-me que me identificava bastante com aquele estilo e concluí que era a escolhe ideal para o fundo do site. Tinha sido exactamente assim que tinha imaginado o meu projecto.

Estrutura HTML:

http://wikis.ua.pt/labmm2/index.php/File:Estrutura-html.pdf

Estrutura CSS

http://wikis.ua.pt/labmm2/index.php/File:Estrutura-css.pdf

Estrutura javasript

http://wikis.ua.pt/labmm2/index.php/File:Estrutura-javascript.pdf

Especificações técnicas ou “Vamos ao que interessa”

Um dos maiores problemas a resolver no meu site foi o da transparência. O fundo dos conteúdos e a barra do menu fizeram-me perder algumas horas até conseguir dar a volta ao assunto. Primeiro, tentei com: .bar {

       height: 4em;
       padding-top: 2em;
       filter:alpha(opacity=50);
       -moz-opacity:0.5;
       -khtml-opacity: 0.5;
       opacity: 0.5;
       background: black;
       border-top: 3px solid #ccc;
       border-bottom: 3px solid #ccc;
       margin-top: 5.0em;

}

Não resultou e tive que usar a boa velha técnica: fundo em .png transparente. O problema é que também não funcionava até eu pôr position:static;

Assim, continuei com o projecto:

.menu_bar { background:url(imgs/menu_bar.png); height:65px; width:1200px; position:static; margin-top:10px; margin-left:auto; margin-right:auto; }

Logotipo:

a.logo { background:url(imgs/logo.png); height:152px; width:150px; position:absolute; top:15px; left:180px; } É também um link para a página index.html: <a href="index.html" class="logo"></a>

Facebook, Twitter, MySpace e Yahoo:

a.facebook { position:absolute; background:url(imgs/facebook_100.png); height:75px; width:75px; display:block; top:110px; left:805px; cursor:pointer; } a.twitter { position:absolute; background:url(imgs/twitter_100.png); height:75px; width:75px; display:block; top:110px; left:865px; cursor:pointer; } a.myspace { position:absolute; background:url(imgs/my-space_100.png); height:75px; width:75px; display:block; top:110px; left:925px; cursor:pointer; } a.yahoo { position:absolute; background:url(imgs/yahoo_100.png); height:75px; width:75px; display:block; top:110px; left:985px; cursor:pointer; }

Eu sei que assim é mais trabalhoso, mas preferi ter maior controlo sobre cada um dos elementos.

O html ficou assim:

<a href="http://www.facebook.com" class="facebook"></a> <a href="http://www.twitter.com" class="twitter"></a> <a href="http://www.myspace.com" class="myspace"></a> <a href="mailto:dimitar_kokov@yahoo.com" class="yahoo"></a>

.corner

A classe “corner” < class="corner">notícias> serve para alterar o nome da página em que o utilizador se encontra. O código CSS da mesma é: .corner { position: relative;

       top: 155px;	

margin:0px; margin-left:1100px; color:#FFFFFF; font-family:"Open Sans", "Open Sans Extrabold", "Open Sans Light", "Open Sans Semibold"; font-size:13px; }

As barras transparentes

O fundo transparente e o menu

são duas divs que me deram bastante trabalho, devido à posição “static”, pois em qualquer outra posição ficavam por cima do texto e perdiam a transparência.

As galerias

Adorei esta parte do trabalho porque tive um desafio: partir de uma galeria javascript e “parti-la aos bocadinhos” para poder manipulá-la em CSS. Assim fiz, utilizando este código javascript:

function Gallery(nome) { switch (nome) { case "foto1": document.getElementById("fotografia").innerHTML="<img src='foto1.jpg' />" ; break; case "foto2": document.getElementById("fotografia").innerHTML="<img src='foto2.jpg' />" ; break; case "foto3": document.getElementById("fotografia").innerHTML="<img src='foto3.jpg' />" ; break; case "foto4": document.getElementById("fotografia").innerHTML="<img src='foto4.jpg' />" ;

} }

Utilizei este código HTML:

E manipulei as DIVs de forma a obter um resultado adequado para o meu site:

1. area_galeria {

position:relative; width:400px; height:200px; margin-top:158px; margin-left:120px; margin-right:auto;

}

1. thumbnails {

margin-top:240px; display:block; height:50px; width:400px; margin-left:730px; cursor:pointer;

}

1. fotografia {

position:relative; width:10px; height:10px; margin-top:0px;

margin-left:120px; }

No início, pensei usar jQuery mas com o javascript e o CSS fiquei satisfeito com o resultado.

Formulário

Semelhante à Galeria mas sem javascript, utilizei HTML e tratei manualmente as várias classes, para obter o efeito final. Este é o código css:

.form { position:absolute; margin-top:170px; margin-left:250px; width:500px; height:350px; background-image:url(imgs/bg_form.png); background-position:top; background-repeat:no-repeat; } input, textarea { margin-left:20px; border: solid 1px #E5E5E5; outline: 0; font-family:"Open Sans", "Open Sans Extrabold", "Open Sans Light", "Open Sans Semibold"; top:200px;

width: 200px; background: #FFFFFF url('imgs/bg_form.png') left top repeat-x; background: -webkit-gradient(linear, left top, left 25, from(#FFFFFF), color-stop(4%, #EEEEEE), to(#FFFFFF)); background: -moz-linear-gradient(top, #FFFFFF, #EEEEEE 1px, #FFFFFF 25px); box-shadow: rgba(0,0,0, 0.1) 0px 0px 8px; -moz-box-shadow: rgba(0,0,0, 0.1) 0px 0px 8px; -webkit-box-shadow: rgba(0,0,0, 0.1) 0px 0px 8px; }

textarea { width: 400px; min-width:400px; max-width: 400px; height: 150px; max-height:150px; }

input:hover, textarea:hover, input:focus, textarea:focus { border-color: #C9C9C9; -webkit-box-shadow: rgba(0, 0, 0, 0.15) 0px 0px 8px; }

.form label { margin-left: 10px; color: #999999; }

.submit input { width: auto; padding: 9px 15px; background:#FF6600; border: 0; font-size: 14px; color: #FFFFFF; -moz-border-radius: 5px; -webkit-border-radius: 5px; }

Pensei usar PHP para enviar o formulário directamente para o meu mail ma,s como não faz parte do programa, dispensei-o, baseando-me no “mailto”:

<form class="form" action="mailto:dimitar_kokov@yahoo.com"

 method="POST"
 enctype="multipart/form-data"
 name="EmailTestForm">

Conclusão

Estas foram algumas das especificações técnicas que me permitiram desenvolver o projecto. Claro que ter acesso através do Facebook às dicas e opiniões de todos os colegas e do Professor foi muito útil, devido à troca de informação e resolução simultânea de problemas. Quis fazer um site com um design simples e funcional, que apresentasse o meu lado de designer e que fosse visualmente agradável. Desde há 6 anos que uso sempre Flash e confesso que esta foi uma experiência extremamente interessante, pois nunca tinha construído um site inteiro em HTML5/CSS3 e javascript. Admito que aprendi muito e que vou aperfeiçoar a minha maneira de construir sites utilizando estas tecnologias pois tenciono trabalhar com elas no futuro.