palestra html5 e css3

Emiliano Barreto @ebarreto

[email protected]

O próximo passo da WEB

• 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

• Poucos alunos por turma

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

• Aulas 100% práticas

• Estrutura enxuta = valores mais acessíveis

Diferenciais

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

Novas oportunidades

Tudo tem que ser mais fácil

PENSE MULTI

MULTI DEVICES

E quem vai acessar o seu site ?

• Somente quem estiver no pc / windows com internet explorer ????

Conheça o HTML 5

ApresentandoHTML 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

HTML5 ENGLOBA

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>

Estrutura do HTML 5.0

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);

}

Border radius

http://www.fontsquirrel.com/fontface/generator

Animações e transições

com CSS3

Animações com scroll

Scroll books

Transitions

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

Criando gráficos

Canvas API

@Media

WEB APPS

GEO LOCATION

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

Dados de maio/11 – by netmarketingshare

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


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



Quadro geral em 2012


Market share dos navegadores

• Ie 6

• Ie 8

• Firefox

• Chome

• safari

E o Flash morreu ?????

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)

NOVAS DEMANDAS DE PROFISSINAIS

Novos horizontes e possibilidades

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

HTML5 e CSS 3

Emiliano Barreto

[email protected]

@ebarreto

O Próximo passo da WEB

Obrigado

palestra html5 e css3

Documents