Para iniciantes: O que é HTML

Domênico Citrângulo — Mon, 14 Nov 2011 22:33:04 +0000

O que é o HTML?

HTML é um acrônimo que significa HyperText Markup Language (em português: Linguagem de Marcação de Hipertexto). Ou seja, o HTML é uma linguagem de marcação.

Como assim “marcação”?

Isso mesmo, marcação. O HTML é o responsável por “etiquetar” o conteúdo de uma página. Ela marca o que é um parágrafo, o que é uma imagem, o que é uma tabela, e assim por diante.

E como esses conteúdos são marcados?

O HTML usa tags para etiquetar os elementos (não é à toa que ‘tag’ significa ‘etiqueta’ em inglês). Uma tag HTML é sempre escrita começando com o sinal de menor (<) e terminando com o sinal de maior (>). Por exemplo, a tag que marca um parágrafo é a

. A que marca uma tabela é a

. E a que marca um título é a

. Vamos à um exemplo prático:

Titulo de uma notícia qualquer

Primeiro parágrafo da notícia com as informações clássicas de onde, quando, quem, porque e como.

Veja que usei a tag

para marcar o meu título da seguinte forma: abri a tag, escrevendo

, coloquei o conteúdo do título, e então fechei a tag escrevendo-a novamente com uma barra (/) logo depois do sinal (<). Assim eu mostro onde o meu título começa e onde ele termina. Logo abaixo do título vem um parágrafo que funciona exatamente da mesma forma: a tag é a aberta (

), coloco o conteúdo do parágrafo, e fecho a tag

. Dessa forma indico exatamente onde começam e terminam os meus elementos.

Ao escrever uma página inteira usamos muitas outras tags, além de escrever tags dentro de outras tags. Sim, tags dentro de outras tags. Veja:

Título da página

Meu bom e velho parágrafo com um

Nesse exemplo, a primeira tag a ser aberta é a (corpo da página), então colocamos um título

e um parágrafo
e só depois fechamos a tag . Ou seja, as tags

estão ‘dentro’ da tag .

Além de marcar o conteúdo, as tags também podem ter propriedades responsáveis por nos dar mais informações sobre aquele pedaço da página:

No exemplo acima criamos um formulário usando a tag
. Dentro dela colocamos duas propriedades deste formulário: o método como as informações serão enviadas e o id do formulário.

HTML semântico

Muitas vezes você verá menções sobre a semântica aplicada ao HTML. Simplificando o conceito, podemos dizer que para escrever HTML semântico basta usar as tags certas para os conteúdos certos. Por exemplo, vamos supor que sua página terá uma lista dos 10 produtos mais vendidos. Existem tags específicas para isso: a tag de lista ordenada

. Então, use-as! Não faça com vários
’s, um abaixo do outro. Visualmente pode ficar ok, mas estará incorreto semanticamente.

HTML = conteúdo

O seu arquivo HTML deve conter todas as informações da página. Todos os dados e sua estrutura. Já a forma de cada um dos seus elementos deve ficar fora do HTML. Ou seja: cores, larguras, posicionamento, imagens de fundo, tipos de fonte, tudo isso não deve estar no HTML e sim no CSS, um arquivo responsável apenas por isso.

Claro que este foi um “resumo resumido” e é possível escrever mais 1000 posts como esse sobre HTML sem esgotar todas as suas características, história, evolução, etc. Mas já é um bom início para quem está começando agora a se interessar pelo assunto. Abraço.

50 coisas que todo estudante de design deveria saber

Domênico Citrângulo — Wed, 29 Jun 2011 13:15:14 +0000

Resolvi então colocar aqui as 10 primeiras, numa tradução mais do que livre, e recomendo que todos visitem o post original, vale a pena.

1. Você não é o primeiro.

Atualmente, existem muito poucos “primeiros”. Muitos outros já abriram studios, trabalharam como freelancers ou fizeram estágio. São coisas que você pode fazer.

2. Sempre há alguém melhor.

Independentemente do quão bom você é, sempre haverá alguém melhor. É incrivelmente fácil perder tempo se preocupando com isso.

3. Sucesso não é um recurso finito.

A escola promove uma mentalidade de soma-zero: a de que alguém precisa perder para que você possa ganhar. Na verdade, o sucesso do outro não limita o seu.

4. Você não pode marcar um gol se o gol não existir.

Se você não tem um objetivo, como poderá buscá-lo? Ter um objetivo define um ponto de chegada, e subseqüentemente, um ponto de partida.

5. Começar qualquer coisa requer energia.

É preciso muito mais energia para começar algo do que para parar. Essa é uma verdade para a física, para a sua carreira e para aquele projeto no qual você precisa trabalhar.

6. O caminho para o mercado é mais fácil do que você pensa.

Para entrar na indústria você só precisa de três coisas: um ótimo portfolio, energia e uma personalidade bacana. Muitos se esquecem do último atributo.

7. Tenha uma auto-imagem positiva.

Sua auto-percepção é o seu recurso mais importante. Enxergue a si mesmo como a pessoa que você quer ser e os outros também enxergarão.

8. Tenha um website simples e clean.

Um portfolio online é o alpha e o ômega da sua carreira. Com tantas possibilidades de web services existentes, não há desculpa para não ter um website.

9. Seja o curador do seu trabalho.

Nunca pare de editar seu portfolio. Três peças muito boas são melhores do que dez fracas – ninguém procura por quantidade e sim qualidade.

10. Escute seus instintos.

Se o seu trabalho não te excita, então ele não excita mais ninguém. É difícil fingir paixão por um trabalho medíocre: jogue-o no lixo.

E então, gostou? Para ler todas as 50, vá até o post original.

Infográficos do NYTimes.com

Domênico Citrângulo — Sun, 20 Mar 2011 14:21:19 +0000

Muito mais que divertidos ou bonitos, bons infográficos não devem deixar de cumprir seu principal papel: informar. Esta é a sua grande contribuição para a notícia ou assunto ao qual está relacionado. Infográficos devem transformar números, mapas, acontecimentos e dados em algo que o leitor possa compreender de forma simples e fácil.

E uma das melhores equipes do mundo quando se fala em infográficos é, sem dúvida nenhuma, a do “NYTimes.com”, versão online do jornal americano “The New York Times”. Vencedora de inúmeros prêmios relacionados a Jornalismo Visual e Infografia, a equipe do jornal cria e produz conteúdos que vão muito além de apenas imagens ou gráficos estáticos, são uma extensão da notícia e auxiliam os seus leitores a entender a notícia ou assunto, complementando o texto da matéria.

Seguem aqui alguns exemplos dos melhores infográficos criados e produzidos por eles:

Terremoto no Japão

Infográfico mostrando vários dados sobre os estragos causados pelo terremoto e tsunami no Japão, com fotos, vídeos, número de desaparecidos, casas e prédios destruídos.

Pedra, papel e tesoura.

Jogo onde você pode enfrentar o computador e entender como a máquina ‘aprende’ como funciona seu pensamento e começa a utilizar seus padrões de jogadas para adivinhar sua próxima escolha.

Como as pessoas gastam seu tempo

Gráfico interativo mostrando como diversos grupos de pessoas gastam seu tempo durante o dia, entre refeições, trabalho, sono e televisão e outras atividades. É possível ter informações divididas por faixa etária, educação, sexo, raça, ocupação e número de filhos.

Cães e raças

Ensaio fotográfico com 102 cães campeões de suas raças. Alguns com o áudio do seu latido.

Homicídios em Nova York

Mais uma vez o jornal lança mão de um mapa interativo para mostrar a incidência de homicídios na cidade de Nova York ano a ano. É possível filtrar cada uma das ocorrências por dia, mês, arma utilizada, idade da vítima, idade do assassino, raça e sexo, entre outros.

Marco Zero

Mostra como está acontecendo a reconstrução do complexo do World Trade Center en NY.

18 dias de Revolução no Egito

Mapa em 3D mostra os principais acontecimentos da revolução que tomou conta das ruas da cidade do Cairo, no Egito.

Restauração do retrato de Philip IV

Infográfico ilustra como ocorreu a restauração da tela de Velázquez.

Prostestos no Egito

Linha do tempo contando, dia a dia, os fatos mais importantes dos Protestos no Egito .

Mapa das medalhas olímpicas

Gráfico e linha do tempo mostrando os países que mais ganharam medalhas olímpicas nas diversas edições dos Jogos.

É melhor comprar ou alugar?

Gráfico interativo que calcula qual a opção mais vantajosa, comprar ou vender seu imóvel, com base no seu preço, aluguel, taxa de juros, tempo de permanência e outras variáveis.

Composição da platéia do State of Union

Mostra a composição da platéria do State of Union, cerimônia onde o Presidente dos Estados Unidos delineia suas prioridades para o País.

Árvore Genealógica das Famílias Americanas

Infográfico mostrando a origem de várias famílias americanas e sua variedade étnica.

A História em "Mad Men"

Linha do tempo relacionando o enredo da série aos acontecimentos históricos americanos.

A técnica de Mariano Rivera

Vídeos, animações, fotos e áudio explicam a técnica do jogador de Baseball.

A casa do futuro

Imagem interativa mostra as características e tecnologias mais avançadas e ecológicas para construção de casas inteligentes.

Desafio contra o Superconputador da I.B.M.

Jogo de perguntas e respostas que ilustra o poder computacional da supermáquina de respostas da I.B.M., a Watson.

"Banhistas na margem de um Rio"

Linha do tempo mostra a criação da famosa tela de Henri Matisse.

Os Teatros da Broadway

Tour interativo pelos diversos teatros da mais famosa rua de shows e musicais dos EUA.

Overview sobre as revistas policiais em Nova York

Dados detalhados de cada uma das revistas realizadas pela polícia de Nova York no ano de 2009, distribuídas em um mapa interativo.

Derramamento de óleo e suas consequências

Informações sobre mancha de óleo na costa americana e seus efeitos na biosfera.

A Guerra entre Microsoft e Apple

Gráfico mostrando a guerra das duas companhias, seu valor de mercado e os principais fatos envolvendo as duas gigantes.

Gripe Suína

Timeline ilustrando como a Gripe Suína alastrou-se pelo mundo.

Orçamento Americano

Puzzle onde você deve escolher os programas e medidas orçamentárias que devem ser tomadas para balancear as contas americanas.

O ano em fotos

Retrospectiva fotográfica do ano.
Crie gráficos de maneira rápida e fácil com o Google Chart Tools – Parte 2

Domênico Citrângulo — Mon, 16 Aug 2010 17:49:56 +0000

Download

Demo

Os gráficos de barras seguem exatamente a mesma mecânica dos gráficos pizza, ou seja, você deve fazer a chamada à URL da API passando todos os parâmetros desejados e receberá como retorno a imagem do gráfico pronta para ser inserida na sua página. Veja o exemplo de um gráfico de barras verticais e os parâmetros usados para criá-lo:
As principais características do exemplo que acabei de criar são: ele é um gráfico de barras verticais, com 2 eixos visíveis (20, 40,… e Jan, Fev,…) e tem 180 x 150 pixels. Essas características foram passadas à API usando estes parâmetros:
Tipo cht=bvs – informa que quero um gáfico de barras verticais;
Eixos chxt=x,y – significa que quero os eixos X e Y visíveis;
Dados chd=t:20,40,60,80,30 – os dados;
Cor chco=76A4FB – mostra que desejo apenas uma cor;
Tamanho chs=200×125 – define o tamanho da imagem;
Labels chxl=0:|Jan|Fev|Mar|Abr|Mai – informo as labels do eixo X (0);

Alterando valores e escala

Por default o eixo vertical vai sempre de 0 a 100, então quando editar os valores do gráfico e quiser que o eixo fique abaixo ou acima desses valores você deverá usar a escala. Por exemplo, se eu tenho um gráfico onde o valor mais alto é 41% não há necessidade do meu gráfico exibir valores até 100, veja abaixo a diferença entre os dois exemplos:
Perceba que no segundo gráfico usei 2 parâmetros a mais, que indicam que quero uma escala diferente da default:
Eixo chxr=1,0,50 – define o eixo Y em 0 a 50;
Escala chds=0,50 – define a escala de 0 a 50;

Definindo 2 ou mais séries

Um gráfico de barras pode ter mais de uma série de dados em cada intervalo o que muitas vezes se faz necessário. Tudo o que você tem que fazer é passar os valores de cada série separados por “|” e definir o tipo de gráfico para bvg (cht=bvg). Veja os exemplos abaixo e compare suas URLs:
Note também que foi definida uma cor para cada série através do mesmo parâmetro chco que já havíamos usado, mas agora com as cores separadas por vírgula. Você pode usar quantas séries desejar em cada gráfico, basta tomar cuidado para que o seu tamanho comporte todas as barras.

Legendas e grids

Para uma melhor visualização das informações dos gráficos quase sempre é necessário que usemos um grid por trás das barras, que facilitará a comparação entre elas, e claro uma legenda para informar melhor o visualizador. Para tanto basta usar outros dois parâmetros bem simples: chg para adicionar grids e chdl para legendas. O primeiro aceita 4 parâmetros principais: o intervalo entre grids do eixo X, intervalo para o eixo Y, largura do traço, espaço entre os traços. O segundo aceita como parâmetro o texto das legendas separados por |. Veja o exemplo:
Largura e espaçamento das barras

Muitas vezes por conta de espaço ou por falta dele, será necessário fazer algumas adaptações nos tamanhos do gráfico. Um dos truques que ajuda nesse processo é alterar a largura e espaçamento entre as colunas e séries de colunas. Podemos fazer isso com o parâmetro chbh, que aceita 3 parâmetros: largura das barras, espaço entre barras, espaço entre os grupos de barras (séries). Veja os exemplos:
Conclusão

Mesmo com exemplos bastante simples e passagem bem rápida apenas pelos principais parâmetros da Chart API, fica claro que o seu potencial de utilização pode envolver desde posts simples em um blog até a integração com sistemas de informação que necessitem oferecer uma melhor visualização de dados. Se você ficou interessado, recomendo fortemente que visite a página da API e sua documentação pois há dezenas de outras possibilidades de customização para os gráficos.
47 mandamentos para pequenas agências digitais (e pra você também)

Domênico Citrângulo — Thu, 07 Jan 2010 18:48:10 +0000

Muito obrigado ao Andre por disponibilizar esse material. Assino embaixo de praticamente tudo o que ele diz. Se você trabalha em uma agência, procure colocar algumas dessas idéias em prática. Com certeza seu trabalho e o seu dia-a-dia só tem a ganhar.

Veja a apresentação aqui embaixo:

30 dicas de layouts criativos usando desenhos feitos à mão

Domênico Citrângulo — Sun, 31 May 2009 13:48:23 +0000

Bearskinrug

Tales Simon

Sawyer Hollenshead

Kinetic Singapore

Christian Sparrow

LOW MORALE

BootB

Pointless Ramblings

Kitty Attack

mel kadel

Frank PR

Redemption Maddie

Legwork Studio

NJ REBEL

Dawghouse Design Studio

Design Jobs on the Wall

Jesse Willmon’s Winter 2009 Design

marcol.art.pl

Schlafman.com

Chemistry Recruitment

Elan Snowboards

PSYOP

Dann Whittaker Creative

We Are not Freelancers

Oink!

Biola Undergrad

Heather Sloane

Free People Clothing Boutique

Grupa Firm

Football made in Africa

Wolfram Alpha, o site que quer desafiar o Google

Domênico Citrângulo — Sat, 16 May 2009 02:45:06 +0000

Se você pode fazer isso com um nome imagine uma marca: imagine digitar “Nokia” e ter significados, conexões, comparação de concorrentes, blogs que a citam, gráficos de desempenho, informações de vendas, comunidades que gostam ou não dessa marca etc etc, um dossiê completo. Tudo isso numa mesma página.

Ou ainda, digitar “pesca Brasil 2007″ e receber uma página com todas as informações sobre pesca no país no ano de 2007, com gráficos comparativos com outros anos, espécies mais pescadas, ranking por estado.. e ainda poder baixar as informações em formato PDF..

Essa é a promessa do Wolfram Alpha, um site, tipo o Google, só que que se auto intitula de “computational knowledge engine”.. ou seja, sua proposta é fazer com que todo o conhecimento do mundo possa ser computado gerando respostas a qualquer tipo de pergunta. Assim, quando você tiver uma dúvida, ao invés de procurar no google as palavras chave relacionadas a ela, e então ir até o site que tem esta informação, bastará digitar a pergunta no Wolfram Alpha e ele te entregará a resposta, pronta. É algo como o Ask.com, mas muito mais completo.

Se você quer conhecer melhor o Wolfram Alpha acesse o screencast lançado esta semana explicando como o site funcionará: www.wolframalpha.com/screencast/introducingwolframalpha.html

Ou espere até segunda feira, 18 de Maio, que é a prometida data de estréia. Se eles conseguirem, na vida real, fazer o que o screencast mostra… prepare-se Google.

Dicas de sites com fundos escuros: uma forma diferente de criar um layout

Domênico Citrângulo — Thu, 30 Apr 2009 10:42:02 +0000

50 tutoriais para criar ícones diferentes

Domênico Citrângulo — Sun, 15 Mar 2009 13:32:53 +0000

Criar um ícone, daques que você vê quando carrega o iPhone ou quando entra no Top Rated, não á uma tarefa fácil.

É preciso ter em mente o que você deseja e dominar bem a ferramenta que vai utilizar.

Para te ajudar nesse ultimo item achei uma ótima lista com 50 tutoriais que vão desde como criar um ícone de RSS personalizado até tutoriais mais complexos sobre como criar um ícone vetorizado.

Dica do blog Six Revisions

Dicas de softwares e sites grátis para organizar a vida

Domênico Citrângulo — Sat, 14 Mar 2009 22:30:07 +0000

Você precisa lembrar de enviar aquele email ou de passar na casa do seu amigo para entregar o livro que pegou emprestado? Se você é como eu, quando mesmo as coisas mais simples e rotineiras são fáceis de serem esquecidas, você precisa dar uma lida nessa lista com 100 softwares grátis para você lembrar tudo o que deve fazer e um pouco mais.

Você pode guardar dados, enviar email com lembretes, integrar com o Gmail, Facebook ou FireFox, cobrar pessoas das tarefas que não foram entregues. Tem de tudo.

Por via das dúvidas eu já testei uns 50, só pra garantir ;)

Dica do mashable

Top rated never dies » Web

Para iniciantes: O que é HTML

O que é o HTML?

. Vamos à um exemplo prático: Titulo de uma notícia qualquer Primeiro parágrafo da notícia com as informações clássicas de onde, quando, quem, porque e como. Veja que usei a tag

Titulo de uma notícia qualquer

para marcar o meu título da seguinte forma: abri a tag, escrevendo

Título da página

e um parágrafo e só depois fechamos a tag . Ou seja, as tags

HTML semântico

HTML = conteúdo

50 coisas que todo estudante de design deveria saber

1. Você não é o primeiro.

2. Sempre há alguém melhor.

3. Sucesso não é um recurso finito.

4. Você não pode marcar um gol se o gol não existir.

5. Começar qualquer coisa requer energia.

6. O caminho para o mercado é mais fácil do que você pensa.

7. Tenha uma auto-imagem positiva.

8. Tenha um website simples e clean.

9. Seja o curador do seu trabalho.

10. Escute seus instintos.

Infográficos do NYTimes.com

Terremoto no Japão

Pedra, papel e tesoura.

Como as pessoas gastam seu tempo

Cães e raças

Homicídios em Nova York

Marco Zero

18 dias de Revolução no Egito

Restauração do retrato de Philip IV

Prostestos no Egito

Mapa das medalhas olímpicas

É melhor comprar ou alugar?

Composição da platéia do State of Union

Árvore Genealógica das Famílias Americanas

A História em "Mad Men"

A técnica de Mariano Rivera

A casa do futuro

Desafio contra o Superconputador da I.B.M.

"Banhistas na margem de um Rio"

Os Teatros da Broadway

Overview sobre as revistas policiais em Nova York

Derramamento de óleo e suas consequências

A Guerra entre Microsoft e Apple

Gripe Suína

Orçamento Americano

O ano em fotos

Crie gráficos de maneira rápida e fácil com o Google Chart Tools – Parte 2

Alterando valores e escala

Definindo 2 ou mais séries

Legendas e grids

Largura e espaçamento das barras

Conclusão

47 mandamentos para pequenas agências digitais (e pra você também)

30 dicas de layouts criativos usando desenhos feitos à mão

Wolfram Alpha, o site que quer desafiar o Google

Dicas de sites com fundos escuros: uma forma diferente de criar um layout

50 tutoriais para criar ícones diferentes

Dicas de softwares e sites grátis para organizar a vida

. Vamos à um exemplo prático:

Titulo de uma notícia qualquer

Primeiro parágrafo da notícia com as informações clássicas de onde, quando, quem, porque e como.

Veja que usei a tag

e um parágrafo
e só depois fechamos a tag . Ou seja, as tags