SlideShare uma empresa Scribd logo
Fundamentos de
Desenvolvimento de
Sistemas
Capítulo 1 - HTML
Dev & Data
Prof. Raphael Gomide
Aula 1.1. HTML
HTML
• Hyper Text Markup Language
• Linguagem de marcação para hipertexto.
• Hipertexto: conteúdo dinâmico (links).
• Encontra-se atualmente na versão 5.
• HTML não pode ser considerada uma linguagem de
programação!
• Excelente fonte de documentação:
https://developer.mozilla.org/pt-BR/docs/Web/HTML
HTML
• Permite a definição declarativa de elementos.
• É utilizada para compor semanticamente uma página
Web.
• É constituída por elementos.
• Elementos são delimitados por tags.
• A grande maioria das tags possuem conteúdo.
• Além disso, as tags podem possuir atributos.
• Os atributos possuem valores.
Slides .pptx.pdf
HTML – principais tags
• <h1> a <h6> 🡪 títulos.
• <p> 🡪 parágrafos.
• <div> 🡪 divisões blocantes (quebra de linha).
• <span> 🡪 divisões não blocantes.
• <img> 🡪 definição de imagens.
• <table> <thead> <tbody> <tr> <td> 🡪 definição de tabelas, linhas e colunas.
• <ul> <ol> e <li> 🡪 listas e itens de lista.
• <strong> e <em> 🡪 ênfase no texto.
• <a> 🡪 âncoras (links).
• <input> 🡪 entrada de texto.
• <button> 🡪 botão.
• <img /> 🡪 imagens.
Conclusão
• HTML é uma linguagem de marcação.
• Utilizada para a definição de conteúdo na web.
• Foco em semântica.
• Composta de elementos.
• Elementos são delimitados por tags.
• Elementos com conteúdo precisam de tag de fechamento.
• Tags podem possuir atributos.
• Atributos podem possuir valores.
Próxima aula
Práticas com HTML.
Fundamentos de
Desenvolvimento de
Sistemas
Capítulo 2 - CSS
Dev & Data
Prof. Raphael Gomide
Aula 2.1. CSS
CSS
• Cascading Style Sheets.
• Folhas de estilo em cascata.
• Tecnologia para o layout das aplicações web.
• Foco no conteúdo visual.
• Utilizam os atributos class e id.
• Excelente fonte de documentação:
https://developer.mozilla.org/pt-BR/docs/Web/CSS
CSS
• Seletores de classe são precedidos pelo símbolo de
pontuação “."
• Seletores de id são precedidos pelo símbolo de
hashtag “#"
Slides .pptx.pdf
CSS – principais propriedades
• margin 🡪 margem externa.
• padding 🡪 margem interna.
• border 🡪 borda.
• display 🡪 posicionamento de elementos.
• font-size 🡪 tamanho de fonte.
• font-family 🡪 tipo de fonte.
• background-color 🡪 cor de fundo.
• color 🡪 cor do texto.
• cursor 🡪 tipo de cursor do mouse.
• list-style-type 🡪 tipo de estilo de listas <ul><li>.
• width 🡪 largura.
• height 🡪 altura.
Conclusão
• CSS é uma linguagem de estilização.
• Utilizada para a definição de estilos e layout na web.
• Foco em aspecto visual.
• Composta de seletores, propriedades e valores.
Próxima aula
Práticas com CSS.
Fundamentos de
Desenvolvimento de
Sistemas
Capítulo 3 - DOM
Dev & Data
Prof. Raphael Gomide
Aula 3.1. DOM
DOM
• Document Object Model.
• Modelo de Objeto de Documento.
• Estrutura hierárquica de conteúdo HTML.
• É possível manipular o DOM e CSS com JavaScript.
• Excelente fonte de documentação:
https://developer.mozilla.org/pt-BR/docs/Web/API/Document_
Object_Model
Slides .pptx.pdf
JavaScript – principais comandos
para manipular o DOM
• document.querySelector 🡪 seletor de um único elemento (tag, class, id).
• document.qurerySelectorAll 🡪 seletor de n elementos.
• document.createElement 🡪 criação de elementos.
• appendChild 🡪 inserção de filhos.
• addEventListener 🡪 inclusão de um “escutador” de evento (quando).
• classList.add 🡪 inclusão de classe CSS.
• classList.remove 🡪 exclusão de classe CSS.
Conclusão
• É possível manipular o DOM e CSS com JavaScript.
• Isso permite que os apps web sejam mais dinâmicos e
interativos.
Próxima aula
Práticas com manipulação do DOM utilizando HTML, CSS e
JavaScript.
Fundamentos de
Desenvolvimento de
Sistemas
Capítulo 4 - Introdução ao LocalStorage
Dev & Data
Prof. Raphael Gomide
Aula 4.1. Introdução ao LocalStorage
LocalStorage
• Funcionalidade para armazenamento de dados nos
navegadores.
• Simples e, portanto, limitada.
• Armazena conteúdo no formato de string.
• Os dados podem ser excluídos pelo navegador ou usuário.
• Excelente fonte de documentação:
https://developer.mozilla.org/pt-BR/docs/Web/API/Window/lo
calStorage
Principais comandos
relacionados ao LocalStorage
• window.localStorage.getItem(key) 🡪 recupera dados relacionados à key
• window.localStorage.setItem(key) 🡪 define dados relacionados à key.
• JSON.parse(string) 🡪 Transforma string em JSON. Muito usado com getItem.
• JSON.stringify(objeto) 🡪 Transforma JSON em string. Muito usado com setItem.
Conclusão
• LocalStorage é uma das possibilidades de armazenamento de
dados em aplicações web.
• É simples e também limitado.
• Recomendado para dados não sensíveis e também cuja perda
não implica em problemas com a aplicação.
Próxima aula
Prática utilizando LocalStorage.
Fundamentos de
Desenvolvimento de
Sistemas
Capítulo 5 - Introdução ao Netlify Drop
Dev & Data
Prof. Raphael Gomide
Aula 5.1. Introdução ao Netlify Drop
Netlify Drop
• Uma solução simples para deploy (implantação) de aplicações
web.
• Acesso: https://app.netlify.com/drop
• Basta arrastar a pasta com os arquivos HTML, CSS e
JavaScript.
• Será criada uma URL aleatória de acesso à aplicação.
• Com cadastro é possível modificar a URL.
Conclusão
• O Netlify Drop é uma das soluções simples e sem custo para
implantação (deploy) de aplicações Web.
Próxima aula
Prática utilizando o Netlify Drop.

Mais conteúdo relacionado

Semelhante a Slides .pptx.pdf

AULA 01 - Conceitos de HTML.pptx
AULA 01 - Conceitos de HTML.pptxAULA 01 - Conceitos de HTML.pptx
AULA 01 - Conceitos de HTML.pptx
JEANCLEVERSONPRATAS
 
Cs 02 introducao_html
Cs 02 introducao_htmlCs 02 introducao_html
Cs 02 introducao_html
Christoph de Freitas Santos
 
Curso de HTML5 - Aula 01
Curso de HTML5 - Aula 01   Curso de HTML5 - Aula 01
Curso de HTML5 - Aula 01
Léo Dias
 
Ementa de web1
Ementa de web1Ementa de web1
Ementa de web1
hilton barros
 
Apresentação - HTML5 e CSS3 Fabrica do Design
Apresentação - HTML5 e CSS3 Fabrica do DesignApresentação - HTML5 e CSS3 Fabrica do Design
Apresentação - HTML5 e CSS3 Fabrica do Design
Iuri Andreazza
 
PHP 10 CodeIgniter
PHP 10 CodeIgniterPHP 10 CodeIgniter
PHP 10 CodeIgniter
Regis Magalhães
 
Curso CSS 3 - Aula Introdutória com conceitos básicos
Curso CSS 3 - Aula Introdutória com conceitos básicosCurso CSS 3 - Aula Introdutória com conceitos básicos
Curso CSS 3 - Aula Introdutória com conceitos básicos
Tiago Antônio da Silva
 
Tema 1 | Introdução a PHP
Tema 1 | Introdução a PHPTema 1 | Introdução a PHP
Tema 1 | Introdução a PHP
Henry Raúl González Brito
 
MVP Virtual Conference 2013: Suporte a padrões Web
MVP Virtual Conference 2013: Suporte a padrões WebMVP Virtual Conference 2013: Suporte a padrões Web
MVP Virtual Conference 2013: Suporte a padrões Web
Rogério Moraes de Carvalho
 
Webstandards
WebstandardsWebstandards
Webstandards
Bruno Viana
 
Html5 Aula 6
Html5 Aula 6Html5 Aula 6
Html5 Aula 6
Jose Berardo
 
Curso HTML 5 - Aula Inicial
Curso HTML 5 - Aula InicialCurso HTML 5 - Aula Inicial
Curso HTML 5 - Aula Inicial
Tiago Antônio da Silva
 
Conhecendo o Django
Conhecendo o DjangoConhecendo o Django
Conhecendo o Django
Marcos Thomaz
 
Técnico de Informática de SistemasScripts CGI e Folhas de Estilo
Técnico de Informática de SistemasScripts CGI e Folhas de EstiloTécnico de Informática de SistemasScripts CGI e Folhas de Estilo
Técnico de Informática de SistemasScripts CGI e Folhas de Estilo
ElsaValada
 
Aula 01- web designer
Aula 01- web designerAula 01- web designer
Aula 01- web designer
Roney Sousa
 
Palestra Zend Framework na Campus Party 2011
Palestra Zend Framework na Campus Party 2011Palestra Zend Framework na Campus Party 2011
Palestra Zend Framework na Campus Party 2011
Flávio Lisboa
 
Javascript aula 01 - visão geral
Javascript   aula 01 - visão geralJavascript   aula 01 - visão geral
Javascript aula 01 - visão geral
Cristiano Pires Martins
 
Desvendando padrões para desenvolvimento web, base para o sucesso
Desvendando padrões para desenvolvimento web, base para o sucessoDesvendando padrões para desenvolvimento web, base para o sucesso
Desvendando padrões para desenvolvimento web, base para o sucesso
Ubiratan Z. do Nascimento
 
HTML5 Básico: Marcação (aula 1)
HTML5 Básico: Marcação (aula 1)HTML5 Básico: Marcação (aula 1)
HTML5 Básico: Marcação (aula 1)
Gustavo Zimmermann
 
XHTML e CSS
XHTML e CSSXHTML e CSS
XHTML e CSS
Fábio Flatschart
 

Semelhante a Slides .pptx.pdf (20)

AULA 01 - Conceitos de HTML.pptx
AULA 01 - Conceitos de HTML.pptxAULA 01 - Conceitos de HTML.pptx
AULA 01 - Conceitos de HTML.pptx
 
Cs 02 introducao_html
Cs 02 introducao_htmlCs 02 introducao_html
Cs 02 introducao_html
 
Curso de HTML5 - Aula 01
Curso de HTML5 - Aula 01   Curso de HTML5 - Aula 01
Curso de HTML5 - Aula 01
 
Ementa de web1
Ementa de web1Ementa de web1
Ementa de web1
 
Apresentação - HTML5 e CSS3 Fabrica do Design
Apresentação - HTML5 e CSS3 Fabrica do DesignApresentação - HTML5 e CSS3 Fabrica do Design
Apresentação - HTML5 e CSS3 Fabrica do Design
 
PHP 10 CodeIgniter
PHP 10 CodeIgniterPHP 10 CodeIgniter
PHP 10 CodeIgniter
 
Curso CSS 3 - Aula Introdutória com conceitos básicos
Curso CSS 3 - Aula Introdutória com conceitos básicosCurso CSS 3 - Aula Introdutória com conceitos básicos
Curso CSS 3 - Aula Introdutória com conceitos básicos
 
Tema 1 | Introdução a PHP
Tema 1 | Introdução a PHPTema 1 | Introdução a PHP
Tema 1 | Introdução a PHP
 
MVP Virtual Conference 2013: Suporte a padrões Web
MVP Virtual Conference 2013: Suporte a padrões WebMVP Virtual Conference 2013: Suporte a padrões Web
MVP Virtual Conference 2013: Suporte a padrões Web
 
Webstandards
WebstandardsWebstandards
Webstandards
 
Html5 Aula 6
Html5 Aula 6Html5 Aula 6
Html5 Aula 6
 
Curso HTML 5 - Aula Inicial
Curso HTML 5 - Aula InicialCurso HTML 5 - Aula Inicial
Curso HTML 5 - Aula Inicial
 
Conhecendo o Django
Conhecendo o DjangoConhecendo o Django
Conhecendo o Django
 
Técnico de Informática de SistemasScripts CGI e Folhas de Estilo
Técnico de Informática de SistemasScripts CGI e Folhas de EstiloTécnico de Informática de SistemasScripts CGI e Folhas de Estilo
Técnico de Informática de SistemasScripts CGI e Folhas de Estilo
 
Aula 01- web designer
Aula 01- web designerAula 01- web designer
Aula 01- web designer
 
Palestra Zend Framework na Campus Party 2011
Palestra Zend Framework na Campus Party 2011Palestra Zend Framework na Campus Party 2011
Palestra Zend Framework na Campus Party 2011
 
Javascript aula 01 - visão geral
Javascript   aula 01 - visão geralJavascript   aula 01 - visão geral
Javascript aula 01 - visão geral
 
Desvendando padrões para desenvolvimento web, base para o sucesso
Desvendando padrões para desenvolvimento web, base para o sucessoDesvendando padrões para desenvolvimento web, base para o sucesso
Desvendando padrões para desenvolvimento web, base para o sucesso
 
HTML5 Básico: Marcação (aula 1)
HTML5 Básico: Marcação (aula 1)HTML5 Básico: Marcação (aula 1)
HTML5 Básico: Marcação (aula 1)
 
XHTML e CSS
XHTML e CSSXHTML e CSS
XHTML e CSS
 

Slides .pptx.pdf

  • 1. Fundamentos de Desenvolvimento de Sistemas Capítulo 1 - HTML Dev & Data Prof. Raphael Gomide
  • 3. HTML • Hyper Text Markup Language • Linguagem de marcação para hipertexto. • Hipertexto: conteúdo dinâmico (links). • Encontra-se atualmente na versão 5. • HTML não pode ser considerada uma linguagem de programação! • Excelente fonte de documentação: https://developer.mozilla.org/pt-BR/docs/Web/HTML
  • 4. HTML • Permite a definição declarativa de elementos. • É utilizada para compor semanticamente uma página Web. • É constituída por elementos. • Elementos são delimitados por tags. • A grande maioria das tags possuem conteúdo. • Além disso, as tags podem possuir atributos. • Os atributos possuem valores.
  • 6. HTML – principais tags • <h1> a <h6> 🡪 títulos. • <p> 🡪 parágrafos. • <div> 🡪 divisões blocantes (quebra de linha). • <span> 🡪 divisões não blocantes. • <img> 🡪 definição de imagens. • <table> <thead> <tbody> <tr> <td> 🡪 definição de tabelas, linhas e colunas. • <ul> <ol> e <li> 🡪 listas e itens de lista. • <strong> e <em> 🡪 ênfase no texto. • <a> 🡪 âncoras (links). • <input> 🡪 entrada de texto. • <button> 🡪 botão. • <img /> 🡪 imagens.
  • 7. Conclusão • HTML é uma linguagem de marcação. • Utilizada para a definição de conteúdo na web. • Foco em semântica. • Composta de elementos. • Elementos são delimitados por tags. • Elementos com conteúdo precisam de tag de fechamento. • Tags podem possuir atributos. • Atributos podem possuir valores.
  • 9. Fundamentos de Desenvolvimento de Sistemas Capítulo 2 - CSS Dev & Data Prof. Raphael Gomide
  • 11. CSS • Cascading Style Sheets. • Folhas de estilo em cascata. • Tecnologia para o layout das aplicações web. • Foco no conteúdo visual. • Utilizam os atributos class e id. • Excelente fonte de documentação: https://developer.mozilla.org/pt-BR/docs/Web/CSS
  • 12. CSS • Seletores de classe são precedidos pelo símbolo de pontuação “." • Seletores de id são precedidos pelo símbolo de hashtag “#"
  • 14. CSS – principais propriedades • margin 🡪 margem externa. • padding 🡪 margem interna. • border 🡪 borda. • display 🡪 posicionamento de elementos. • font-size 🡪 tamanho de fonte. • font-family 🡪 tipo de fonte. • background-color 🡪 cor de fundo. • color 🡪 cor do texto. • cursor 🡪 tipo de cursor do mouse. • list-style-type 🡪 tipo de estilo de listas <ul><li>. • width 🡪 largura. • height 🡪 altura.
  • 15. Conclusão • CSS é uma linguagem de estilização. • Utilizada para a definição de estilos e layout na web. • Foco em aspecto visual. • Composta de seletores, propriedades e valores.
  • 17. Fundamentos de Desenvolvimento de Sistemas Capítulo 3 - DOM Dev & Data Prof. Raphael Gomide
  • 19. DOM • Document Object Model. • Modelo de Objeto de Documento. • Estrutura hierárquica de conteúdo HTML. • É possível manipular o DOM e CSS com JavaScript. • Excelente fonte de documentação: https://developer.mozilla.org/pt-BR/docs/Web/API/Document_ Object_Model
  • 21. JavaScript – principais comandos para manipular o DOM • document.querySelector 🡪 seletor de um único elemento (tag, class, id). • document.qurerySelectorAll 🡪 seletor de n elementos. • document.createElement 🡪 criação de elementos. • appendChild 🡪 inserção de filhos. • addEventListener 🡪 inclusão de um “escutador” de evento (quando). • classList.add 🡪 inclusão de classe CSS. • classList.remove 🡪 exclusão de classe CSS.
  • 22. Conclusão • É possível manipular o DOM e CSS com JavaScript. • Isso permite que os apps web sejam mais dinâmicos e interativos.
  • 23. Próxima aula Práticas com manipulação do DOM utilizando HTML, CSS e JavaScript.
  • 24. Fundamentos de Desenvolvimento de Sistemas Capítulo 4 - Introdução ao LocalStorage Dev & Data Prof. Raphael Gomide
  • 25. Aula 4.1. Introdução ao LocalStorage
  • 26. LocalStorage • Funcionalidade para armazenamento de dados nos navegadores. • Simples e, portanto, limitada. • Armazena conteúdo no formato de string. • Os dados podem ser excluídos pelo navegador ou usuário. • Excelente fonte de documentação: https://developer.mozilla.org/pt-BR/docs/Web/API/Window/lo calStorage
  • 27. Principais comandos relacionados ao LocalStorage • window.localStorage.getItem(key) 🡪 recupera dados relacionados à key • window.localStorage.setItem(key) 🡪 define dados relacionados à key. • JSON.parse(string) 🡪 Transforma string em JSON. Muito usado com getItem. • JSON.stringify(objeto) 🡪 Transforma JSON em string. Muito usado com setItem.
  • 28. Conclusão • LocalStorage é uma das possibilidades de armazenamento de dados em aplicações web. • É simples e também limitado. • Recomendado para dados não sensíveis e também cuja perda não implica em problemas com a aplicação.
  • 30. Fundamentos de Desenvolvimento de Sistemas Capítulo 5 - Introdução ao Netlify Drop Dev & Data Prof. Raphael Gomide
  • 31. Aula 5.1. Introdução ao Netlify Drop
  • 32. Netlify Drop • Uma solução simples para deploy (implantação) de aplicações web. • Acesso: https://app.netlify.com/drop • Basta arrastar a pasta com os arquivos HTML, CSS e JavaScript. • Será criada uma URL aleatória de acesso à aplicação. • Com cadastro é possível modificar a URL.
  • 33. Conclusão • O Netlify Drop é uma das soluções simples e sem custo para implantação (deploy) de aplicações Web.