HTML5 Avançado – – Minha reação quando preciso desenvolver para IE8 e IE7

View Github Repository Open presentation in a new window

allanesquina

See all presentation from allanesquina

HTML5 Avançado – – Minha reação quando preciso desenvolver para IE8 e IE7

1 1

html5

Advanced HTML5 course

On Github allanesquina / html5

HTML5 Avançado

by DRC

Visão Geral

  • Apresentação Geral do HTML 5
  • Formulário HTML 5
  • API de Áudio
  • API Vídeo
  • Elementos Validadores de Dados
  • API Canvas
  • API Arrastar e Soltar
  • API Geolocalização
  • API Armazenamento Local
  • CSS 3
  • Web Fonts
  • Textos
  • Bordas
  • Fundos
  • Sombras
  • Transformações
  • Transições
  • Media Queries
  • Template Layout
  • User Interface

Allan Esquina

Formado em Web Design

Certificações:

Web Applications Development with Microsoft .NET Framework 4

Programming in HTML5 with JavaScript and CSS3

Front-end Developer at UOL

Projetos particulares:

Corner Grid

Ubuntu Pixel Perfect

FreakNav

Minha reação quando preciso desenvolver para IE8 e IE7

Pq eu fico assim?

Olhe como as coisas funcionam no IE

Ahhhhhh

Ready?

GO!

Internet

Cabos submarinos que transportam a Internet entre os continentes.

Evolução do HTML

(Hypertext Markup Language)

Quem Criou?

Tim Berners Lee (criador da World Wide Web) em 1990

Suprir a necessidade de comunicação

Resolveu? Era bacana?

Era, só que não.

O que aconteceu?

A internet se expandiu

Quais as dificuldades?

Falta de padrões para desenvolvimento

Pouca compatibilidade com dispositivos

Como tentaram resolver?

W3C

(World Wide Web Consortium)

Fundada em 1994 pelo criador da World Wide Web Tim Berners-Lee com o intuito de padronizar a linguagem.

Em 1996 surgiram o CSS e JavaScript

Em 1997 veio o HTML4

Em 1998 o CSS 2

Em 2000 o XHTML 1

(EXtensible Hypertext Markup Language)

Em 2002 o conceito de Tableless Web Design

Em 2005 o AJAX

E em 2009...

Estrutura de um HTML

HTML

<!DOCTYPE html>
<html>
 <head>
  <meta charset="UTF-8">
  <title>HTML Template</title>
 </head>
 <body>
  <p>Insert content here.</p>
 </body>
</html>

Time Line do HTML

Web Standards

O que é?

Um conjunto de recomendações.

O que seria uma recomendação W3C?

Uma Recomendação do W3C é uma especificação ou um conjunto de diretrizes que depois de ter passado por exaustiva discussão e ter-se estabelecido um consenso, recebeu o endosso dos Membros e do Diretor do W3C. O W3C indica vivamente o amplo emprego de suas Recomendações.

Blog Maujor.com

WaSP

(Web Standards Project)

O que é?

Um grupo criado com o intuíto de divulgar os padrões web

Segundo o Tableless.com

A Cavalaria

Quais seus grandes feitos?

Convencer a Netscape a doar para a comunidade o engine do Netscape

Fazer com que os fabricantes de browsers seguissem as idéias e recomendações do W3C

Fazer com que os desenvolvedores também adotassem os Padrões do W3C

Hoje, desenvolvedores e Browsers lutam a favor dos Padrões web (Web Stadards)

DOM

Document Object Model

node.h

Document

Element

Text

Render Tree

Attach()

Metodo disparado pelo browser

RenderStyle()

Guarda objetos de referência com as propriedades CSS do documento. É salva na Render Tree.

style()

Acessa o CSS BOX Model e posiciona o elemento na tela.

O que o browser faz com elementos desconhecidos?

Bibliotecas

modernizr

html5shim

Manipulando o DOM

document.getElementById()

document.getElementsByName()

document.getElementsByTagName()

document.querySelector(selectors)

Introdução ao HTML5

O que tem de novo?

Elementos

section, nav, article, aside, hgroup, header, footer, time

Atributos

autofocus, link, novalidate, reversed, disabled, placeholder, hreflang, rel, target, contenteditable, spellcheck

Elementos Modificados

b, i, a, address, hr, strong, head

Tipos de Campos

tel, search, email, url, number, range, color, (datetime, date, month, week, time, datetime-local)

Validação de Formulários

autofocus, placeholder text, required, maxlength, pattern, novalidate, formnovalidate, details, summary

API Drag and Drop

Revisão Ortográfica e Gramatical

Audio e Video

API Device e Stream

MathML e SVG

Canvas API

localStorage e sessionStorage

Geolocalização

Application Cache

WebSockets

Semântica

O que faz?

Da sentido ao conteudo

Estudando a Semântica dos elementos

section

A tag section define uma nova seção genérica no documento. Por exemplo, a home de um website pode ser dividida em diversas seções: introdução ou destaque, novidades, informação de contato e chamadas para conteúdo interno.

nav

O elemento nav representa uma seção da página que contém links para outras partes do website. Nem todos os grupos de links devem ser elementos nav, apenas aqueles grupos que contém links importantes. Isso pode ser aplicado naqueles blocos de links que geralmente são colocados no Rodapé e também para compor o menu principal do site.

article

O elemento article representa uma parte da página que poderá ser distribuído e reutilizável em FEEDs por exemplo. Isto pode ser um post, artigo, um bloco de comentários de usuários ou apenas um bloco de texto comum.

aside

O elemento aside representa um bloco de conteúdo que referência o conteúdo que envolta do elemento aside. O aside pode ser representado por conteúdos em sidebars em textos impressos, publicidade ou até mesmo para criar um grupo de elementos nav e outras informações separados do conteúdo principal do website.

hgroup

Este elemento consiste em um grupo de títulos. Ele serve para agrupar elementos de título de H1 até H6 quando eles tem múltiplos níveis como título com subtítulos e etc

header

O elemento header representa um grupo de introdução ou elementos de navegação. O elemento header pode ser utilizado para agrupar índices de conteúdos, campos de busca ou até mesmo logos.

footer

O elemento footer representa literalmente o rodapé da página. Seria o último elemento do último elemento antes de fechar a tag HTML. O elemento footer não precisa aparecer necessariamente no final de uma seção.

time

Este elemento serve para marcar parte do texto que exibe um horário ou uma data precisa no calendário gregoriano

Aplicação

Formulários

tel

O tipo tel prepara o campo input para receber um valor que represente um número de telefone no seu formato mais genérico. Ele não faz qualquer tipo de validação para os dados de entrada, sendo essa responsabilidade da programação Javascript aplicada ao elemento.

search

O elemento search modifica o comportamento do campo input para um tipo busca, alterando seu padrão visual para diferenciá-lo dos outros campos. Esse padrão é controlado pelo navegador utilizado. Como exemplo, o Google Chrome ao renderizar esse elemento, coloca uma letra "X" no canto direito da área de digitação. O objetivo é fazer desaparecer o texto de marcação (placeholder) colocado no atributo value do campo input, no momento do foco.

email

Esse elemento trouxe uma configuração básica para a indentificação do conteúdo como um endereço de e-mail. O campo não valida o e-mail digitado, sendo essa rotina de atribuição da programação Javascript. Ele apenas procura um indentificador, no caso o "@" como parte do conteúdo digitado.

url

Esse tipo de elemento define o campo input para receber um URL absoluto, validando o conteúdo com base no protocolo http.

date

O campo do tipo date está preparado para receber uma string que representa uma data válida. A renderização do aspecto visual depende do navegador usado, e enquanto essa apostila era escrita o único que permite visualizar um calendário padrão é o Opera 10. O Google Chrome mostrará esse elemento com o formato de campo tipo step by step. Os outros mostram um campo do tipo text padrão.

time

O campo do tipo time está preparado para receber como conteúdo uma string que representa uma hora válida.

month

O elemento month define um mês do ano baseado no calendário Gregoriano. Sua renderização visual no browser Opera 10 é um objeto do tipo calendar.

week

O elemento week define um número da semana do ano baseado no calendário Gregoriano. Sua renderização visual no browser Opera 10 é um objeto do tipo calendar.

number

O elemento number define o elemento input para receber um valor numérico. Em geral, sua renderização no navegador do usuário é do tipo slider com um conjunto de setas direcionais para cima e para baixo, permitindo o incremento do valor numérico do conteúdo.

range

O elemento range prepara o campo input para receber um valor numérico, dentro de um intervalo específico. Esse intervalo é constituido de um valor mínimo, um valor máximo, um valor de incremento e um valor padrão.

color

O elemento color define para o campo input uma paleta de cores RGB.

CSS3

(Cascading Style Sheets)

O que faz o CSS?

O CSS formata a informação entregue pelo HTML. Essa informação pode ser qualquer coisa: imagem, texto, vídeo, áudio ou qualquer outro elemento criado

O que tem de novo?

Selecionar primeiro e último elemento

Selecionar elementos pares ou ímpares

Selecionar elementos específicos de um determinado grupo de elementos

Gradiente em textos e elementos

Bordas arredondadas

Sombras em texto e elementos

Manipulação de opacidade

Controle de rotação

Controle de perspectiva

Animação

Estruturação independente da posição no código HTML

Seletores Complexos

O que é um Seletor?

O seletor representa uma estrutura. Essa estrutura é usada como uma condição para determinar quais elementos de um grupo de elementos serão formatados

Seletores Encadeados e seletores agrupados

Encadeados

div p strong a {
	color: red;
}

Agrupados

span, a, strong a {
	color: red;
}
Padrão Significado CSS elemento[atr] Elemento com um atributo específico. 2 elemento[atr="x"] Elemento que tenha um atributo com um valor específico igual a "x". 2 elemento[atr~="x"] Elemento com um atributo cujo valor é uma lista separada por espaços, sendo que um dos valores é "x". 2 elemento[atr^="x"] Elemento com um atributo cujo valor comece exatamente com string "x" 3 elemento[atr$="x"] Elemento com um atributo cujo valor termina exatamente com string "x". 3 elemento[atr*="x"] Elemento com um atributo cujo valor contenha a string "x" 3 elemento[atr|="en"] Um elemento que tem o atributo específico com o valor que é separado por hífen começando com EN (da esquerda para direita). 2 elemento:root Elemento root do documento. Normalmente o HTML. 3 elemento:nthchild(n) Selecione um objeto N de um determinado elemento. 3 elemento:nth-lastchild(n) Seleciona um objeto N começando pelo último objeto do elemento. 3 elemento:empty Seleciona um elemento vazio, sem filhos. Incluindo elementos de texto. 3 elemento:enabled Seleciona um elemento de interface que esteja habilitado ou desabilidade, como selects, checkbox, radio button etc. 3 elemento:checked Seleciona elementos que estão checados, como radio buttons e checkboxes. 3 E > F Seleciona os elementos E que são filhos diretos de F. 2 E + F Seleciona um elemento F que precede imediatamente o elemento E. 2

Gradiente

Columns

Transform 2D

Transições e Animações

Bordas

Multiplos Backgrounds

Módulo Template Layout

Cores

Paged Media

@font-face

Presentation-levels