este é um novo capítulo 281
A HTML deixou de ser apenas uma linguagem “marcação”.
Com o novo elemento canvas da HTML5, você tem o poder de criar, manipular e
destruir pixels, bem nas suas mãos. Neste capítulo, usaremos o elemento canvas
para descobrir o artista que vive em você — chega de falar que o HTML é só
semântico e sem apresentação; com o canvas, vamos pintar e desenhar com cores.
Agora, é tudo uma questão de apresentação. Vamos aprender como posicionar um
canvas em suas páginas, como desenhar texto e gráficos (usando JavaScript, é
claro) e até mesmo como lidar com browsers que não suportam o elemento canvas.
Canvas não é apenas uma maravilha que só serve para uma coisa: você verá muito
mais em outros capítulos neste livro.
7
descobrindo seu artista interior
O Canvas
Ok,
“destruir”
talvez seja
um pouco
demais...
Sim, claro, marcação é legal e
tal, mas não há nada como pôr
as mãos na massa e pintar com
frescos e puros pixels.
De fato, sabemos que <canvas> e <video> têm
compartilhado mais do que apenas páginas... vamos
descobrir os detalhes mais legais só mais tarde.
PFCG_HeadFirstHTML5Prog.indb 281 05/06/2014 16:19:36
a nova startup de camisa com tuites
282
Capítulo 7
Capítulo 7
Nossa nova partida: TweetShirt
Nosso slogan é “se vale a pena escrever no Twitter, vale a
pena imprimir numa camiseta”.
Afinal, metade da batalha de chamar a si mesmo de
jornalista é estar disposto a colocar suas próprias
palavras impressas. Portanto, qual lugar seria melhor do
que o peito de outra pessoa? Pelo menos é esse o nosso
ponto de partida e estamos nos atendo a ele.
Agora, há apenas uma coisa que fica no caminho de conseguir
que esse plano decole: precisamos de um aplicativo web legal
que permita que os clientes criem um design customizado de
camiseta, aplicando um de seus tweets recentes.
Gostamos de dizer “se
vale a pena escrever
no Twitter, vale a pena
imprimir numa camiseta”.
O que precisamos é um
aplicativo web de camiseta que
permita a nossos usuários criar
uma apresentação moderna de
seu tuíte favorito.
Vamos nos certificar também
que isso funcione em dispositivos
móveis. Assim como eles usam
o Twitter em seus celulares,
nossos clientes também vão poder
comprar em tempo real!
Fundadora da
TweetShirt.com
Você provavelmente está pensando consigo mesmo “quer
saber de uma coisa? Isso não é uma má ideia”. Bem, vamos
nessa então. Vamos fazer esse negócio decolar até o
fim do capítulo. Ah, e se você de fato for adiante com
isso e fizer algum dinheiro, não vamos reclamar quaisquer
direitos de propriedade intelectual ou algo assim, mas,
pelo menos, mande-nos uma camiseta de presente!
pena imprimir numa camiseta”.
que o peito de outra pessoa? Pelo menos é esse o nosso
ponto de partida e estamos nos atendo a ele.
Agora, há apenas uma coisa que fica no caminho de conseguir
que esse plano decole: precisamos de um aplicativo web legal
que permita que os clientes criem um design customizado de
camiseta, aplicando um de seus tweets recentes.
Seu tweet
aqui
PFCG_HeadFirstHTML5Prog.indb 282 05/06/2014 16:19:37
pondo pra fora seu artista interior
você está aqui
283
TweetShirt.com, Estritamente Confidencial
Aqui está o tuíte que o usuário
escolheu, belamente mostrado na camisa.
Permita ao usuário escolher a cor do
background. Aqui eles escolheram branco.
O usuário também pode
escolher círculos,
quadrados ou nada no
background. Não haverá
duas camisas iguais; então
essas coisas deverão estar
posicionadas aleatoriamente!
Perceba os diferentes
estilos de texto também.
Verificando os “esboços”
Após um design iterativo exaustivo
e testes extensivos com grupos-alvo,
chegamos a um esboço (também
conhecido como um design visual
inicial) pronto para você analisar.
Vamos dar uma olhada:
Aqui está o design
da camiseta.
E o aplicativo web deverá
parecer exatamente como esta
página, se possível! Em outras
palavras, queremos mostrar o
design da camiseta e permitir que
ele seja mudado interativamente
com os controles de usuário.
Tá bom, nós somos iniciantes, fizemos isso
num guardanapo no Starbuzz Coffee.
O usuário pode
selecionar a cor do
background, círculos
ou quadrados, a cor
do texto e o tuíte.
Aqui está como a
interface do usuário
deverá parecer.
PFCG_HeadFirstHTML5Prog.indb 283 05/06/2014 16:19:37
Get Use A Cabeça! Programação Em HTML5 now with the O’Reilly learning platform.
O’Reilly members experience books, live events, courses curated by job role, and more from O’Reilly and nearly 200 top publishers.
