Program Ç Ão

PROGRAMÇÃO
CONSTRUINDO UMA WEB APP.
HTML – A estrutura de uma página Web.
Aplicativo da web interativo para postar mensagens curtas, semelhantes a um mini-Twitter.
_
Toda página da web é criada a partir de tags HTML, com a seguinte
aparência: conteúdo Todo documento HTML começa e termina com a
tag <html>. (A propósito, HTML significa Hypertext Markup Language, a
linguagem padrão para criar páginas e aplicativos da Web. Existe uma
brincadeira online em que são criados significados para HTML. Um dos
significados, por exemplo, é "Hieróglifos, para máquinas legíveis" (este é bem
conhecido).
A tags HTML fornecem instruções sobre como exibir informações em uma

página da web.
Começaremos digitando algum texto entre as tags <p>. Lembre-se de que "p"

significa "parágrafo", que exibe o conteúdo em sua própria linha.
_
Para criar uma página da web, você precisa de duas tags
principais: <html> e <body>.
A tag <html> é necessária em todas as páginas da web e contém todos os

elementos HTML usados em uma página da web.
O <body> contém todo o conteúdo que será exibido na página da web. Texto,

parágrafos, imagens, títulos, hiperlinks, listas e tabelas são exemplos de
conteúdo adicionado dentro da marca <body>.
Vamos criar a estrutura básica da nossa página!
_
Existem tags que podemos usar para adicionar ênfase ou importância a
determinadas palavras ou frases da página. As duas maneiras mais comuns de
fazer isso são negrito ou itálico. A tag <b> é usada para deixar o texto em
negrito e a tag <i> é usada para colocar o texto em itálico.
Vamos experimentar essas novas tags em dois elementos <p> diferentes!
_
Então, o que fazemos se quisermos mudar a cor do nosso texto? Existem
algumas maneiras de fazer isso. Por exemplo, podemos usar a
tag <font> com o atributo color para alterar a cor do texto em uma página
da web. Aqui está um exemplo de como alterar a cor do texto vermelho: <font
color="red">red</font>
Vamos praticar o uso de atributos para alterar a cor do nosso texto para
vermelho e azul.
_
Você notou nas etapas anteriores que colocou tags dentro de outras tags? Isso
é chamado de aninhamento. Desde a adição de estrutura a uma página da web
até a formatação de elementos, o aninhamento é utilizado sempre que criamos
uma nova página da Web.
Aninhar elementos pode ser complicado. Vamos praticar o aninhamento de

elementos com a tag <div> . A tag <div> é comumente utilizada para agrupar
elementos e criar seções em uma página.
_
Bom trabalho efetuando o aninhamento! Agora podemos criar a estrutura
básica para cada postagem em nosso app.
Enquanto a tag <div> é útil ao criarmos seções em uma página da web, há

mais uma tag específica que deveríamos utilizar para incluir os posts de nossos
usuários. A tag <article> é utilizada para criar notícias em histórias,
comentários e postagens de usuários em uma página da web. Todas as
postagens de usuários estarão dentro de uma tag <article> e possuirão uma
mesma estrutura básica.
Vamos criar nossa primeira postagem!
_
Uma página da web pode ter um visual bem entediante sem nenhuma imagem.
Então vamos adicionar algumas imagens!
As imagens são adicionadas com a tag <img src="cat.gif" />. Você

notará que esta tag é um pouco diferente porque ela não cerca outro conteúdo,
então não há uma tag de fechamento como em </img>. Ao invés disso, você
fechará a tag com uma barra.
Vamos adicionar alguns atributos dentro de nossa tag <img>. O

atributo src diz ao computador onde encontrar a imagem da internet. Os
atributos de largura width e de altura height são utilizados para configurar a
largura e a altura da imagem em pixels.
_
Como já sabemos, os links são utilizados em todos os websites e apps para
mover-nos de uma página para outra. Você utiliza links o tempo todo para ver
informações, jogar vídeo games e assistir a vídeos em seus websites favoritos.
Nossos usuários podem também compartilhar links, então vamos aprender a
adicionar links aos posts de um usuário.
Para adicionar um link utilizamos a tag <a> com o atributo href. O

atributo href contém a URL da página a qual queremos direcionar o usuário
quando o link for clicado. Este é um exemplo da aparência de um link: <a
href="https://www.google.com">Google</a>
Vamos também aprender um novo atributo, o target="_blank", que diz ao

computador para abrir o link em uma nova aba.
Vamos experimentar!
_
Vamos finalizar! Conclua esta lição digitando a postagem inteira novamente e
realmente entendendo a marcação HTML.
Na lição 2, você aprenderá sobre folhas de estilo (Style Sheets) para fazer com
que este HTML tenha uma aparência fantástica!
_
É hora de fazer o nosso pequeno projeto ficar bonito! Nós utilizaremos CSS
(Folha de estilo em cascatas, em inglês Cascading Style Sheets) para que isso
aconteça.
As folhas de estilo são definidas dentro de um bloco de

tags <style></style>, que é colocado dentro de um
bloco <head></head>. O cabeçalho contém vários metadados (metadata) ou
informações sobre a página da web, enquanto o conteúdo e a estrutura são
definidos dentro do <body></body> que você aprendeu na lição de HTML.
Definição da Estrutura de uma Folha de Estilo.
O seletor refere-se ao elemento HTML sento estilizado.
Cada declaração define na CSS o property name e o value, separados por

ponto e vírgula.
Uma declaração sempre segue o formato property: value; e os blocos de

declaração são cercados por { } chaves.
Vamos iniciar de modo fácil, ao dar à página algumas cores e fontes.
_
Nesta lição aprenderemos muitas das propriedades mais populares de CSS
utilizadas hoje em dia. Embora não possamos aprender todas elas, há recursos
excelentes online para pesquisar e aprender centenas de propriedades de CSS
disponíveis. Felizmente, os nomes de muitas propriedades de CSS são
também auto-explicativos!
Vamos explicar algumas propriedades que você digitou recentemente:
body { /*Este "seletor" direciona quaisquer <body> tags.*/
/*Configura a cor de fundo do corpo (body) para uma cor

hexadecimal f7f7f7.*/
background-color: #f7f7f7;
/*Configura quaisquer cores de fontes no corpo para uma

cor hexadecimal 4a4a4a.*/
color: #4a4a4a;
/*Configura a fonte para todo o texto no corpo.*/

font-family: open-sans, sans-serif;
/*Configura o tamanho da fonte, em pixels, para todo o

texto no corpo.*/
font-size: 16px;
} /*Fecha a declaração de regras da CSS.*/

Então por que utilizamos cores hexadecimais? As cores hexadecimais, ou
cores hex permitem que utilizemos mais de colors allow us 16.7 milhões de
combinações de cores!
Vamos continuar estilizando nossa postagem!
Vamos iniciar incluindo comentários de programação, que são simples

notas que um programador deixa para que outros programadores possam
compreender melhor um código que não lhes é familiar. Em CSS, os
comentários são cercados por um grupo barra-asterisco /*possuem este
formato*/
Agora vamos estilizar nossa classe date-posted. Quaisquer elementos

HTML em nossa página com uma classe date-posted terá nossa nova
estilização.
Agora vamos configurar o preenchimento, a cor do texto e a posição para todas

as datas em nossa página. O Preenchimento é utilizado para criar espaço ao
redor do conteúdo de um elemento.
Vamos retornar ao HTML e façamos uma pequena reestruturação. Você

cercará tudo na <body> ao redor da tag <main>. A tag <main> especifica o
comteúdo principal de uma página da web.
Mais tarde estilizaremos a tag <main> para que o conteúdo da página fique

centralizado.
Para fazer com que nossas e <img> tags sejam interativas, as cercaremos
com <button> tags. Daremos a cada botão sua própria classe que estilizaremos mais
tarde.
Agora você vai digitar bastante CSS para estilizar os outros elementos HTML
na página da web. Haverá comentários incorporados que descreverão alguns
dos elementos estilizados. Depois disso, a caixa de postagem começará de
fato a tomar forma!
Adicionaremos declarações aos

elementos <main>, <article> e <blockquote> para estilizar alinhamento,
margens, e preenchimento destes elementos.
_
Você tem feito um excelente trabalho até agora! Agora você estilizará a seção do
rodapé e a linha divisora horizontal.
Agora é hora de estilizar os botões e .
A imagem de avatar ainda não parece muito correta. Vamos consertá-la ao

adicionar uma borda e ao alterar a posição e preenchimento do avatar.
Vamos adicionar também algumas fontes, intensidade da fonte (font weight) e

cores aos links que criamos com as tags<a>.
Parabéns, você estilizou a caixa de postagem!
Mas espere... agora você precisa ter uma maneira de criar postagens novas.
Diga oi para a tag <form>! Para nossos propósitos, nosso formulário somente

precisará de um <textarea> e um <button>. Agora vamos escrever o HTML
para o nosso formulário.
É hora de pegar o app que você construiu nas lições de HTML e CSS e torná-lo
interativo! Podemos fazer isso por meio da utilização de JavaScript, a
linguagem de programação da web.
A linguagem JavaScript permite que façamos websites dinâmicos a atraentes.

Pode ser utilizada para atualizar conteúdo, criar animações, reproduzir áudio e
vídeo e muito mais. Então, quando você está assistindo a um filme transmitido
no Netflix ou comprando na Amazon, o JavaScript está por trás de tudo.
Vamos começar escrevendo algo em JavaScript que mudará a aparência de

um botão quando ele é clicado. Dê uma olhada no código e advinhe o que
acontecerá a seguir.
Como em nossa primeira etapa, alteramos a cor de segundo plano do nosso

botão ao utilizar uma linha de código JavaScript. Mas e se quiséssemos alterar
a cor do plano de fundo e o texto do botão ao clicarmos nele? Nós
precisaríamos de várias linhas de código, e isso seria difícil de escrever dentro
do nosso elemento HTML. É aqui que as funções entram em jogo!
Funções são blocos de código projetados para executar uma tarefa específica.
Esses blocos conterão cada uma das etapas que você deseja que o
computador execute para essa tarefa. Após uma função é criada, você pode
executá-la chamando-a ou referindo-se a ela pelo seu nome no código.
Agora vamos criar uma função chamada changeMe que alterará a cor e o texto

do plano de fundo do nosso botão. Em seguida, chamaremos nossa nova
função dentro do atributo onclick para que a função seja executada quando
clicarmos em nosso botão.
Até agora, alteramos a cor e o texto de um elemento usando JavaScript. Mas

como podemos fazer isso sem escrever HTML e CSS? Quando uma página da
web é carregada, o navegador cria um Modelo de Objeto do Documento -
Document Object Model, ou o DOM da página. Isso proporciona ao JavaScript
o poder de criar, alterar, adicionar e remover elementos HTML em nossa
página da web.
Até o momento temos utilizado o atributo onclick para alterar nossos

elementos HTML usando JavaScript. No entanto, não queremos que essa seja
a única maneira de alterar um elemento em nossa página da web. A seguir,
aprenderemos a maneira mais comum de segmentar um elemento
HTML, getElementById, e como podemos utilizá-lo para alterar o texto de
qualquer elemento em uma página.
Até agora, utilizamos JavaScript para fazer alterações nos elementos HTML
existentes. Em nossa última lição, aprendemos que podemos usar o JavaScript
não apenas para alterar elementos HTML, mas também podemos adicionar ou
remover elementos no DOM.
Como sabemos como segmentar IDs para fazer alterações, adicionaremos IDs
a elementos em nossa página que ainda não possuem um.

Para nossa próxima tarefa, utilizaremos o código HTML e CSS que você criou
nas lições anteriores e adicionaremos IDs a alguns de nossos elementos para
que possamos direcioná-los facilmente nas próximas lições.
Nosso app está ótimo!
Se nossos usuários digitarem um erro de digitação ou se não gostarem mais de

uma postagem, precisamos oferecer a eles a capacidade de excluir sua
postagem. Também precisamos garantir que a postagem seja removida
apenas ao clicar em um ícone ou botão específico.
Existem algumas coisas que precisaremos fazer para que isso aconteça.
Primeiro, criaremos uma função chamada deletePost e usaremos um novo
método que remove elementos HTML de uma página. Em seguida,
adicionaremos um atributo onclick ao botão "X" para que os usuários
possam remover suas postagens clicando nele.
E se nossos usuários gostarem realmente da publicação de outro usuário?

Vamos dar a eles a capacidade de mostrar um pouco de amor ao próximo.
Alguns dos aplicativos que usamos hoje, como Instagram e Twitter, permitem
que os usuários curtam uma postagem tocando em um ícone de coração na
postagem.
Vamos escrever uma função chamada lovePost que permite que nossos

usuários curtam uma postagem. Também vamos aprender um novo método
que alterará a imagem do elemento HTML quando clicado. Não se esqueça de
experimentá-lo quando terminar!
_
Os sites de mídias sociais possuem limites para a quantidade de caracteres
que uma postagem pode ter. O Facebook tem um limite grande, de 63.206
caracteres! O Instagram, por outro lado, tem um limite de 2.200 caracteres.
Queremos que nossos usuários publiquem pensamentos e idéias rápidas,
então nosso limite de caracteres será muito menor, de 140 caracteres. Isso
ajudará a manter as postagens de nossos usuários curtas, agradáveis e
objetivas.
Agora, vamos aprender dois novos atributos HTML e escrever uma função
chamada checkCharacterCount que verificará e exibirá o número de
caracteres em uma postagem.
Pense nas diferentes maneiras pelas quais você é notificado ou alertado pelos
dispositivos e aplicativos que você usa todos os dias. Nossos telefones usam
vibrações, sons e luzes para nos notificar sobre uma mensagem ou
atualização. Os sites usam pop-ups, alterações de ícones e texto para nos
informar quando recebemos uma solicitação de amizade ou inserimos a senha
incorreta.
Como limitamos as postagens de nossos usuários a 140 caracteres,

precisamos adicionar um alerta para informar aos usuários se eles atingirem o
limite. Em nossa última etapa, pedimos ao navegador para adicionar uma
classe de erro se o usuário atingir o limite de caracteres. No momento,
estamos adicionando o estilo a essa classe com utilização de CSS.
Reportar anúncio
Remova as propagandas
Nosso aplicativo está tomando forma! Nossos usuários podem interagir com as
postagens ao curti-las ou exclui-las.
O recurso mais importante que ainda precisamos para nosso aplicativo é a

capacidade de ver postagens em nosso feed. Isso vai demorar um pouco mais
de trabalho do que os outros recursos do nosso aplicativo, então vamos dividir
isso em algumas etapas.
Primeiro vamos escrever uma função chamada submitPost. Esta função

pega a postagem criada pelo usuário e mostra um alerta contendo o texto da
postagem.
Vamos criar o seu primeiro post!
_
Ótimo! Podemos ver nosso alerta, o que significa que nossa função está
funcionando.
Nosso próximo passo é alterar a função createPostHTML para mostrar um

alerta ao criar uma postagem com os elementos HTML corretos. Também
adicionaremos detalhes sobre nossa postagem, como o nome do usuário, seu
nome de usuário e a data e hora em que a postagem foi criada.
Vamos criar algumas novas postagens!
Nossos usuários agora podem adicionar múltiplas postagens em seus feeds!
Para finalizar a construção deste recurso precisamor certificar-nos de que

certos conteúdos, como links para websites, sejam visualizados corretamente
em uma postagem. Certos caracteres e símbolos podem causar erros ou
podem impedir que nosso app funcione corretamente, então temos que dizer
ao computador o que fazer se ele encontrar um desses caracteres ou símbolos
em uma postagem.
Agora nós vamos adicionar alguns métodos à nossa

função createPostHTML para verificar quaisquer caracteres especiais.
Você finalizou com sucesso seu web app em JavaScript com funcionamento
completo! Você deve sentir-se orgulhoso de seu trabalho árduo!
Vamos adicionar alguns toques finais ao nosso projeto e fazê-lo brilhar! Vamos
arrumar a caixa de postagem e adicionar nosso avatar pessoal a nossos posts.
Após terminar, tente efetuar o download do código, expandindo assim suas

habilidades ainda mais além! Isto é apenas o começo; há muitas outras coisas
ótimas para aprender em desenvolvimento para a web!
<html>
<head>
<style>
4
/*
Estilos
Base
*/
body
background-color:
#f7f7f7;
color:
#4a4a4a;
font-family:
'open-sans',
sans-serif;
font-size:
16px;
10
line-height:
1.2;
11
12
main
13
margin-left:
auto;
14
margin-right:
auto;
15
max-width:
800px;
16
padding:
20px;
17
18
/*
Anchor
Tag
*/
19
20
color:
#2D9CDB;
21
font-family:
'open-sans',
sans-serif;
22
font-weight:
700;
23
24
a:hover
25
color:
#1789C9;
26
27
/*
Artigos
com
algumas
bordas,
preenchimento
sombras
*/
28
article
29
background-color:
#ffffff;
30
border-width:
1px;
31
border-style:
solid;
32
border-radius:
10px;
33
margin-bottom:
20px;
34
padding:
20px;
35
border-color:
#eaeaea;
36
box-shadow:
10px
20px
rgba(0,
0,
0,
0.05);
37
position:
relative;
38
39
/*
Avatar
*/
40
.avatar
41
background-color:
#ffffff;
42
border-width:
1px;
43
border-style:
solid;
44
border-color:
#81C4E9;
45
border-radius:
50%;
46
float:
left;
47
height:
50px;
48
margin-right:
10px;
49
min-width:
50px;
50
position:
relative;
51
52
.avatar
img
53
left:
50%;
54
position:
absolute;
55
top:
50%;
56
transform:
translate(-50%,
-50%);
57
58
/*
Blockquote
com
algum
espaço
em
volta.
*/
59
blockquote
60
margin-left:
0;
61
margin-right:
0;
62
margin-top:
20px;
63
64
/*
Botão
*/
65
button
66
border:
none;
67
cursor:
pointer;
68
padding-left:
0;
69
padding-right:
0;
70
transform:
scale(1);
71
72
button:hover
73
transform:
scale(1.2);
74
75
button:focus
76
outline:
none;
77
}
78
button.close
79
opacity:
0.5;
80
position:
absolute;
81
right:
20px;
82
top:
20px;
83
84
button.close:hover
85
opacity:
1;
86
}
87
/*
novo
botão
no
formulário
*/
88
button.compose
89
background-color:
#2D9CDB;
90
border-radius:
10px;
91
margin-left:
10px;
92
height:
50px;
93
width:
50px;
94
95
button.compose:hover
96
background-color:
#1789C9;
97
98
button.heart
99
float:
right;
100
101
button.heart:hover
{
102
opacity:
1;
103
104
/*
Data
da
Postagem
*/
105
.date-posted
106
color:
#a9a9a9;
107
margin-bottom:
0;
108
width:
90%;
109
float:
left;
110
margin-top:
0;
111
112
.date-posted
time
113
color:
#4a4a4a;
114
115
/*
Container
do
rodapé
*/
116
footer
{
117
margin-top:
20px;
118
height:
15px;
119
120
footer
121
color:
#a9a9a9;
122
font-size:
14px;
123
font-weight:
300;
124
}
125
/*
Cabeçalhos
*/
126
h1
127
font-family:
'open-sans',
sans-serif;
128
font-size:
16px;
129
font-weight:
700;
130
line-height:
1.2;
131
margin-top:
0;
132
margin-bottom:
0;
133
padding-top:
8px;
134
135
h2
136
color:
#a9a9a9;
137
font-family:
'open-sans',
sans-serif;
138
font-size:
14px;
139
font-weight:
300;
140
line-height:
1.2;
141
margin-top:
0;
142
margin-bottom:
0;
143
144
/*
Linha
divisora
horizontal
*/
145
hr
146
border-width:
1px;
147
border-style:
solid;
148
border-color:
#eaeaea;
149
150
/*
Formulário
*/
151
form
152
background-color:
#D5EBF8;
153
border-width:
1px;
154
border-style:
solid;
155
border-color:
#81C4E9;
156
border-radius:
10px;
157
margin-bottom:
20px;
158
padding-left:
20px;
159
padding-right:
20px;
160
padding-top:
20px;
161
padding-bottom:
30px;
162
163
form.is-error
{
164
background-color:
#fbbfbf;
165
border-color:
#ec5e5e;
166
167
form.is-error
textarea
168
border-color:
#ec5e5e;
169
color:
#ec5e5e;
170
171
form.is-error
div
{
172
color:
#ec5e5e;
173
174
/*
Textarea
*/
175
textarea
176
border-radius:
10px;
177
border-width:
1px;
178
border-style:
solid;
179
border-color:
#81C4E9;
180
color:
#4a4a4a;
181
font-size:
14px;
182
height:
50px;
183
margin-bottom:
2px;
184
padding:
6px;
185
resize:
none;
186
width:
100%;
187
188
textarea::placeholder
189
color:
#a9a9a9;
190
191
textarea:focus
192
border-color:
#2D9CDB;
193
outline:
none;
194
195
/*
Fieldset
*/
196
fieldset
{
197
border:
none;
198
float:
left;
199
font-size:
12px;
200
margin:
0;
201
padding:
0;
202
width:
calc(100%
122px);
203
204
fieldset
div
205
color:
#2D9CDB;
206
margin-left:
6px;
207
margin-top:
2px;
208
209
</style>
210
<script>
211
function
lovePost(id)
212
let
heart
document.getElementById("heart-image-"+id)
213
if(heart.src.indexOf("active")
===
-1)
214
heart.src
"tweeter/images/heart-active.svg"
215
else
216
heart.src
"tweeter/images/heart.svg"
217
218
}
219
function
deletePost(id)
220
let
elementId
"article-container-"+id
221
let
element
document.getElementById(elementId)
222
element.remove()
223
224
function
checkCharacterCount(textArea)
225
let
counter
document.getElementById("input-characters")
226
let
container
document.getElementById("form-container")
227
228
if
(textArea.value.length
>
140)
229
textArea.value
textArea.value.substr(0,
140)
230
container.classList.add("is-error")
231
else
232
container.classList.remove("is-error")
233
234
counter.innerText
textArea.value.length
235
236
function
submitPost()
237
let
textArea
document.getElementById("input-textarea")
238
let
counter
document.getElementById("input-characters")
239
let
contentToPost
textArea.value;
240
241
if(contentToPost.length
===
0)
242
return
false;
243
244
245
textArea.value
"";
246
counter.innerText
0;
247
248
createPostHTML(contentToPost)
249
return
false;
250
251
let
currentPostId
1;
252
function
createPostHTML(postContent)
{
253
let
now
new
Date()
254
let
time
now.toLocaleTimeString()
255
let
date
now.toLocaleString()
256
let
name
"Marty
McFly"
257
let
username
"username"
258
259
currentPostId
currentPostId
260
261
postContent
postContent.replace(/</g,
"<")
262
postContent
postContent.replace(/\n/g,
"<br
/>")
263
postContent
postContent.replace(/(https?:\/\/[^\s]+)/g,
"<a
href=\"$1\"
target=\"_blank\">$1</a>")
264
265
let
template
266
<article
id="article-container-${currentPostId}">
267
<header>
268
<button
class="close"
onclick="deletePost(${currentPostId})">
269
<img
src="tweeter/images/close.png"
height="15"
width="15"/>
270
</button>
271
<div
class="avatar">
272
<img
src="basic/avatar-05_v1.png"
height="40"
width="40"/>
273
</div>
274
<h1>${name}</h1>
275
<h2>@${username}</h2>
276
</header>
277
<blockquote>
278
${postContent}
279
</blockquote>
280
<hr/>
281
<footer>
282
<p
class="date-posted">Posted
283
<time>${date}</time>
284
</p>
285
<button
class="heart"
onclick="lovePost(${currentPostId})">
286
<img
src="tweeter/images/heart.svg"
id="heart-image-${currentPostId}"
height="15"
width="16"/>
287
</button>
288
</footer>
289
</article>`
290
document.getElementById("form-
container").insertAdjacentHTML("afterend",
template)
291
292
</script>
293
</head>
294
<body>
295
<main
id="container-wrapper">
296
<form
id="form-container"
onsubmit="return
false;">
297
<div
class="avatar"
id="input-avatar">
298
<img
height="40"
width="40"/>
299
</div>
300
<fieldset>
301
<textarea
placeholder="O
que
está
acontecendo?"
id="input-textarea"
onkeypress="checkCharacterCount(this)"
onchange="checkCharacterCount(this)"></textarea>
302
<div
class="character-count"><span
id="input-characters">0</span>/140
caracteres</div>
303
</fieldset>
304
<button
class="compose"
onclick="submitPost()">
305
<img
src="tweeter/images/compose-icon.png"
height="30"
width="30"/>
306
</button>
307
</form>
308
<article
id="article-container-1">
309
<header>
310
<button
class="close"
onclick="deletePost(1)">
311
<img
src="tweeter/images/close.png"
height="15"
width="15"/>
312
</button>
313
<div
class="avatar">
314
<img
height="40"
width="40"/>
315
</div>
316
<h1>Marty
McFly</h1>
317
<h2>@username</h2>
318
</header>
319
<blockquote>
320
Oi,
pessoal.
Estou
aprendendo
digitar
no
<a
href="https://www.typing.com"
target="_blank">www.typing.com</a>.
Nossa,
um
321
link!
322
</blockquote>
323
<hr/>
324
<footer>
325
<p
class="date-posted">Postado
em
326
<time>19/11/2021
11:47:59</time>
327
</p>
328
<button
class="heart"
onclick="lovePost(1)">
329
<img
src="tweeter/images/heart.svg"
id="heart-image-1"
height="15"
width="16"/>
330
</button>
331
</footer>
332
</article>
333
</main>
334
</body>
335
</html>

Program Ç Ão

Enviado por

Direitos autorais:

Formatos disponíveis

Program Ç Ão

Enviado por

Dados do documento

Título original

Direitos autorais

Formatos disponíveis

Compartilhar este documento

Compartilhar ou incorporar documento

Opções de compartilhamento

Você considera este documento útil?

Este conteúdo é inapropriado?

Direitos autorais:

Formatos disponíveis

Program Ç Ão

Enviado por

Direitos autorais:

Formatos disponíveis

PROGRAMÇÃO

CONSTRUINDO UMA WEB APP.

HTML – A estrutura de uma página Web.

Aplicativo da web interativo para postar mensagens curtas, semelhantes a um mini-Twitter.

A tags HTML fornecem instruções sobre como exibir informações em uma

Começaremos digitando algum texto entre as tags <p>. Lembre-se de que "p"

A tag <html> é necessária em todas as páginas da web e contém todos os

O <body> contém todo o conteúdo que será exibido na página da web. Texto,

Vamos experimentar essas novas tags em dois elementos <p> diferentes!

Aninhar elementos pode ser complicado. Vamos praticar o aninhamento de

Enquanto a tag <div> é útil ao criarmos seções em uma página da web, há

Vamos criar nossa primeira postagem!

As imagens são adicionadas com a tag <img src="cat.gif" />. Você

Vamos adicionar alguns atributos dentro de nossa tag <img>. O

Para adicionar um link utilizamos a tag <a> com o atributo href. O

Vamos também aprender um novo atributo, o target="_blank", que diz ao

As folhas de estilo são definidas dentro de um bloco de

O seletor refere-se ao elemento HTML sento estilizado.

Cada declaração define na CSS o property name e o value, separados por

Uma declaração sempre segue o formato property: value; e os blocos de

Vamos iniciar de modo fácil, ao dar à página algumas cores e fontes.

Vamos explicar algumas propriedades que você digitou recentemente:

body { /*Este "seletor" direciona quaisquer <body> tags.*/

/*Configura a cor de fundo do corpo (body) para uma cor

/*Configura quaisquer cores de fontes no corpo para uma

/*Configura a fonte para todo o texto no corpo.*/

/*Configura o tamanho da fonte, em pixels, para todo o

} /*Fecha a declaração de regras da CSS.*/

Vamos continuar estilizando nossa postagem!

Vamos iniciar incluindo comentários de programação, que são simples

Agora vamos estilizar nossa classe date-posted. Quaisquer elementos

Agora vamos configurar o preenchimento, a cor do texto e a posição para todas

Vamos retornar ao HTML e façamos uma pequena reestruturação. Você

Mais tarde estilizaremos a tag <main> para que o conteúdo da página fique

Adicionaremos declarações aos

Agora é hora de estilizar os botões e .

A imagem de avatar ainda não parece muito correta. Vamos consertá-la ao

Vamos adicionar também algumas fontes, intensidade da fonte (font weight) e

Parabéns, você estilizou a caixa de postagem!

Diga oi para a tag <form>! Para nossos propósitos, nosso formulário somente

A linguagem JavaScript permite que façamos websites dinâmicos a atraentes.

Vamos começar escrevendo algo em JavaScript que mudará a aparência de

Como em nossa primeira etapa, alteramos a cor de segundo plano do nosso

Agora vamos criar uma função chamada changeMe que alterará a cor e o texto

Até agora, alteramos a cor e o texto de um elemento usando JavaScript. Mas

Até o momento temos utilizado o atributo onclick para alterar nossos

Nosso app está ótimo!

Se nossos usuários digitarem um erro de digitação ou se não gostarem mais de

E se nossos usuários gostarem realmente da publicação de outro usuário?

Vamos escrever uma função chamada lovePost que permite que nossos

Como limitamos as postagens de nossos usuários a 140 caracteres,

O recurso mais importante que ainda precisamos para nosso aplicativo é a

Primeiro vamos escrever uma função chamada submitPost. Esta função

Vamos criar o seu primeiro post!

Nosso próximo passo é alterar a função createPostHTML para mostrar um

Vamos criar algumas novas postagens!

Nossos usuários agora podem adicionar múltiplas postagens em seus feeds!

Para finalizar a construção deste recurso precisamor certificar-nos de que

Agora nós vamos adicionar alguns métodos à nossa

body { /Este "seletor" direciona quaisquer <body> tags./

/Configura a fonte para todo o texto no corpo./

} /Fecha a declaração de regras da CSS./