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.
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
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
• 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
• 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.
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
[email protected] [email protected]
facebook.com/edermartinsfrancolinkedin.com/in/efranco23/
moodle.franco.eti.br