Desde que comecei a trabalhar com o Chris aqui na MM Café estou em um contato mais hard com Javascript, linguagem que comecei a me interessar bastante graças ao jQuery e a evolução dos navegadores (com a excessão do IE, obviamente).
Hoje precisei de uma solução para colocar background intercalados em uma lista criada por javascript (com jQuery), a famosa "lista coloridinha" que auxilia na visualização dos dados. Existem seletores avançados de CSS (even e odd) mas nos meus testes aqui eles não funcionaram no Internet Explorer (6, 7 e 8) e também os seletores (2n) ou :first que funcionam no Firefox porém nada acontece em nenhuma das versões do Internet Explorer.
Resolvi então aplicar uma classe de forma intercaladas nas linhas quando o javascript criava a lista. Para fazer eu tinha alguma ções:
Ficar setando uma variável para 1 e 0 e fazendo um IF dentro do loop que gera as linhas para conferir se é um ou zero
Conferir se o número é 1, 3, 5, 7 (POG, eu sei…)
Verificar se o contador (o i do loop) é par ou ímpar
Optei pela última, pois a variável já existia e eu só precisava de um if else para conferir se o número daquela linha era par ou ímpar.
Alex Kid, o rei do par ou ímpar!
Lembra?
Como verificar se um número é par ou ímpar no Javascript?
A lógica simples é: se o resto da divisão por dois for 0, é par. A lógica complicada é: se a unidade final do número for 0,2,4,6 ou 8 é par.
if (i % 2 == 0) {
alert("O número i é par, pois o resto da divisão por dois é igual a zero")
}else{
alert("Existe resto na divisão por dois, portando o número i é ímpar")
}
Simples, a função "n % 2" retorna o valor do resto da divisão por dois! 😀
E hoje eu precisava validar um site no Internet Explorer 6 (die, die, die). Belezinha, com o navegador aberto fui conferir a versão, para ver se era o que eu precisava. Depois de clicar em Help -> About, vejam a confirmação de que era a PRAGA do IE6:
O erro confirmou: é o 6, né.
E o erro se repetiu a cada vez que eu ia ver a versão dele… o IE estava sendo rodando usando o aplicativo de browsers do Spoon.
Fazem algumas semanas que resolvi utilizar um plugin jQuery (não lembro qual) que utilizava a jQuery UI, um framework com diversas classes prontas para trabalhar com jQUery, uma verdadeira mão na roda!
Como utilizei apenas o plugin pronto, fiz as alterações necessárias mas não havia realmente trabalhando com o framework. Em um projeto recente em que estou trabalhando, fui procurar uma nova forma de fazer uma navegação com accordion (já havia utilizado um plugin eficiente de jQuery anteriormente) e encontrei novamente com o jQuery UI.
Deixei a preguiça de lado e fui verificar como funcionava o jQuery UI, gostei bastante! Apesar de estar apenas iniciando os estudos pareceu bem fácil de utilizar.
jQuery UI CSS Framework
Essa foi a única parte que até o momento eu realmente utilize, um completo framework CSS que permite personalização fácil e vem com muitas, MUITAS classes prontas.
No site do jQuery UI existe um gerador de tema, que permite configurar o seu framework de CSS de forma rápida:
O gerador de temas gera um framework CSS, que facilita no desenvolvimento com o restante dos utilitários.
Existem diversas classes prontas, para:
Bordas arredondadas
Overlay ("cobrir" parte da página para destacar determinado conteúdo)
Interação (hover, focus, etc.)
Exibição de erro
Highlight
Elemento desabilitado
E mais algumas, que ainda não explorei… 🙂
Falar de CSS me embrou de uma idéia interessante, que instiga algumas boas práticas no desenvlvimento das folhas de estilos: CSS orientado a objetos
Ah, a parte de
Interação
Além das facilidades na parte do CSS o framework facilita muito a criação de efeitos de interação.
Draggable
Droppable
Resizable
Selectable
Sortable
O melhor de tudo é a simplicidade com a qual funciona tudo, por exemplo para criar um elemento que possa ser arrastado, com apenas uma linha isto é feito:
$("#draggable").draggable();
Para os outros comandos a facilidade é a mesma. Isso associado aos diversos estilos dos temas pode acelerar muito o desenvolvimento de interfaces amigáveis!
Widgets
Mais facilidades com pouco código, existem algumas ferramentas prontas como:
Accordion
Datepicker
Dialog
Progressbar
Slider
Tabs
Testei o accordion, as personalizações possíveis são bacanas! Nos testes que fiz do accordion o funcionamento foi bom em IE (inclusive o 6 – exceto com listas de conteúdo), FF (perfeito) e Chrome (perfeito).
Animação
Os comando apra animação com o jQuery são bastante evoluídos e permitem fazer muita coisa, mas para efeitos padrão de interface o framework de user interface facilita com alguns efeitos prontos e bastante customizaveis:
Effect
Show
Hide
Toggle
Color animation
Add class
Remove class
Escrevi o post como uma introdução e estímulo aos usuários da biblioteca jQuery para estudar e utilizar a jQuery UI e facilitar ainda mais a vida!
Mesmo sabendo que o Chris vai falar algumas coisa relacionada ao termo "orientado a objetos", achei o conceito de otimizar e "orientar" o CSS bem interessante.
Na semana passada estava conversando sobre CSS aqui no serviço, debatendo o que era melhor:
Opção 1 – Uma classe por elemento
Ao meu ver, este é o modo mais simples de "pensar" CSS. Você pensa na estrutura html do seu site a para cada elemento cria uma classe, quando o elemento se repete você usa a mesma classe.
Por exemplo, você tem um quadro (div) com o topo azul, bordas cinza e área para conteúdo com background branco.
Para criar um quadro com o header vermelho você precisar duplicar o código do CSS, facilita a vida para atualizar um elemento específico porém dificulta para fazer alterações gerais, como mudar o layout.
Esse método também torna o código mais sujo (e o html levemente mais limpo).
Opção 2 – Classes comuns para diversos objetos
Para mim ainda é um pouco complicado pensar desta forma, uma coisa que temos que ter na cabeça antes de pensar nisso é: um elemento do html pode ter várias classes. Repitam isso.
No mesmo exemplo anterior, você teria um estilo para delimitar TODOS os quadros, por exemplo:
E para setar as outras propriedades, como a cr do cabeçalho definiria classes para isso.
h6 .azul{
display:block;
background:blue;
}
Ou ainda mais amplo:
.azul{background:blue;}
.block{display:block;}
Claro que neste caso não faz muito sentido, porque estamos criando classe para setar uma única propriedade, um "desperdício" de classe por assim dizer.
Mas neste caso utilizamos na div a classe "quadro e no cabeçalho (h6) as classes azul e block.
<h6 class="azul block">Header do quadro</h6>
O que é melhor?
Eu ainda não tenho uma opinião formada sobre qual o melhor caminho a seguir, mas neste momento eu recomendaria o budismo: "siga o caminho do meio".
Ter centenas de classes definindo propriedades vai só complicar a vida do desenvovledor em possíveis manutenções. O CSS vai dicar extenso, montar o html também pois você terá que chamar diversas classes para cada objeto.
Ter uma classe para cada objeto também pode não ser benéfico, a cada nova página você provavelmente vai ter que criar uma nova classe, aumentnado seu CSS sem um bom reaproveitamento de código.
Em ambos, lá se vai a facilidade para alterar layout de um modo REALMENTE rápido.
Graças ao Twitter (saiba o que é o Twitter e como usá-lo) visitei um link que me chamou a atenção, com uma possível buzzword: CSS Orientado a Objetos.
Apesar do nome mimimi, a idéia é realmente interessante. A herança poderia ser bem útil no CSS, mas como o nome diz a "cascata" existe, pensando direito dá para aproveitá-la bem.
Bom, veja a apresentação em slides do conceito, abaixo continuo meus pitacos sobre essas práticas!
Uma coisa que não costumo fazer e tenho certeza que é muito útil é a separação no CSS da estrutura (posicionamento de colunas, menu, header, footer, ad, etc…) da visualização (backgrounds, fontes, bordas, etc.).
Isso facilita a alteração de layout (visual e estrutural) e somado com o reaproveitamento de classes para diversos elementos, a redução do número de classes para elementos bastante similares e outras boas técnicas pode reduzir bastante seu CSS e facilitar o trabalho em equipe!
O que vocês acham da idéia, do nome e da apresentação?
Buenas povo! Faz tempo que não dedico meu tempo a escrever aqui no O Desenvolvedor, mas pretendo voltar ao ritmo anterior e com algumas mudanças (acompanhando as novidades na minha vida profissional).
Este é um post para apresentar algumas novidades que, de certa forma, guiarão minhas publicações por aqui. A primeira é que não vou dar continuidade aos meus estudos com .NET, e estou reduzindo meu trabalho com o ASP clássico. Isso não quer dizer que encerrarei meus posts sobre a linguagem, mas como estou me dedicando a estudar outras, possívelmente me focarei nelas.
Ah, preciso agradecer ao Leo Caseiro, que me disponibilizou um material excelente sobre .NET quando comecei a estudar!
Espero que este artigo ajude a orientar de alguma forma as pessoas que procuram pela manjada questão: "que linguagem é melhor estudar?"
Vamos aos motivos das minhas mudanças…
Porque "desistir" o ASP clássico?
Já fazia algum tempo que eu procurava evoluir, trocar de linguagem de programação, e por isso iniciei meus estudos em .NET. Vamos aos 3 4 motivos que me levaram a "pular fora":
Para aprender alguma coisa nova. E não estou dizendo que sei tudo do ASP, não mesmo. Mas mudar é bom, gosto de mudanças, aprender uma linguagem de programação nova é como começar a estudar um novo idioma, estimula o cérebro, tira noites de sono de uma forma positiva, anima!
Queria mudar porque o ASPestá se tornando obsoleto (para muitos, já é) devido a migração para o .NET, que apresenta mais possibilidades e melhor desempenho (dizem, nunca testei realmente).
Comunidade de desenvolvedores muito pequena. Tudo bem que existe o Google, existem fóruns e até uma documentação razoável, mas nada comparado a PHP, por exemplo. Muitas vezes eu quebrava a cabeça para desenvolver determinada funcionalidade, sabendo que em outras linguagens uma centena de desenvolvedores já haviam desenvolvido isso e disponibilizado o código para uso, estudo e alterações.
Dinheiro. Grana. Eu pago licença para utilizar o Windows Server no meu servidor. Eu não consigo bons dll´s gratuitos para manipulação de imagem ou arquivos (pdf´s, planilhas, etc…). Quase tudo é pago, seguindo o "padrão" da tecnologia ASP.
Porque não o .NET?
Alguns dos motivos que me fizeram querer mudar do ASPcontinuam presentes na linguagem .NET, como por exemplo o custo.
A comunidade de desenvolvedores não ser muito grande (ou não gostar de colaborar com o mundo, indo contra a poderosa e adorada "interwebs").
Motivos pessoais: como eu comentei, estou de emprego novo, e por aqui o .Net não é utilizado (pelo menos até onde eu sei).
Porque escolhi o PHP?
Pra ser cool.
O primeiro motivo, obviamente, a linguagem aberta, gratuita. Vou economizar um dinheiro considerável por mês pelo simples fato de não precisar pagar licença do Windows no servidor. Isso será a longo prazo, somente depois que eu migrar meu sistema todo de Intranet para o PHP, que vai levar possivelmente mais do que seis meses…
Para ficar do lado negro da força!*
Comunidade gigantesca de desenvovledores e melhor, que adoram compartilhar conhecimentos. A documentação é maravilhosa.
Linguagem ainda em desenvolvimento (agora o PHP 5, estou certo?), sem a necessidade de "extensões" como os dll´s que já me perturbaram no ASP.
Já tinha um conhecimento superficial sobre a linguagem, foi com ela me inseri no mundo do desenvolvimento criando meu primeiro blog e CMS, lá no meu tempo de guri…
Comecei a estudar loucamente MVC, nunca vi um framework gratuito e funcional para ASP, já me indicaram diversos (e aparentemente muito bons) para o PHP!
É isso… a partir de agora não se assustem se surgir por aqui alguns posts "PHP for dummies", e aceito sugestões de artigos também, viu?
* o título deste artigo é graças ao tweet do @cleiverrr, quando anunciei meus estudos com o PHP: "lol @gserrano está vindo pro lado negro da força! =D"
