Vector design of a smiling girl with colored hair wearing glasses

TechGirl: Manual de Sobrevivência

May 15, 2019

Manual de Sobrevivência na Web

O TechGirl é um evento de tecnologia voltado para meninas de 10 a 12 anos, realizado pela Valtech com patrocínio da Sitecore. Esse artigo é uma referência ao conteúdo ministrado no evento e portanto, voltado a esse público.

Se você chegou aqui, é por que precisa de ajuda. Mas não se preocupe! Lembra que a Web é uma bagunça? Ela só tem trinta aninhos, muito jovem mesmo.

Quem trabalha com a Web ainda não sabe direito com fazer as coisas perfeitas. Algumas pessoas sabem um pouco mais e por isso vendem esse conhecimento para outras empresas, caso da Valtech. Mas nem tudo são negócios! A web pode ser muito divertida, é como um parquinho que você precisa montar os brinquedos. Vamos aprender?

No Brasil, de uma turma de dez pessoas nos cursos de Tecnologia da Informação, só duas são mulheres. Sabemos do potencial das meninas, por isso não desista!

Mulheres na Tecnologia

Pode não ser muito divulgado, mas as mulheres tem um papel muito importante na computação. Ada Lovelace, além de muito charmosa, escreveu o primeiro algoritmo para ser processado por uma máquina. É a primeira programadora da história. O computador que a gente usa hoje em dia não existiria sem o trabalho da Jean Bartik e um grupo de mais cinco mulheres que operaram o primeiro computador digital da história.

Mulheres que são inspiração na área de tecnologia

A gente conversa com o computador e precisa falar uma linguagem que ele entenda. No começo, isso não era muito fácil. A irmã Mary Kenneth Keller ajudou a criar a linguagem BASIC que inspirou muitas outras linguagens que tornaram mais fácil programar. Grace Hopper desenvolveu a linguagem COBOL que é usada até hoje em empresas de negócios como bancos.

Lembra a primeira vez que pisamos na Lua? Claro que não, não éramos nascidas! Mas nossos pais e avós vivenciaram aquele momento que foi um marco para a humanidade. Isso aconteceu graças aos esforços de pessoas como a Margaret Hamilton. Ela ajudou a escrever o programa de voo do Apollo 11 que levou os astronautas à Lua.

Agora que você sabe do potencial que você e outras meninas tem no mundo da tecnologia, vamos começar a codar!

Web?

A web é tudo que roda no navegador. O que é o navegador? É um programa que entende a linguagem da web, assim como o computador entende outras linguagens. Aqui, vamos aprender as linguagens HTML e CSS.

Exemplos de navegadores são o Google Chrome, Safari e Firefox.

O que é site?

É o espaço em que as pessoas ou empresas usam para mostrar conteúdo. Um site pode ter uma ou mais páginas web.

O que é uma página web?

É um documento HTML que o navegador sabe interpretar (entende e mostra) da maneira que a gente vê quando entramos nos nossos sites favoritos, como o YouTube e Netflix. É parecido como fazer um trabalho da escola no Word. Você salva o arquivo .doc que o programa Word consegue ler e editar.

HTML - HyperText Markup Language

É uma linguagem que usamos pra comunicar ao navegador a estrutura da página, com o conteúdo. Para isso, usamos as tags HTML para dizer que tipo de conteúdo queremos na página.

Tag HTML

Um título, parágrafo ou imagem, cada coisa tem um tag HTML que podemos usar para melhor nos comunicarmos com o navegador.

Uma tag consiste em o símbolo < (menor que) e > (menor que). No meio disso está o nome da tag que queremos usar.

<nome-da-tag> Conteúdo </nome-da-tag>

Vamos escrever um texto dentro de um parágrafo:

<p>TechGirl começou e está d+!</p>

Observe que colocamos o conteúdo entre as tags <p>, mas a segunda tem uma barra antes do nome da tag. Essa é a forma em que dizemos ao navegador que estamos fechando aquele parágrafo, formando um bloco. Outros exemplos de blocos:

<h1>Título</h2>

<p>Um parágrafo com texto…</p>

Documento HTML

<html>
  <head>
    <title>Título</title>
  </head>
  <body>
    Blá blá blá whiskas sachê…
  </body>
</html>

Html -> Recebe todas as tags HTML dentro

Head (cabeça) -> Informações sobre a página

Title (título) -> título da página

Body (corpo) -> Mostra o que vai aparecer na página

Vamos praticar!

Títulos

<h1>Título Super Ultra Grande</h1>

<h2>Título Super Grande</h2>

<h3>Título Grande</h3>

<h4>Título Normal</h4>

<h5>Título Pequeno</h5>

<h6>Título Pequenininho</h6>

Parágrafo

<p>Parágrafo blá blá blá</p>

<p>Parágrafo 2</p>

Conteúdo genérico

<div>Qualquer coisa</div>

<div>Qualquer coisa 2</div>

Lista Não-ordenada

<ul>
  <li>
    Suco de laranja
  </li>
  <li>
    Pipoca
  </li>
  <li>
    Biscoito
  </li>
</ul>

ul (Unordered List) -> List não-ordenada

li (List Item) -> Item de Lista

Lista Ordenada

<ol>
  <li>
    Suco de laranja
  </li>
  <li>
    Pipoca
  </li>
  <li>
    Biscoito
  </li>
</ol>

ul (Ordered List) -> List Ordenada

li (List Item) -> Item de Lista

<a href=“http://jackiecardozo.com/” target=“_blank”>Meu site</a>

a -> Âncora

href -> Referência

target -> objetivo

Como fica: Meu site

Imagem

<img src="http://jackiecardozo.com/assets/images/pixgrid.png" alt="Descrição da imagem"/> 

img -> Imagem

src (Source) -> Caminho da imagem

Como fica:

Descrição da imagem

Ênfase

  <strike>Texto fica riscado</strike>
  <b>Texto fica gordinho</b>
  <i>Texto fica inclinado</i>
  <u>Texto fica com uma linha embaixo</u>

Como fica:

Texto fica riscado

Texto fica gordinho

Texto fica inclinado

Texto fica com uma linha embaixo

HTML & CSS

Sabemos que HTML descreve a estrutura ou o que vai ter na página. Para deixar a página mais bonita, usamos uma linguagem de estilo chamada CSS.

CSS

Queremos dizer ao navegador que um título deve ser roxo:

h1 {
  color: purple;
}

color -> cor

purple -> roxo

Se queremos que o navegador adicione uma cor ou tamanho diferente em um tag, temos que saber comunicar isso. Para tal, usamos seletores, que nada mais é do que a referência da tag que queremos estilizar.

seletor {
  atributo: valor;
}

Pixel

É a unidade de medida que usamos para alterar tamanhos de elementos numa página web.

Mude a altura (height) e largura (width) do quadrado. Lembre-se de sempre escrever ‘px’ depois do número.

See the Pen Brincando com pixels by Jackie Card (@jackiecard1) on CodePen.

Criando um blog

Crie um blog usando o que você praticou aqui.

See the Pen Blog do Salem - Techgirl Event by Jackie Card (@jackiecard1) on CodePen.

Adicionando emoticons

É só copiar e colar no meio do texto: Clique aqui para escolher

Tabela de Cores

Visualizar tabela

Exemplos divertidos

Nem tudo na vida é trabalhar para pagar os sachês dos gatos, não é mesmo! Aqui vai alguns exemplos de brincadeiras usando HTML & CSS:

E o parquinho?

<style>
@keyframes gangorra {
  0% {
    transform: rotate(25deg);
  }
  100% {
    transform: rotate(-25deg);
  }
}
@keyframes roda {
  0% {
    transform: rotate(-3deg);
  }
  100% {
    transform: rotate(3deg);
  }
}
@keyframes balanco {
  0% {
    transform: scale(1.25) translateY(-26px);
    background: #3958b5;
    z-index: 3;
  }
  19% {
    background: #3958b5;
    z-index: 3;
  }
  20% {
    background: RoyalBlue;
    z-index: 0;
  }
  50% {
    transform: scale(1) translateY(0px);
  }
  100% {
    background: RoyalBlue;
    z-index: 0;
    transform: scale(0.75) translateY(-20px);
  }
}
@keyframes corda-1 {
  0% {
    transform: rotate(8deg);
    height: 100px;
    bottom: 98px;
  }
  50% {
    height: 122px;
    bottom: 76px;
  }
  100% {
    transform: rotate(-8deg);
  }
}
@keyframes corda-2 {
  0% {
    transform: rotate(-8deg);
    height: 100px;
    bottom: 98px;
  }
  50% {
    height: 122px;
    bottom: 76px;
  }
  100% {
    transform: rotate(8deg);
  }
}
@keyframes assento1 {
  0% {
    left: -10px;
    top: 10px;
  }
  25% {
    left: 82px;
    top: -20px;
  }
  50% {
    left: 180px;
  }
  75% {
    left: 82px;
    top: 35px;
  }
  100% {
    left: -10px;
    top: 10px;
  }
}
@keyframes assento2 {
  0% {
    left: 180px;
  }
  25% {
    left: 82px;
    top: 35px;
  }
  50% {
    left: -10px;
    top: 10px;
  }
  75% {
    left: 82px;
    top: -20px;
  }
  100% {
    left: 180px;
  }
}
@keyframes assento3 {
  0% {
    left: 82px;
    top: -20px;
  }
  25% {
    left: 180px;
  }
  50% {
    left: 82px;
    top: 35px;
  }
  75% {
    left: -10px;
    top: 10px;
  }
  100% {
    left: 82px;
    top: -20px;
  }
}
@keyframes assento4 {
  0% {
    left: 82px;
    top: 35px;
  }
  25% {
    left: -10px;
    top: 10px;
  }
  50% {
    left: 82px;
    top: -20px;
  }
  75% {
    left: 180px;
  }
  100% {
    left: 82px;
    top: 35px;
  }
}
@keyframes flutuar {
  0% {
    transform: translatey(0px);
  }
  50% {
    transform: translatey(-20px);
  }
  100% {
    transform: translatey(0px);
  }
}
body {
  background: SkyBlue;
  margin: 0;
}
.chao {
  background: YellowGreen;
  position: absolute;
  width: 100%;
  height: 50%;
  bottom: 0;
  z-index: 0;
}
.brinquedo1 {
  position: absolute;
  bottom: 10%;
  left: calc(50% - 150px);
  z-index: 1;
}
.brinquedo1 .gangorra {
  position: relative;
  width: 300px;
  height: 80px;
}
.brinquedo1 .gangorra .assento {
  position: absolute;
  background: IndianRed;
  width: 300px;
  height: 6px;
  animation: gangorra 2s cubic-bezier(0.2, 0.4, 0.4, 0.2) infinite alternate;
}
.brinquedo1 .gangorra .base {
  position: absolute;
  top: 6px;
  left: calc(50% - 30px);
  border-bottom: 60px solid LightCoral;
  border-left: 30px solid transparent;
  border-right: 30px solid transparent;
  height: 0;
}
.brinquedo2 {
  position: absolute;
  bottom: 40%;
  right: 10%;
  z-index: 1;
}
.brinquedo2 .balanco {
  position: relative;
  width: 200px;
  height: 200px;
}
.brinquedo2 .balanco .assento {
  position: absolute;
  bottom: 56px;
  left: calc(50% - 30px);
  width: 60px;
  height: 20px;
  background: RoyalBlue;
  animation: balanco 1s linear infinite alternate;
}
.brinquedo2 .balanco .corda-1 {
  position: absolute;
  bottom: 78px;
  left: calc(50% - 30px);
  width: 4px;
  height: 120px;
  background: SaddleBrown;
  animation: corda-1 1s linear infinite alternate;
}
.brinquedo2 .balanco .corda-2 {
  position: absolute;
  bottom: 78px;
  left: calc(50% + 26px);
  width: 4px;
  height: 120px;
  background: SaddleBrown;
  animation: corda-2 1s linear infinite alternate;
}
.brinquedo2 .balanco .moldura {
  position: relative;
  background: #de9f00;
  width: 150px;
  height: 4px;
  margin-left: 25px;
  z-index: 2;
}
.brinquedo2 .balanco .moldura .pernas-de-tras {
  position: relative;
  width: 150px;
  height: 100px;
}
.brinquedo2 .balanco .moldura .pernas-de-tras:before {
  content: "";
  position: absolute;
  top: 0;
  left: 11px;
  height: 160px;
  width: 4px;
  background: #b38718;
  transform: rotate(-6deg);
  z-index: 1;
}
.brinquedo2 .balanco .moldura .pernas-de-tras:after {
  content: "";
  position: absolute;
  top: 0;
  right: 11px;
  height: 160px;
  width: 4px;
  background: #b38718;
  transform: rotate(6deg);
}
.brinquedo2 .balanco .moldura:before {
  content: "";
  position: absolute;
  top: 0;
  left: -17px;
  height: 200px;
  width: 4px;
  background: #de9f00;
  transform: rotate(10deg);
  z-index: 2;
}
.brinquedo2 .balanco .moldura:after {
  content: "";
  position: absolute;
  top: 0;
  right: -17px;
  height: 200px;
  width: 4px;
  background: #de9f00;
  transform: rotate(-10deg);
  z-index: 2;
}
.brinquedo3 {
  position: absolute;
  bottom: 60%;
  left: 15%;
  z-index: 1;
}
.brinquedo3 .escorrega {
  position: relative;
  height: 0;
  width: 15px;
}
.brinquedo3 .escorrega .base {
  position: absolute;
  border-bottom: 120px solid LightPink;
  border-left: 15px solid transparent;
  border-right: 15px solid transparent;
  height: 0;
  width: 25px;
  z-index: 1;
}
.brinquedo3 .escorrega:before {
  content: "";
  position: absolute;
  border-bottom: 50px solid LightPink;
  border-left: 5px solid transparent;
  border-right: 6px solid transparent;
  height: 0;
  top: 0;
  left: 10px;
  width: 25px;
  z-index: 3;
}
.brinquedo3 .escorrega .roda {
  position: absolute;
  border: 20px solid PaleVioletRed;
  width: 200px;
  height: 40px;
  left: -90px;
  top: 10px;
  border-radius: 50%;
  z-index: 1;
  animation: roda 0.3s cubic-bezier(0.2, 0.4, 0.4, 0.2) infinite alternate;
}
.brinquedo3 .escorrega .roda .assento {
  position: absolute;
  background: CadetBlue;
  width: 30px;
  height: 20px;
  left: -10px;
  top: 10px;
  border-radius: 20%;
}
.brinquedo3 .escorrega .roda .assento.um {
  animation: assento1 1.2s linear infinite both;
}
.brinquedo3 .escorrega .roda .assento.dois {
  left: 180px;
  animation: assento2 1.2s linear infinite both;
}
.brinquedo3 .escorrega .roda .assento.tres {
  left: 82px;
  top: -20px;
  animation: assento3 1.2s linear infinite both;
}
.brinquedo3 .escorrega .roda .assento.four {
  left: 82px;
  top: 35px;
  animation: assento4 1.2s linear infinite both;
}
.nuvem {
  position: absolute;
  background: rgba(255, 255, 255, 0.5);
  top: 10%;
  left: 15%;
  width: 150px;
  height: 60px;
  border-radius: 50%;
  z-index: 0;
  animation: flutuar 5s linear infinite both;
}
.nuvem--2 {
  top: 15%;
  left: inherit;
  right: 15%;
  animation: flutuar 5s 1s linear infinite both;
}
 </style>
 <div class="nuvem"></div>
<div class="nuvem nuvem--2"></div>
<div class="brinquedo1">
 <div class="gangorra">
  <div class="assento"></div>
  <div class="base"></div>
 </div>
</div>
<div class="brinquedo2">
 <div class="balanco">
  <div class="moldura">
   <div class="pernas-de-tras"></div>
  </div>
  <div class="assento"></div>
  <div class="corda-1"></div>
  <div class="corda-2"></div>
 </div>
</div>
<div class="brinquedo3">
 <div class="escorrega">
  <div class="base"></div>
  <div class="roda">
   <div class="assento um"></div>
   <div class="assento dois"></div>
   <div class="assento tres"></div>
   <div class="assento four"></div>
  </div>
 </div>
</div>
<div class="chao"></div>