Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

Curso HTML 5 - Aula Inicial

44 views

Published on

Na Aula inicial vemos os conceitos básicos do curso e construção de um documento HTML básico.

Published in: Software
  • Be the first to comment

  • Be the first to like this

Curso HTML 5 - Aula Inicial

  1. 1. • 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
  2. 2. • 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.
  3. 3. • 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
  4. 4. • 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.
  5. 5. • 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.
  6. 6. • 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
  7. 7. • 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.
  8. 8. • 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.
  9. 9. • 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.
  10. 10. 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?
  11. 11. • http://evolutionofweb.appspot.com
  12. 12. • 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.
  13. 13. Comporta as três camadas: - Conteúdo (HTML 5). - Apresentação (CSS 3). - Comportamento (JavaScript).
  14. 14. • 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.
  15. 15. • Onde o JavaScript está sendo chamado? – Se chamado, qual seria o caminho do fluxo? – Para quem ele retornaria?
  16. 16. • Rodam no navegador, portanto: – Não é necessário instalar. – Está sujeita a incompatibilidades. – Principais Tecnologias: • HTML 5. • CSS 3. • JavaScript – DOM – XHR
  17. 17. Container Servidor • Servidor Web – Apache – Apache Tomcat. Container do Cliente • Navegador: – Firefox. – Chrome. – Opera. – Safari. – Microsoft Internet Explorer
  18. 18. • 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>
  19. 19. • 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.
  20. 20. • 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.
  21. 21. • 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/
  22. 22. • Resumo do curso. • Manipulação de eventos: – onclick – onmouseover • Analise de objetos do JavaScript: – document – window
  23. 23. www.tiago.blog.br tiago@tiago.blog.br

×