programação para internet 1 - wordpress.com...1.6 exercícios - estrutura do ambiente web 2....
TRANSCRIPT
![Page 1: Programação para Internet 1 - WordPress.com...1.6 Exercícios - Estrutura do ambiente Web 2. Introdução à Construção de Páginas Web Estáticas 2.1. Introdução ao (X)HTML](https://reader033.vdocuments.site/reader033/viewer/2022052611/5f08fa4d7e708231d424a49a/html5/thumbnails/1.jpg)
Programação para Internet 1
1
Prof. Cleziel Franzoni da Costa
/cleziel
cleziel.wordpress.com
![Page 2: Programação para Internet 1 - WordPress.com...1.6 Exercícios - Estrutura do ambiente Web 2. Introdução à Construção de Páginas Web Estáticas 2.1. Introdução ao (X)HTML](https://reader033.vdocuments.site/reader033/viewer/2022052611/5f08fa4d7e708231d424a49a/html5/thumbnails/2.jpg)
42
![Page 3: Programação para Internet 1 - WordPress.com...1.6 Exercícios - Estrutura do ambiente Web 2. Introdução à Construção de Páginas Web Estáticas 2.1. Introdução ao (X)HTML](https://reader033.vdocuments.site/reader033/viewer/2022052611/5f08fa4d7e708231d424a49a/html5/thumbnails/3.jpg)
Objetivo Geral
Fornecer fundamentos de desenvolvimento de clientes Web, através do uso das linguagens (X)HTML (5 ou superior), CSS(3 ou superior) e JavaScript.
3
![Page 4: Programação para Internet 1 - WordPress.com...1.6 Exercícios - Estrutura do ambiente Web 2. Introdução à Construção de Páginas Web Estáticas 2.1. Introdução ao (X)HTML](https://reader033.vdocuments.site/reader033/viewer/2022052611/5f08fa4d7e708231d424a49a/html5/thumbnails/4.jpg)
Objetivos Específicos● Entender o funcionamento da Web.● Criar páginas Web estáticas com (X)HTML5.● Estilizar páginas web com CSS3.● Estruturar páginas web conforme a semântica do conteúdo, visando a
acessibilidade e marketing digital.● Diagramar as páginas web com layout responsivo, adaptando-se automaticamente
à desktops, à dispositivos móveis, ou outro dispositivo que acessem a Web.● Criar páginas Web dinâmicas com Javascript.● Utilizar API’s Javascript em páginas dinâmicas.
4
![Page 5: Programação para Internet 1 - WordPress.com...1.6 Exercícios - Estrutura do ambiente Web 2. Introdução à Construção de Páginas Web Estáticas 2.1. Introdução ao (X)HTML](https://reader033.vdocuments.site/reader033/viewer/2022052611/5f08fa4d7e708231d424a49a/html5/thumbnails/5.jpg)
Ementa
● Estrutura do ambiente Web. Construção, estruturação e estilização de Páginas Web Estáticas. Programação no Cliente com (X)HTML, CSS, JavaScript e suas API’s de uso difundido.
5
![Page 6: Programação para Internet 1 - WordPress.com...1.6 Exercícios - Estrutura do ambiente Web 2. Introdução à Construção de Páginas Web Estáticas 2.1. Introdução ao (X)HTML](https://reader033.vdocuments.site/reader033/viewer/2022052611/5f08fa4d7e708231d424a49a/html5/thumbnails/6.jpg)
Pré-requisitos
Não há pré-requisito.
6
![Page 7: Programação para Internet 1 - WordPress.com...1.6 Exercícios - Estrutura do ambiente Web 2. Introdução à Construção de Páginas Web Estáticas 2.1. Introdução ao (X)HTML](https://reader033.vdocuments.site/reader033/viewer/2022052611/5f08fa4d7e708231d424a49a/html5/thumbnails/7.jpg)
Conteúdo Programático
1. Estrutura do ambiente Web; Introdução da Disciplina1.1. Diferenciação entre cliente e servidor1.1.2 Exercícios - Cliente x Servidor1.2. Funções e atribuições do navegador1.3. Páginas estáticas versus páginas dinâmicas1.4. Protocolos da Internet (HTTP, HTTPS, FTP, SMTP, POP3)1.5. Ambiente seguro (SSL)1.6 Exercícios - Estrutura do ambiente Web2. Introdução à Construção de Páginas Web Estáticas2.1. Introdução ao (X)HTML e histórico2.2. Tags básicas2.3. Árvore DOM, XML/XHTML2.4. Estilização de páginas com CSS (Cascade Style sheets) e seletores2.5. Tags estruturais e semânticas: Frames, Sections, e novas tags do HTML(5/+)2.6. Tabelas2.7. Formulários
7
![Page 8: Programação para Internet 1 - WordPress.com...1.6 Exercícios - Estrutura do ambiente Web 2. Introdução à Construção de Páginas Web Estáticas 2.1. Introdução ao (X)HTML](https://reader033.vdocuments.site/reader033/viewer/2022052611/5f08fa4d7e708231d424a49a/html5/thumbnails/8.jpg)
Conteúdo Programático
2.8. Recursos adicionais do HTML(5/+) e CSS(3/+)2.9. Páginas Web com Layout Responsivo.2.10. Técnica Mobile First3. Introdução à Programação no Cliente com JavaScript e HTML3.1. Utilização de variáveis3.2. Estruturas de decisão3.3. Estruturas de repetição3.4. Funções3.5. Vetores3.6. Programação Funcional em JavaScript3.7. Pop-ups3.8. Validação de formulários3.9. Manipulação de objetos com JavaScript3.10. Utilização de API’s mais difundidas para JavaScript3.11 Exercícios para reforçar o Aprendizado - JavaScript
8
![Page 9: Programação para Internet 1 - WordPress.com...1.6 Exercícios - Estrutura do ambiente Web 2. Introdução à Construção de Páginas Web Estáticas 2.1. Introdução ao (X)HTML](https://reader033.vdocuments.site/reader033/viewer/2022052611/5f08fa4d7e708231d424a49a/html5/thumbnails/9.jpg)
Estratégia de Aprendizagem
● Aulas expositivas e interativas● Prática em sala de informática● Estudo em grupo com apoio de referências bibliográficas● Aplicação de lista de exercícios● Atendimento individualizado.
9
![Page 10: Programação para Internet 1 - WordPress.com...1.6 Exercícios - Estrutura do ambiente Web 2. Introdução à Construção de Páginas Web Estáticas 2.1. Introdução ao (X)HTML](https://reader033.vdocuments.site/reader033/viewer/2022052611/5f08fa4d7e708231d424a49a/html5/thumbnails/10.jpg)
AVALIAÇÃO DA APRENDIZAGEM
CRITÉRIOS
Observação do desempenho individual verificando se o aluno identificou, sugeriu e assimilou as atividades solicitadas de acordo com as técnicas de aprendizagem previstas.
10
INSTRUMENTOS
Provas de questões objetivas e/ou discursivas
Trabalhos práticos
![Page 11: Programação para Internet 1 - WordPress.com...1.6 Exercícios - Estrutura do ambiente Web 2. Introdução à Construção de Páginas Web Estáticas 2.1. Introdução ao (X)HTML](https://reader033.vdocuments.site/reader033/viewer/2022052611/5f08fa4d7e708231d424a49a/html5/thumbnails/11.jpg)
Bibliografia Básica11
Título/Periódico Autor Ed. Local Editora Ano
https://www.w3schools.com/
W3C - - - -
Aprendendo Javascript POWERS, S. 2ª São Paulo Novatec 2010
Construindo Sites com CSS e (X)Html
SILVA, Maurício Samy 1ª São Paulo Novatec 2010
![Page 12: Programação para Internet 1 - WordPress.com...1.6 Exercícios - Estrutura do ambiente Web 2. Introdução à Construção de Páginas Web Estáticas 2.1. Introdução ao (X)HTML](https://reader033.vdocuments.site/reader033/viewer/2022052611/5f08fa4d7e708231d424a49a/html5/thumbnails/12.jpg)
Bibliografia Complementar12
Título/Periódico Autor Ed. Local Editora Ano
Fundamentos de HTML5 e CSS3 SILVA 1ª - Novatec 2015
Web Design Responsivo ZEMEL, Tárcio 1 1ª - Casa do Código 2012
Web Design Responsivo SILVA, Márcio S. 1ª - Novatec 2014
Aplicativos Web Pro Android - Desenvolvimento Pro Android Usando Html5, Css3 & Javascript
OEHLMAN, Damon; Blanc, Sébastien 1ª - Ciência Moderna 2012
Dominando o Desenvolvimento Web Para Smartphone
LAL, Rajesh; RAHN FREDERICK, Gail 1ª - Alta Books 2010
Homepage: usabilidade 50 websites desconstruídos.
NIELSEN, Jakob; TAHIR, Marie. -
Rio de Janeiro
Campus 2002
HTML dinâmico. RAMALHO, José Antônio A. -
São Paulo
Berkeley 1999
![Page 13: Programação para Internet 1 - WordPress.com...1.6 Exercícios - Estrutura do ambiente Web 2. Introdução à Construção de Páginas Web Estáticas 2.1. Introdução ao (X)HTML](https://reader033.vdocuments.site/reader033/viewer/2022052611/5f08fa4d7e708231d424a49a/html5/thumbnails/13.jpg)
A Web 2.0
Web 2.0 é “a mudança para uma internet como plataforma, e um entendimento das regras para obter sucesso nesta nova plataforma”;
A regra fundamental da Web 2.0 é o aproveitamento da inteligência coletiva;
A Web 1.0 focava em um número relativamente pequeno de empresas e anunciantes que produziam conteúdo;
A Web 2.0 envolve “arquiteturas de participação”;
Especialistas afirmam que não há um conceito formado para o que é Web 2.0, ainda estamos desenvolvendo e moldando esse conceito;
A Web 2.0 se baseia no desenvolvimento de uma rede de informações onde cada usuário pode não somente usufruir, mas sim, contribuir;
A Web 2.0 se conceitua no âmbito essencialmente online.
13
![Page 14: Programação para Internet 1 - WordPress.com...1.6 Exercícios - Estrutura do ambiente Web 2. Introdução à Construção de Páginas Web Estáticas 2.1. Introdução ao (X)HTML](https://reader033.vdocuments.site/reader033/viewer/2022052611/5f08fa4d7e708231d424a49a/html5/thumbnails/14.jpg)
Desenvolvimento Front-End
14
Fonte: https://www.freelancermap.com/freelancer-tips/pt/11252-6-habilidades-necess-rias-para-se-tornar-um-desenvolvedor-front-end
![Page 15: Programação para Internet 1 - WordPress.com...1.6 Exercícios - Estrutura do ambiente Web 2. Introdução à Construção de Páginas Web Estáticas 2.1. Introdução ao (X)HTML](https://reader033.vdocuments.site/reader033/viewer/2022052611/5f08fa4d7e708231d424a49a/html5/thumbnails/15.jpg)
Desenvolvimento Back-End
15
Fonte: http://www.cargadetrabalhos.net/2018/06/03/back-end-developer-17/
![Page 16: Programação para Internet 1 - WordPress.com...1.6 Exercícios - Estrutura do ambiente Web 2. Introdução à Construção de Páginas Web Estáticas 2.1. Introdução ao (X)HTML](https://reader033.vdocuments.site/reader033/viewer/2022052611/5f08fa4d7e708231d424a49a/html5/thumbnails/16.jpg)
Introdução ao HTML16
De acordo com o W3C a Web é baseada em 3 pilares:
● Um esquema de nomes para localização de fontes de informação na Web, esse esquema chama-se URI.
● Um Protocolo de acesso para acessar estas fontes, hoje o HTTP.● Uma linguagem de Hypertexto, para a fácil navegação entre as fontes de informação: o
HTML.
![Page 17: Programação para Internet 1 - WordPress.com...1.6 Exercícios - Estrutura do ambiente Web 2. Introdução à Construção de Páginas Web Estáticas 2.1. Introdução ao (X)HTML](https://reader033.vdocuments.site/reader033/viewer/2022052611/5f08fa4d7e708231d424a49a/html5/thumbnails/17.jpg)
Hypertexto17
HTML é uma abreviação de Hypertext Markup Language - Linguagem de Marcação de Hypertexto.
Resumindo em uma frase: o HTML é uma linguagem para publicação de conteúdo (texto, imagem, vídeo, áudio e etc) na Web.
![Page 18: Programação para Internet 1 - WordPress.com...1.6 Exercícios - Estrutura do ambiente Web 2. Introdução à Construção de Páginas Web Estáticas 2.1. Introdução ao (X)HTML](https://reader033.vdocuments.site/reader033/viewer/2022052611/5f08fa4d7e708231d424a49a/html5/thumbnails/18.jpg)
Hypertexto18
● Hipertexto são conjuntos de elementos – ou nós – ligados por conexões. Estes elementos podem ser palavras, imagens, vídeos, áudio, documentos etc.
● Estes elementos conectados formam uma grande rede de informação. ● Eles não estão conectados linearmente como se fossem textos de um livro, onde um
assunto é ligado ao outro seguidamente. ● A conexão feita em um hipertexto é algo imprevisto que permite a comunicação de dados,
organizando conhecimentos e guardando informações relacionadas.
![Page 19: Programação para Internet 1 - WordPress.com...1.6 Exercícios - Estrutura do ambiente Web 2. Introdução à Construção de Páginas Web Estáticas 2.1. Introdução ao (X)HTML](https://reader033.vdocuments.site/reader033/viewer/2022052611/5f08fa4d7e708231d424a49a/html5/thumbnails/19.jpg)
HTML19
Desenvolvido originalmente por Tim Berners-Lee o HTML ganhou popularidade quando o Mosaic - browser desenvolvido por Marc Andreessen na década de 1990 - ganhou força.
A partir daí, desenvolvedores e fabricantes de browsers utilizaram o HTML como base, compartilhando as mesmas convenções.
![Page 20: Programação para Internet 1 - WordPress.com...1.6 Exercícios - Estrutura do ambiente Web 2. Introdução à Construção de Páginas Web Estáticas 2.1. Introdução ao (X)HTML](https://reader033.vdocuments.site/reader033/viewer/2022052611/5f08fa4d7e708231d424a49a/html5/thumbnails/20.jpg)
Estrutura Básica20
![Page 21: Programação para Internet 1 - WordPress.com...1.6 Exercícios - Estrutura do ambiente Web 2. Introdução à Construção de Páginas Web Estáticas 2.1. Introdução ao (X)HTML](https://reader033.vdocuments.site/reader033/viewer/2022052611/5f08fa4d7e708231d424a49a/html5/thumbnails/21.jpg)
O Doctype21
● O Doctype indica para o navegador e para outros meios qual a especificação de código utilizar.
● O Doctype não é uma tag do HTML, mas uma instrução para que o browser tenha informações sobre qual versão de código a marcação foi escrita.
![Page 22: Programação para Internet 1 - WordPress.com...1.6 Exercícios - Estrutura do ambiente Web 2. Introdução à Construção de Páginas Web Estáticas 2.1. Introdução ao (X)HTML](https://reader033.vdocuments.site/reader033/viewer/2022052611/5f08fa4d7e708231d424a49a/html5/thumbnails/22.jpg)
O elemento HTML22
O código HTML é uma série de elementos em árvore onde alguns elementos são filhos de outros e assim por diante. O elemento principal dessa grande árvore é sempre a tag HTML
O atributo LANG é necessário para que os user-agents saibam qual a linguagem principal do
documento.
Para encontrar a listagem de códigos das linguagens, acesse:
http://www.w3.org/International/questions/qa-choosing-language-tags.
<html lang=“pt-br”>
![Page 23: Programação para Internet 1 - WordPress.com...1.6 Exercícios - Estrutura do ambiente Web 2. Introdução à Construção de Páginas Web Estáticas 2.1. Introdução ao (X)HTML](https://reader033.vdocuments.site/reader033/viewer/2022052611/5f08fa4d7e708231d424a49a/html5/thumbnails/23.jpg)
HEAD23
A Tag HEAD é onde fica toda a parte inteligente da página. No HEAD ficam os metadados.
Metadados são informações sobre a página e o conteúdo ali publicado.
![Page 24: Programação para Internet 1 - WordPress.com...1.6 Exercícios - Estrutura do ambiente Web 2. Introdução à Construção de Páginas Web Estáticas 2.1. Introdução ao (X)HTML](https://reader033.vdocuments.site/reader033/viewer/2022052611/5f08fa4d7e708231d424a49a/html5/thumbnails/24.jpg)
Metatag Charset24
Metatag responsável por chavear qual tabela de caracteres a página está utilizando:
<meta charset=”utf-8”>
Metatag responsável por chavear qual tabela de caracteres a página está utilizando:
<meta charset=”utf-8”>
Nas versões anteriores ao HTML5, essa tag era escrita da forma abaixo:
<meta http-equiv=”Content-Type” content=”text/html; charset=utf-8”>
![Page 25: Programação para Internet 1 - WordPress.com...1.6 Exercícios - Estrutura do ambiente Web 2. Introdução à Construção de Páginas Web Estáticas 2.1. Introdução ao (X)HTML](https://reader033.vdocuments.site/reader033/viewer/2022052611/5f08fa4d7e708231d424a49a/html5/thumbnails/25.jpg)
Tag LINK25
Há dois tipos de links no HTML: a tag A, que são links que levam o usuário para outros documentos e a tag LINK, que são links para fontes externas que serão usadas no documento.
<link rel=”stylesheet” type=”text/css” href=”estilo.css”>
![Page 26: Programação para Internet 1 - WordPress.com...1.6 Exercícios - Estrutura do ambiente Web 2. Introdução à Construção de Páginas Web Estáticas 2.1. Introdução ao (X)HTML](https://reader033.vdocuments.site/reader033/viewer/2022052611/5f08fa4d7e708231d424a49a/html5/thumbnails/26.jpg)
Referências
DANTAS, Tiago. "Web 2.0"; Brasil Escola. Disponível em <https://brasilescola.uol.com.br/informatica/web-20.htm>. Acesso em 18 de fevereiro de 2019.
FERREIRA, E.; EIS, DIEGO. HTML 5: Curso W3C Escritório Brasil. Disponível em <http://www.w3c.br/pub/Cursos/CursoHTML5/html5-web.pdf>. Acesso em: 18/02/2019.