Como ser um dev frontend usando Linux

Muita gente me pergunta:

Você trabalha com frontend e usa Linux? Como faz pra usar Photoshop?

Como se front-end só trabalhasse com Photoshop. Mas vem comigo que te mostro.

Trabalhar com desenvolvimento frontend envolve muito código, por isso Linux – ao menos pra mim – é a melhor solução. Usar uma distribuição que não te deixe na mão e facilite a instalação de pacotes é essencial. No momento estou usando duas distros:Ubuntu Gnome – porque o Unity é muito palha – e Elementary OS.

As duas resolvem bem qualquer tipo de problema.

Uso o Terminator no lugar do terminal padrão do Ubuntu (dica do Carlos Becker, que inclusive tem uma coleção de dotfiles bem da hora).

Para codar, Sublime Text com algumas configurações específicas.

Shutter, para tirar prints da tela.

Gimp para tratar alguma imagem – não fico mexendo muito com imagens, uso mais para fazer as capas dos posts do blog.

Fogger para criar apps a partir de web apps – um que faz uma frente é o DevDocs.io

Mas e quando você recebe um layout no Photoshop, como você abre os PSDs?

Bom, já rodei Photoshop no Wine, – fica razoavelmente bom, com poucos bugs, mas fica pesado – já testei em máquina virtual, mas fica lento também. Até pouco tempo atrás, essas eram as únicas soluções.

Mas – por incrível que pareça – a Adobe pensou nos devs frontend que, como eu, gostam de usar Linux e só usam Photoshop para fazer recorte de imagens, pegar medidas, fontes, tamanhos de fontes, cores, etc., e lançou um serviço lindo chamadoProject Parfait, onde você faz exatamente isso: pode fazer upload de um PSD (ou vários), e extrair cores, fontes, exportar imagens, etc.

Agora você não tem mais desculpinha pra ficar usando Windows! E nem falo nada de programador BACK-END que usa Windows!

Don't Panic - It's not Windows

Mas brincadeiras à parte, use o sistema que você se sentir mais confortável, e te fizer mais produtivo! 😀 Desde que não seja Windows.

E você, qual o seu sistema operacional? E qual o seu workflow? Comente!

Post ooriginal por blog da2k

Anúncios

[série] A estrutura e a semântica do HTML5 – parte 1

Olá pessoal!
Irei postar aqui uma série que esmiúça a estrutura do HTML5 e sua semântica. O texto original pertence ao Edu Agni, ele é consultor especialista em User Experience, trabalha com isso há 11 anos. Entre outras coisas, o cara é curador da área de design e multimídia da Campus Party Brasil (um dos maiores eventos de tecnologia do mundo). Espero que apreciem. Será dividido em 3 partes. Segue a primeira.

A estrutura e a semântica do HTML5 – parte 1

Se você quer se aventurar com o HTML5, entenda aqui a sua estrutura básica, a semântica das principais novas marcações e algumas ferramentas. Sempre gosto de salientar para as pessoas que a maior evolução do HTML5 foi na sua semântica. A maior parte dos profissionais que vêm trabalhando com HTML estão muito  preocupados com aquelas animações pirotécnicas (que dependem muito mais de javascript do que do HTML), e sequer entendem o significado das marcações.

Bem, não caia nessa! Primeiro, as primeiras coisas… se você está querendo se aventurar pelo mundo encantado do HTML5, preste atenção: vou explicar aqui o que mudou na estrutura básica, falar sobre a semântica das principais novas marcações, e dar umas dicas de ferramentas para você trabalhar 😉

Estrutura básica, Doctype e Metadados

Olhando para a estrutura básica de código do HTML5, você vai perceber que ela se mantem praticamente idêntica à versão anterior, com excessão do Doctype e da Metatag Charset.

<!DOCTYPE html>
<html lang="pt-br">
   <head>
       <meta charset="utf-8"/>
       <title>Entendo a estrutura e semântica do HTML5</title>
   </head>
   <body>
       <p>Olá mundo!</p>
   </body>
</html>

Doctype e o elemento HTML

Document Type Defination (DTD, ou simplesmente Doctype) é uma instrução que informa ao navegador qual é a especificação do código que está sendo usada no documento, e deve ser declarado antes da tag <html>.

Na versão anterior do HTML, a declaração do Doctype era mais extensa e difícil de decorar, havendo a necessidade de referenciar para o navegador o arquivo DTD com as definições daquela especificação:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">

No HTML5 a inserção do Doctype foi simplificada, e a responsabilidade de buscar as definições da especificação fica por conta do próprio navegador:

<!DOCTYPE html!>

Após a declaração do Doctype, iniciamos o código HTML. Na árvore de elementos do código, a tag principal é a <html>, que comporta todos os outros elementos filhos.

<html lang="pt-br">

É na tag <html> que declaramos o idioma principal do documento, através do atributo (que pode ser usado também em outras tags do documento). Na tag <html> também podemos inserir atributos como o xmlns (XML Namespace), como quando usamos em nossa página elementos da FBML (Facebook Markup Language):

<html lang="pt-br" xmlns:fb="http://www.facebook.com/2008/fbml">

Metadados

Continue Lendo “[série] A estrutura e a semântica do HTML5 – parte 1”

Guia do Front-end das galáxias

Oi pessoal!

Hoje trago uma dica de leitura boa para quem é ou deseja se tornar, assim como eu, um bom desenvolvedor front-end. Para quem não sabe, um front-end é o responsável pela parte amigável do site, as funcionalidades de interação com o usuário (a grosso modo).

Essas dicas valem ouro, e o nobre Davidson Fellipe (@davidsonfellipe) entrega de mão beijada em um slide ‘da hora’. Sirva-se a vontade.

CSS – Trabalhando com Folhas de estilo na web (introdução)

Olá pessoal!

Estou voltando a trazer um conteúdo para quem está iniciando os estudos em criação de sites. Neste tópico, trago um slide com uma introdução ao CSS, as famosas folhas de estilo, item hoje indispensável no desenvolvimento de conteúdo para a web.

Desde já agradeço sua visita e espero que seja proveitoso o conteúdo. Em breve disponibilizaremos mais materiais em slides, PDF e vídeos no Youtube. Fique a vontade para perguntas, críticas e/ou elogios nos comentários ou através do e-mail professordanielbrandao@gmail.com

NOVO! Boas práticas na criação web – introdução

Olá pessoal!

É com muito prazer que anuncio que irei retomar algumas dicas e tutoriais do meu blog. A partir de agora irei postar materiais já publicados anteriormente e itens inéditos baseados em continuações dos assuntos já tratados no blog.

Como retorno, posto aqui um material meu em formato .PDF que está disponível no Slideshare. Uma introdução para os que estão iniciando em desenvolvimento de sites. Boas práticas na criação web é uma introdução ao assunto e espero que possa auxiliar quem ler.

Esperem coisas novas e dicas sobre programação web daqui por diante!

A arte de programar!

Só quem é ou já foi programador sabe da difícil arte de conciliar VIDA x PROGRAMAÇÃO… rs. Eu recebi um e-mail com Dicas úteis para os programadores, e estou compartilhando aqui com os desenvolvedores de plantão. Segue:

  • Organize sua agenda.
  • Prepare um roteiro de trabalho a partir de um índice.
  • Teste sistemas concorrentes similares.
  • Converse com parceiros do setor sobre dúvidas.
  • Identifique clientes em potencial.
  • Ao pensar nas funções, se coloque na pele dos usuários.
  • Se divirta, tenha pensamentos positivos.
  • Não se esqueça de comer. De preferência a comidas leves.
  • Evite videogame nas horas vagas, você já fica a vida inteira na frente de uma tela, procure fazer atividades externas e exercícios todos os dias.
  • Não fique on-line em chats quando estiver trabalhando.
  • Se tiver cansado, descanse.
  • Faz uma versão demo simples e rápida para testar.
  • Contrate um designer que entenda o conceito do sistema.

O que é web semântica?

Imagem

Conheça já a revolução tecnológica que a internet está sofrendo.

Pode guardar a gramática, pois o assunto não tem nada em comum com língua portuguesa. Web Semântica é um novo conceito de internet que surge para mudar tudo o que conhecemos através da rede e a nossa interatividade com ela dentro dos próximos anos. Mas você saberia dizer exatamente do que se trata? Continue Lendo “O que é web semântica?”