Temos grandes browsers no mercado, infelizmente um dos mais utilizados é uma verdadeira pedra no sapato de quem tem que desenvolver para a web. Ainda mais quando falamos de cantos arredondados ou rounded corners
Existe um fato e existe uma solução!
Vou listar algumas das melhores IDEs para desenvolvimento em evidência no mercado. Não apenas para montar HTML 5 e CSS 3, mas também para códigos e algorítmos em diversas tecnologias, como Javascript, jQuery e até podemos arriscar algumas linguagens “server side”.
JSBin é uma ferramenta excelente para teste colaborativo de html e javascript. Facilitando a integração algumas das mais populares bibliotecas e frameworks JS, ele permite que o usuário insira rapidamente o seu código e grave com um controle de versão muito simples. JSBin definitivamente não é apenas um marcador de código.
Característica que vale ressaltar: JSBin é open source, 100% free.
PHP, Ruby on Rails, Django, Perl, SVN, Git, etc? Você ainda achava que era impossível ter uma IDE pra tudo isso que fosse também browser based? Kodingen é o nome dessa poderosa ferramenta que oferece uma boa parte de seu sistema de forma gratuita e está conquistando muitos fãs pela web.
O teste é simples, vamos em quase todos os testes utilizar o método document.createElement() do javascript para elementos do HTML 5. Logo em seguida vamos testar atributos e/ou propriedades dos mesmos elementos. Assim vamos verificar se o elemento é ou não suportado em determinado browser.
Com a chegada – bem devagar – do HTML 5 e a exigência cada vez maior para criação de interfaces crossbrowsers, precisamos adequar e adaptar nossos projetos a situações diversas.
Não podemos, por outro lado, deixar de inovar. É interessante podermos utilizar uma tag <video>, por exemplo. Canvas é também muito interessante, mas o suporte ainda não é tão amplo.
Vamos aos testes:
var teste = document.createElement("canvas"); var checar = ( teste.getContext ) ? true : false; alert(checar);
O teste foi simples: criamos um elemento canvas, já deixamos ele apontado em uma variável que indica o teste, logo em seguida vemos se ele da suporte ao método getContext, suportado pelo elemento Canvas do HTML5. Você pode ver um resultado no link: http://jsbin.com/ogizo3/2/edit
var testeAudio = document.createElement("audio"); var testeVideo = document.createElement("video"); alert( testeAudio.play ); alert( testeVideo.play );
Agora fizemos o mesmo tipo de teste, porém testamos com um método que há nos 2 elementos – audio e video – em html 5: play(). Pra ver como está ficando nossa página de testes: http://jsbin.com/ogizo3/3/edit
O html 5 tem vários novos inputs bem interessantes. Temos uma lista de vários novos tipos como date, datetime, range e number, por exemplo.
Independente do tipo de input o teste é simples:
var testeInputDate = document.createElement("input"); testeInputDate.setAttribute("type", "date"); alert( testeInputDate.type == "date" );
var testeInputDatetime = document.createElement("input"); testeInputDatetime.setAttribute("type", "datetime"); alert( testeInputDatetime.type == "datetime" );
var testeInputRange = document.createElement("input"); testeInputRange.setAttribute("type", "range"); alert( testeInputRange.type == "range" );
var testeInputNumber = document.createElement("input"); testeInputNumber.setAttribute("type", "number"); alert( testeInputNumber.type == "number" );
Se o navegador não aceitar o tipo apontado no método setAttribute, o retorno de seu tipo será normalmente text.
Enquanto isso temos mais informações na nossa página de testes: http://jsbin.com/ogizo3/4/edit
Agora um pequeno truque já bastante utilizado na web (inclusive nesse site).
Podemos utilizar o .createElement() para criar elementos com várias tags diferentes em nossas páginas, entre elas, elementos de bloco como nav, header, footer, section, article, aside etc.
Pra isso vamos fazer uma pequena chamada no Javascript e no CSS, considerando cada tag que vamos criar:
document.createElement('nav');
E no CSS uma pequena declaração:
nav { display: block; }
Pronto. Com esse hack super simples temos um elemento nav funcionando inclusive em Internet Explorer 6!
Claro que já existem códigos robustamente preparados, então indico usar, por exemplo, o que o próprio JSBin.com indica:
<!--[if IE]> <script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script> <![endif]-->
e no início de nosso css:
article, aside, figure, footer, header, hgroup, menu, nav, section { display: block; }
Não vamos ter nenhum recurso expecial, mas já vamos poder usar essas novas tags do HTML 5 em nossos documentos bem menos preocupados – nem frustrados – com o suporte crossbrowser.
Simplesmente é um projeto open-source em javascript bem bacana que facilita a vida de quem tem que criar um CSS. Algo como um único border-radius pra servir com todo browser (menos a merda do IE, claro).
Ele é totalmente modular e com suas extensões pode-se obter muitas facilidades, como ampliar seletores CSS 3 para IE6, criar transforms, transitions, @font-face de forma mega fácil.
Para usar o módulo de seletor deve-se indicar um outro módulo já pronto, como o Sizzle, o mesmo já carregado e utilizado pelo jQuery e fazer uma pequena declaração no js indicando o seletor:
eCSStender.addMethod('findBySelector',Sizzle);
O eCSStender tem uma integração excelente com diversas bibliotecas tais como jQuery, prototype, etc. Não rola conflito! Fica tudo de forma simples e clara pra manutenção, deixe a trabalheira com o eCSStender!
O nome está assim para trazer a pronúncia: “extender”.
No link http://ht.ly/2b5Lc tem um exemplo bem legal que usei junto do html5shiv para usar tags de html 5 na página e ter algum resultado decente no IE6.
Muitos anos se passaram desde que você era a mais quente e preferido de todos entre os mais populares. Vamos esclarecer uma coisa, você nunca foi meu, você tem proprietário. Nunca haverá o controle de suas ações, a lealdade, a compreensão e o esforço que você colocar para essa relação. Por favor, não me julgue, não é fácil… você tem sido importante na minha vida, no entanto, é hora de seguir em frente. Eu não vejo mais você como eu via antes, eu vejo futuro ao longo de HTML e CSS. Eu sei que está curioso sobre eu e JS. Bem, JavaScript me mostrou a luz… há uma vida depois de você.
Gosto de sair com sua turma, espero que o nosso término não estrague minha amizade com seu grupo e sua família, eles me ajudam a ser melhor no que faço. Mas, com você, eu estou sempre incerto do futuro. Sempre esperando por você, eu estou cansado de te esperar carregar por irritantes vezes, eu acho que não tenho paciência.
Não me incomoda ver outros artigos divulgarem e promoverem você. Mas você deve saber que suas ações são mais como alguém que atravessa uma crise de meia-idade, dirigindo um veículo brilhante e, mesmo assim, não esconde o que Jobs salientou sobre você. É hora de seguir em frente, eu preciso melhorar minha vida, eu preciso de melhores experiências. Eu não sou o único que se sente assim, meus amigos, família, público, especialmente você sabe o que estou passando.
Muitos colegas se mudaram, os caras bacanas viraram as costas para você. Cameron, Lucas, Spielberg e Anderson ainda consideram você um tesouro, mas o tempo virá quando eles também vão deixar você e dar uma chance para o HTML, CSS e JS. Isso certamente será um precedente para que o mundo comece a conhecê-lo melhor. Espero que ainda ouça todos os sinais de aviso de que você precisa mudar, se você fizer… quem sabe, podemos ter outra chance.
Eu prometo a você, ninguém vai substituir o seu retrato na parede, eu lhe dou a minha palavra. Eu vou lembrar de você como o alegre e entusiasta que já foi uma vez. Por favor, não arruine a imagem que tenho de você, não faça uma cena dessa.
Desejo-lhe felicidades. Vejo você por aí.
Há cerca de 2 semanas, Steve Jobs, um dos CEO de maior evidência da década, resolveu publicar na capa do site oficial da Apple (http://www.apple.com) uma carta muito polêmica.
Trata-se da Thoughts on Flash, onde ele massacra o Flash em defesa de uma internet que adote padrões web visando as tendências atuais de sua utilização.
A discussão até havia começado de forma razoável quando Jobs anunciou o iPad declarando que não daria suporte ao Flash pela falta de qualidade de tal tecnologia. A mídia deu atenção a seus comentários que resultou nessa carta. A mesma carta gerou um mundo de notícias e respostas, inclusive do próprio CEO da Adobe, que respondeu da mesma forma, utilizando uma carta pública no site de sua empresa.
Pra quem ainda não leu o artigo, preparei o mesmo em uma versão em português para a galera do Brasil também poder debater bem sobre o assunto.
Copiei um trecho de um post antigo desse próprio blog. Trata-se de um aspecto importante a ser relembrado. Quero evitar que determinadas animações ocorram simultaneamente, acumulando-se e tornando um pequeno problema na navegação. Como estava procurando exclusivamente por isso hoje, achei interessante dar um destaque. 
É normal fazermos isso. Nós construímos um menu vertical super bacana com um pequeno efeito muda o texto de uma forma animada ao pairar sobre o elemento e deslizar para trás quando o mouse deixa o link. Ler mais »