Upload
others
View
3
Download
0
Embed Size (px)
Citation preview
Programação para Internet 1
1
Prof. Cleziel Franzoni da Costa
/cleziel
cleziel.wordpress.com
42
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
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
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
Pré-requisitos
Não há pré-requisito.
6
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
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
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
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
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
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
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
Desenvolvimento Front-End
14
Fonte: https://www.freelancermap.com/freelancer-tips/pt/11252-6-habilidades-necess-rias-para-se-tornar-um-desenvolvedor-front-end
Desenvolvimento Back-End
15
Fonte: http://www.cargadetrabalhos.net/2018/06/03/back-end-developer-17/
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.
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.
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.
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.
Estrutura Básica20
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.
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”>
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.
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”>
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”>
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.