SlideShare uma empresa Scribd logo
Curso HTML 5 - Aula Inicial
• Tiago Antônio da Silva
– Tecnólogo em Informática para Gestão de
Negócios – Fatec Mococa (2010).
– 7 anos de experiência em desenvolvimento web.
• 2 em empresas de e-commerce.
• 5 como profissional liberal.
– Mais informações:
• www.tiago.blog.br
• tiago@tiago.blog.br
• Preparação para o desenvolvimento de
interfaces de aplicativos na plataforma Web
em conformidade com os padrões vigentes.
– Base para estudos mais avançados.
– Exploração do processamento no Cliente
(paradigma cliente-servidor).
– Validação de código fonte conforma
especificações da W3C.
Curso HTML 5 - Aula Inicial
• Parte I:
– HTML e XHTML.
– HTML 5 e versões anteriores.
– HTML 5, novas funcionalidades, componentes e APIs.
• Parte II:
– CSS e CSS 2.1
– CSS 3
• Parte III:
– JavaScript
• DOM (Document Object Model)
• jQuery
• jQuery UI
• Slides.
• Lista de Exercícios.
– Códigos Implementados dentro e fora de sala.
• Apêndices de cada parte.
– Lista de tags, propriedades, métodos, etc.
• Livros da Bibliografia.
• 3 Provas Escritas:
– Sem consulta. Com questões abertas e de
múltipla escolha.
– “Conteúdo acumulativo”.
– Duração de 2 horas cada.
– Peso 1. Sendo valor máximo de 10,0 pontos.
• 1 Trabalho Final:
– Extraclasse.
– Tirar dúvidas em sala.
– Peso 3. Sendo o valor máximo de 10,0 pontos.
• Conteúdo HTML 5:
– Prova em: 29/09/2012
– Período: 15:00 às 17:00
• Conteúdo CSS 3:
– Prova em: 20/10/2012
– Período: 15:00 às 17:00
• Conteúdo JavaScript:
– Prova em: 01/12/2012
– Período: 15:00 às 17:00
• Trabalho Final do Curso:
– Individual
– Entrega: 01/12/2012
• Arquivo compactado, sendo o nome do arquivo, o
nome completo do aluno.
– Critérios de Avaliação
• Utilização dos conceitos vistos em sala.
• Coesão com normas e boas práticas.
• Criatividade.
• Site Comum.
• Loja Virtual.
• Agenda de contatos.
• Calculadora.
• Controle de Clientes.
• Locadora.
• Sistema do Mercadinho.
• Etc.
• Observações:
 Não utilize linguagens
server-side.
 Se for usar WebService
certifique-se que está
funcionando.
 Pode-se fazer releitura
e/ou melhoras no
projeto da lista de
exercícios.
• Média geral igual, ou superior a 5,0
• Frequência mínima de 75% nas aulas.
– Sendo 10 aulas, presença no mínimo em 8.
Client Side
• Linguagens?
– Marcação: HTML, XHTML,
HTML 5, CSS, etc.
– Programação: JavaScript
• Padrões de Projeto?
– MVC: Model, View, Controller.
• Repositório de Dados?
– Cookies?
– API WebStorage?
Server Side
• Linguagens?
– Marcação: XML, jSON, etc.
– Programação: PHP, Java, Ruby,
etc.
• Padrões de Projeto?
– MVC: Model, View, Controller.
• Repositório de Dados:
– Banco de Dados Relacionais:
MySQL, PostgreSQL.
– Arquivo texto?
Curso HTML 5 - Aula Inicial
• http://evolutionofweb.appspot.com
• Desenvolvimento nas três camadas:
– Camada de Conteúdo:
• XHTML, HTML 5 e xHTML 5.
– Camada de Apresentação:
• CSS e Frameworks CSS (jQuery UI, Twitter Bootstrap).
– Camada de Comportamentos:
• JavaScript (puro).
• jQuery.
• ExtJs.
• Prototype, etc.
Comporta as três
camadas:
- Conteúdo (HTML 5).
- Apresentação (CSS 3).
- Comportamento
(JavaScript).
• MVC (Três camadas: Model, View e Controller):
– Camada Model: Regras de negócio.
– Camada Controller: Controle de requisições.
– Camada View: Apresentação da aplicação:
• Contém as outras três camadas onde:
– HTML 5: traz o conteúdo puro.
– CSS 3: estilizará este conteúdo puro.
– JavaScript: adiciona os comportamentos a View.
Curso HTML 5 - Aula Inicial
• Onde o JavaScript está
sendo chamado?
– Se chamado, qual seria o
caminho do fluxo?
– Para quem ele
retornaria?
Curso HTML 5 - Aula Inicial
• Rodam no navegador, portanto:
– Não é necessário instalar.
– Está sujeita a incompatibilidades.
– Principais Tecnologias:
• HTML 5.
• CSS 3.
• JavaScript
– DOM
– XHR
Container Servidor
• Servidor Web
– Apache
– Apache Tomcat.
Container do Cliente
• Navegador:
– Firefox.
– Chrome.
– Opera.
– Safari.
– Microsoft Internet Explorer
• Linguagem de Marcação:
– Hierárquica.
– Interpretada.
– Sempre se inicia com a definição do DOCTYPE.
– Utilização do charset unicode: UTF-8.
• Internacionalização: resolver problemas de acentos.
– Estrutura geral da linguagem:
• <tag atributo="valor"/>
• <tag atributo="valor">Filho.</tag>
• Diz ao navegador o que você quis
implementar no documento.
– Por exemplo: no HTML 5 o navegador vai buscar
implementar os novos elementos, caso você tenha
definido na marcação.
• Regras de renderização.
– Cada versão da linguagem tem suas regras
específicas.
• Validação do documento.
• Conjuto de caracteres presentes na sua
aplicação.
– Por exemplo: no português temos o “ç”, em inglês
não.
• Aconselha-se a definição do chamado Unicode
no documento.
– Por que? A internet é uma rede mundial, logo
qualquer pessoal, de qualquer país pode acessar
sua aplicação.
• Dados não exibidos ao usuário.
– Tag: <meta />
• Utilizado por buscadores:
– Google, Bing, Yahoo, etc.
• Comparação do conteúdo do site com os
meta-dados.
• Analisador de meta-tags:
– http://www.submitexpress.com/analyzer/
• Resumo do curso.
• Manipulação de eventos:
– onclick
– onmouseover
• Analise de objetos do JavaScript:
– document
– window
www.tiago.blog.br
tiago@tiago.blog.br

Mais conteúdo relacionado

Mais procurados

T03_LM3: Javascript (2013-2014)
T03_LM3: Javascript (2013-2014)T03_LM3: Javascript (2013-2014)
T03_LM3: Javascript (2013-2014)
Carlos Santos
 
Front-end javascript unit testing and mock
Front-end javascript unit testing and mockFront-end javascript unit testing and mock
Front-end javascript unit testing and mock
felipefsilva
 
Como se tornar um viciado em performance em 5 passos
Como se tornar um viciado em performance em 5 passosComo se tornar um viciado em performance em 5 passos
Como se tornar um viciado em performance em 5 passos
Pedro Chaves
 
Extração de Dados da Web com Selenium WebDriver - SQLSaturday #817 - Joinville
Extração de Dados da Web com Selenium WebDriver - SQLSaturday #817 - JoinvilleExtração de Dados da Web com Selenium WebDriver - SQLSaturday #817 - Joinville
Extração de Dados da Web com Selenium WebDriver - SQLSaturday #817 - Joinville
Renato Groff
 
Dividindo responsabilidades com VRaptor, Rest, HTML5 e CSS3
Dividindo responsabilidades com VRaptor, Rest, HTML5 e CSS3Dividindo responsabilidades com VRaptor, Rest, HTML5 e CSS3
Dividindo responsabilidades com VRaptor, Rest, HTML5 e CSS3
André Luiz Forchesatto
 
Joomla! do desktop ao datacenter
Joomla! do desktop ao datacenterJoomla! do desktop ao datacenter
Joomla! do desktop ao datacenter
Paulino Michelazzo
 
5 dicas para melhorar a legibilidade de código dos testes automáticos
5 dicas para melhorar a legibilidade de código dos testes automáticos 5 dicas para melhorar a legibilidade de código dos testes automáticos
5 dicas para melhorar a legibilidade de código dos testes automáticos
Ariane Izac
 
Curso de php
Curso de phpCurso de php
Curso de php
Usando Bits
 
Rapid Prototyping
Rapid PrototypingRapid Prototyping
Rapid Prototyping
Ivo Gomes
 
Usando o Selenium VBA para extrair informações da Web
Usando o Selenium VBA para extrair informações da WebUsando o Selenium VBA para extrair informações da Web
Usando o Selenium VBA para extrair informações da Web
Tomás Vásquez
 
O que move a web atualmente?
O que move a web atualmente?O que move a web atualmente?
O que move a web atualmente?
Fabio Janiszevski
 
Turbinando seu workflow com cakePHP
Turbinando seu workflow com cakePHPTurbinando seu workflow com cakePHP
Turbinando seu workflow com cakePHP
Tiago Matos
 
Python na Web - Apresentando o web2py
Python na Web - Apresentando o web2pyPython na Web - Apresentando o web2py
Python na Web - Apresentando o web2py
Matheus Cardoso
 
Django Channels - Aplicações real time com Django
Django Channels - Aplicações real time com DjangoDjango Channels - Aplicações real time com Django
Django Channels - Aplicações real time com Django
Paula Grangeiro
 
Palestra: Otimização de websites
Palestra: Otimização de websitesPalestra: Otimização de websites
Palestra: Otimização de websites
Intrus
 
Design builder em testes
Design builder em testesDesign builder em testes
Design builder em testes
TestRock!
 
WordCamp 2011 - BuscaPé Developer
WordCamp 2011 - BuscaPé DeveloperWordCamp 2011 - BuscaPé Developer
WordCamp 2011 - BuscaPé Developer
Paulino Michelazzo
 
Web tools pt-br
Web tools pt-brWeb tools pt-br
Web tools pt-br
Paulo Mattos
 
[MTC 2021] Tests smells: aquele cheirinho de que algo não está bom no seu cód...
[MTC 2021] Tests smells: aquele cheirinho de que algo não está bom no seu cód...[MTC 2021] Tests smells: aquele cheirinho de que algo não está bom no seu cód...
[MTC 2021] Tests smells: aquele cheirinho de que algo não está bom no seu cód...
minastestingconference
 
CEJS 0.0.2
CEJS 0.0.2CEJS 0.0.2
CEJS 0.0.2
hvitorino
 

Mais procurados (20)

T03_LM3: Javascript (2013-2014)
T03_LM3: Javascript (2013-2014)T03_LM3: Javascript (2013-2014)
T03_LM3: Javascript (2013-2014)
 
Front-end javascript unit testing and mock
Front-end javascript unit testing and mockFront-end javascript unit testing and mock
Front-end javascript unit testing and mock
 
Como se tornar um viciado em performance em 5 passos
Como se tornar um viciado em performance em 5 passosComo se tornar um viciado em performance em 5 passos
Como se tornar um viciado em performance em 5 passos
 
Extração de Dados da Web com Selenium WebDriver - SQLSaturday #817 - Joinville
Extração de Dados da Web com Selenium WebDriver - SQLSaturday #817 - JoinvilleExtração de Dados da Web com Selenium WebDriver - SQLSaturday #817 - Joinville
Extração de Dados da Web com Selenium WebDriver - SQLSaturday #817 - Joinville
 
Dividindo responsabilidades com VRaptor, Rest, HTML5 e CSS3
Dividindo responsabilidades com VRaptor, Rest, HTML5 e CSS3Dividindo responsabilidades com VRaptor, Rest, HTML5 e CSS3
Dividindo responsabilidades com VRaptor, Rest, HTML5 e CSS3
 
Joomla! do desktop ao datacenter
Joomla! do desktop ao datacenterJoomla! do desktop ao datacenter
Joomla! do desktop ao datacenter
 
5 dicas para melhorar a legibilidade de código dos testes automáticos
5 dicas para melhorar a legibilidade de código dos testes automáticos 5 dicas para melhorar a legibilidade de código dos testes automáticos
5 dicas para melhorar a legibilidade de código dos testes automáticos
 
Curso de php
Curso de phpCurso de php
Curso de php
 
Rapid Prototyping
Rapid PrototypingRapid Prototyping
Rapid Prototyping
 
Usando o Selenium VBA para extrair informações da Web
Usando o Selenium VBA para extrair informações da WebUsando o Selenium VBA para extrair informações da Web
Usando o Selenium VBA para extrair informações da Web
 
O que move a web atualmente?
O que move a web atualmente?O que move a web atualmente?
O que move a web atualmente?
 
Turbinando seu workflow com cakePHP
Turbinando seu workflow com cakePHPTurbinando seu workflow com cakePHP
Turbinando seu workflow com cakePHP
 
Python na Web - Apresentando o web2py
Python na Web - Apresentando o web2pyPython na Web - Apresentando o web2py
Python na Web - Apresentando o web2py
 
Django Channels - Aplicações real time com Django
Django Channels - Aplicações real time com DjangoDjango Channels - Aplicações real time com Django
Django Channels - Aplicações real time com Django
 
Palestra: Otimização de websites
Palestra: Otimização de websitesPalestra: Otimização de websites
Palestra: Otimização de websites
 
Design builder em testes
Design builder em testesDesign builder em testes
Design builder em testes
 
WordCamp 2011 - BuscaPé Developer
WordCamp 2011 - BuscaPé DeveloperWordCamp 2011 - BuscaPé Developer
WordCamp 2011 - BuscaPé Developer
 
Web tools pt-br
Web tools pt-brWeb tools pt-br
Web tools pt-br
 
[MTC 2021] Tests smells: aquele cheirinho de que algo não está bom no seu cód...
[MTC 2021] Tests smells: aquele cheirinho de que algo não está bom no seu cód...[MTC 2021] Tests smells: aquele cheirinho de que algo não está bom no seu cód...
[MTC 2021] Tests smells: aquele cheirinho de que algo não está bom no seu cód...
 
CEJS 0.0.2
CEJS 0.0.2CEJS 0.0.2
CEJS 0.0.2
 

Semelhante a Curso HTML 5 - Aula Inicial

Slide Aula - Curso CakePHP
Slide Aula - Curso CakePHPSlide Aula - Curso CakePHP
Slide Aula - Curso CakePHP
Rangel Javier
 
Python mudando o modo de desenvolver para a internet
Python mudando o modo de desenvolver para a internetPython mudando o modo de desenvolver para a internet
Python mudando o modo de desenvolver para a internet
Marcos Petry
 
Python mudando o modo de desenvolver para a web - Marcos Daniel Petry
Python mudando o modo de desenvolver para a web  - Marcos Daniel PetryPython mudando o modo de desenvolver para a web  - Marcos Daniel Petry
Python mudando o modo de desenvolver para a web - Marcos Daniel Petry
Tchelinux
 
Web Tools Pt Br
Web Tools Pt BrWeb Tools Pt Br
Web Tools Pt Br
Paulo Mattos
 
Desenvolvimento Web
Desenvolvimento WebDesenvolvimento Web
Desenvolvimento Web
Claudio Barbosa
 
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
 
Palestra ror edted
Palestra ror edtedPalestra ror edted
Palestra ror edted
brunoaalves
 
ASP.Net Performance – A pragmatic approach - Luis Paulino
ASP.Net Performance – A pragmatic approach - Luis PaulinoASP.Net Performance – A pragmatic approach - Luis Paulino
ASP.Net Performance – A pragmatic approach - Luis Paulino
Comunidade NetPonto
 
(A04 e A05) LabMM3 - JavaScript
(A04 e A05) LabMM3 - JavaScript(A04 e A05) LabMM3 - JavaScript
(A04 e A05) LabMM3 - JavaScript
Carlos Santos
 
Desenvolviemento web com ASP.Net e MVC
Desenvolviemento web com ASP.Net e MVCDesenvolviemento web com ASP.Net e MVC
Desenvolviemento web com ASP.Net e MVC
Cleziel Franzoni da Costa
 
Monitorando APIs REST com o Application Insights
Monitorando APIs REST com o Application InsightsMonitorando APIs REST com o Application Insights
Monitorando APIs REST com o Application Insights
Renato Groff
 
Ruby on Rails: um estudo de viabilidade em ambientes empresariais
Ruby on Rails: um estudo de viabilidade em ambientes empresariaisRuby on Rails: um estudo de viabilidade em ambientes empresariais
Ruby on Rails: um estudo de viabilidade em ambientes empresariais
Rodrigo Recio
 
Apresentação Minas - Desenvolvendo Sites
Apresentação Minas - Desenvolvendo SitesApresentação Minas - Desenvolvendo Sites
Apresentação Minas - Desenvolvendo Sites
thiagolima
 
Introdução ao RUP
Introdução ao RUPIntrodução ao RUP
Introdução ao RUP
Igor Takenami
 
Técnicas e recursos para desenvolvimento Web em cenários de grande escala
Técnicas e recursos para desenvolvimento Web em cenários de grande escalaTécnicas e recursos para desenvolvimento Web em cenários de grande escala
Técnicas e recursos para desenvolvimento Web em cenários de grande escala
Alexandre Tarifa
 
Testando Aplicações Web com Selenium WebDriver - .NET SP - Novembro-2018
Testando Aplicações Web com Selenium WebDriver - .NET SP - Novembro-2018Testando Aplicações Web com Selenium WebDriver - .NET SP - Novembro-2018
Testando Aplicações Web com Selenium WebDriver - .NET SP - Novembro-2018
Renato Groff
 
Desenvolvimento web produtivo
Desenvolvimento web produtivoDesenvolvimento web produtivo
Desenvolvimento web produtivo
Bruno Luiz Pereira da Silva
 
Menos teste e mais qualidade - como equilibrar essa equação?
Menos teste e mais qualidade - como equilibrar essa equação?Menos teste e mais qualidade - como equilibrar essa equação?
Menos teste e mais qualidade - como equilibrar essa equação?
Igor Abade
 
Sonarqube
SonarqubeSonarqube
Sonarqube
CDS
 
4. Introdução ao PHP.pdf
4. Introdução ao PHP.pdf4. Introdução ao PHP.pdf
4. Introdução ao PHP.pdf
RubenManhia
 

Semelhante a Curso HTML 5 - Aula Inicial (20)

Slide Aula - Curso CakePHP
Slide Aula - Curso CakePHPSlide Aula - Curso CakePHP
Slide Aula - Curso CakePHP
 
Python mudando o modo de desenvolver para a internet
Python mudando o modo de desenvolver para a internetPython mudando o modo de desenvolver para a internet
Python mudando o modo de desenvolver para a internet
 
Python mudando o modo de desenvolver para a web - Marcos Daniel Petry
Python mudando o modo de desenvolver para a web  - Marcos Daniel PetryPython mudando o modo de desenvolver para a web  - Marcos Daniel Petry
Python mudando o modo de desenvolver para a web - Marcos Daniel Petry
 
Web Tools Pt Br
Web Tools Pt BrWeb Tools Pt Br
Web Tools Pt Br
 
Desenvolvimento Web
Desenvolvimento WebDesenvolvimento Web
Desenvolvimento Web
 
Javascript aula 01 - visão geral
Javascript   aula 01 - visão geralJavascript   aula 01 - visão geral
Javascript aula 01 - visão geral
 
Palestra ror edted
Palestra ror edtedPalestra ror edted
Palestra ror edted
 
ASP.Net Performance – A pragmatic approach - Luis Paulino
ASP.Net Performance – A pragmatic approach - Luis PaulinoASP.Net Performance – A pragmatic approach - Luis Paulino
ASP.Net Performance – A pragmatic approach - Luis Paulino
 
(A04 e A05) LabMM3 - JavaScript
(A04 e A05) LabMM3 - JavaScript(A04 e A05) LabMM3 - JavaScript
(A04 e A05) LabMM3 - JavaScript
 
Desenvolviemento web com ASP.Net e MVC
Desenvolviemento web com ASP.Net e MVCDesenvolviemento web com ASP.Net e MVC
Desenvolviemento web com ASP.Net e MVC
 
Monitorando APIs REST com o Application Insights
Monitorando APIs REST com o Application InsightsMonitorando APIs REST com o Application Insights
Monitorando APIs REST com o Application Insights
 
Ruby on Rails: um estudo de viabilidade em ambientes empresariais
Ruby on Rails: um estudo de viabilidade em ambientes empresariaisRuby on Rails: um estudo de viabilidade em ambientes empresariais
Ruby on Rails: um estudo de viabilidade em ambientes empresariais
 
Apresentação Minas - Desenvolvendo Sites
Apresentação Minas - Desenvolvendo SitesApresentação Minas - Desenvolvendo Sites
Apresentação Minas - Desenvolvendo Sites
 
Introdução ao RUP
Introdução ao RUPIntrodução ao RUP
Introdução ao RUP
 
Técnicas e recursos para desenvolvimento Web em cenários de grande escala
Técnicas e recursos para desenvolvimento Web em cenários de grande escalaTécnicas e recursos para desenvolvimento Web em cenários de grande escala
Técnicas e recursos para desenvolvimento Web em cenários de grande escala
 
Testando Aplicações Web com Selenium WebDriver - .NET SP - Novembro-2018
Testando Aplicações Web com Selenium WebDriver - .NET SP - Novembro-2018Testando Aplicações Web com Selenium WebDriver - .NET SP - Novembro-2018
Testando Aplicações Web com Selenium WebDriver - .NET SP - Novembro-2018
 
Desenvolvimento web produtivo
Desenvolvimento web produtivoDesenvolvimento web produtivo
Desenvolvimento web produtivo
 
Menos teste e mais qualidade - como equilibrar essa equação?
Menos teste e mais qualidade - como equilibrar essa equação?Menos teste e mais qualidade - como equilibrar essa equação?
Menos teste e mais qualidade - como equilibrar essa equação?
 
Sonarqube
SonarqubeSonarqube
Sonarqube
 
4. Introdução ao PHP.pdf
4. Introdução ao PHP.pdf4. Introdução ao PHP.pdf
4. Introdução ao PHP.pdf
 

Mais de Tiago Antônio da Silva

SIF - Sistemas de Informacao e Regressao Linear
SIF - Sistemas de Informacao e Regressao LinearSIF - Sistemas de Informacao e Regressao Linear
SIF - Sistemas de Informacao e Regressao Linear
Tiago Antônio da Silva
 
Manual de Sovrevivência do Aluno
Manual de Sovrevivência do AlunoManual de Sovrevivência do Aluno
Manual de Sovrevivência do Aluno
Tiago Antônio da Silva
 
Git e GitHub: Versionamento de Código Fácil
Git e GitHub: Versionamento de Código FácilGit e GitHub: Versionamento de Código Fácil
Git e GitHub: Versionamento de Código Fácil
Tiago Antônio da Silva
 
Caminhos na Carreira Acadêmica: A visão de um tecnólogo que fez mestrado
Caminhos na Carreira Acadêmica: A visão de um tecnólogo que fez mestradoCaminhos na Carreira Acadêmica: A visão de um tecnólogo que fez mestrado
Caminhos na Carreira Acadêmica: A visão de um tecnólogo que fez mestrado
Tiago Antônio da Silva
 
Análise e Projeto de Sistemas: Mockup de um Crud no Balsamiq
Análise e Projeto de Sistemas: Mockup de um Crud no BalsamiqAnálise e Projeto de Sistemas: Mockup de um Crud no Balsamiq
Análise e Projeto de Sistemas: Mockup de um Crud no Balsamiq
Tiago Antônio da Silva
 
Redes - Camada de Enlace de Dados
Redes - Camada de Enlace de DadosRedes - Camada de Enlace de Dados
Redes - Camada de Enlace de Dados
Tiago Antônio da Silva
 
Xamarin - Aula 2.1 - AppDolares - Criando a Primeira Interface
Xamarin - Aula 2.1 - AppDolares - Criando a Primeira InterfaceXamarin - Aula 2.1 - AppDolares - Criando a Primeira Interface
Xamarin - Aula 2.1 - AppDolares - Criando a Primeira Interface
Tiago Antônio da Silva
 
Xamarin - Aula 2 - Criando o Primeiro Projeto com Xamarin Forms
Xamarin - Aula 2 - Criando o Primeiro Projeto com Xamarin FormsXamarin - Aula 2 - Criando o Primeiro Projeto com Xamarin Forms
Xamarin - Aula 2 - Criando o Primeiro Projeto com Xamarin Forms
Tiago Antônio da Silva
 
O que são Redes de Computadores
O que são Redes de ComputadoresO que são Redes de Computadores
O que são Redes de Computadores
Tiago Antônio da Silva
 
Redes - Camada Física e Meios de Transmissão
Redes - Camada Física e Meios de TransmissãoRedes - Camada Física e Meios de Transmissão
Redes - Camada Física e Meios de Transmissão
Tiago Antônio da Silva
 
Defesa do meu Mestrado: Segmentação de Imagens 3D com Crescimento de Regiões
Defesa do meu Mestrado: Segmentação de Imagens 3D com Crescimento de RegiõesDefesa do meu Mestrado: Segmentação de Imagens 3D com Crescimento de Regiões
Defesa do meu Mestrado: Segmentação de Imagens 3D com Crescimento de Regiões
Tiago Antônio da Silva
 
Folhas de Estilo XSL
Folhas de Estilo XSLFolhas de Estilo XSL
Folhas de Estilo XSL
Tiago Antônio da Silva
 
Divisão de Imagens 3D com CloudCompare
Divisão de Imagens 3D com CloudCompareDivisão de Imagens 3D com CloudCompare
Divisão de Imagens 3D com CloudCompare
Tiago Antônio da Silva
 
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
 
Curso JavaScript - Aula jQuery
Curso JavaScript - Aula jQueryCurso JavaScript - Aula jQuery
Curso JavaScript - Aula jQuery
Tiago Antônio da Silva
 
Curso JavaScript - Aula sobre DOM e Ajax
Curso JavaScript - Aula sobre DOM e AjaxCurso JavaScript - Aula sobre DOM e Ajax
Curso JavaScript - Aula sobre DOM e Ajax
Tiago Antônio da Silva
 
Curso JavaScript - Aula de Introdução como Programar
Curso JavaScript - Aula de Introdução como ProgramarCurso JavaScript - Aula de Introdução como Programar
Curso JavaScript - Aula de Introdução como Programar
Tiago Antônio da Silva
 
Curso HTML 5 - Aula com Formulários, Imagens, Áudio e Vídeo
Curso HTML 5 - Aula com Formulários, Imagens, Áudio e VídeoCurso HTML 5 - Aula com Formulários, Imagens, Áudio e Vídeo
Curso HTML 5 - Aula com Formulários, Imagens, Áudio e Vídeo
Tiago Antônio da Silva
 
Curso HTML 5 - Construindo um Layout
Curso HTML 5 - Construindo um LayoutCurso HTML 5 - Construindo um Layout
Curso HTML 5 - Construindo um Layout
Tiago Antônio da Silva
 
Aula C#: Acesso ao MySQL usando AppConfig
Aula C#: Acesso ao MySQL usando AppConfigAula C#: Acesso ao MySQL usando AppConfig
Aula C#: Acesso ao MySQL usando AppConfig
Tiago Antônio da Silva
 

Mais de Tiago Antônio da Silva (20)

SIF - Sistemas de Informacao e Regressao Linear
SIF - Sistemas de Informacao e Regressao LinearSIF - Sistemas de Informacao e Regressao Linear
SIF - Sistemas de Informacao e Regressao Linear
 
Manual de Sovrevivência do Aluno
Manual de Sovrevivência do AlunoManual de Sovrevivência do Aluno
Manual de Sovrevivência do Aluno
 
Git e GitHub: Versionamento de Código Fácil
Git e GitHub: Versionamento de Código FácilGit e GitHub: Versionamento de Código Fácil
Git e GitHub: Versionamento de Código Fácil
 
Caminhos na Carreira Acadêmica: A visão de um tecnólogo que fez mestrado
Caminhos na Carreira Acadêmica: A visão de um tecnólogo que fez mestradoCaminhos na Carreira Acadêmica: A visão de um tecnólogo que fez mestrado
Caminhos na Carreira Acadêmica: A visão de um tecnólogo que fez mestrado
 
Análise e Projeto de Sistemas: Mockup de um Crud no Balsamiq
Análise e Projeto de Sistemas: Mockup de um Crud no BalsamiqAnálise e Projeto de Sistemas: Mockup de um Crud no Balsamiq
Análise e Projeto de Sistemas: Mockup de um Crud no Balsamiq
 
Redes - Camada de Enlace de Dados
Redes - Camada de Enlace de DadosRedes - Camada de Enlace de Dados
Redes - Camada de Enlace de Dados
 
Xamarin - Aula 2.1 - AppDolares - Criando a Primeira Interface
Xamarin - Aula 2.1 - AppDolares - Criando a Primeira InterfaceXamarin - Aula 2.1 - AppDolares - Criando a Primeira Interface
Xamarin - Aula 2.1 - AppDolares - Criando a Primeira Interface
 
Xamarin - Aula 2 - Criando o Primeiro Projeto com Xamarin Forms
Xamarin - Aula 2 - Criando o Primeiro Projeto com Xamarin FormsXamarin - Aula 2 - Criando o Primeiro Projeto com Xamarin Forms
Xamarin - Aula 2 - Criando o Primeiro Projeto com Xamarin Forms
 
O que são Redes de Computadores
O que são Redes de ComputadoresO que são Redes de Computadores
O que são Redes de Computadores
 
Redes - Camada Física e Meios de Transmissão
Redes - Camada Física e Meios de TransmissãoRedes - Camada Física e Meios de Transmissão
Redes - Camada Física e Meios de Transmissão
 
Defesa do meu Mestrado: Segmentação de Imagens 3D com Crescimento de Regiões
Defesa do meu Mestrado: Segmentação de Imagens 3D com Crescimento de RegiõesDefesa do meu Mestrado: Segmentação de Imagens 3D com Crescimento de Regiões
Defesa do meu Mestrado: Segmentação de Imagens 3D com Crescimento de Regiões
 
Folhas de Estilo XSL
Folhas de Estilo XSLFolhas de Estilo XSL
Folhas de Estilo XSL
 
Divisão de Imagens 3D com CloudCompare
Divisão de Imagens 3D com CloudCompareDivisão de Imagens 3D com CloudCompare
Divisão de Imagens 3D com CloudCompare
 
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
 
Curso JavaScript - Aula jQuery
Curso JavaScript - Aula jQueryCurso JavaScript - Aula jQuery
Curso JavaScript - Aula jQuery
 
Curso JavaScript - Aula sobre DOM e Ajax
Curso JavaScript - Aula sobre DOM e AjaxCurso JavaScript - Aula sobre DOM e Ajax
Curso JavaScript - Aula sobre DOM e Ajax
 
Curso JavaScript - Aula de Introdução como Programar
Curso JavaScript - Aula de Introdução como ProgramarCurso JavaScript - Aula de Introdução como Programar
Curso JavaScript - Aula de Introdução como Programar
 
Curso HTML 5 - Aula com Formulários, Imagens, Áudio e Vídeo
Curso HTML 5 - Aula com Formulários, Imagens, Áudio e VídeoCurso HTML 5 - Aula com Formulários, Imagens, Áudio e Vídeo
Curso HTML 5 - Aula com Formulários, Imagens, Áudio e Vídeo
 
Curso HTML 5 - Construindo um Layout
Curso HTML 5 - Construindo um LayoutCurso HTML 5 - Construindo um Layout
Curso HTML 5 - Construindo um Layout
 
Aula C#: Acesso ao MySQL usando AppConfig
Aula C#: Acesso ao MySQL usando AppConfigAula C#: Acesso ao MySQL usando AppConfig
Aula C#: Acesso ao MySQL usando AppConfig
 

Curso HTML 5 - Aula Inicial

  • 2. • Tiago Antônio da Silva – Tecnólogo em Informática para Gestão de Negócios – Fatec Mococa (2010). – 7 anos de experiência em desenvolvimento web. • 2 em empresas de e-commerce. • 5 como profissional liberal. – Mais informações: • www.tiago.blog.br • tiago@tiago.blog.br
  • 3. • Preparação para o desenvolvimento de interfaces de aplicativos na plataforma Web em conformidade com os padrões vigentes. – Base para estudos mais avançados. – Exploração do processamento no Cliente (paradigma cliente-servidor). – Validação de código fonte conforma especificações da W3C.
  • 5. • Parte I: – HTML e XHTML. – HTML 5 e versões anteriores. – HTML 5, novas funcionalidades, componentes e APIs. • Parte II: – CSS e CSS 2.1 – CSS 3 • Parte III: – JavaScript • DOM (Document Object Model) • jQuery • jQuery UI
  • 6. • Slides. • Lista de Exercícios. – Códigos Implementados dentro e fora de sala. • Apêndices de cada parte. – Lista de tags, propriedades, métodos, etc. • Livros da Bibliografia.
  • 7. • 3 Provas Escritas: – Sem consulta. Com questões abertas e de múltipla escolha. – “Conteúdo acumulativo”. – Duração de 2 horas cada. – Peso 1. Sendo valor máximo de 10,0 pontos. • 1 Trabalho Final: – Extraclasse. – Tirar dúvidas em sala. – Peso 3. Sendo o valor máximo de 10,0 pontos.
  • 8. • Conteúdo HTML 5: – Prova em: 29/09/2012 – Período: 15:00 às 17:00 • Conteúdo CSS 3: – Prova em: 20/10/2012 – Período: 15:00 às 17:00 • Conteúdo JavaScript: – Prova em: 01/12/2012 – Período: 15:00 às 17:00
  • 9. • Trabalho Final do Curso: – Individual – Entrega: 01/12/2012 • Arquivo compactado, sendo o nome do arquivo, o nome completo do aluno. – Critérios de Avaliação • Utilização dos conceitos vistos em sala. • Coesão com normas e boas práticas. • Criatividade.
  • 10. • Site Comum. • Loja Virtual. • Agenda de contatos. • Calculadora. • Controle de Clientes. • Locadora. • Sistema do Mercadinho. • Etc. • Observações:  Não utilize linguagens server-side.  Se for usar WebService certifique-se que está funcionando.  Pode-se fazer releitura e/ou melhoras no projeto da lista de exercícios.
  • 11. • Média geral igual, ou superior a 5,0 • Frequência mínima de 75% nas aulas. – Sendo 10 aulas, presença no mínimo em 8.
  • 12. Client Side • Linguagens? – Marcação: HTML, XHTML, HTML 5, CSS, etc. – Programação: JavaScript • Padrões de Projeto? – MVC: Model, View, Controller. • Repositório de Dados? – Cookies? – API WebStorage? Server Side • Linguagens? – Marcação: XML, jSON, etc. – Programação: PHP, Java, Ruby, etc. • Padrões de Projeto? – MVC: Model, View, Controller. • Repositório de Dados: – Banco de Dados Relacionais: MySQL, PostgreSQL. – Arquivo texto?
  • 15. • Desenvolvimento nas três camadas: – Camada de Conteúdo: • XHTML, HTML 5 e xHTML 5. – Camada de Apresentação: • CSS e Frameworks CSS (jQuery UI, Twitter Bootstrap). – Camada de Comportamentos: • JavaScript (puro). • jQuery. • ExtJs. • Prototype, etc.
  • 16. Comporta as três camadas: - Conteúdo (HTML 5). - Apresentação (CSS 3). - Comportamento (JavaScript).
  • 17. • MVC (Três camadas: Model, View e Controller): – Camada Model: Regras de negócio. – Camada Controller: Controle de requisições. – Camada View: Apresentação da aplicação: • Contém as outras três camadas onde: – HTML 5: traz o conteúdo puro. – CSS 3: estilizará este conteúdo puro. – JavaScript: adiciona os comportamentos a View.
  • 19. • Onde o JavaScript está sendo chamado? – Se chamado, qual seria o caminho do fluxo? – Para quem ele retornaria?
  • 21. • Rodam no navegador, portanto: – Não é necessário instalar. – Está sujeita a incompatibilidades. – Principais Tecnologias: • HTML 5. • CSS 3. • JavaScript – DOM – XHR
  • 22. Container Servidor • Servidor Web – Apache – Apache Tomcat. Container do Cliente • Navegador: – Firefox. – Chrome. – Opera. – Safari. – Microsoft Internet Explorer
  • 23. • Linguagem de Marcação: – Hierárquica. – Interpretada. – Sempre se inicia com a definição do DOCTYPE. – Utilização do charset unicode: UTF-8. • Internacionalização: resolver problemas de acentos. – Estrutura geral da linguagem: • <tag atributo="valor"/> • <tag atributo="valor">Filho.</tag>
  • 24. • Diz ao navegador o que você quis implementar no documento. – Por exemplo: no HTML 5 o navegador vai buscar implementar os novos elementos, caso você tenha definido na marcação. • Regras de renderização. – Cada versão da linguagem tem suas regras específicas. • Validação do documento.
  • 25. • Conjuto de caracteres presentes na sua aplicação. – Por exemplo: no português temos o “ç”, em inglês não. • Aconselha-se a definição do chamado Unicode no documento. – Por que? A internet é uma rede mundial, logo qualquer pessoal, de qualquer país pode acessar sua aplicação.
  • 26. • Dados não exibidos ao usuário. – Tag: <meta /> • Utilizado por buscadores: – Google, Bing, Yahoo, etc. • Comparação do conteúdo do site com os meta-dados. • Analisador de meta-tags: – http://www.submitexpress.com/analyzer/
  • 27. • Resumo do curso. • Manipulação de eventos: – onclick – onmouseover • Analise de objetos do JavaScript: – document – window