Pinceladas da WebTutoriais sobre: XHTML, CSS, JavaScript e WebStandards

Bom galerinha, inicialmente irei me apresentar.

Meu nome é Flávio Rodrigues sou “Programalista” e trabalho com PHP a aproximadamente 6 anos. Sou (como colaborador) novo aqui no Pinceladas da Web e começarei porém, acompanho o blog a uma longa data… ire postar sobre PHP, não sou muito de encher linguiça e então vamos direto ao assunto.

Não sou “Designer” então, todos os meus exemplos, provavelmente não terão o visual muito “bunitinho” mass……. o que importa para nós programadores não é a buniteza da coisa, mas sim a funcionabilidade!

Como primeiro (próximo) um amigo sugeriu para eu falar sobre como criar um sistema de login utilizando usuário e senha para área restrita. Essa semana irei providenciar isso, caso alguem tenha mais sugestões, sempre serão bem vindas!

Sites desenvolvidos em Flash eram a algum tempo atrás mal compreendidos pelos search engines, se você queria aparecer nas buscas deveria correr do Flash, a melhor opção ainda era o HTML (não que ainda não seja). Mas a algum tempo atrás o Google anunciou que seu Search Engine indexa Flash, uma boa opção para aqueles que gostam de sites desenvolvidos com essa tecnologia.

Mas isso não era o suficiente e essa semana tomei conhecimento que a Adobe disponibiliza um Centro de Tecnologia SEO para Flash para auxiliar os desenvolvedores a tornarem suas aplicações mais amigáveis para a web. Através do site você pode encontrar exemplos a serem seguidos com melhores práticas para conseguir melhor posicionamento nos buscadores.

Fica a dica para os profissionais de SEO. Vi a dica no site SEOMaster.

Como podemos produzir código semântico utilizando HTML5? Essa é a pergunta que toda a comunidade de desenvolvedores gostaria de obter a resposta. Abaixo você vai encontrar um exemplo de código em HTML 5 onde o objetivo é tornar o código mais “usável”, acessível, utilizando poucas classes e ID’s.

Continuar lendo »

Desenvolver um menu drop down em CSS que funcione em todos os browsers, incluíndo o Internet Explorer 6, não é uma tarefa fácil, mas hoje vou mostrar aqui uma forma de fazer um menu drop down somente com CSS, sem a utilização de JavaScript e crossbrowser. Vejam uma prévia do menu final.

Para aqueles que não sabem, o Internet Explorer não interpreta o :hover corretamente (digo a versão 6), ele só interpreta o :hover na tag “a”, com isso você não consegue criar o menu drop down somente com CSS, precisa do JavaScript somente para o IE6 para que funcione corretamente.

Um exemplo de uma função em JavaScript utilizada para criar menu dropdown é essa:

Continuar lendo »

Para algumas pessoas isso com certeza pode ser o fim do mundo, pois com a chegada do HTML5 e o formato de vídeo aberto ogg poderíamos criar facilmente vídeo players na web sem a utilização de Flash. O Youtube já provou que isso é possível com sua página teste desenvolvida em HTML5, você só precisa de um browser capaz de entender corretamente as tags <audio> e <video> para ver o funcionamento da página.

Se ainda está curioso para saber mais sobre o poder das tags <audio> e <video>, veja abaixo o vídeo do site TechCruch onde o diretor do Mozilla Firefox mostra o que poderá ser feito em relação a áudio e vídeo quando o HTML5 for lançado:

Esse efeito de Accordion que vou mostrar aqui hoje pode ser usado não somente para menus, mas também para outras finalidades. É muito simples conseguir esse tipo de efeito utilizando a jQuery, que proporciona uma simplicidade ao escrever código JavaScript. A marcação HTML utilizada nesse exemplo é a seguinte:

<dl>
	<dt><a href="http://www.pinceladasdaweb.com.br/blog/">Pinceladas da Web</a></dt>
	<dd>
        <ul>
            <li><a href="http://www.pinceladasdaweb.com.br/blog/category/css/">CSS</a></li>
            <li><a href="http://www.pinceladasdaweb.com.br/blog/category/xhtml/">XHTML</a></li>
            <li><a href="http://www.pinceladasdaweb.com.br/blog/category/webstandards/">WebStandards</a></li>
        </ul>
	</dd>
	<dt><a href="http://www.cssnolanche.com.br">CSS no Lanche</a></dt>
	<dd>
        <ul>
            <li><a href="http://www.cssnolanche.com.br/categoria/css/">Tutoriais CSS</a></li>
            <li><a href="http://www.cssnolanche.com.br/categoria/javascript/">JavaScript</a></li>
            <li><a href="http://www.cssnolanche.com.br/categoria/jquery/">jQuery</a></li>
        </ul>
	</dd>
	<dt><a href="http://www.jquery.com">jQuery</a></dt>
    <dd>
        <ul>
            <li><a href="http://docs.jquery.com/Downloading_jQuery">Download</a></li>
            <li><a href="http://docs.jquery.com/">Documentação</a></li>
            <li><a href="http://docs.jquery.com/Tutorials">Tutoriais</a></li>
        </ul>
    </dd>
</dl>

Continuar lendo »

Fui convidado recentemente por um amigo a usar o Yahoo meme, uma tentativa de cópia do Twitter, que ainda está em fase Alpha, mas com algumas pequenas diferenças onde você pode diretamente nele postar além de texto, fotos, vídeo e música.

Mas como eu sou um cara gente boa, tenho 3 convites para estar disponibilizando aqui no blog, portanto, as 3 primeiras pessoas que comentarem aqui levam os convites. Se você é um dos 5 leitores desse blog, corre que dá tempo.

Infelizmente não tenho convite para todos, mas se aqueles que eu convidar, cada um convidar mais 3 pessoas e assim suscetivamente, todo mundo terá convite.