DK multimedia solutions

From Labmm2

(Difference between revisions)
Jump to: navigation, search
(Created page with "Aqui poderão encontrar informação sobre o desenvolvimento da minha página pessoal a que dei o nome: dk multimedia solutions. Nos próximos dias vou actualizar o estado em que...")
 
(4 intermediate revisions not shown)
Line 1: Line 1:
-
Aqui poderão encontrar informação sobre o desenvolvimento da minha página pessoal a que dei o nome: dk multimedia solutions.
+
=Intro=
-
Nos próximos dias vou actualizar o estado em que se encontra o meu projecto. Para já podem ver o layout e o logotipo do meu site.
+
 
 +
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=
 +
 
 +
[[File:Logo mm 4 copy.jpg|left|thumb|DK Multimedia Solutions Logo]]
 +
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.
 +
[[File:Site_layout.jpg‎|thumb|left|Layout nº1]]
 +
[[File:SITE PESSOAL2.jpg||left|thumb|Layout nº2]]
 +
[[File:textura01.jpg|thumb|left|Layout nº3]]
 +
[[File:Final.jpg|thumb|left|Layout Final]]
 +
 
 +
 
 +
=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 <div class="bar"></div> e o menu <div class="menu_bar"></div>
 +
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:
 +
<div id="area_galeria">
 +
<div id="fotografia"></div>
 +
<div id="thumbnails">
 +
<img src="thumb1.jpg" onmouseover="Gallery('foto1')" border="0" /> 
 +
<img src="thumb2.jpg" onmouseover="Gallery('foto2')" border="0" />
 +
<img src="thumb3.jpg" onmouseover="Gallery('foto3')" border="0" />
 +
<img src="thumb4.jpg" onmouseover="Gallery('foto4')" border="0" />
 +
 
 +
 
 +
</div>
 +
</div>
 +
 
 +
E manipulei as DIVs de forma a obter um resultado adequado para o meu site:
 +
 
 +
#area_galeria {
 +
position:relative;
 +
width:400px;
 +
height:200px;
 +
margin-top:158px;
 +
margin-left:120px;
 +
margin-right:auto;
 +
 +
}
 +
 
 +
#thumbnails {
 +
margin-top:240px;
 +
display:block; height:50px; width:400px;
 +
margin-left:730px;
 +
cursor:pointer;
 +
 
 +
}
 +
#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.

Latest revision as of 00:22, 22 June 2011

Contents

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

DK Multimedia Solutions Logo

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.

Layout nº1
Layout nº2
Layout nº3
Layout Final


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:

<img src="thumb1.jpg" onmouseover="Gallery('foto1')" border="0" /> <img src="thumb2.jpg" onmouseover="Gallery('foto2')" border="0" /> <img src="thumb3.jpg" onmouseover="Gallery('foto3')" border="0" /> <img src="thumb4.jpg" onmouseover="Gallery('foto4')" border="0" />


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.

Retrieved from "http://wikis.ua.pt/labmm2/index.php?title=DK_multimedia_solutions"
Personal tools
Namespaces
Variants
Actions
Navigation
Toolbox