Depende de algumas habilidades. O tamanho. Virtualmente ilimitado. Mercado. Estatisticamente crescente.

Transcrição

1 DevStart

2 Módulo 1: O mercado

3 Depende de algumas habilidades. O tamanho Virtualmente ilimitado. Mercado Estatisticamente crescente.

4 Durante a economia difícil. As possibilidades Durante a economia sadia. Mercado Até onde se possa enxergar.

5 Inteligência artificial. O futuro Automatizações. Mercado Uso de inteligente de dados.

6 Módulo 2: Como as coisas funcionam Funcionamento dos computadores

7 Analógico Analógico x Digital Funcionamento dos computadores Digital

8 Bit Bits, Bytes e Derivados Funcionamento dos computadores Bytes = 8 bits

9 O que são sistemas São uma camada intermediária entre o hardware e o software. operacionais Funcionamento dos computadores Usado para comunicar a parte física da máquina com os demais programas.

10 Módulo 2: Como as coisas funcionam Funcionamento da Internet e da Web

11 Internet vs Web São parecidas. Funcionamento da Internet e da Web Não são a mesma coisa.

12 Internet Funcionamento da Internet e da Web Rede física de computadores mundial. Existem cabos interligando máquinas.

13 Web É uma das ferramentas usadas para se utilizar a internet. Funcionamento da Internet e da Web É a rede virtual mundial de informações.

14 A internet é formada por vários pontos. Pontos da teia Funcionamento da Internet e da Web Cada ponto é geralmente um computador que desempenha uma função. Cada ponto é identificado por um número IP.

15 Protocolos de São regras que regem uma determinada comunicação. Comunicação Funcionamento da Internet e da Web O protocolo HTTP(S) é o mais utilizado na internet.

16 Módulo 3: Você é quem manda

17 O que é É o ato de dizer ao computador o que e como deve fazer alguma coisa. programação? Você é quem manda Usamos linguagens de programação para isso.

18 O que é linguagem de É um conjunto de palavras chaves utilizadas para escrever instruções para um computador. programação? Você é quem manda Existem diversas linguagens de programação.

19 Discute o uso do raciocínio em alguma atividade. O que é lógica? Você é quem manda É o estudo normativo e filosófico do raciocínio.

20 O que são algoritmos? É uma sequência finita de ações executáveis que visam obter uma solução para um determinado tipo de problema. Você é quem manda Imagine uma receita de bolo.

21 Programação vs Programação Web Você é quem manda A programação Web se difere da programação de computadores clássica. A programação Web deve considerar a natureza da Web e seus mecanismos.

22 Módulo 4: A Web e suas características

23 Local vs São conceitos relacionados à localização de programas e recursos em gerais (documentos, imagens, etc). Remoto A Web e suas características São conceitos importantes para se entender a natureza do funcionamento da Web.

24 Ambiente restrito unicamente à máquina onde é realizado um determinado trabalho. Local A Web e suas características Ambiente que se conecta a um ou vários ambiente remotos para obter recursos ou desempenhar tarefas. Máquina onde determinados recursos são efetivamente guardados.

25 Ambiente externo à um ambiente Local. Remoto A Web e suas características Ambiente que recebe conexões originadas externamente. Máquina de onde se obtém recursos externos necessários à realização de determinadas tarefas. São acessíveis através de alguma rede.

26 Ambiente Remoto Ambiente Local youtube.com Ambiente Remoto Seu computador lorecode.com Exemplo de ambientes locais e remotos

27 O browser (navegador) é um programa usado para acessar recursos remotos (imagens, áudios, vídeos, textos, etc) disponíveis na Web. O browser A Web e suas características O browser traduz recursos em formatos específicos de maneira que possam ser consumidos de forma visual e aural. O browser funciona enviando requests e recebendo responses.

28 Requests (Requisições) A Web e suas características São pedidos de acesso a determinados recursos remotos disponíveis, através da Web. Para cada recurso consumido pelo browser uma request é realizada atravéz da Web. Cada request gera uma response que contém o conteúdo solicitado e/ou outras informações.

29 Responses são os retornos das requests. Responses (Respostas) A Web e suas características Responses são compostos pelos conteúdos dos recursos solicitados com as requests. Podem ser de diversos formatos: imagens, vídeos, áudios, textos, etc. São lidos e exibidos pelo browsers da forma mais apropriada.

30 Módulo 5: Mão na massa

31 Tecnologias Web Padrão Mão na massa Existem algumas tecnologias padronizadas para o desenvolvimento Web. Essas tecnologias são utilizadas para definir o que é exibido no browser, como é exibido e dinamicidade dos elementos exibidos. Definem a estrutura, o estilo e o comportamento das páginas Web.

32 HTML: O que será visto. Define a marcação (estruturação) das páginas. Tecnologias Web Padrão Mão na massa CSS: Como será visto. Define os estilos (atributos visuais) das páginas. JavaScript: Interatividade geral. Define as ações e automatismos nas páginas.

33 O HTML Hypertext Markup Language

34 O HTML Hypertext Markup Language Mão na massa HTML é a linguagem de marcação padrão para a criação de páginas Web. O HTML descreve a estrutura de uma página Web usando marcações. Usamos elementos HTML para compor páginas Web. Elementos HTML são representados por tags. Browsers usam as tags para exibir os conteúdos de uma página Web.

35 O HTML Um exemplo simples Mão na massa

36 O básico sobre as tags O HTML O básico sobre as tags Tags são nomes de elementos escritos entre colchetes angulares (os sinais < e >). Elemento Mão na massa Tag de início ou de abertura Tag de fim ou de fechamento A tag de fechamento é igual à de abertura com uma / (barra) antes do nome.

37 Os documentos HTML O HTML Os documentos HTML Mão na massa São arquivos de texto simples com a extensão.html Todos os documentos precisam iniciar com uma declaração de tipo de documento: <!DOCTYPE html> Todo o restante da marcação precisa estar dentro das tags <html></html> O conteúdo visível da página precisa estar dentros das tags <body></body>

38 exemplo1.html O HTML Exemplo de documento HTML Mão na massa <!DOCTYPE html> <html> <head> <title>título da página</title> </head> <body> <h1>título principal</h1> <p>primeiro parágrafo de texto.</p> <p>segundo parágrafo de texto.</p> </body> </html>

39 Tags O HTML Um pouco mais sobre tags Mão na massa Alguns elementos não possuem conteúdos. Tais elementos não possuem tag de fechamento e são chamados de elementos vazios; Elementos HTML podem conter outros elementos; <span> <br/> </span>

40 Atributos O HTML Um pouco mais sobre tags Mão na massa Elementos HTML podem conter atributos; Atributos proveem informações adicionais sobre os elementos; Atributos são escritos na tag de abertura; Geralmente atributos são escritos na forma de nome="value" Atributos podem ser obrigatórios. <html lang="pt-br"> </html>

41 <p></p>: Representa um parágrafo. O HTML Algumas tags mais comuns Mão na massa <h1></h1>: Representa um cabeçalho de nível 1. Varia de 1 a 6. <div></div>: Representa uma seção/divisão genérica. <img src="..." />: Representa uma imagem. <a href="..."></a>: Representa uma âncora (link).

42 O HTML Block vs Inline Mão na massa Todos os elementos possuem uma exibição padrão baseada no tipo do elemento; Na maioria das vezes as exibições são Block ou Inline; Elementos com exibição padrão block são chamados de elementos de bloco; Elementos com exibição padrão inline são chamados de elementos inline; Elementos de bloco e elementos inline por padrão possuem características diferentes em alguns aspectos.

43 O HTML Block elements Mão na massa Elementos de bloco sempre começam com uma quebra de linha por padrão; Elementos de bloco sempre ocupam a largura total disponível na janela do navegador por padrão; O elemento de bloco mais comum é marcado com a tag <div></div> e é geralmente usado como container de outros elementos; Alguns outros elementos de bloco são: <header></header>, <section></section>, <nav></nav>, <footer></footer>, etc;

44 O HTML Inline elements Mão na massa Elementos inline não começam com uma quebra de linha por padrão; Elementos inline ocupam apenas a largura necessária para sua exibição na janela do navegador por padrão; O elemento inline mais comum é marcado com a tag <span></span> e é geralmente usado como container para textos; Alguns outros elementos inline são: <strong></strong>, <img />, <small></small>, <button></button>, <a></a>, etc;

45 Mini-referência de tags HTML <p>conteúdo</p> - Tag de parágrafos <h1></h1> - Tag de títulos nível 1 (varia de h1 até h6) <div></div> - Tag de seção genérica <img src="url da imagem" /> - Tag de imagem <a href="link da página">texto do link</a> - Tag de link <ul></ul> - Tag de lista não ordenada (não numerada) <ol></ol> - Tag de lista ordenada (numerada) <li>conteúdo do item</li> - Tag de item de lista (é colocada dentro de ul ou ol) <main></main> - Tag que guarda o conteúdo principal da página <section></section> - Tag que marca uma seção na página <nav></nav> - Tag que marca elementos de navegação <header></header> - Tag que marca um cabeçalho na página <footer></footer> - Tag que marca um rodapé na página <article></article> - Tag que marca um conteúdo auto-suficiente na página <hr /> - Tag que marca uma linha na página

46 O CSS Cascading Style Sheets

47 O CSS Cascading Style Sheets Mão na massa CSS é a linguagem de estilização padrão para a criação de páginas Web; O CSS descreve como os elementos HTML serão exibidos; Seletores CSS são usados para dizer o que vamos estilizar; Declarações CSS dizem como vamos estilizar os elementos selecionados; Os browsers usam as declarações CSS para estilizar os conteúdos de uma página Web.

48 O CSS Um exemplo simples Mão na massa

49 O básico sobre a sintaxe O CSS O básico sobre a sintaxe Um arquivo CSS é formado de blocos de declaração que tem a seguinte estrutura: Seletor Mão na massa Declaração Bloco de declarações Atributo ou Propriedade Valor(es)

50 O básico sobre a sintaxe Em resumo: O CSS O básico sobre a sintaxe Mão na massa Um arquivo CSS é composto de blocos de declarações; Um bloco de declarações é composto por um ou mais seletores e algumas declarações; Cada declaração é composta por um atributo/propriedade e um valor separados por : e finalizados por ;

51 O CSS Mais sobre a sintaxe Mão na massa Comentários podem ser inseridos entre /*... */ e são ignorados pelo browser; Seletores CSS são usados para selecionar elementos HTML baseados em uma ou mais características; São 3 os tipos de seletores mais básicos: seletor de elemento, de classe e de id; Seletores podem ser agrupados e assim usarem um mesmo bloco de declarações.

52 O CSS Comentários Mão na massa

53 O CSS Seletores CSS Mão na massa

54 O CSS Seletores CSS Mão na massa Seletor de elemento: Seleciona elementos pela tag. É escrito apenas com o nome da tag; Seletor de classe: Seleciona elementos que possuem uma determinada classe no atributo class. É escrito com a sintaxe:.nome-da-classe (prefixado com.); Seletor ID: Selecione um elemento pelo atributo id. É escrito com a sintaxe: #id (prefixado com #).

55 Seletores que compartilham os mesmos estilos podem ser agrupados com uso de vírgulas: O CSS Agrupando seletores CSS Mão na massa Todos os elementos div, article e com a classe section possuirão os mesmos estilos declarados no bloco.

56 O CSS Como inserir o CSS no HTML? Mão na massa Existem 3 formas de "inserir" o CSS no HTML para estilizar os elementos: estilos externos, estilos internos ou incorporados e estilos inline; Estilos externos: são inseridos a partir de arquivos.css externos; Estilos internos ou incorporados: são inseridos no head das páginas com as tags <style>...</style>; Estilos inline: são inseridos nos elementos pelo atributo style="...".

57 Para inserir arquivos.css externos usamos a tag link: O CSS Como inserir CSS externo? Mão na massa <head> <link rel="stylesheet" type="text/css" href="arquivo.css" > </head>

58 Para inserir estilos internos/incorporados usamos a tag style: O CSS Como inserir CSS interno ou incorporado? Mão na massa <head> <style> body { color: #444; } </style> </head>

59 O CSS Como inserir CSS inline? Mão na massa Para inserir estilos inline usamos o atributo style no elemento que queremos estilizar: <img style="width: 10rem" src="imagem.jpg" />

60 Priorização de estilos tem haver com a ordem em que o browser aplica a estilização. O CSS Priorização de estilos Mão na massa A estilização segue a seguinte ordem de prioridade: 1. Estilos inline; 2. Estilos incorporados e externos; 3. Estilos padrões do browser. Se uma declaração para determinado seletor for duplicada a última ocorrência será aplicada.