Bonsai UX
Bonsai UX

UI, Design e User Experience de um ponto de vista zen

Share


Our Newsletter


Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

Tags


avrt

Twitter


Bonsai UX

Colocando a mão na massa #partiusites

Poe BellentaniPoe Bellentani

Essa é a continuação da série de posts sobre como começar a trabalhar com Desenvolvimento de Interfaces, o primeiro post tratou dos conceitos básicos e o segundo sobre por onde começar.


Bom, agora que você já aturou um monte de papo-furado de como começar, acho que já dá pra sujar as mãos um pouco.

Primeiro, o que temos que entender é que todo o conteúdo (títulos, parágrafos, textos, blocos, botões, itens de navegação, etc) que você está vendo na janela do seu navegador está sendo renderizado em uma linguagem chamada HTML e a parte visual (cores, fontes, bordas, espaçamentos, etc) é controlada por uma outra chamada CSS - e quando falarmos de HTML já estaremos falando de HTML 5 e quando falarmos de CSS estaremos falando de CSS 3.

Uma coisa importante que você precisa saber é: para trabalhar com HTML e CSS você não precisa de nenhum programa específico, vai precisar de um editor de texto simples. Isso mesmo, o Bloco de Notas do Windows é um bom exemplo. Existem programas que dão uma ajuda, mas HTML e CSS são texto interpretado por navegadores web. o.O

Vamos nos aprofundar que já já você entende! :)

Sobre o HTML

O HTML não é uma linguagem de programação, mas sim uma linguagem de formatação ou interpretação. O que isso quer dizer? Você cria blocos de coisas com HTML e define como essas coisas devem se portar no navegador.

O significado desse acrônimo é Hypertext Markup Language - em português seria Linguagem de Marcação de Hipertexto.

A referência é clara, são marcações que tem com começo e fim em documentos com links com referências internas e externas - os tais hipertextos, que a gente conhece como páginas web.

Alguns exemplos:

Um texto em negrito tem duas marcações possíveis.

O resultado seria um texto em negrito, mas o navegador teria que ler o código <b>um texto em negrito</b> ou <strong>um texto em negrito</strong>.

Para um texto em itálico usariamos outras duas marcações possíveis <i>um texto em itálico</i> ou <em>um texto em itálico</em>.

Notem que eu abro (<b>, <strong>, <i> e <em>) entre os sinais de menor e maior (<tag>) a marcação e fecho ela com o sinal de maior e menor, mas com uma barra antes do sinal de maior (</tag>) onde quero que ela termine.

Mas eu não uso HTML apenas para formatar o texto, posso usar para definir blocos de texto, como parágrafos:

<p>Este é um parágrafo</p>

E o que você vê é:

Este é um parágrafo

Ou um bloco de citação:

<blockquote>"Do or do not, there is no try." - Yoda</blockquote>

O resultado seria:

"Do or do not, there is no try." - Yoda

Você pode ainda fazer composições mistas:

<blockquote><strong>"Luke, I'm your father."</strong> - <em>Darth Vader</em></blockquote>

Que renderiza em seu navegador:

"Luke, I'm your father" - Darth Vader

Esses elementos são chamados de tags HTML e cada uma faz uma coisa.

Existe uma gama imensa dessas tags e aprender o que elas fazem ou como utilizá-las da forma correta é o seu objetivo como profissional de UI.

Abaixo segue o exemplo de uma página HTML simples, com a estrutura padrão e um texto interno escrito "Não é a mamãe!" e o título da página é "O Baby Sauro falava isso".

<!DOCTYPE html>
  <html>
  <head>
      <title>O Baby Sauro falava isso</title>
      <link rel='stylesheet' href='style.css'/> <!-- Chama uma folha de estilo CSS -->
      <script src='script.js'></script> <!-- Chama um arquivo com Javascript -->
  </head>
  <body>
      <h1>Só um exemplo de página</h1>
      <p>Não é a mamãe!</p>
  </body>
</html>

O resultado você pode ver impresso no nesse codebit.

Em suma, HTML é uma linguagem que é interpretada por um programa (o navegador, ou browser) e é exibida para o usuário usando pré-definições estabelecidas: um parágrafo <P> vai sempre se portar de forma padrão nos navegadores, assim como títulos e blocos de divisão (como as tags DIV e SPAN).

Sei que não é uma explicação muito clara e a melhor maneira de entender o que o HTML faz é escrevendo HTML (lá embaixo, lá embaixo, calma que já chegamos).

Vamos agora ao que deixa as páginas web todas bonitinhas e coloridas, o CSS.

Sobre o CSS

O significado desse acrônimo é Cascade Style Sheet. Em português seria "folha de estilo em cascata". O nome fica mais claro quando você começa a entender e utilizar essa linguagem de formatação: os estilos aparecem em um documento texto e sobrescrevem chamadas anteriores, por isso o "cascata", como em efeito cascata.

O que o CSS faz é redefinir as propriedades visuais de um elemento utilizando chamadas específicas para eles, desde referências únicas como um ID até classes ou tags gerais.

Podemos trocar cores de elementos, mexer em seus tamanhos, posicionamentos, animações, efeitos ou alterações funcionais da exibição de tudo o que estiver em um documento HTML.

Eu posso pintar um pedaço de texto de vermelho linha de vermelho utilizando um código em uma tag HTML, por exemplo. O que você viu aí é resultado do código <b style="color:red">linha de vermelho</b>, sendo que o <b></b> é a tag HTML e o style= é um atributo que chama o CSS em linha (inline) e a propriedade color modifica as cores das fontes do bloco e o red é a definição da cor.

A gente não chama estilos em linha nunca a não ser para fins didáticos. A prática correta é usarmos um arquivo CSS externo. Nesse blog, por exemplo, usamos a folha screen.css. Ela é referenciada no documento e contém todos os elementos de design que compõe o site.

Um pedaço desse arquivo se parece com isso:

h1 {
   font-size: 20px;
   letter-spacing: -2px;
	text-indent: -3px;
}
a {
    color: #4A4A4A;
	transition: color ease 0.3s;
}
p {
    color: red;
}

Todo o design dessa página e de 90% de todas as páginas que você navega (inclusive, grande parte dos aplicativos de seu celular) usam o CSS para definir a sua diagramação e compor seu layout.

Veja o exemplo desse código aplicado ao HTML que exemplificamos lá em cima, veja o link e escolha a aba: style.css.

Pareceu confuso, não é? Como o HTML, a melhor forma de aprender CSS de verdade é praticando, vendo passo a passo como usar esse recurso e já pegando os resultados.

Onde aprender HTML e CSS

Existem alguns lugares onde você pode aprender, mas tenha em vista que é preciso praticar e o melhor é optar por aquele que permitem uma rápida resposta ao que você tem como objetivo.

Os dois lugares mais legais para você aprender são:

Codecademy

O melhor lugar para fazer isso free-de-grátis-sem-custo-algum e em português é o Codecademy, porque você já pratica o que aprende. É bem legal, tem exemplos divertidos e dá pra você se sentir bem com os resultados já impressos direto na tela do seu navegador.

Codeschool

Se você tem uns reais, um cartão internacional e conhecimento médio em inglês já indico o Codeschool, que tem uma metodologia muito legal, cheio de exercícios divertidos, linguagem gostosa e um monte de outras ferramentas que ajudam a fixar os conhecimentos de forma eficiente - além de permitir que você documente sua evolução e poste as badges de cada curso no seu Linkedin pra todo mundo saber que você manja dos paranauês.

Pessoalmente acho que vale investir no Codeschool se você tem pretensões profissionais, além dele permitir que você monte equipes de empresas e permitir a prática do inglês de bônus. \o/

Expandindo o aprendizado: para o infinito e além

Outros lugares pra se aprender, mais roots e que permitem que vocês tenham um conhecimento mais amplo podem ser encontrados na web.

Depois que você fizer os cursos no Codecademy ou no Codeschool (ou ambos, que não seria ruim #BeGeekStayNerd) vale a pena passar nesses dois lugares:

w3schools.com

Você pode aprender tudo para trabalhar com internet nesse site, mas o tutorial dele é mais profundo, passando tag por tag HTML e propriedade por propriedade de CSS. Esse site é tão velho, mas tão velho que foi nele que aprendi de fato a mexer com HTML, CSS e Javascript - rola até uma emoção saber que foi lá em 1999 (ai, a artrite).

Lá você encontra o curso de HTML e o curso de CSS, podendo traduzir a página para português usando o botão do Google Translator no canto superior direito (sim, aquele globinho, perto da lupa).

Ele é bom para entender o poder de cada linguagem, mas não é o ideal para quem quer começar já com resultados reais. Além de que exige que você queira escrever um bocado de linhas e saiba organizar o seu código em pastas e afins.

Sem contar que tem um monte de outras coisas lá dentro que podem ser aprendidas da mesma maneira. Vale a pena, mas pra depois, Gafanhoto!

HTML5doctor.com

Tem toda a documentação do HTML5, comentada e com textos bem profundos sobre cada tag, onde é legal utilizar elas e também explicações sobre as tags semânticas (vou falar delas depois de dar o caminho dos barcos básico pra você).

O HTML5doctor é meu companheiro inseparável para consultas rápidas e ajuda a criar algumas discussões bem polêmicas durante os cafés do trabalho ou nas mesas de bares (ou nas partidas de Dungeon & Dragons).

Challenge accepted

Vamos lá! Agora que vocês tem o caminho para seguir vamos começar com um desafio. Usando as dicas de estudo do post anterior você pode já escolher o seu objeto de estudo e criar o seu plano de estudo.

Seja um site, aplicativo ou qualquer outra ideia, que tal usar ele como base para você colocar em prática as coisas que for aprendendo?

Inicie pela home do seu site e faça ela utilizando as coisas que for pegando dos cursos indicados. Vá além, utilize coisas que você achar nas dicas de expansão de conhecimento.

Por hora acho que já tem bastante coisa pra vocês irem brincando!


O próximo post será "Javascript: programação de verdade para web", onde a gente vai aprender a brincar com programação e entender o que diabos isso muda em nossas vidas como UI designers - a gente deixa de pertencer a essa categoria de designers e começar a namorar o nome de "Frontend developer".

Comments