Programação para Internet 1

1

Prof. Cleziel Franzoni da Costa

/cleziel

cleziel@hotmail.com

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.