Bruno Dulcetti



Arquivos:

Categorias:

  • Amizade:

  • Artigos

  • Links:

    O meu, o seu, o nosso espaço!

    » Colírios v.003 – Sites web standards para inspiração!

    Tava devendo o terceiro post sobre os cólírios, mas está aqui. Desculpem a falta de postagem, mas estarei postando ou hoje ou amanhã (provável) um novo artigo pra um bug do ie. (novidade)

    Oilily

    Tipo: Flash

    Site de uma confecção, muito bem feito, com efeitos muito agradáveis, uma bela textura usada no background. Belas fotos e transições, bela idéia da vitória régia com o sapo em cima.

    A parte das coleções, quando vai movendo o cursor na roupa é muito bom também. Interessante o menu com seus respectivos submenus.

    Jason Santa Maria

    Tipo: Webstandards

    Site de um designer gráfico da Philadelphia, bem simples, mas gostei dos detalhes meio que rasgados, um pouco grunge.

    Bela disposição das informações.

    Cloud King

    Tipo: Webstandards

    Site bem simples, mas gostei por ser bem leve e agradável, sem agressividade, clean. Com alguns trabalhos, como uma galeria de arte de alguns designers.

    Fish Marketing

    Tipo: Webstandards

    Bela idéia da tábua pra cortar o peixe, com a faca e o peixe em cima, fazendo parte do design, misturando com o conteúdo.

    A parte das fotos no caderno ficou legal também, pena que tenha sido feito com iframes, poderia ter usado ajax, ou algo do genêro.

    ShaunInman.com

    Tipo: Webstandards

    Site Clean, muito leve e com o recurso bem interessante na navegação, tanto no topo quanto no rodapé. Gostei dos botões utilizados, bem agradáveis, inclusive a combo, com uma jogada com CSS e JS muito interessante.

    Por hoje é só

    Bom, é isso… Akele abraço para todos.

    [BBL]colírios, criações, css, webstandards[/BBL]

    [ 27/set/2006 às 13:09hrs ] [ Por Bruno Dulcetti ] Comentários 4 Comentários |

    Categorias: Colírios

    » Videolog v.0002 – Cia. da Comédia no Jô Soares.

    
    
    

    “Mas por Deus este é Joseph Cliver.” “Sou Eu.”

    Cara, eu morro de rir sempre quando vejo este vídeo. Essa galera da Cia. da Comédia são espetaculares. Já ouvi falar que dão palestras, shows, entre outras coisas. Motiva qualquer setor empresarial, interage…

    Um post pra quebrar um pouco a rotina, rir um pouco porque faz bem.

    Aquele abraço galera.

    [BBL]Videolog, comédia, rir, vídeo, cia, humor[/BBL]

    [ 22/set/2006 às 1:14hrs ] [ Por Bruno Dulcetti ] Comentários 23 Comentários |

    Categorias: Videolog

    » Deixando seu menu com uma opção realçada de acordo com a Seção

    E ae galera… Agora estou aqui não para mostrar sites ou vídeos, mas finalmente para o primeiro artigo dentro da nova versão do Blog 😀

    Estava conversando pelo Gtalk com o Lucas Ferreira sobre webstandards, javascript, etc, quando ele me perguntou:
    ” – Ae Dulcetti, por que você não cria um tutorial sobre como deixar o menu selecionado? Não é difícil não usa js nem nada.”

    Ok Lucas, não foi exatamente isso, mas foi por ae ok? 😀

    A Idéia

    Se vocês verificarem no meu portfólio, viajando pelo menu, verão que cada seção que é aberta, o seu respectivo botão fica selecionado.

    Podem ir lá ver, eu espero… 😀

    Então, para utilizar algo parecido é fácil, você precisaria somente colocar uma classe no link da página referente e está tudo pronto.

    Mas se caso você tiver um site grande, que você precisa colocar includes, para caso haja uma modificação, você naum precise ficar modificando em cada página? A coisa complica não é verdade?

    Por isso estou mostrando esta técnica, para resolver esse probleminha.

    As técnicas utilizadas

    Você não precisa de praticamente nada. Nada de javascript, nada de linguagens dinâmicas nem nada disso. Claro que estarei utilizando includes PHP

    Mas então o que eu preciso Bruno?

    CSS, somente isso… E HTML logicamente 😉

    Mas como isso Bruno?

    Mole mole… E explicarei isso agora 😉

    Mão na massa

    Primeiramente eu mostrarei o código, pra em seguida explicar como que foi feito. Lembrando que não explicarei coisas básicas, como tenho feito anteriormente. Caso não saiba algum comando, temos o W3Schools que é uma ótima referência.

    Primeira Parte – HTML

    Vou mostrar abaixo, o código HTML criado para este exemplo:
    <? include 'head.php'; ?>
    <body id="bodyPrimeira">
    <div id="geral">
    <? include 'menu.php'; ?>
    <div id="conteudo">
    <h1>Título H1</h1>
    <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Sed id ligula. Nunc dapibus, purus quis commodo suscipit, felis risus ultricies pede, ut aliquet lacus mi at nibh. Sed condimentum. Aliquam in sem. Curabitur ornare, mi eu auctor laoreet.</p>
    <h2>Título H2</h2>
    <p>Etiam laoreet pulvinar sem. Sed massa enim, vulputate eget, feugiat blandit, sollicitudin in, mauris. Fusce vestibulum. Nullam elementum. Etiam erat est, interdum vel, ornare ultricies.</p>
    <h3>Título H3</h3>
    <p>Quisque convallis fringilla tortor. Duis tortor diam, placerat semper, fermentum sed, commodo id, magna. Nulla auctor hendrerit ante.</p>
    </div>
    <div id="rodape">Copyright &copy; 2006 - <a href="http://www.brunodulcetti.com/blog/">BrunoDulcetti.com</a></div>
    </div>
    </body>
    </html>

    Não reparem mas utilizei um código parecido com o artigo Menu em Abas sem utilizar imagens. Utilizarei o mesmo código, tanto do CSS quanto do HTML.

    Vamos entender as partes que interessam?

    Vamos sim:

    <? include 'head.php'; ?>

    Isto é um include. Quem trabalha com web já conhece este termo e já deve saber como utilizá-lo (pelo menos eu espero).

    Neste include eu chamo a página head.php, que irá conter o cabeçalho da página, etc.

    <? include 'menu.php'; ?>

    A mesma coisa que o anterior, só que agora chamará a página menu.php, que contém o código do menu que veremos mais a frente.

    <body id="bodyPrimeira">

    Aqui está a novidade, o id dentro da tag <body>. Muita gente desconhece esta técnica e que é possível, é validado, etc. Ela será primordial para a montagem da técnica e a referência para o menu.

    Segunda Parte – Os Includes

    No total temos dois includes, o head.php e o menu.php. Mostrarei os dois, mas falarei somente do segundo, pois o primeiro é apenas um head normal.

    head.php

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
    <title>Deixando seu menu com uma opção realçada de acordo com a Seção</title>
    <link rel="stylesheet" type="text/css" href="estilo.css" />
    </head>

    Não perderei tempo explicando essa parte do código, pois quem já mexe com html sabe muito bem o que quer dizer cada linha ok?

    menu.php

    <div id="menu">
    <ul>
    <li class="primeira"><a href="#" class="menuPrincipal">Principal</a></li>
    <li><a href="#" class="menuEmpresa">Empresa</a></li>
    <li><a href="#" class="menuServicos">Serviços</a></li>
    <li><a href="#" class="menuPortfolio">Portfólio</a></li>
    <li><a href="#" class="menuContato">Contato</a></li>
    </ul>
    </div>

    Uma lista não ordenada, com suas respectivas li’s. O que importará nessa parte do código são as classes dos links dentro dos li’s: menuPrincipal, menuEmpresa, menuServicos, menuPortfolio e menuContato. No css vocês entenderão melhor o seu funcionamento.

    Terceira Parte – CSS

    É no css que vamos fazer o funcionamento do efeito, ele que definirá quando o evento será executado.

    * { margin: 0; padding: 0; }

    body {
    text-align: center;
    font: 70% "Trebuchet MS", Verdana, Arial, Tahoma;
    background-color: #F1F1F1;
    color: #666666;
    }

    ul { list-style: none; }
    p { margin-bottom: 10px; }
    h1 { margin-bottom: 5px; color: #69A90A; font-size: 170%; }
    h2 { margin-bottom: 2px; color: #81C281; font-size: 150%; }
    h3 { color: #709AFE; font-size: 130%; }

    /* ESTRUTURA */
    #geral {
    margin: 10px auto;
    width: 750px;
    text-align: left;
    }

    #conteudo { background-color: #FFF; color: #666; padding: 10px; }
    #rodape { text-align: center; padding: 10px; }
    #rodape a { color: #54A4FC; }
    #rodape a:hover { text-decoration: none; }

    /* MENU */
    #menu ul { height: 1%; display: table; }
    #menu ul li { float: left; margin: 0 4px; }
    #menu ul li.primeira { margin-left: 0; }
    #menu ul li a {
    display: block;
    float: left;
    padding: 5px 12px;
    background-color: #CCC;
    color: #FFF;
    font-weight: bold;
    }

    #menu ul li a:hover { background-color: #FFF; color: #999; text-decoration: none; }

    /* ID BODY */
    #bodyPrincipal #menu ul li a.mnuPrincipal,
    #bodyEmpresa #menu ul li a.mnuEmpresa,
    #bodyServicos #menu ul li a.mnuServicos,
    #bodyPortfolio #menu ul li a.mnuPortfolio,
    #bodyContato #menu ul li a.mnuContato { background-color: #FFF; color: #999; text-decoration: none; }

    Explique agora Bruno

    Bom, explicarei aqui, somente o que não expliquei no artigo do menu sem abas. Se quiser mais explicação de cada parte desse código css, veja o post Menu em Abas sem utilizar imagens. Lembrando que estou utilizando a mesma estrutura do css e praticamente a mesma no html ;).

    A parte que mais nos interessa é o código abaixo:

    #bodyPrincipal #menu ul li a.mnuPrincipal,
    #bodyEmpresa #menu ul li a.mnuEmpresa,
    #bodyServicos #menu ul li a.mnuServicos,
    #bodyPortfolio #menu ul li a.mnuPortfolio,
    #bodyContato #menu ul li a.mnuContato { background-color: #FFF; color: #999; text-decoration: none; }

    Neste bloco de código, temos cinco elementos recebendo as três propriedades: background-color: #FFF; color: #999; text-decoration: none;

    Se vocês perceberem, as propriedades são as mesmas do hover do link. Preferi colocar separadamente para melhor compreensão de todos. Caso queiram mudar, fiquem à vontade ok? 😉

    Vou pegar agora uma delas pra explicar melhor, porque as outras são exatamente a mesma coisa, só modificando os nomes.

    #bodyPrincipal #menu ul li a.mnuPrincipal

    Vamos listar por partes:

    • #bodyPrincipal: Este é o id que setamos no body da página.
    • #menu ul li: Aqui estamos referenciando o menu e sua lista não-ordenada e seus respeticos li’s.
    • a.mnuPrincipal: Aqui referenciamos os links dentro do li, que tenham a classe mnuPrincipal.

    E isso eh expandido quando setamos várias outras citações, como foi o caso. É só colocarmos o id correto no body de cada página, como está sendo feito em todas as páginas deste efeito.

    Na parte das classes dos li’s é que fará a diferença, como citei anteriormente. Caso não fosse setado nenhjuma classe, ele simplesmente pegaria todos os links de todas as li’s e deixariam marcado… É uma união do id do body com a classe do menu… 😉

    Quarta Parte – Resultado Final

    Aqui nós podemos ver o resultado final desta técnica. Viaje pelos links no menu, veja que o menu realçado modifica de acordo com a seção selecionada. Perceba também, que o código é o mesmo, a não ser pela mudança do id do body ;).

    Finalizando

    Vimos que é bem fácil fazer isso. Aposto que você pensou que fosse mais complicado não é verdade?

    Usamos declarações básicas dentro do css e do html, nada de muito avançado. Mas qualquer dúvida, é só postar.

    Aquele abraço

    [BBL]artigos, css, xhtml, webstandards, tutorial, usabilidade, dicas[/BBL]

    [ 18/set/2006 às 15:05hrs ] [ Por Bruno Dulcetti ] Comentários 17 Comentários |

    Categorias: Artigos,CSS,Webstandards

    » Colírios v.002 – Sites web standards para inspiração!

    Falae pessoal… Segue o segundo capítulo de posts sobre layouts inspiradores, a Categoria Colírios. São lindos sites tanto em flash quanto webstandards, etc.

    Não vou ficar enrolando vocês muito aqui naum :P, vamos logo direto ao assunto:

    Jonathan Yuen

    Tipo: Flash

    Site em Flash de um designer gráfico de Singapura, num estilo oriental, com uma música muito agradável com barulhos de pássaros, que estou ouvindo até agora 😀

    Movimentos sutis, bem no estilo oriental mesmo, figuras e transições harmoniosas. Muito bom.

    Forest Forever

    Tipo: Flash

    Outro site com uma música alucinante, hipnotizante… Belas transições, bela apresentação, layout agradável apesar de ser bem pesado.

    Destaque para a parte da galeria de fotos. Cada uma mais linda que a outra, muito bom trabalho.

    dimix.it

    Tipo: Webstandards

    Um Blog/Portfólio de um webdesigner. Jogou bem com as tonalidades em verde, o menu é bem interessante, tipo uma vitrola que vai de acordo com o mouse para a seção apontada.

    Uma bela jogada com o alt dos links, o rodapé ficou bem style também. Belo trabalho.

    The Horizontal Way

    Tipo: Webstandards

    Um projeto muito interessante, onde ele mostra alguns cases de sites que foram criados com uma navegação na horizontal.

    O layout é bem interessante, uma mistura de grunge com natureza.

    jp33

    Tipo: HTML/Tabelas

    Site do Jeremy Prasatik, um designer gráfico muito competente por sinal. O site não é webstandards, já vou avisando logo, mas pela beleza e surrealismo do site e dos seus trabalhos, vale muito a pena verificar.

    Trabalhos de altíssima qualidade e nível. Ótima inspiração.

    Por hoje é só

    Bom, é isso… Akele abraço para todos.

    [BBL]colírios, criações, css, webstandards[/BBL]

    [ 12/set/2006 às 13:26hrs ] [ Por Bruno Dulcetti ] Comentários Comente |

    Categorias: Colírios

    » Feliz Dia da Independência

    Dia da Inpendência do Brasil

    Interessante… Estive passando no net, quando entre no Google, qnd me deparei com a estilização da logomarca Identidade Visual deles…

    Manero, gostei…

    Apenas isso… Akele abraço…

    [ 07/set/2006 às 19:26hrs ] [ Por Bruno Dulcetti ] Comentários 5 Comentários |

    Categorias: Pessoais

    » Videolog v.0001 – Deputado Samuel Silva

    
    
    

    Falae pessoal. Primeiro post na Categoria Videolog, uma nova categoria onde postarei vídeos em destaque, vídeos engraçados, entre outros, postados no Portal Videolog.tv. Comentei sobre esta categoria no Post de lançamento da Segunda Versão deste Blog.

    Como estamos em ano eleitoral, onde vamos eleger o presidente, governador, senador e deputados, estou mostrando um vídeo de um candidato que tem palavras e um bom argumento. 😛

    Como que pode passar na cabeça de um sujeito de fazer isso? Se ainda fosse o seu número, que é o que iremos colocar nas urnas, menos pior, mas o nome? uhauahuahuahuahua..

    Cada um que me apareçe… Essa é a nossa política… Viva o Brasil \o/

    Akele abraço.

    [BBL]humor, política, videolog[/BBL]

    às 14:20hrs ] [ Por Bruno Dulcetti ] Comentários 9 Comentários |

    Categorias: Videolog

    » Colírios v.001 – Sites web standards para inspiração!

    Primeiro post da nova categoria que comentei no super hyper ultra mega lançamento da nova versão do Blog, a Colírios, na qual postarei cinco trabalhos que podem servir como referência e inspiração (leram? inspiração e não plágio) para suas futuras criações.

    Esses trabalhos geralmente serão webstandards, mas também publicarei alguns em flash.

    É isso. Segue abaixo a lista:

    Diesel Heaven

    Tipo: Flash

    O melhor de hoje na minha opinião. Uma mistura de vídeos, animações espetaculares. Visual muito bonito, efeitos detalhistas. Você vai se sentir nas nuves. Vale o clique.

    SantaFe

    Tipo: Flash

    Apresentação de um dos carros da Hyundai, o SantaFe. Muito bom os efeitos, bela idéia, os menus, etc. Me deu até vontade de comprar um, pena que não posso… 😛

    Arcipelago Ragazzi

    Tipo: Webstandards Tabelas

    Site bem agradável, com um design bem clean e amigável. Um pouco infantil é verdade, mas com uma harmonia muito boa.

    [UPDATE]
    O Leonardo Souza chamou minha atenção no post e realmente vi que o site não é webstandards… Desulpe a mancada galera… Da próxima vez eu analisarei o código mais afundo.
    [/UPDATE]

    GNV & Partners

    Tipo: Webstandards

    Site de uma empresa de tecnologia. Design simples, porém eficaz. Muito interessante a área das imagens, o único problema é que é uma área bem extensa, em uma resolução 800×600 pode ser meio chato de ver o conteúdo.

    Fisyco Hungary

    Tipo: Webstandards

    Gostei da idéia do fichário. Idéia é um pouco manjada, mas a qualidade da foto é muito boa, fora o menu feito com as abas laterais que deu uma idéia maior ainda de agenda/fichário.

    Bom, é isso… Fica aqui minha primeira postagem nessa categoria. Não esperem que futuramente escreva assim, daqui a pouco estarei de saco cheio e escreverei somente os links mesmo… auhauhuahuahaua

    Akele abraço.

    [BBL]colírios, criações, css, webstandards[/BBL]

    [ 05/set/2006 às 18:26hrs ] [ Por Bruno Dulcetti ] Comentários 5 Comentários |

    Categorias: Colírios

    Próxima Página »

    
    Copyright © 2005 Bruno Dulcetti | Creative Commons
    Bruno Dulcetti atuante na área de desenvolvimento web / webdesign e colaborador na área de webstandards pelo Blog BrunoDulcetti.com - blog. Atuante na área desde 2000. Atuando na cidade de Niterói/RJ - Brasil. E-mail: bruno@brunodulcetti.com