Tag Archives: webdev

Tudo o que você queria saber sobre formulários para web – Parte 3

Finalizando o markup do nosso formulário de exemplo e nesse episódio falo sobre alguns itens:

  1. Atributos mais utilizados na tag form: id, action, method, enctype, onsubmit, onreset, etc
  2. Explico os tipos input hidden e file
  3. Lembro a todos que o tipo password não nos oferece segurança, apenas inibe a visualização dos caracteres digitados. Para adicionar segurança no tráfego de dados você vai precisar implementar outras técnicas, como por exemplo, HTTPS
  4. Uso do Tabindex para melhorar a navegação via teclado dos seus visitantes.
  5. Mostro as alternativas para o tipo submit para facilitar a aplicação dos elementos de Design. São eles: input do tipo image e o elemento button
  6. Selected e checked – Utilizamos esses atributos para melhorar a experiência do usuário ao utilizar os formulários. Imagine que a maioria dos seus usuários mora em Alagoas, então no select de estado do seu formulário você pode deixar selecionado esse valor, outro exemplo é quando você tem um formulário de busca com a opção do usuário procurar no seu site ou na web, nesse você pode deixar marcado (checked) o valor “no site” para aumentar o tempo de navegação do visitante.

Parte 3.1 – Melhorando a marcação do formulário

Parte 3.2 – Finalizando a marcação do nosso formulário de exemplo

Gostou? Ajude dando suas sugestões logo abaixo, assinando o Feed ou divulgando para seus amigos. :)

Tudo o que você queria saber sobre formulários para web – Parte 2

Voltando a série sobre formulários e nesse screencast vou adicionar alguns padrões de acessibilidade ao markup feito no primeiro screencast. Todo poder das tags: fieldset, legend e label, fazendo com que seus formulários fiquem mais elegantes e acessíveis.

Confira o Screencast!

Gostou? Ajude dando suas sugestões logo abaixo, assinando o Feed ou divulgando para seus amigos. :)

Tudo o que você queria saber sobre formulários para web – Parte 1

Iniciando mais uma série aqui no blog e dessa vez vou falar sobre formulários. Como você deve codificar seu formulário, definir quais atributos necessários nos elementos, deixar seus formulários acessivéis a pessoas que tenham algum tipo de incapacidade (visual, motora, etc). Código apenas com label e input? Envolver esses elementos com dt, dd e dl ou listas (ordenadas ou não) seria a melhor solução?
Você ainda não utiliza “fieldset”, “legend” e o atributo “for” no elemento “label”??

Você vai rever seus conceitos e melhorar a estrutura HTML dos seus formulários, depois ainda vai aprender como utilizar seletores complexos específicos para formulários e fazer com que o IE6 não resmungue com esss técnicas super avançadas para ele. Aí você fala: E as campanhas #semie6, iedeathmatch e outras? Eu apoio essas campanhas sim, mas temos clientes/trabalhos que o pessoal ainda insiste em suportar esse navegador… Paciência…

Nesse primeiro episódio eu vou montar o markup de um formulário simples, sem me preocupar com acessibilidade e outras opções interessantes, deixando para o segundo episódio a inclusão de labels e outras explicações.

Mostrei também um Sketch do site Vimeo feito pelo Soxiam para demonstrar que antes de iniciar qualquer projeto ou tarefa precisamos de planejamento em primeiro lugar e com certeza sketches/wireframes são ótimos para alcançar melhores resultados.

Confira o Screencast!

Código do Formulário utilizado nesse Screencast

Aprenda mais!

Gostou? Ajude dando suas sugestões logo abaixo, assinando o Feed ou divulgando para seus amigos. :)

Alguns pensamentos aleatórios sobre web development e “blogging”

Nada como umas semanas super atarefadas para fazer com que a gente não consiga cumprir nossas metas diárias. Essa semana está sendo assim, cheia de trabalho para finalizar, outros para começar e alguns para planejar, mas a prioridade está nos que precisam ser finalizados, pois senão o negócio fica feio. Vamos aos assuntos então.

Microblogging

Uma idéia já batida como todo mundo deve saber é a história de encurtar URLs, esse serviço virou febre e imprescindível depois da popularização de serviços para microblogging e a ferramenta mais famosa da atualidade de longe é o Twitter, então veio o tinyurl, moourl, bit.ly, is.gd, tr.im e mais um enxurrada que provavelmente eu devo estar esquecendo. Daí eu me deparo com o Migre.me.

Página inicial do migre.me

“O Migre.me é mais uma ferramenta para tentar encurtar a URL, como o TinyURL ou o is.gd, mas totalmente integrado com o twitter (que é onde mais se utiliza estas ferramentas). Gerando o seu link aqui no migre.me, você pode acompanhar quantas pessoas clicaram em seu link, quantas pessoas o “retwitaram” e também fazer um bookmark dos seus links.”

Prestaram atenção quando no trecho “quantas pessoas clicaram em seu link” e é justamente nesse ponto que essa ferramenta trás ótimos benefícios para usuários que precisam mensurar sua audiência, pois com dados dos links mais acessados e divulgados nó podemos traçar estratégias diversificadas, já vi outras ferramentas que geram gráficos de tweets e RTs, mas o Migre.me está de parabéns por sua simplicidade e facilidade de utilização.

Além disso o Migre.me traz em seu site três áreas “Últimos Twitts”, “Mais clicados” e “Mais retuitados” que também é muito bacana, pois podemos ver quais são os assuntos mais quentes do Twitter pelas pessoas que usam o Migre.me, ponto para o lado Social que o pessoal trouxe.

Você também pode verificar seu bookmark (ou de outros usuários) para poder fazer uma análise simples de quais assuntos chamaram mais atenção do seus seguidores no twitter, daí assim você pode direcionar suas ações de forma muito mais interessante para eles. Esse é um ótimo recurso para empresas que já utilizam o twitter como ferramenta de divulgação e até mesmo para substituir os links de impressos. Isso mesmo, imagine que agora você pode mensurar quantas pessoas que compraram a sua revista/jornal/panfleto clicaram nos links. Vi que a Revista Webdesign utiliza o tinyurl em suas páginas, mas acredito que em breve ela estará usando o Migre.me para poder fazer esse tipo de trabalho.

Bookmark do @juarezpaf no Migre.me

Blogging

Para o pessoal da Blogosfera, vi uma ótima notícia falando sobre a integração entre Zemanta e ScribeFire que são duas ferramentas para dar mais poder a sua vida de blogueiro e outras coisinhas mais. Eu já testei essas duas ferramentas, mas preciso voltar a utilizá-las com mais frequência e com certeza depois dessa notícia já instalei no meu Firefox e vou testá-lo nos próximos posts.

Precisa editar suas fotos e não quer sair do seu navegador?

Screenshot da página incinial do Picnik

Você pode usar o Picnik, um editor de imagem totalmente online que tem diversos recursos para você dar aquele trato nas suas imagens, usar a integração com diversos serviços e o melhor é que tem interface em pt-br.

Javascript ou CSS? Eis a questão.

Livros sobre HTML, Usabilidade, Javascript e CSS

Foi numa discussão no Skype bem humorada que eu tive com mais 3 “Web Guys” onde percebi mais uma vez que precisamos de atenção constante quando estamos executando nossas tarefas, pois pensar em acessibilidade e usabilidade cabe a você que faz o Front-End da página também, pois nós somos os responsáveis por executar da forma mais simples possível o que nos foi passado.

Ué? Mais simples? E quanto ao nosso diferencial?

O diferencial está justamente em saber/conhecer as técnicas que podemos aplicar para o site/aplicação se tornar mais rápido, mais acessível, reutilizável e sem ser uma dor de cabeça para realizar alterações (manutenção). Foi quando um amigo meu falou que tinha feito um código supimpa para deixar o rodapé da página sempre “colado” no fundo da página, daí o pessoal achou bacana e começaram a fazer mais perguntas de como utilizar. Foi quando eu coloquei uma resposta dizendo que poderia ser feito apenas com CSS.

Vocês podem imaginar o Flamewar que essa resposta gerou, não? Mas entre mortos e feridos todos ficaram vivos para contar história. :) Mas sim, de fato podemos usar apenas CSS para deixar um DIV, por exemplo, fixo no “rodapé” do browser, mostrarei para vocês em outro post a solução.

Wpcast #4 – Colocando efeito de lightbox no seu site, usando plugins do Wordpress

Mais um Wpcast e nesse episódio mostro como você pode colocar no seu blog ou site efeitos de lightbox usando alguns plugins feitos para Wordpress. Você verá como as configurações necessárias para o funcionamento desse efeito são simples, tenho que confessar que eu não esperava tamanha simplicidade.

Comecei mostrando o efeito aplicando no site da Wireframe Magazine, uma revista eletrônica que mostra vários casos interessantes na criação de protótipos e que em breve estará com uma versão totalmente em pt-br especialmente para vocês.

Nesse Wpcast os plugins mostrados foram:

  1. FancyBoxEsse plugin adaptou as funcionalidades do FancyBox para Wordpress, o efeito desse script é muito elegante, pois ele mostra um Zoom na imagem de forma expansiva com uma estilização simples. Basta instalar o plugin e você já tem essa funcionalidade incorporada, você vai precisar apenas criar um link para a versão maior da imagem, então quando o visitante clicar na miniatura, o plugin detecta o link para a versão maior e adiciona o efeito.
  2. jQuery Lightbox Plugin – Após a instalação desse plugin adicionamos o atributo ‘rel=”lightbox”‘ para o efeito em apenas uma imagem ou ‘rel=”lightbox-album”‘ para agrupar um grupo de imagens, criando assim uma galeria.
  3. Lightbox 2 – Esse plugin utiliza Prototype e Scriptaculous para criar o efeito, cria um item no menu de Configurações com duas opções onde você escolhe a cor de fundo e se o efeito será gerado automaticamente, também pode ser usado para criar Galeria de Imagens.
  4. Shadowbox JS – O mais completo dos 4 plugins testados nesse episódio, ele suporta a maioria das bibliotecas de Javascript utilizadas no mercado: YUI, Prototype, jQuery, Ext, Dojo e Mootols ou você pode utilizar em puro JS. Além disso tem suporte a skins, assim fica muito mais simples criar estilos customizados, detecta automaticamente o idioma do visitante, tem menu de configuração, pode ser usado como substituição do lightbox e ainda pode ser usado como player de áudio e vídeo. Quer mais

Confira agora o quarto episódio:

Gostou? Ajude dando suas sugestões logo abaixo, assinando o Feed ou divulgando para seus amigos. :)

Sites para inspirar seu desenvolvimento e criação nessa tal Web

Ultimamente venho buscando muitas fontes de inspiração para meus trabalhos, daí resolvi compartilhar com você alguns dos sites que fico sempre de olho, pois evoluir não é só aprender e aprender, mas é também ter um pouco de inspiração.

Olhando o trabalho de outros profissionais nós podemos aprender bastante e sem contar que com certeza você vai pensar diferente no seu site/aplicação. Então uma recomendação que eu faço é sempre tirar 10 minutos por dia para ver uma boa dose de inspiração. Claro que inspiração depende muito do tipo do seu trabalho, então olhar para belas texturas e backgrounds pode não fazer tanto efeito em um programador, já que provavelmente ele vai preferir olhar belos códigos no Github. ^^

Então vamos a lista:

Eu comecei recentemente uma série de screencasts sobre wordpres, com o título Wpcasts, e planejo fazer outros screencasts sobre assuntos bacanas, daí preciso de wallpapers para me inspirar e também deixar a área de trabalho com um visual mais inspirador quando eu tiver gravando os vídeos, então eu sempre dou uma olhada nos wallpapers do InterfaceLift.

Gosto muito de apreciar arte e espero conseguir criar algumas coisas bacanas com o aprendizado no curso de Webdesign que vou iniciar em Março, por enquanto fico curtindo os desenhos da Comunidade Mozilla e um pouco do Camiseteria de vez em quando e lógico que as imagens mais descoladas do Flickr.

Venho tentando enriquecer meus conhecimentos na área de Design de Interfaces e como trabalho bastante com XHTML, CSS e jQuery preciso de algumas fontes que me tragam informações sobre essas áreas e exemplos de uso.

Foi então que descobri o Pattern Tap, Konigi, Smiley Cat e Wireframe Magazine recentemente, mas hoje encontrei uma fonte voltada só para interface, a coleção de exemplos de interface dos criadores do livro Designing Web Interfaces, passei vários minutos analisando os exemplos mostrados e com certeza recomendo uma passada lá.

E por último para galera da área de Desenvolvimento recomendo o Nettuts e o blog do Theme Forest, o pessoal aborda vários assuntos bacanas, tem muito material sobre desenvolvimento e também alguns desafios bem legais e com prêmios melhores ainda.

Depois dessa overdose de sites bacanas para vocês acompanharem respirem um pouco e comecem a exploração. Sei que quase todos sites que listei são em inglês, mas é que como eu preciso evoluir meu inglês o mais rápido possível navego por nesse idioma, mas não se preocupem que já comecei a listar alguns sites em nosso bom e velho português.

Aconteceu na web – Os sites e dicas mais interessantes da semana #1

Bottons for you

Essa semana foi cheia de novidades, começou com o início dos meus Videocasts sobre assuntos diversos visando aprimorar o meu e os seus conhecimentos sobre essa tal de web, em breve vou estar criando um Feed exclusivo aqui no blog, depois tivemos a gravação do Pilotocast, meu Podcast junto com Billy Blay, sobre assuntos relacionados com a Web.

Logo depois da gravação do Podcast, voltei a “blogar” e agora com certeza as coisas por aqui vão ficar cada vez mais agitadas, claro que preciso de sua ajuda para continuar com o entusiasmo e sempre trazendo ótimas dicas, por isso não deixe de assinar o Feed, comentar o que acha sobre os assuntos ou entrar em contato.

Então vamos as coisas mais bacanas que eu vi nessa semana por essa Web:

  1. Wireframing With InDesign and Illustrator [en] Um tutorial bem bacana para você criar wireframes no Illustrator, ultimamente estou tendo que fazer muito esse tipo de trabalho, não é a toa que meu twitter anda cheio de Wireframing… :)
  2. Html Validator for Firefox and Mozilla Acredito que muitos de vocês já deve utilizar a Web Developer Toolbar, mas essa extensão tem algumas praticidades, pois ela já avisa na status bar do Firefox quais são os problemas que você precisa resolver no seu html, não precisa esperar ter que se comunicar com o Validador da W3C.
  3. 25 jQuery Tutorials for Improved Navigation Menus [en] Uma enorme quantidade de material para você melhorar a navegação nos seus projetos usando jQuery, não deixe de conferir.
  4. Tipos possíveis de licença para seu material [en] Acabe com suas dúvidas sobre qual tipo de licença você deve utilizar quando disponibilizar seu material. Em breve uma apresentação sobre esse assunto
  5. Generic Work Process version 1.0 versão 1 Esse toolkit oferece um overview dos métodos e técnicas que podem ser utlizadas no processo de Design centrado no usuário. E você pensando que o trabalho é pouco
  6. GDrive [en] Mais um produto do Google que veremos em breve, basicamente armazena seus arquivos online e você terá acesso de qualquer lugar e em qualquer dispositivo, desktop, navegador ou telefone
  7. Conditional CSS [en] Mais uma demonstração dos poderes da XSLT, infelizmente eu ainda não pude testar como deveria. Se algum de vocês puderem testar ou já testaram manda um comentário falando sobre o que achou. E não deixem de ler o ótimo tutorial da Vise sobre XSLT
  8. 404 Error Pages, One More Time [en] Para os Web Designers de plantão. Por favor não deixem suas páginas de erro com aquela mensagem de erro padrão, nós todos já estamos cansado disso. Inspire-se nesse ótimo showcase.
  9. LogoInstant.com | Download Free Web 2.0 Logo Designs [en] Mais uma para os Designers de plantão. Logos totalmente gratuitos para vocês terem inspiração na hora de fazer aquela super logo para a nova super aplicação ou site que você está projetando.
  10. Billings 3 | Professional Time Billing for Anyone.
    Uma aplicação bem bacana para Mac para você criar Invoices, gerenciar seu tempo, tem interface para iPhone, se você usa Mac e quer dar um ar mais profissional ao seu trabalho dá uma olhadinha lá.
  11. 15+ Incredibly Useful Mac Apps For Freelance Web Designers [en] Algumas aplicações para Mac para aliviar a sua vida de Freelance, mas primeiro você vai ter que desembolsar algumas pratas
  12. HTML 5 – Semântica e o que é importante na web Diego Eis falando um pouco sobre Web Semântica e HTML 5
  13. Web Standards? E agora José? Um post bem interessante do Henrique Pereira contando um pouco da história e algumas dicas do que você já pode começar a fazer
  14. Blog em inglês do Elomar O Elomar começou mais um blog para aumentar suas habilidades em inglês, pois ele pretende fazer um curso bem bacana fora do país, onde e os motivos, confiram lá no blog dele. :)
  15. Trabalhando com URLs amigáveis sem o mod_rewriteVídeo tutorial lá no Pinceladas da Web, confiram e deixem seus comentários por lá, já ia esquecendo que essa é para o pessoal do PHP

Bom pessoal, chegando quase ao fim do meu post, mas antes não podia deixar de comentar sobre o erro que aconteceu no Google, sim nosso gigante Google, que por causa de um erro humano todos os sites foram identificados como possíveis ameaças. Minha opnião sobre isso é muito semelhante a do Walmar Andrade do Fator W, portanto passem lá e deem uma olhadinha.

E mais uma notícia muito boa para mim nessa semana é que eu venho testando o iPlotz desde que conheci essa incrível ferramenta de Wireframe e ontem recebi uma conta Vip. Sim, durante um ano vou estar trazendo as novidades mais bacanas dessa ferramenta para vocês. Muito grato ao pessoal do iPlotz por ter me concedido essa conta.

Então, gostaram do formato do Post? Vou trazer essas dicas semanais para vocês, sempre aos domingos, porntato me enviem sugestões por favor. =)