intenção do cliente era ter um banner claro, que não forçasse muito a vista de quem está

vendo, e mostrarei o resultado aqui:

BACKGROUND

Primeiramente você precisa definir seu palco, no caso trabalharei com 900×300 px.

Depois de ter definido seu palco, crie um quadrado e coloca a cor dele como “#E5E5E5″

Abra a imagem a seguir redimencione e coloque no seu palco:

[PEGUE A IMAGEM]

Escolha a posição que melhor desejar e em seguida coloque os efeitos Multiply com o Alpha ou

(Opacidade) com 40%

E pronto você tem um Background está pronto!

MENU DE TRANSIÇÃO

Primeiramente você terá que criar dois, um para o número “1″ e outro para o número “2″ onde

o 1 sera uma base Reta e o 2 com um cortado no meio.

Crie um retangulo do tamanho  29×43 px, no “1″ você usará a ferramente “PEN TOOL” para editalo.
Mas antes clique na ponta do quadrado com a ferramenta ”Subselection Tool – Atalho (A)” que vai dexar seu retangulo editaval, logo após clique “pen tool – Atalho (P)” e crie um ponto, na parte supeior do retangululo, e usando a ferramenta Subselection, defina de sua maneira.

Depois de pronto os retangulos, coloque um Linear horizontalmente, e reto e coloque as cores iguais as da imagem

adicione os efeitos

Ficara assim

Pronto, seu menu de navegação no banner está criado!

OVER
Mesma coisa do menu, você precisará cria um diferente, para os número “1″ e “2″, Mas como os

efeitos e o retangulos são os mesmo é só copiar e colar, para deixa-lo diferenciado, puxe um ponto com a ferramenta “Pen tool” para a esqueda uns 5 ou 7 px para dar impressão que está apontando para o produto.
Para ele você usará um linear verticalmente, usando as seguintes cores:


E Pronto, depois é só criar os outros colocar no flash, e seu banner estará pronto, com os overs e menus de navegação funcionando!

EFEITO NA FONTE
O efeito que usamos na fonte é simples de fazer também, usamos a fonte CityDMed.
O Linear do texto será colocado da seguinte maneira:

Os demais efeitos e informações:
* Tamanho 36
* Smooth Anti-Alias
* Photoshop live effects
    -Drop Shadow
_Color “#232B30″
_Opacity 100%
_Size 5
_Distance 2
_Spread 0
_Angle 120
_Noise 0
   – Bevel and Emboss
_Style: Inner Bebel
_Depth: 100
_Technique: Smooth
_Size: 0
_Direction: Up
_Soften: 0
_Angle: 120
_Highlight: Screen “#A7B5BF” Opacidade 100
_Shadow: Multiply “#000000″ Opacidade 0
ENFEITE e TENTE NOVAS IDÉIAS

Lembrando, você sempre pode tentar fazer algo de diferente em cada banner, trocar efeitos, cores para que nunca seje repetitivo o banner.

Estou escrevendo este post depois de um problema que tive com o flash para submeter alguns inputs para o php. NOTA: estava utilizando o Flash CS5. Eu geralmente utilizava da seguinte forma:

1
2
3
4
5

var carregaForm:MovieClip = new MovieClip();
// ou 
//this.createEmptyMovieClip("carregaForm", this.getNextHighestDepth());
carregaForm.search = search.text;
carregaForm.getURL("busca.php", "_top", "POST");

Daí, na hora do CTRL+ENTER: Destino não encontrado: Destino=”undefined” Base=”_level0″

Não sei se a nova versão do Flash não permite utilizar o getURL com POST, tentei loadVariablesNum() para ver se funcionava e também não deu certo – também pudera, eu acho que loadVariablesNum é a forma mais antiga de se fazer isto. Então vamos perguntar para o Google.

Eu encontrei alguns foruns dizendo para utilizar da seguinte maneira:

1
2
3
4

var variaveis:LoadVars = new LoadVars;
variaveis.nome = _root.nome.text;
variaveis.email = _root.email.text;
variaveis.send("envia.php","_top","POST");

Você ainda pode especificar outra variável LoadVars para retorno e utilizar a função variaveis_envio.sendAndLoad(”arquivo.php”,variaveis_retorno,”POST”);

Mais um site de extrema qualidade foi entregue pela dothCom Consultoria Digital, trata-se do site institucional da Eficas Eficiência em Gasoduto.

A Eficas é uma empresa de Campo Grande-MS focada em prestação de serviços de qualidade para locação, reforma e assistência técnica de equipamentos para empreiteiras e empresas que trabalham em obras de infra-estrutura e construção de gasodutos no Brasil e no mundo.

E pensando no futuro, a empresa resolveu apostar na web para se destacar ainda mais no mercado. Além do mais, o site desenvolvido pela dothCom ficou realmente apresentável e digno de uma grande empresa, como é o caso da Eficas.

O site conta com três opções de idioma, sendo o Português, Espanhol e Inglês, uma vez que a pretenção do grupo Eficas é atenter todos os seus usuários, tanto do mercado local, como internacional.

Além disso, o site conta com uma gama de informações, como a história da empresa, serviços, catálogo de equipamentos, notícias relacionadas a área de atuação e responsabilidade com o meio ambiente.

Vale a pena acessar o site da Eficaz e conhecer ainda mais sobre a empresa e o projeto desenvolvido pela dothCom.

Postado por: Dasayev Teixeira

Este mês de abril a dothCom Consultoria Digital explorou muito a área gráfica para os seus clientes, ao contrário de meses anteriores em que a área de criação estava trabalhando somente em projetos de Web Site, pode se dizer que a dothCom hoje vem expandido bastante seus trabalhos e conquistando a cada dia importantes clientes em todas as área digitais. Fato esse foi a criação do Cartão de visitas para o Patroni Duenha Empreendimentos Imobiliários.

Inicialmente a proposta feita pela equipe da dothCom ao cliente era a de proporcionar algo diferente e ao mesmo tempo atraente, e tudo isso utilizando alguns efeitos e texturas contidos hoje no site da Patroni Duenha.

Para diferenciar de outros cartões, utilizamos uma medida de 7 x 6 cm, algo quase que retangular, mais como citei era para ser algo diferente. Na parte de design inseri um background no mesmo molde do site da Patroni Duenha, na cor azul com detalhes vetorizadas de texturas em cima. Além da Logomarca e o site abaixo. No verso do Cartão, utilizei o mesmo padrão de textura imposta na frente, porém com um Background mais clean, dando destaque principalmente para as informações do cliente.

O resultado da criação foi bem aceita e o resultado vocês podem conferir aqui no Blog.

Por: Dasayev Teixeira

Mais um excelente projeto WEB a dothCom lançou esta semana. Trata-se do website da H2L, uma empresa que tem um propósito de fazer a diferença no ambiente corporativo das organizações e atualmente é uma das instituições de maior destaque no estado, quando se trata de soluções em documentos.

O conceito utilizado para este site foi a de proporciar um site com um formato de papel reciclato, uma vez que a empresa trabalha com soluções para documentos. Enfim, tentamos passar um visual bacana, agradável aos olhos dos usuários, e ao mesmo tempo um site com a cara da H2L.

O projeto ao todo foi bem trabalhada, sendo necessários em torno de 10 dias para ser concluido o layout, isso sem contar com a área de intranet que o site possui.

Podemos dizer que a H2L inovou mais uma vez, pensou em seu funcionários e principalmente nos clientes.

O site possui as área de intranet, institucionais, soluções, parceiros, projetos sociais, perguntas frequentes e o relacionamento direto com o cliente.

Acesse o site.

Por: Dasayev Teixeira

A dothCom entregou mais um site de sucesso, desta vez o destaque ficou por conta do site da empresa Certfica, que é especializada em consultoria e prestação de serviços.

A principal proposta deste projeto foi transparecer aos usuários a cara da Certfica, ou seja, mostrar os segmentos da empresa e ao mesmo tempo abduzir o cliente a conhecer as vantagens de se patentiar uma marca. Logo de cara os internautas que acessam o site, identifica alguns dos principais clientes que registraram sua marca.

Enfim, o site foi totalmente planejado para ser algo atraente e eficaz, e que suprice as necessidades do cliente no âmbito da WEB.

O resultado foi surpreendende e bem acolhido pela Certfica. Para conhecer um pouco mais sobre a empresa e ver esta case de sucesso feita pela dothCom, basta acessar o site.

www.certfica.com.br

Por: Dasayev Teixeira

A tag NOBR força para que o texto não quebre para a próxima linha. Esta tag é útil para palavras ou frases que devem ser mantidos juntos em uma linha. No entanto, note que se a linha de texto é longo, que pode se estender além da margem da janela do navegador, de modo que o usuário deve usar barras de rolagem para visualizar o texto.

Com o tempo e com a propagação do webstandards essa tag passou a ficar obsoleta. Aconselha-se utlizar a seguinte linha de CSS para textos sem quebras:

.nobr {white-space: nowrap; }

Até a próxima.

Muitas pessoas ainda encontram problemas para centralizar divs, principalmente na vertical. Também questionam se o vertical-align:middle funciona, do uso de valores negativos para a webstandards, padrões W3C. Não vou entrar no mérito para dizer o que está certo, qual é mais bonito ou semanticamente correto.

Neste post vou mostrar como centralizar uma div (ou qualquer outro elemento). Com dois casos, o primeiro e mais fácil com altura fixa e o segundo sem altura definida (altura depende do conteúdo).

Para elementos com altura fixa, basta usar posicionamento absoluto, definir o top e left com 50% e puxar negativamente a metade da largura/altura. Seu elemento de altura fixa estará centralizado.

Já para elementos sem altura definida você pode usar o display:table, vertical-align: middle, abaixo mostro como ficaria o CSS.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45

/*COM ALTURA FIXA*/
.centralizado{
   width: 500px;
   height: 200px;
   top: 50%;
   left: 50%;
   margin-top: -100px;
   margin-left: -250px;
   position: absolute;
}
 
/*SEM ALTURA FIXA*/
html, body {
   width:100%;
   height:100%;
   padding: 0px;
   margin: 0px;
}
 
#table {
   width: 100%;
   height: 100%;
   position: static;
   display: table;
   *overflow: hidden; /* hack para o IE6 e IE7 */
   *position: relative; /* hack para o IE6 e IE7 */
}
 
#cell {
   vertical-align: middle;
   display: table-cell;
   position: static;
   *top: 50%; /* hack para o IE6 e IE7 */
   *position: absolute; /* hack para o IE6 e IE7 */
}
 
#conteudo {
   top: -50%;
   width: 500px;
   margin: auto;
   position: relative;
   border:#F00 dotted 1px;
   padding:10px;
   font:12px "Trebuchet MS", Arial, Helvetica, sans-serif;
}

Para altura fixa basta colocar o elemento dentro da tag body ou dentro de um elemento com position:relative, lembrando que neste caso será centralizado dentro deste elemento pai.

Já o HTML para altura indefinda, seria algo na estrutura div#table > div#cell > div#conteudo > conteúdo…

Caso encontrem algum bug, não funcione em algum navegador, queiram criticar ou elogiar sintam-se livres para comentarem, espero ter ajudado.

Solução para altura indefinida encontrada no site do Rogério Lino
Exemplo

jqFancyTransitions é um plugin jQuery fácil de usar para mostrar suas fotos como slideshow com efeitos de transição fantásticos.

jqFancyTransitions é compatível e totalmente testado com Safari 2+, Internet Explorer 6+, Firefox 2+, Google Chrome 3+, Opera 9+.

A estrutura do HTML é bem simples, um elemento com imagens dentro, para exibir legendas adicione os textos nos atributos “alt” das imagens.

Links:
Exemplos e Documentação
jquery-1.4.js
jqFancyTransitions.js
Exemplo comprimido