View
750
Download
1
Category
Preview:
DESCRIPTION
Apresentação sobre HTML5 e CSS3 realizada em julho de 2012 por Emiliano Barreto , no auditório da CELULA CURSOS em São Paulo
Citation preview
Emiliano Barreto @ebarreto
emiliano@celula.cc
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
Tudo tem que ser mais fácil
PENSE MULTI
MULTI DEVICES
MULTI DEVICES
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
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
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)
Market Share dos navegadores
Estatísticas por versões (maio de 2012)
Dados de maio/12 – by netmarketingshare
Market Share dos navegadores
Quadro geral em 2012
Dados de maio/12 – by netmarketingshare
Market share dos navegadores
• Ie 6
• Ie 8
• Firefox
• Chome
• safari
E o Flash morreu ?????
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
emiliano@celula.cc
@ebarreto
O Próximo passo da WEB
Obrigado
Recommended