v1.1 – 02/04/2017

INTRODUÇÃO AO DESENVOLVIMENTO FRONT-END

COM HTML, CSS E JAVASCRIPT

AULA 1 – INTRODUÇÃO E CONCEITOS

Eder Franco @ FPF Tech

___________________________

Agenda

1. Quem?

2. Breve histórico da web

3. O que é uma página web?

4. Arquitetura básica de uma aplicação web

5. Tecnologias de front-end e back-end

6. Referências

Quem?

Eder Martins Franco

Programador e professor, notívago e viciado em café. Cristão, nerd, gamer e amigo da vizinhança.

____________________________________________

• Graduado em Sistemas de Informação (FUCAPI);

• MBA em Gestão de Projetos (2017);

• Certified Scrum Master e Developer;

• Professor na Faculdade FUCAPI e Desenvolvedor na FPF Tech;

• Atuando na área desde 2007;

Quem?

Reflexão:

“Ninguém é tão sábio que não tenha algo pra aprender e nem tão tolo que não tenha algo pra ensinar”

__________________________________________________________________

Blaise Pascal

Breve histórico da web

1989 - Tim Bernes-Lee

Considerado o criador da World Wide Web, a partir de um proposta

de criação de um meio mais eficiente para armazenagem,

referência e compartilhamento de artigos científicos.

Breve histórico da web

Tim Bernes-Lee

• Funcionário da Organização Europeia de Pesquisas Nucleares (CERN), na Suíça;

• Em 1989, especificou um sistema de gerenciamento de informações no qual um documento de texto poderia conter hiperlinks e referências para outros trabalhos;

Breve histórico da web

https://www.w3.org/History/1989/proposal.html

Information Management: A Proposal (Tim Berns-Lee, CERN – March 1989, May 1990).

Breve histórico da web

Tim Bernes-Lee

• 1991 - Primeiro navegador:

• “WorldWideWeb”

• A partir do trabalho de Tim:

• HTML, URLs, protocolo HTTP, arquitetura, padrões de desenvolvimento, etc.

Breve histórico da web

O que é uma página web?

• Uma página web é um arquivo de texto, organizado como um documento composto por uma série de marcações especiais para que possam ser visualizados em um navegador:

• HyperText Markup Language (HTML) é uma linguagem de marcação que permite criar páginas para a web;

• Tags – Permitem criar as marcação, composição da página; estrutura, disposição dos elementos, tipo de conteúdo, etc.

Breve histórico da web

http://info.cern.ch/hypertext/WWW/TheProject.html

O que é uma página web?

Arquitetura básica de uma aplicação web

Arquitetura básica de uma aplicação web

Alguns conceitos importantes:

• Internet Protocol (IP):

• Endereço fixo de uma máquina na web:

• 173.194.118.88 (IPV4);

• 2001:0db8:85a3:08d3:1319:8a2e:0370:7344 (IPV6);

Arquitetura básica de uma aplicação web

• Domain Name Server (DNS):

• Um nome amigável para identificar uma máquina na web;

• Evita que o usuário tenha que decorar os endereços de IP;

• É mantido um registro associando o DNS ao IP do servidor, para que os recursos possam ser localizados;

• google.com.br – 216.28.202.227

• fpftech.com – 107.108.14.67

Arquitetura básica de uma aplicação web

• Uniform Resource Locator (URL):

• Endereço que identifica a localização de recurso solicitado a um servidor web:

• http://franco.eti.br/index.html

• http://academy.franco.eti.br

• http://franco.eti.br/academy/marca.jpg

Arquitetura básica de uma aplicação web

http:// academy.franco.eti.br/marca.jpg

• Protocolo - Identifica o protocolo da requisição realizada (http, ftp, rtmp);

• Domínio / DNS - Identifica o servidor, o local onde está o recurso desejado;

• Subdomínio – Um complemento associado a um domínio que aponta para um diretório ou recurso em especial dentro de um domínio existente;

• Recurso - O recurso solicitado ao servidor pra exibição ou download.

Tecnologias de front-end e back-end

Front-end

“Uma unidade em um sistema de computação dedicado a controlar as comunicações de dados entre terminais e o

computador central, e eventualmente realizar um processamento preliminar de dados”

(Webster, tradução livre)

Tecnologias de front-end e back-end

Front-end

• Uma interface de software (como uma interface gráfica) projetada para habilitar uma interação amigável de usuários com um computador (Webster, tradução livre);

• Compreende não somente as interfaces gráficas, mas também todos os scripts que adicionam interação a páginas estáticas (animações, elementos visuais, mensagens, etc.) e que se comunicam com o servidor;

• É a camada de um sistema web que permite a interação com o usuário;

Tecnologias de front-end e back-end

Front-end

ConteúdoHTML

ApresentaçãoCSS

ComportamentoJavascript

Tecnologias de front-end e back-end

Front-end

• Programação com linguagens de script:

• Linguagens normalmente utilizadas para execução de tarefas mais simples dentro de programas mais complexos, em tempo de execução;

• Exemplos:

• JavaScript;

• ActionScript.

Tecnologias de front-end e back-end

Front-end

• Javascript:

• Permite realizar programação do lado do cliente (browser);

• Utiliza-se da manipulação de eventos para executar ações, modificar estilos, comportamentos, etc.

• Linguagem interpretada, implementada nos navegadores;

• É poderosa, mas está “confinada” ou limitada ao ambiente do browser (não acessa a máquina diretamente);

Tecnologias de front-end e back-end

Back-end

• Relativo à parte de um programa de computador ou sistema que o usuário não vê ou utiliza diretamente;

• A parte do negócio que não lida diretamente com os clientes, como manufatura;

• A parte final de um processo ou projeto;

• A parte de um programa de computador ou sistema que lida com dados;

Tecnologias de front-end e back-end

Back-end

• Ao se referir ao back-end, comumente pensamos em:

• Tudo que é executado do lado do servidor;

• Sistemas de bancos de dados, servidores de e-mail, interpretadores de linguagens de programação, serviços, etc.

Tecnologias de front-end e back-end

Back-end

• No princípio:

• 1997 –Definição formal do padrão;

• CGI (Common Gateway Interface) - método usado para permitir a interação entre o servidor web e outros programas executados no sistema;

Tecnologias de front-end e back-end

Back-end

• CGI

Tecnologias de front-end e back-end

Back-end

• CGI

Tecnologias de front-end e back-end

Back-end

• CGI

Tecnologias de front-end e back-end

Back-end

• CGI

Tecnologias de front-end e back-end

Back-end

• A necessidade de criar programas cada vez mais complexos do lado do servidor levou à necessidade de criação de linguagens mais completas, mais fáceis de aprender, e mais rápidas para se criar programas capazes de acessar bancos de dados, gerar relatórios, etc.

• Exemplos:

• PHP, Perl, Ruby, Python, ASP.NET, Java, ColdFusion.

Tecnologias de front-end e back-end

Back-end

Referências

1. The birth of the web:

• http://home.web.cern.ch/topics/birth-web

2. CGI:

• http://penta.ufrgs.br/edu/forms/cgi.html

3. W3C: HTML & CSS:

• http://www.w3.org/standards/webdesign/htmlcss

Referências

4. W3C: Javascript Web Apis:

• http://www.w3.org/standards/webdesign/script

5. Architectural Principles of the World Wide Web:

• http://www.w3.org/TR/2002/WD-webarch-20020830

Eder Martins Franco

eder.franco@fpf.br efranco23@gmail.com

facebook.com/edermartinsfrancolinkedin.com/in/efranco23/

moodle.franco.eti.br