SlideShare uma empresa Scribd logo
1 de 33
Baixar para ler offline
DESENVOLVIMENTO DE
APLICAÇÕES WEB
Iago Cavalcante
Patrick Monteiro
A World Wide Web
▶ Significa "rede de alcance mundial", também
conhecida como Web ou WWW;
▶ é um sistema de documentos em hipermídia que são
interligados e executados na Internet. Os documentos
podem estar na forma de vídeos, sons, hipertextos e
figuras;
A World Wide Web
▶ Criada pelo britânico Tim Berners-Lee, com 3 ferramentas
importantes:
▶ um protocolo de transmissão de dados - HTTP;
▶ um sistema de endereçamento próprio - URL;
▶ uma linguagem de marcação, para transmitir
documentos formatados através da rede - HTML
O que é o HTML ?
HTML - HyperText Markup Language
▶ É uma linguagem de marcação para construção de páginas web;
▶ Documentos HMTL são interpretados pelos navegadores;
▶ Teve o início de sua especificação formal nos anos 90;
▶ Todo documento HTML possui marcações(conhecidas como tags);
▶ Um elemento é formado por uma tag, valores, atributos e filhos;
Exemplo de elementos
Exemplo de elemento simples (sem filhos) :
Exemplo de elemento composto:
Versões do HTML
Fonte: https://pt.wikipedia.org/wiki/HTML
O HTML5
▶ Buscou a padronização da linguagem de marcação
▶ Uniu esforços da W3C e WHAT Working Group
▶ Interrompeu o desenvolvimento do Flash da ADOBE
▶ Trouxe consigo:
▶ Novas API’s, entre elas uma para desenvolvimento de gráficos
bidimensionais
▶ Controle embutido de conteúdo multimídia
▶ Aprimoramento do uso offline
▶ Melhoria na depuração de erros
Algumas novidades do HTML5
▶ Novas tags foram introduzidas no HTML5 :
<section> - Define a seção do Documento;
<nav> - Define uma seção que contém links de navegação;
<article> - Existência de forma independente do resto do conteúdo;
<aside> - Conteúdo reservado do restante da página;
<hgroup> - Agrupa um conjunto de elementos <h1> a <h6>;
<header> - Define o cabeçalho de uma página ou seção;
<footer> - Define o rodapé de uma página ou seção;
<main> - Define o conteúdo principal ou importante no documento;
Algumas novidades do HTML5
▶ Novas tags foram introduzidas no HTML5 :
<embed> - Representa um ponto de integração para aplicação ou
conteúdo interativo externo;
<video> - Representa um video e seus arquivos e legendas de aúdios;
<audio> - Representa um som ou um fluxo de som;
<canvas> - Representa uma área bitmap em que scripts podem ser
usados para renderizar gráficos;
Novos tipos de input do HTML5
Color - permite ao usuário selecionar uma cor;
Date - Cria um campo para selecionar uma data;
DateTime - Cria dois campos, um para data, outro para hora;
Month - Serve para selecionar um mês e um ano;
E-mail - É um campo de entrada para emails;
Number - Utilizado para campos que contém apenas números;
Range - Recebe um valor a partir de uma variação de números;
Search - Campo de pesquisas, texto comum;
Tel - Serve para números de telefone;
Time - Serve para selecionar hora;
O CSS e CSS3
▶ Cascading Style Sheets (CSS)
▶ Aplica folhas de estilo em linguagens de marcação de hipertexto
▶ Padroniza todas as informações do layout(cores, posicionamento…)
▶ CSS3 é a segunda nova versão do CSS
▶ Trouxe novidades como efeitos de rotação, movimento e transição
JavaScript
▶ Linguagem de programação interpretada
▶ Originalmente implementada como parte dos navegadores web
▶ Atualmente principal linguagem de programação client-side
▶ Utilizada também no lado do servidor com node.js
▶ Linguagem de programação mais utilizada no mundo de acordo
com insights do stackoverflow [1]
JavaScript - Pra que serve ?
▶ É a linguagem de programação usada para adicionar interações
ao seu site;
▶ Tem diversas API’s para comunicação com o hardware através do
browser;
▶ Atualmente é possível fazer robôs usando javascript [2];
▶ Com javascript é possível também a criação de ótimas aplicações
mobile [3][4].
JavaScript - Elementos básicos
▶ Var
▶ Objetos
▶ Funções
▶ Eventos
▶ Loops e Condicionais
▶ Window
▶ Document
DOM
▶ O DOM é uma multi-plataforma que representa como as
marcações em HTML, XHTML e XML são organizadas e lidas pelo
navegador que você usa.
JavaScript - Como usar ?
Analogia
PORQUÊ APRENDER HTML E CSS ?
Vamos praticar !
Criação de uma página de blog
▶ Criar uma página de blog com possibilidade de inserir postagens
offline
▶ Listar postagens
▶ Cadastrar Postagens
Esqueleto do Blog
O <! DOCTYPE>
▶ A declaração <! DOCTYPE> deve ser a primeira coisa no seu
documento HTML, antes da tag <html>
▶ Não é uma tag HTML, é uma instrução para o navegador web
sobre a versão do HTML em que a página está escrita.
O <! DOCTYPE>
▶ HTML5
<!DOCTYPE html>
▶ HTML 4.01
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
▶ HTML 1.0
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
Básico de uma página HTML
▶ Uma página HTML básica possui as tags :
▶ <html>, <head> e <body>
Criando menu para navegação
▶ Utilizamos a tag <nav>
Estilizando nosso menu
▶ Precisamos criar um arquivo css e importar em nosso html
Adicionando estilos ao menu
▶ Criamos o arquivo style.css;
▶ Adicionamos a seguinte propriedade nele:
Criando nosso artigo do blog
Usamos a tag <main> e <article>
Criando o rodapé
Trabalhoso não é mesmo?
Como agilizar o processo de desenvolvimento do front-end?
O Bootstrap
▶ O Bootstrap é um conjunto de ferramentas de código aberto para
desenvolvimento com HTML, CSS e JS;
▶ Vários componentes pré-construídos;
▶ Sistema de grid;
▶ Responsivo;
Bora Praticaaaaaar !!!!
Referências
▶ [1] https://insights.stackoverflow.com/survey/2017#technology
▶ [2] http://johnny-five.io/
▶ [3] https://ionicframework.com
▶ [4] http://quasar-framework.org/
▶ [5] https://getbootstrap.com/docs/4.0/
▶ [6] https://www.w3.org/html/
▶ [7] https://www.w3schools.com
▶ [8] https://tableless.com.br/categories/css3/

Mais conteúdo relacionado

Mais procurados

Introdução ao desenvolvimento Web
Introdução ao desenvolvimento WebIntrodução ao desenvolvimento Web
Introdução ao desenvolvimento Web
Sérgio Souza Costa
 
Aula 2 – Introdução a HTML - conceitos básicos e estrutura
Aula 2 – Introdução a HTML - conceitos básicos e estruturaAula 2 – Introdução a HTML - conceitos básicos e estrutura
Aula 2 – Introdução a HTML - conceitos básicos e estrutura
André Constantino da Silva
 

Mais procurados (20)

Aplicações web parte 1
Aplicações web parte 1Aplicações web parte 1
Aplicações web parte 1
 
Aula - Internet
Aula - InternetAula - Internet
Aula - Internet
 
Introdução básica ao JavaScript
Introdução básica ao JavaScriptIntrodução básica ao JavaScript
Introdução básica ao JavaScript
 
Html
HtmlHtml
Html
 
Introdução ao desenvolvimento Web
Introdução ao desenvolvimento WebIntrodução ao desenvolvimento Web
Introdução ao desenvolvimento Web
 
07 html formulários
07 html   formulários07 html   formulários
07 html formulários
 
Internet e correio eletrônico
Internet e correio eletrônicoInternet e correio eletrônico
Internet e correio eletrônico
 
Aula 1 - Programação Dinâmica para Web
Aula 1 - Programação Dinâmica para WebAula 1 - Programação Dinâmica para Web
Aula 1 - Programação Dinâmica para Web
 
Curso básico de informática
Curso básico de informáticaCurso básico de informática
Curso básico de informática
 
Aula 04 layout e composição do site
Aula 04   layout e composição do siteAula 04   layout e composição do site
Aula 04 layout e composição do site
 
Aula básica de internet
Aula básica de internetAula básica de internet
Aula básica de internet
 
O que é a internet
O que é a internetO que é a internet
O que é a internet
 
Aula 2 – Introdução a HTML - conceitos básicos e estrutura
Aula 2 – Introdução a HTML - conceitos básicos e estruturaAula 2 – Introdução a HTML - conceitos básicos e estrutura
Aula 2 – Introdução a HTML - conceitos básicos e estrutura
 
Criptografia simetrica e assimétrica
Criptografia simetrica e assimétricaCriptografia simetrica e assimétrica
Criptografia simetrica e assimétrica
 
Curso de HTML5 - Aula 01
Curso de HTML5 - Aula 01   Curso de HTML5 - Aula 01
Curso de HTML5 - Aula 01
 
Protocolo Http
Protocolo HttpProtocolo Http
Protocolo Http
 
Informática Básica - Aula 05 - Sistema Operacional Windows
Informática Básica - Aula 05 - Sistema Operacional WindowsInformática Básica - Aula 05 - Sistema Operacional Windows
Informática Básica - Aula 05 - Sistema Operacional Windows
 
Introdução a Informática
Introdução a InformáticaIntrodução a Informática
Introdução a Informática
 
Fundamentos de arquitetura Web
Fundamentos de arquitetura WebFundamentos de arquitetura Web
Fundamentos de arquitetura Web
 
Aula 2 - Sistemas operacionais - Windows
Aula 2 - Sistemas operacionais - WindowsAula 2 - Sistemas operacionais - Windows
Aula 2 - Sistemas operacionais - Windows
 

Semelhante a DESENVOLVIMENTO DE APLICAÇÕES WEB

Html E Websemantica Trabalho
Html E Websemantica TrabalhoHtml E Websemantica Trabalho
Html E Websemantica Trabalho
Adagenor Ribeiro
 
0. Introdução ao HTML pptx.pdf
0. Introdução ao HTML pptx.pdf0. Introdução ao HTML pptx.pdf
0. Introdução ao HTML pptx.pdf
RubenManhia
 
1a5614c679b23c018654639f6b57ecf1.pdf
1a5614c679b23c018654639f6b57ecf1.pdf1a5614c679b23c018654639f6b57ecf1.pdf
1a5614c679b23c018654639f6b57ecf1.pdf
NickMartinsgaspar
 
Html completo
Html completoHtml completo
Html completo
EMSNEWS
 

Semelhante a DESENVOLVIMENTO DE APLICAÇÕES WEB (20)

XHTML e CSS
XHTML e CSSXHTML e CSS
XHTML e CSS
 
Projeto Web - Aula 1 - Fundamentos do Dev WEB.pptx
Projeto Web - Aula 1 - Fundamentos do Dev WEB.pptxProjeto Web - Aula 1 - Fundamentos do Dev WEB.pptx
Projeto Web - Aula 1 - Fundamentos do Dev WEB.pptx
 
Benef&iacute;cios dos WebStandards
Benef&iacute;cios dos WebStandardsBenef&iacute;cios dos WebStandards
Benef&iacute;cios dos WebStandards
 
Professor rogerio-apostila
Professor rogerio-apostilaProfessor rogerio-apostila
Professor rogerio-apostila
 
Introdução a HTML5
Introdução a HTML5Introdução a HTML5
Introdução a HTML5
 
Html E Websemantica Trabalho
Html E Websemantica TrabalhoHtml E Websemantica Trabalho
Html E Websemantica Trabalho
 
E-Book de estudos
E-Book de estudosE-Book de estudos
E-Book de estudos
 
Técnicas e processos - HTML / CSS - aula 1
Técnicas e processos - HTML / CSS - aula 1Técnicas e processos - HTML / CSS - aula 1
Técnicas e processos - HTML / CSS - aula 1
 
Montando sites com XHTML e CSS utilizando os padrões web
Montando sites com XHTML e CSS utilizando os padrões webMontando sites com XHTML e CSS utilizando os padrões web
Montando sites com XHTML e CSS utilizando os padrões web
 
AULA 01 - Conceitos de HTML.pptx
AULA 01 - Conceitos de HTML.pptxAULA 01 - Conceitos de HTML.pptx
AULA 01 - Conceitos de HTML.pptx
 
Ferramentas Livres para Desenvolvimento Web
Ferramentas Livres para Desenvolvimento WebFerramentas Livres para Desenvolvimento Web
Ferramentas Livres para Desenvolvimento Web
 
Html 5
Html 5Html 5
Html 5
 
0. Introdução ao HTML pptx.pdf
0. Introdução ao HTML pptx.pdf0. Introdução ao HTML pptx.pdf
0. Introdução ao HTML pptx.pdf
 
1a5614c679b23c018654639f6b57ecf1.pdf
1a5614c679b23c018654639f6b57ecf1.pdf1a5614c679b23c018654639f6b57ecf1.pdf
1a5614c679b23c018654639f6b57ecf1.pdf
 
Curso de Desenvolvimento Web - Módulo I - HTML.pdf
Curso de Desenvolvimento Web - Módulo I - HTML.pdfCurso de Desenvolvimento Web - Módulo I - HTML.pdf
Curso de Desenvolvimento Web - Módulo I - HTML.pdf
 
Slides Linguagem de Programação HTML e CSS
Slides Linguagem de Programação HTML e CSSSlides Linguagem de Programação HTML e CSS
Slides Linguagem de Programação HTML e CSS
 
HTML5
HTML5HTML5
HTML5
 
Um revolução na web com HTML 5
Um revolução na web com HTML 5Um revolução na web com HTML 5
Um revolução na web com HTML 5
 
Apresentacao html css
Apresentacao html cssApresentacao html css
Apresentacao html css
 
Html completo
Html completoHtml completo
Html completo
 

Mais de Patrick Monteiro

Mais de Patrick Monteiro (7)

Quasar Framework - Front end de alto desempenho
Quasar Framework - Front end de alto desempenhoQuasar Framework - Front end de alto desempenho
Quasar Framework - Front end de alto desempenho
 
Quasar Framework - Uma visão Geral
Quasar Framework - Uma visão GeralQuasar Framework - Uma visão Geral
Quasar Framework - Uma visão Geral
 
Solucionando a Teoria do Caos com Cypress.io
Solucionando a Teoria do Caos com Cypress.ioSolucionando a Teoria do Caos com Cypress.io
Solucionando a Teoria do Caos com Cypress.io
 
Meetup vue.js
Meetup vue.jsMeetup vue.js
Meetup vue.js
 
Introdução ao codeigniter
Introdução ao codeigniterIntrodução ao codeigniter
Introdução ao codeigniter
 
Afinal, o que são Single Page Applications
Afinal, o que são Single Page ApplicationsAfinal, o que são Single Page Applications
Afinal, o que são Single Page Applications
 
Novidades do http 2.0
Novidades do http 2.0Novidades do http 2.0
Novidades do http 2.0
 

Último

Apresentação Power Embedded - Descubra uma nova forma de compartilhar relatór...
Apresentação Power Embedded - Descubra uma nova forma de compartilhar relatór...Apresentação Power Embedded - Descubra uma nova forma de compartilhar relatór...
Apresentação Power Embedded - Descubra uma nova forma de compartilhar relatór...
Dirceu Resende
 

Último (6)

Apresentação Power Embedded - Descubra uma nova forma de compartilhar relatór...
Apresentação Power Embedded - Descubra uma nova forma de compartilhar relatór...Apresentação Power Embedded - Descubra uma nova forma de compartilhar relatór...
Apresentação Power Embedded - Descubra uma nova forma de compartilhar relatór...
 
From_SEH_Overwrite_with_Egg_Hunter_to_Get_a_Shell_PT-BR.pdf
From_SEH_Overwrite_with_Egg_Hunter_to_Get_a_Shell_PT-BR.pdfFrom_SEH_Overwrite_with_Egg_Hunter_to_Get_a_Shell_PT-BR.pdf
From_SEH_Overwrite_with_Egg_Hunter_to_Get_a_Shell_PT-BR.pdf
 
Concurso Caixa TI - Imersão Final - Rogério Araújo.pdf
Concurso Caixa TI - Imersão Final - Rogério Araújo.pdfConcurso Caixa TI - Imersão Final - Rogério Araújo.pdf
Concurso Caixa TI - Imersão Final - Rogério Araújo.pdf
 
Certificado - Data Analytics - CoderHouse.pdf
Certificado - Data Analytics - CoderHouse.pdfCertificado - Data Analytics - CoderHouse.pdf
Certificado - Data Analytics - CoderHouse.pdf
 
Apresentação Comercial VITAL DATA 2024.pdf
Apresentação Comercial VITAL DATA 2024.pdfApresentação Comercial VITAL DATA 2024.pdf
Apresentação Comercial VITAL DATA 2024.pdf
 
[ServiceNow] Upgrade de versão - 2ª edição (Revisada, atualizada e ampliada)
[ServiceNow] Upgrade de versão - 2ª edição (Revisada, atualizada e ampliada)[ServiceNow] Upgrade de versão - 2ª edição (Revisada, atualizada e ampliada)
[ServiceNow] Upgrade de versão - 2ª edição (Revisada, atualizada e ampliada)
 

DESENVOLVIMENTO DE APLICAÇÕES WEB

  • 1. DESENVOLVIMENTO DE APLICAÇÕES WEB Iago Cavalcante Patrick Monteiro
  • 2. A World Wide Web ▶ Significa "rede de alcance mundial", também conhecida como Web ou WWW; ▶ é um sistema de documentos em hipermídia que são interligados e executados na Internet. Os documentos podem estar na forma de vídeos, sons, hipertextos e figuras;
  • 3. A World Wide Web ▶ Criada pelo britânico Tim Berners-Lee, com 3 ferramentas importantes: ▶ um protocolo de transmissão de dados - HTTP; ▶ um sistema de endereçamento próprio - URL; ▶ uma linguagem de marcação, para transmitir documentos formatados através da rede - HTML
  • 4. O que é o HTML ? HTML - HyperText Markup Language ▶ É uma linguagem de marcação para construção de páginas web; ▶ Documentos HMTL são interpretados pelos navegadores; ▶ Teve o início de sua especificação formal nos anos 90; ▶ Todo documento HTML possui marcações(conhecidas como tags); ▶ Um elemento é formado por uma tag, valores, atributos e filhos;
  • 5. Exemplo de elementos Exemplo de elemento simples (sem filhos) : Exemplo de elemento composto:
  • 6. Versões do HTML Fonte: https://pt.wikipedia.org/wiki/HTML
  • 7. O HTML5 ▶ Buscou a padronização da linguagem de marcação ▶ Uniu esforços da W3C e WHAT Working Group ▶ Interrompeu o desenvolvimento do Flash da ADOBE ▶ Trouxe consigo: ▶ Novas API’s, entre elas uma para desenvolvimento de gráficos bidimensionais ▶ Controle embutido de conteúdo multimídia ▶ Aprimoramento do uso offline ▶ Melhoria na depuração de erros
  • 8. Algumas novidades do HTML5 ▶ Novas tags foram introduzidas no HTML5 : <section> - Define a seção do Documento; <nav> - Define uma seção que contém links de navegação; <article> - Existência de forma independente do resto do conteúdo; <aside> - Conteúdo reservado do restante da página; <hgroup> - Agrupa um conjunto de elementos <h1> a <h6>; <header> - Define o cabeçalho de uma página ou seção; <footer> - Define o rodapé de uma página ou seção; <main> - Define o conteúdo principal ou importante no documento;
  • 9. Algumas novidades do HTML5 ▶ Novas tags foram introduzidas no HTML5 : <embed> - Representa um ponto de integração para aplicação ou conteúdo interativo externo; <video> - Representa um video e seus arquivos e legendas de aúdios; <audio> - Representa um som ou um fluxo de som; <canvas> - Representa uma área bitmap em que scripts podem ser usados para renderizar gráficos;
  • 10. Novos tipos de input do HTML5 Color - permite ao usuário selecionar uma cor; Date - Cria um campo para selecionar uma data; DateTime - Cria dois campos, um para data, outro para hora; Month - Serve para selecionar um mês e um ano; E-mail - É um campo de entrada para emails; Number - Utilizado para campos que contém apenas números; Range - Recebe um valor a partir de uma variação de números; Search - Campo de pesquisas, texto comum; Tel - Serve para números de telefone; Time - Serve para selecionar hora;
  • 11. O CSS e CSS3 ▶ Cascading Style Sheets (CSS) ▶ Aplica folhas de estilo em linguagens de marcação de hipertexto ▶ Padroniza todas as informações do layout(cores, posicionamento…) ▶ CSS3 é a segunda nova versão do CSS ▶ Trouxe novidades como efeitos de rotação, movimento e transição
  • 12. JavaScript ▶ Linguagem de programação interpretada ▶ Originalmente implementada como parte dos navegadores web ▶ Atualmente principal linguagem de programação client-side ▶ Utilizada também no lado do servidor com node.js ▶ Linguagem de programação mais utilizada no mundo de acordo com insights do stackoverflow [1]
  • 13. JavaScript - Pra que serve ? ▶ É a linguagem de programação usada para adicionar interações ao seu site; ▶ Tem diversas API’s para comunicação com o hardware através do browser; ▶ Atualmente é possível fazer robôs usando javascript [2]; ▶ Com javascript é possível também a criação de ótimas aplicações mobile [3][4].
  • 14. JavaScript - Elementos básicos ▶ Var ▶ Objetos ▶ Funções ▶ Eventos ▶ Loops e Condicionais ▶ Window ▶ Document
  • 15. DOM ▶ O DOM é uma multi-plataforma que representa como as marcações em HTML, XHTML e XML são organizadas e lidas pelo navegador que você usa.
  • 20. Criação de uma página de blog ▶ Criar uma página de blog com possibilidade de inserir postagens offline ▶ Listar postagens ▶ Cadastrar Postagens
  • 22. O <! DOCTYPE> ▶ A declaração <! DOCTYPE> deve ser a primeira coisa no seu documento HTML, antes da tag <html> ▶ Não é uma tag HTML, é uma instrução para o navegador web sobre a versão do HTML em que a página está escrita.
  • 23. O <! DOCTYPE> ▶ HTML5 <!DOCTYPE html> ▶ HTML 4.01 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> ▶ HTML 1.0 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
  • 24. Básico de uma página HTML ▶ Uma página HTML básica possui as tags : ▶ <html>, <head> e <body>
  • 25. Criando menu para navegação ▶ Utilizamos a tag <nav>
  • 26. Estilizando nosso menu ▶ Precisamos criar um arquivo css e importar em nosso html
  • 27. Adicionando estilos ao menu ▶ Criamos o arquivo style.css; ▶ Adicionamos a seguinte propriedade nele:
  • 28. Criando nosso artigo do blog Usamos a tag <main> e <article>
  • 30. Trabalhoso não é mesmo? Como agilizar o processo de desenvolvimento do front-end?
  • 31. O Bootstrap ▶ O Bootstrap é um conjunto de ferramentas de código aberto para desenvolvimento com HTML, CSS e JS; ▶ Vários componentes pré-construídos; ▶ Sistema de grid; ▶ Responsivo;
  • 33. Referências ▶ [1] https://insights.stackoverflow.com/survey/2017#technology ▶ [2] http://johnny-five.io/ ▶ [3] https://ionicframework.com ▶ [4] http://quasar-framework.org/ ▶ [5] https://getbootstrap.com/docs/4.0/ ▶ [6] https://www.w3.org/html/ ▶ [7] https://www.w3schools.com ▶ [8] https://tableless.com.br/categories/css3/