Página do projeto | Instruções | Demo 1 | Demo 2

A Estratégia

A estratégia que montei para este plugin tem o mesmo objetivo dos demais, mais de uma forma diferente. Basicamente os plugins atuais ou pedem unicamente para atualizar o Internet Explorer ou usar outro navegador, o que não acho interessante em nenhum dos casos. Mais por quê? Simplesmente porque se eu unicamente atualizar o Internet Explorer 6 para uma versão mais recente (no momento seria o IE8), os outros browser que convenhamos, são melhores, iriam “ficar de lado”, o que não considero bom pois as novidades estão surgindo dos “outros” browser, além da taxa de novas atualizações serem bem maior do que o Internet Explorer. Há mais motivos, mais você já deve estar processando em sua mente boa parte deles .

Por outro lado, se eu somente migrar para outro navegador, o bendito do IE6 vai continuar instalado no PC do seu visitante, correndo o risco de volta e meia ele usar o IE6, o que não queremos.

Bom diante disso o Adeus IE6, primeiramente bloqueia o usuário (em outra palavras ele não navega no site ), “forçando” a atualização…mais ele vai ser convencido de que será melhor atualizar logo seu navegador .  Em primeiro caso a atualização do Internet Explorer, depois…se ele quiser…ele testa outro browser (Melhor um pássaro na mão do que 2 voando). Enfim o visitante terá todas as opções, agora caberá a ele fazer a sua escolha.

Tome Cuidado

Falo isso pois cada website tem a sua realidade…este site por exemplo, desde que foi desenvolvido, foram 889 visitas do IE6 no prazo de 1+ ano, em comparação ao total de visitas não chega nem a 4% (to falando sério). É claro que meu público alvo são webdesigners e relacionados, ou seja, ninguém usa IE6, o que já não ocorre em um portal de uma cidade por exemplo. Não da pra você bloquear usuários do IE6 em site se eles fazem boa parte dos visitante…é suicídio fazer isso!!!

Adeus IE6 Veio Para Somar

Adeus IE6 é somente uma forma diferente para uma boa ação: atualizar o Internet Explorer 6. Se você não gostou desse plugin, vou listar os melhores que já vi na internet, veja qual se encaixa à sua necessidade e use-o!!!!

IE6 No More – Exibe um alerta para a atualização do navegador. Em diversas línguas.
Update Your Browser -  Criado por Richard Barros também é uma ótima opção para quem deseja um modelo mais simples. Vale a pena dar uma conferida. Também em diversas línguas.
Atualize seu Navegador – Campanha patrocinada pela iMasters para eliminar browsers antigos do mercado.

Como Usar Adeus IE6?

Simples, fácil e rápido. Apenas cole o código a seguir no seu site ou pegue o código fonte no Github - personalize, mude as cores, faça o que quiser, contando que ajude a dar um fim no Internet Explorer 6 já é mais do que suficiente (Não se esqueça de dar os devidos créditos para quem fez ).

<!--[if lt IE 7]>
<script type="text/javascript" src="http://mateus007.github.com/Adeus-IE6/jquery.adeus.ie6.min.js"></script>
<![endif]-->

Não é necessário iniciar o plugin, o processo já é automático… Lembre-se também que Adeus IE6 é um plugin jQuery então é necessário que você tenha a biblioteca em seu site.  Se você vai passar a usar o plugin, obrigado por apoiar este projeto, se não thanks pela leitura…

Comentem o que acharam e divulguem para a sua rede de contatos!!!

Linha Framework

Trata-se de um framework (meio obvio não?) para desenvolvimento front-end – HTML, CSS e Javascript. Se você já usou algum grid CSS, como o 960.gs ou Blueprint por exemplo, irá se familiarizar facilmente com este framework, mas o Linha Framework é mais completo.

É mais completo pois não fica somente no grid CSS, temos o grid template (PSD), marcação HTML e CSS em português, sem falar do plugins para jQuery em português támbem. Acredite, desenvolver com um framework poupa e muito o seu tempo. Passando um pouco para a prática, você poderá desenvolver as três camadas (HTML, CSS e JS) de uma só vez, de forma fácil e rápida.

Não vou ficar tratando dos detalhes pois você pode encontrar os mesmos visitando o site do Linha Framework. Recomendo que baixem inicialmente a versão para desenvolvimento, pois contém demonstrações dos grids, plugins, enfim…é mais completo e melhor para iniciantes.

Fugindo um pouco do foco

Resolvi desenvolver este framework quando estava diante de um projeto mais complexo, ai já me empolguei e hoje está como você pode ver ai (no Github é mais atualizado ). Não espero rebecer os “meus parabéns” (além do mais que eu não criei este framework pensando nisso…) , pois creio que há muito a ser melhorado, e pra isso conto com a ajuda da comunidade brasileira. Se quiser críticar, seja bem vindo, mais faça um crítica conclusiva e objetiva.

Como já disse, é pra comunidade brasileira (quem sabe a gente não conquista o mundo, ashhausdha), pois a comunidade brasileira “ta fraca”…

É isso, se desejar teste o framework e crie a sua própia opinião, pra mim é uma mão na roda bem grande, mais pra você, já é outra conversa. As novidades talvez serão postadas aqui, ou quem sabe eu crio um blog só pra ele. De qualquer forma eu vou trazer alguns tutoriais e screencasts para ajudar quem deseja usar.

Quero deixar bem claro que é um framework open souce e eu não gostaria de desenvolver sozinho, se você tem amplos conhecimentos em front-end e quêr ajudar no desenvolvimento, ou fazendo tutoriais, melhorar a documentação, ou seja lá o que for, saiba que seu esforço é de grande importância.

Visite http://www.linhaframework.com, baixe e use a vontade. Aproveite e divulgue também em sua rede social.

Antes de terminar este post, quero dizer também que estou reformulando meu site já usando o linha framework…ta ficando bunitu

Até a próxima.

http://www.bestwebframeworks.com/

É o site precisávamos…uma vez selecionado a linguagem, será exibida uma tabela com pelo menos alguns pontos básicos:

• Licença;
• Requisitos;
• Recursos;
• Compatibilidade.

Quem tiver dúvidas creio que ao visitar este site terá mais certeza de qual framework precisa. Para não ficar só na dica eu vou falar os melhores na minha opinião:

PHP

O framework que mais me agrada é o Codeigniter. Lembro de quando eu nem sabia PHP e fui me meter com ele sem nem saber pra que servia, rsrs. Mesmo não sabendo nada eu fui capaz de fazer algumas coisas e recomendo. Com um pouco mais de detalhes, a documentação do Codeigniter é bem completa, simples e fácil e tem até em português (http://www.codeigniter.com.br/manual/index.html),  sua instalação é a mais rápida que já vi e o desenvolvimento é: PHP, não é necessário aprender uma nova “linguagem” como no Zend Framework enfim, na minha opinião não tem melhor.

Site Oficial Codeigniter
Codeigniter Brasil
Documentação Codeigniter em Português

Ruby

Não sou nenhum programador Ruby mais sei que o melhor e mais conhecido framework é o Ruby on Rails.  Este frameworks é usado em grandes sites como Twitter, GitHub , Basecamp, BlogsBlogs entre outros. Nem vou falar mais nada apenas visitem o site http://www.rubyonrails.pro.br/, se empolgue e tire as suas próprias conclusões.

Site Oficial Ruby on Rails (inglês)
Documentação Ruby

Javascript – JS

Se você é um leitor do meu blog já deve saber que jQuery é o frameworks que uso para programar javascript. Mesmo depois de tanto tempo usando jQuery ainda me surpreendo com a facilidade de se programar com essa biblioteca. Para você que ainda não conhece o jQuery recomendo que leia o post Introdução ao jQuery e veja também os tutorias em sua categoria.

Site Oficial jQuery
Documentação jQuery

CSS

E por último para CSS recomendo o Grid 960. O GRID 960 é uma ferramenta simples que ajuda na padronização de layouts para web. Possui arquivos (grids) para os mais famosos programas usados para criação de layouts (Photoshop, Illustrator, Fireworks, Indesign, etc…). Seu desenvolvimento é bem fácil também e ajuda bastante no desenvolvimento do layout em CSS.

Site Oficial Grid 960
Download do Grid 960

Em breve se possível estarei trazendo mais novidades sobre cada um destes frameworks e tutoriais para aprendizado. Até a próxima.

primeiramente vamos a um e-book(dividido em 5 partes) em português para iniciantes:

o livro foi desenvolvido por Mário Santos e tem de tudo, no final você já vai saber fazer algumas animações conexão com banco de dados, alterar, excluir, enfim fazer um sisteminha bacana.quem quiser baixar este e-book e mais algumas coisas visite http://msdevstudio.com/blog/downloads/ e boa sorte..

Agora aqueles que não gostam de ler e não tem problema com screencasts em inglês você pode aprender diretamente do site da adobe http://www.adobe.com/devnet/flex/videotraining/

Acho que já tem conteúdo o bastante para aprenderem, uma vez que um conteúdo leva a outro (por isso que eu gosto da internet, hehe).

abraços e até a próxima.

Demonstração / Download

Primeiro vamos ao conceito.Seria um modelo já produzido para agilizar o seu trabalho como webdesigner, por exemplo, você ta la ganhando o pão de cada dia e se depara com um menu como este…não é mais facil usar o famoso CTRL+C e CTRL+V? pois bem, este é o conceito…e acredite, sua produtividade vai aumetar e muito...chega de fica perdendo tempo escreve linhas e linhas de código, torrando a cabeça, ouvindo o chefe gritar no seu ouvido porque o job ta atrasado…ta bom, eu apelei mais é essa a intenção.
É claro que cada menu é diferente um do outro e tals, enfim…o objetivo é ter em mãos um modelo propriamente feito, compatível com todos os navegadores, ai é só fazer o jogo do copiar e colar, um pouquinho de alteração aqui…outro ali…e voala…menu certinho e produzido pelo menos na metade do tempo. Já deu pra entender né…

Como não te muito o que falar vamos logo ao bendito menu em css:

HTML:

<ul class="menu">
<li><a href="">Home</a></li>

<li><a href="">Contato</a></li>
<li><a href="">Serviços</a></li>
<li><a href="">Musica</a></li>
<li><a href="">Teste</a></li>
</ul>

O codigo HTML é só isso mesmo, uma lista simples, nada demais…

CSS:

ul.menu li {
float:left;
background: #333;
padding:0px;
line-height: 30px;
border-style: solid;
border-width: 1px;
border-color: #404040 #1a1a1a #1a1a1a #505050;
}
ul.menu li a{
display: block;
padding: 5px 30px;
color: #fff;
font-size:17px;
font-family:Arial,Helvetica,sans-serif;
text-decoration: none;
font-weight: bold;
}
ul.menu li a:hover, ul.menu li:hover{
color: #fff;
background: #4698ca;
border-top-color: #5db1e0 !important;
border-left-color: #5db1e0;
}

Se você fizer o download dos arquivos verá que quase todas as linhas de códigos do CSS (algumas seria idiotisse comentar) estão comentadas explicando o funcionamento de cada uma.

Até a próxima.

Passo 1 – Chamar a biblioteca jQuery para o documento:

<script src="js/jquery.min.js" type="text/javascript"></script>

Passo 2 – insira o código abaixo logo após o anterior:

<script type="text/javascript">
$(document).ready(function(){
$(document).bind("contextmenu",function(e){
return false;
});
});
</script>

é so isso.salve a pagina e teste…

Resumindo…quando o usuario clica com o botão direito deveria aparecer o menu de contexto (contextmenu), mas o script executa a função return false, fazendo com que não apareça o menu…
Funcionalidade:
Este script funciona em todos os navegadores, excerto Opera

Até a próxima.

Tem de tudo…HTML/XHTML, CSS, JavaScript (incluindo MooTools e jQuery), e mais alguns.Espero que ajude a todos:

HTML/XHTML

1. HTML Help Sheet

• PDF

2. HTML Cheat Sheet

• PDF
• PNG

3. HTML Character Entities Cheat Sheet

• PDF
• PNG

4. XHTML Cheat Sheet v. 1.03 – PDF

CSS

5. CSS Cheat Sheet (V2)

• PDF
• PNG

6. CSS Cheat Sheet

• PDF
• HTML

7. CSS Shorthand Cheat Sheet

• PDF

8. CSS Level 1 Quick Reference – PDF

9. CSS Level 2 Quick Reference – PDF

10. CSS2.1 Quick Reference Card – PDF

11. CSS2 Reference Guide – PDF

JavaScript

12. JavaScript Cheat Sheet

• PDF
• PNG

13. Addison-Wesley’s JavaScript Reference Card – PDF

14. JavaScript and Browser Objects Quick Reference

• PDF

15. The most common DOM methods at a glance – PDF

16. JavaScript Quick Reference Card/Cheatsheet

• PDF

17. mootools 1.2 cheat sheet

• PDF

18. jQuery Cheatsheet

• PNG

19. jQuery 1.2 Cheat Sheet

• PDF

20. jQuery Visual Map – PNG

Variados

21. RGB Hex Colour Chart

• PDF
• PNG

22. The Web Developer’s SEO Cheat Sheet

• PDF

23. The WordPress Help Sheet

• PDF

Alias vamos ao creditos:
Six Revision – Excelente site, apesar de ser em inglês…recomendo a todos

Até a próxima.

A respostas para o suas dúvidas esta na imagem abaixo:

até a proxima e FELIZ ANO NOVO A TODOS

Hoje vou postar algumas dicas de CSS, pra ajudar novos designers e até os mais experientes, são dicas simples porem eficazes, vamos as dicas:

Pare com div1, div2…

Evite dar nomes como div1, div2, div3 aos seus elementos. Eles não explicam nada, e quando você for corrigir algum erro, sei la só vai queimar o neurônios sem precisão . Da mesma maneira, barra_azul não faz muito sentido: se você mudar a cor do site, onde vai estar a barra azul? Prefira nomes explicativos, como menu ou barra_links.

Cuidado com Maiúsculas e minúsculas

Nomes de elementos fazem diferença entre letras maiúsculas e minúsculas: BarraLinks é diferente de barralinks. Preste atenção na hora de usar seu elemento no HTML.

Declaração id x class

Para elementos que aparecem apenas uma vez no layout (menu, rodapé, cabeçalho, etc) prefira a declaração id, precedida por um sinal de # (ex. #menu). Para elementos que vão aparecer várias vezes, utilize a declaração class, precedida por um ponto (como .postagems).

Use a mesma declaração entre vários elementos comuns

Se vários elementos terão características em comum, declare-os todos de uma vez, separados por vírgula, assim diminui o a linha de código e agiliza bastante:

h1, h2, h3, h4 {
font-family: Arial, Helvetica, Sans-Serif;
}

Organize-se e lembre da hierarquia

Por ser uma folha de estilo em cascata, a última declaração é a que prevalece. Preste atenção para não declarar um elemento duas vezes: na hora da manutenção, você pode fazer a alteração na primeira e se perguntar porque ela não funciona, quando na verdade uma segunda declaração está perdida no meio do seu código (por isso organização é fundamental!), preste atenção viu .

Use comentários

Quando você utilizar o CSS para efeitos mais avançados, como um menu em abas, comente seu código para não esquecer o que cada parte dele faz, é só adicionar/* para abrir um comentário e */ para fechar.ex

#menu ul li a
       /* aba normal */
       {background: #444; color: #FFF; border: 1px #FFF solid;}

#menu ul li a:hover{
       /* aba selecionada*/
       {background: #FFF; color: #F00; border: #F00 1px solid;}</pre>

Declare as unidades

Quando trabalhar com valores diferentes de zero, declare as unidades (px, pt, etc). Cada navegador assume uma unidade padrão quando ela não é especificada, gerando resultados diferentes em cada navegador, uma coisa simples como essa pode pesar e muiito na sua imagem na web.

Bom é so isso e até a próxima.

Falar sobre isto é simples e complicado ao mesmo tempo, primeiramente vamos voltar a uns 5-10 anos atrás. Os sites eram cheio de texto para todos os lados, confundia muito o visitante, ficava perdido sem ter noção de onde ir.

Hoje já sabemos que a melhor forma é pouco texto (nem sempre) e uma navegação fácil, devemos “mostrar o caminho” para o visitante seguir em frente e atingi nosso objetivo (vender, conseguir um retorno…).Temos que pensar também no publico alvo, você não vai fazer um site “sanguinário” para uma criança visitar né…
Se eu fosse escrever tudo detalhadamente só ano que vem terminaria, então vou listar algumas qualidades “minimas” que um webdesigner deve ter, qualidades nas quais são muitos requisitadas por todos:

Domínio de CMS’s

CMS hoje é tudo, é necessário um conhecimento amplo nesta área, estude,crie templates(mesmo que não traga lucros, o importante é aprender…) módulos, plugins(aqui ta mais pra programador )… para softwares(CMS) como Joomla, WordPress, Drupal, MovableType entre outros…

PSD para XHTML

Javascript

Flash