Acesse os slides no link:
Faça o download dos arquivos:
Introdução ao Desenvolvimento Web
12 e 13 de Setembro de 2016
Introdução ao Desenvolvimento Web
12 e 13 de Setembro de 2016
Introdução ao Desenvolvimento Web
![](https://s3.amazonaws.com/media-p.slid.es/uploads/562748/images/2991832/giphy.gif)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/562748/images/2991843/90s-gif-graphic-internet-Favim.com-1765698.gif)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/562748/images/2991844/giphy__1_.gif)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/562748/images/2991822/animated-email.gif)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/562748/images/2991849/606.gif)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/562748/images/2991849/606.gif)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/562748/images/2991822/animated-email.gif)
12/09/2016
Olá, somos a IDE
![](https://s3.amazonaws.com/media-p.slid.es/uploads/565986/images/2994348/ide.png)
12/09/2016
Ministrantes do Curso
- Camila Maffi
- Francisco Knebel
- Giovanni Brolese
- Lucas Tansini
- Lucas Valandro
- Roberta Mayer
12/09/2016
Conteúdo
- O que é a internet?
- O que é HTML?
- Enfim, o que é CSS?
- Java e Scripts (e como Javascript não é um mas é o outro)
- Workshop 1
12/09/2016
O que é a internet?
![](https://s3.amazonaws.com/media-p.slid.es/uploads/562748/images/2992156/x.png)
Primeira página da "WWW"
![](https://s3.amazonaws.com/media-p.slid.es/uploads/566057/images/2992103/www-primeira-pagina-web.jpg)
Foi criada por Tim Berners-Lee (1990) usando um computador NeXT e sua função era informar sobre a nova e emocionante World Wide Web.
12/09/2016
O que é a internet?
Conjunto de rede de computadores conectados por protocolos
Dispositivos comuns e servidores
Contém a World Wide Web
- Vídeo
- Som
- Hipertexto
- Figuras
![](https://s3.amazonaws.com/media-p.slid.es/uploads/562748/images/2974895/internetbrazil.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/562748/images/2974875/internet.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/562748/images/2974928/internetgoogle.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/562748/images/2974930/internetgooglefacebook.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/562748/images/2974933/internetgooglefacebookyoutube.png)
http://internet-map.net/
HTML Usos e Relações
![](https://s3.amazonaws.com/media-p.slid.es/uploads/565966/images/2975261/HTML5_Logo_512.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/565966/images/2975292/css3logo.png)
Customização
Frameworks
Conectividade
Mobile & Web
![](https://s3.amazonaws.com/media-p.slid.es/uploads/565966/images/2975341/Conectividade.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/565966/images/2975367/mobile_and_web.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/565966/images/2986814/bootstrap.png)
HTML e sua sintaxe
Utilização de marcadores <.../> como
Abertura e fechamento de tag
<a>
</a>
Utilização de atributos
<a href="...">
</a>
<tagname>Conteudo</tagname>
Na maioria das vezes,
HTML e sua estruturação básica
<!DOCTYPE html>
<html>
<head>
<title>Título do página</title>
</head>
<body>
<h1>Título </h1>
<p>Parágrafo</p>
<p>Insira o resto do código aqui em body ! </p>
</body>
</html>
Observação: Apenas o conteúdo dentro de <body> será mostrado no browser
HTML e sua estruturação básica
Analisando...
<!DOCTYPE html>
<html>
<head>
<title>Título do página</title>
</head>
<body>
<h1>Título </h1>
<p>Parágrafo</p>
<p>Insira o resto do código aqui em body ! </p>
</body>
</html>
Define o início do documento para que o browser identifique como código HTML
Trata-se do cabeçalho e traz informações
Conteúdo principal e exibido pelo navegador
Algumas tags
- A tag <p>
Utilizada para criar parágrafos.
- A tag <br>
Utilizada para pular uma linha.
- A tag <img>
Utilizada para inserir imagens na página html.
Algumas tags
- A tag <div>
Utilizada para agrupar e dividir elementos em blocos.
- A tag heading <h1>
Utilizada para destacar e palavras, variando do h1 até h6.
O tamanho é dado do maior (1) para o menor (6).
Algumas tags
- A tag <ol>
Utilizada para criar listas ordenadas.
- A tag <ul>
Utilizada para criar listas
não-ordenadas.
12/09/2016
CSS
- Cascading Style Sheets
- Informação e organização do layout
- posicionamento, fontes, tamanhos e imagens de fundo.
Definição
![](https://s3.amazonaws.com/media-p.slid.es/uploads/565916/images/2994137/html5_css3.png)
12/09/2016
CSS
Utilização
Economiza-se tempo
em manutenção e criação da página
![](https://s3.amazonaws.com/media-p.slid.es/uploads/565916/images/2994134/watch-icon-32.png)
Código isolado num único arquivo
![](https://s3.amazonaws.com/media-p.slid.es/uploads/565916/images/2994136/css-512.png)
Interface para diferentes navegadores
![](https://s3.amazonaws.com/media-p.slid.es/uploads/565916/images/2994143/mozilla_firefox.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/565916/images/2994146/Chrome.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/565916/images/2994180/Microsoft_Edge_logo.svg.png)
Alguns comandos de CSS
-
background-color:
-
font-family:
Mais comandos de CSS
-
text-align:
-
font-size:
- Height, Width, Padding, Margin
- Height, Width, Padding, Margin
![](https://s3.amazonaws.com/media-p.slid.es/uploads/565916/images/2997441/css_margin_padding.png)
- Style tag
- Para usar um arquivo css externo
<link rel="stylesheet" type="text/css" href="theme.css">
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="theme.css">
</head>
<body>
<h1>This is heading 1</h1>
<p>This is a paragraph.</p>
</body>
</html>
12/09/2016
Java e Scripts (e como Javascript não é um mas é o outro)
O que é:
-
Java
-
BC, OO
-
JVM
-
TIOBE: #1, 18.236%, -1.33%
-
-
Script
- Instruções dentro de um programa
-
Estender funcionalidade
12/09/2016
Javascript
-
é tipo Java
-
Interpretada
-
Browser
-
#1 GitHub
Java e Scripts (e como Javascript não é um mas é o outro)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/562748/images/2992169/js.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/562748/images/2992174/Javascript.png)
* não existe um logo oficial
12/09/2016
JavaScript
![](https://s3.amazonaws.com/media-p.slid.es/uploads/566057/images/2994248/how_to_add_attribute_dynamically_in_html_tag_using_javascript_function.png)
JavaScript é uma linguagem interpretada.O uso primário de JavaScript é escrever funções que são embarcadas ou incluídas em páginas HTML. Alguns exemplos desse uso são:
- abrir uma nova janela com controle programático sobre seu tamanho, posição e atributos;
- mudar imagens à medida que o mouse se movimenta sob elas.
- validar valores de um formulário para garantir que são aceitáveis antes de serem enviados ao servidor;
JavaScript
![](https://s3.amazonaws.com/media-p.slid.es/uploads/566057/images/2994248/how_to_add_attribute_dynamically_in_html_tag_using_javascript_function.png)
12/09/2016
Workshop
12/09/2016
Workshop
A melhor forma de aprender é praticar.
Neste momento, não se preocupe com as informações que você irá inserir, o importante é que você comece a se familiarizar com o HTML e CSS.
<!DOCTYPE html>
<html>
<head>
<title> Workshop </title>
<meta charset="utf-8">
</head>
<body>
<h2> A melhor forma de aprender é <span> praticar </span> </h2>
Utilizando HTML e CSS você desenvolverá seu próprio portfolio
12/09/2016
Workshop
Portfolio
Invista no visual
![](https://s3.amazonaws.com/media-p.slid.es/uploads/562748/images/2997008/spotify.jpg)
12/09/2016
Workshop
Portfolio
Utilize divs coloridas
![](https://s3.amazonaws.com/media-p.slid.es/uploads/562748/images/2997022/spot2.jpg)
12/09/2016
Workshop
Trouxemos alguns exemplos para você se inspirar.
Workshop
Exemplo 1
Workshop
Exemplo 2
Workshop
Exemplo 3
Workshop
Roteiro
- Acesse sua conta no codepen, ou crie uma se ainda não possuir. -- http://codepen.io
- Comece inserindo no editor a estrutura básica de qualquer arquivo HTML. -- slide 12.1
- Escreva algo sobre você mesmo, utilize as tags <p>,<h1>,<h2>,...
- Tente inserir algumas imagens, adicione também alguns links para suas redes sociais, por exemplo.
- Comece a utilizar o CSS para trazer um pouco mais de estilo para seu portfólio .
- Crie listas, ou tabelas, seja criativo.
![](https://s3.amazonaws.com/media-p.slid.es/uploads/566057/images/2996312/clippy.gif)
Workshop
Desafio
Que tal tentar inserir alguma animação? Tudo bem se você não chegar até aqui, teremos a próxima aula para que você continue incrementando seu portfólio.
![](https://s3.amazonaws.com/media-p.slid.es/uploads/566057/images/2996362/take_the_challenge.png)
AULA 1
By Francisco Knebel
AULA 1
- 540