Palestra html5 e CSS3

O próximo passo da WEB

Emiliano Barreto
@ebarreto
emiliano@celula.cc

• Proposta de trabalhar com as mais atuais
tecnologias e softwares

• Atuação na pesquisa e formação de
profissionais

• Consultoria e desenvolvimento

• Forte preocupação com a formação
• e carreira do aluno

Instrutores
• CERTIFICADOS
• COM EXPERIENCIA DE MERCADO
• DIDÁTICOS E PRONTOS PARA TIRAR TODAS
AS DÚVIDAS
• INSTRUTORES DA CELULA ATUAM
DIARIAMENTE COM AS MATERIAS QUE
MINISTRAM AULA E SÃO ESPECIALISTAS NO
QUE FAZEM

Diferenciais
• Poucos alunos por turma

• Ambiente pessoal e compromissado com o
aprendizado na prática

• Aulas 100% práticas

• Estrutura enxuta = valores mais acessíveis

HTML 5 ....PORQUE, ONDE,
COMO E QUANDO ?

NEGÓCIOS ONLINE

MUITAS EMPRESAS DESCOBRIRAM
QUE A INTERNET

Enxurrada
de informações e serviços

NOVAS DEMANDAS DE PROFISSINAIS

E quem vai acessar o seu site ?
• Somente quem estiver no pc / windows
com internet explorer ????

Apresentando
HTML 5.0

É A MAIS NOVA ATUALIZAÇÃO DA
LINGUAGEM HTML

Porque aprender a desenvolver
utilizando HTML 5.0 ???

Alguns motivos
• Mercado : falta de cases e profissionais
bons nacionais na área

• Mais poder e recursos no HTML, CSS E
JAVASCRIPT

• Conteúdo acessível de vários
dispositivos e plataformas

Principais Características
• Web Semântica: melhoria na estrutura
com novas tags
• Mais poder com visual com CSS3
• Recursos multimídia com Vídeo e Áudio
• Gráficos ricos e dinâmicos
(SVG / Canvas)
• Web Apps – Web Storage, indexDB etc
• GeoLocation
• Gráficos 3D ( Web GL)

Estrutura do HTML 5
<!DOCTYPE html>
<html lang=“en”>
<head>
<title></title>
<meta charset=“utf-8”>
</head>
<body>

</body>
</html>

Estrutura do HTML 5
<header id="topo"> topo do site</header>
<nav id="menu"> menu do site</nav>
<section id="conteudo">
area de conteúdo do site</section>
<footer id="rodape"> rodapé </footer>

Video Tag
<video src=“videos/video.mp4” id”myVideo”
preload=“auto” type=“video/mp4”>
</video>

Border radius

#box {

-webkit-border-raduis:15px;

Moz--border-raduis:15px;

border-raduis:15px;

Transforms
#box
{
-webkit-transform:rotateY(360deg);
transform:rotateY(360deg);
}

Animações e transições
com CSS3

Gráficos ricos e dinâmicos

Áudio e Vídeo

Canvas gerando imagem

3D com Web GL

SVG gerando vetor

CSS3 com efeitos e 3D/Perspectiva

Já posso utilizar
esses recursos ?

Sim, mais antes....

Adequação e necessidade para cada projeto

Polyfills – modernizr.com
Shims
Google html

Calma calma......Pode sim mais
antes....

Adequação e necessidade para cada projeto

Polyfills – modernizr.com
Shims
Google html

Market Share dos navegadores
Estatísticas por versões (maio de 2011)

Dados de maio/11 – by netmarketingshare

Estatísticas por versões (maio de 2012)


Quadro geral em 2012


Market share dos navegadores
• Ie 6
• Ie 8
• Firefox
• Chome
• safari

Faltam recursos e
implementações

• Acesso a Web Cam
• Falta de softwares fáceis
• Incompatibilidade de Navegadores
• Recomendação do W3C

Faltam elementos a serem
concluidos

<device> - microfone e cameras

HTML5 – “FUTURO” PRÓXIMO DA WEB
FLASH – PRESENTE (99% das plataformas fixas rodam flash)

Novos horizontes e
possibilidades

Você está pronto para o próximo passo ?

HTML5 e CSS 3
O Próximo passo da WEB
Obrigado

Emiliano Barreto
emiliano@celula.cc
@ebarreto

Palestra html5 e CSS3

Recommandé

Recommandé

Contenu connexe

Tendances

Tendances (20)

En vedette

En vedette (11)

Similaire à Palestra html5 e CSS3

Similaire à Palestra html5 e CSS3 (20)

Palestra html5 e CSS3