O documento fornece um resumo sobre HTML5. Apresenta o histórico da evolução da linguagem HTML ao longo dos anos e descreve as principais novidades trazidas pela especificação HTML5, como novos elementos semânticos, formulários aprimorados, integração de mídia e APIs para desenvolvimento de aplicações web. O documento também discute questões de compatibilidade entre navegadores e fornece links para recursos adicionais sobre HTML5.
Quais são os desafios e as oportunidades que essa tecnologia vai propiciar, qual é o impacto no desenvolvimento para internet e como a Adobe pode auxiliá-los a usufruir aos máximos dos benefícios do HTML 5 e suas linguagens parceiras (CSS e Java Script)
HTML5 - A nova fronteira no desenvolvimento de aplicações WEBFábio Flatschart
HTML5 - A nova fronteira no desenvolvimento de aplicações WEB
Material apresentado na Semana de Tecnologia UniToledo
Araçatuba - 28 de setembro de 2011
Para quem está começando, existem duas apostilas oficiais do W3C em português e gratuitas:
HTML5: http://www.w3c.br/pub/Cursos/CursoHTML5/html5-web.pdf
CSS3: http://www.w3c.br/pub/Cursos/CursoCSS3/css-web.pdf
Quais são os desafios e as oportunidades que essa tecnologia vai propiciar, qual é o impacto no desenvolvimento para internet e como a Adobe pode auxiliá-los a usufruir aos máximos dos benefícios do HTML 5 e suas linguagens parceiras (CSS e Java Script)
HTML5 - A nova fronteira no desenvolvimento de aplicações WEBFábio Flatschart
HTML5 - A nova fronteira no desenvolvimento de aplicações WEB
Material apresentado na Semana de Tecnologia UniToledo
Araçatuba - 28 de setembro de 2011
Para quem está começando, existem duas apostilas oficiais do W3C em português e gratuitas:
HTML5: http://www.w3c.br/pub/Cursos/CursoHTML5/html5-web.pdf
CSS3: http://www.w3c.br/pub/Cursos/CursoCSS3/css-web.pdf
Desenvolvimento de sites responsivos utilizando o framework Bootstrap com apl...joselialcosta
A maneira que se navega na Internet mudou. Para atender essa mudança e oferecer experiências de utilização consistentes para um grande número de contextos, é necessário buscar as tecnologias de desenvolvimento que atendam a esses requisitos. Uma possibilidade de se adequar ao novo ambiente é utilizando o web design responsive. Ele é um conceito que possibilita à página web criada se adapte em qualquer tamanho de tela. Os componentes que tornam possível a responsividade são: o sistema de grids fluídas, imagens flexíveis e as media queries. Visando contribuir para que o design responsivo se integre cada vez mais, começaram a surgir frameworks que prometem facilitar o desenvolvimento de sites responsivos, levando em conta diferentes padrões de desenvolvimento e técnicas. O objetivo dos frameworks é facilitar o trabalho de designers e desenvolvedores, fornecendo componentes já tratados e prontos para utilização dentro de um contexto de desenvolvimento responsivo. Nesta monografia será demonstrado um referencial teórico que serve de embasamento para a demonstração da técnica de desenvolvimento responsivo e um protótipo de site com o uso do framework Bootstrap.
Conheça a profissão front-end.
O que é front-end?
O que o profissional front-end faz?
Principais ferramentas e tecnologias usadas pelo front-end.
HTML - CSS - JavaScript.
Modelo conceitual das etapas do front-end.
Fluxo de trabalho com Illustrator e Flash : workshop apresentado na reunião on line do grupo de usuário Adobe - Designers do interior de São Paulo realizada no dia 14/05/2011. Temas abordados :
Exportar arquivos do Illustrator para o Flash
Importar arquivos do Illustrator para Flash
Trabalhar com símbolos e animações
Utilização CMS - WordPress | Criação de um site de um restauranteDiogoAlfama
CMS - WordPress
Utilização da estrutura do CMS para a criação de um site de um restaurante
Utilização dos plugins disponíveis e personalização com templates e temas grátis
Desenvolvimento de sites responsivos utilizando o framework Bootstrap com apl...joselialcosta
A maneira que se navega na Internet mudou. Para atender essa mudança e oferecer experiências de utilização consistentes para um grande número de contextos, é necessário buscar as tecnologias de desenvolvimento que atendam a esses requisitos. Uma possibilidade de se adequar ao novo ambiente é utilizando o web design responsive. Ele é um conceito que possibilita à página web criada se adapte em qualquer tamanho de tela. Os componentes que tornam possível a responsividade são: o sistema de grids fluídas, imagens flexíveis e as media queries. Visando contribuir para que o design responsivo se integre cada vez mais, começaram a surgir frameworks que prometem facilitar o desenvolvimento de sites responsivos, levando em conta diferentes padrões de desenvolvimento e técnicas. O objetivo dos frameworks é facilitar o trabalho de designers e desenvolvedores, fornecendo componentes já tratados e prontos para utilização dentro de um contexto de desenvolvimento responsivo. Nesta monografia será demonstrado um referencial teórico que serve de embasamento para a demonstração da técnica de desenvolvimento responsivo e um protótipo de site com o uso do framework Bootstrap.
Conheça a profissão front-end.
O que é front-end?
O que o profissional front-end faz?
Principais ferramentas e tecnologias usadas pelo front-end.
HTML - CSS - JavaScript.
Modelo conceitual das etapas do front-end.
Fluxo de trabalho com Illustrator e Flash : workshop apresentado na reunião on line do grupo de usuário Adobe - Designers do interior de São Paulo realizada no dia 14/05/2011. Temas abordados :
Exportar arquivos do Illustrator para o Flash
Importar arquivos do Illustrator para Flash
Trabalhar com símbolos e animações
Utilização CMS - WordPress | Criação de um site de um restauranteDiogoAlfama
CMS - WordPress
Utilização da estrutura do CMS para a criação de um site de um restaurante
Utilização dos plugins disponíveis e personalização com templates e temas grátis
See how we replaced a unreliable paper-based approval system within our Community College District. We needed to create an online database for Articulation Agreements between the Colleges in our School District and the High Schools in our area. The goal was to migrate a paper-based review and approval system to an online system using Drupal. Workflow module was the key to this.
Seminário de Desenvolvimento Mobile - Etec CafelândiaDiego Cavalca
Evento organizado pelo professor Diego Cavalca, onde expõe uma visão geral sobre os principais aspectos da carreira de desenvolvimento de aplicativos móveis, apresentada de modo prático pelos alunos do 3º Módulo de Informática.
Palestras:
- Aplicativos híbridos
- HTML5 - Recursos e Funcionalidades
- Apache Cordova
- Mercado Mobile Atual
Apresentação realizada no SESC Pinheiros / SP para a Oficina Empresas Virtuais.
Cultura digital e interatividade
A Era da Busca
Novas ( ? ) estratégias de negócios
Open Web Platform
A importância da Web Semântica
Olhando para o futuro
Core business X The next big thing : A escolha, adoção e gestão de novas tecnologias e a importância de integrá-las com as estratégias de marketing digital.
Esta palestra faz parte do curso Gestão de Mídias Digitais da Escola São Paulo
HTML5 e CSS3 : Por onde começar no mercado editorial ?Fábio Flatschart
Material apresentado na Conferência Revolução eBook : Produção de eBooks & Melhores Práticas
"O livro digital requer que editores e produtores adquiriram conhecimentos mínimos em HTML, CSS e XML. Felizmente para o mercado editorial, estas competências tem sido utilizadas, compartilhadas, aprimoradas e consolidadas por desenvolvedores web e web designers há anos!"
SALVETTE, Paul. The eBook Design and Development Guide Bangkok : BB eBooks, 2012 (Kindle Edition)
Core business X The next big thing : A escolha, adoção e gestão de novas tecnologias e a importância de integrá-las com as estratégias de marketing digital.
Esta palestra faz parte do curso: Gestão de Mídias Digitais da Escola São Paulo.
Não é mais possível ter um olhar individual sobre as camadas de conteúdo, apresentação e comportamento, pois elas se completam e se mesclam interligadas pela semântica. Não existe mais nada gratuito ou supérfluo, tudo deve ser relevante para a construção dos significados. Pensar em direção de arte e desconhecer este novo cenário, é ignorar a fusão arte & tecnologia, é ignorar o legado do homem renascentista que está construindo uma nova era, a era da "Open Web Platform"
As possibilidades semânticas das estratégias de SEO dentro do ambiente do HTML5.
Palestra do Road Show TI Experience 2012. realizada no Senac de São José dos Campos em maio de 2012.
Palestra realizada em outubro de 2011 no SENAC Limeira para o evento Multimídia sem limites.
Um bate papo sobre a produção e distribuição de conteúdo multimídia interativo para múltiplas plataformas e dispositivos portáteis.
Destaque para os novos produtos da Adobe Touch Apps family
Grupo de estudos AS3 - Introdução ao ActionScript 3.0Fábio Flatschart
O objetivo do Grupo de estudos AS3 é divulgar a linguagem Actionscript 3.0 para todas as pessoas que queiram a aprender, independente da sua formação.
- http://as3devs.com.br/grupo-de-estudos/ -
Criador, crítico, colecionador, associado / agregado, expectador ou inativo : veja que tipo de consumidor social você é e confira as sugestões de leitura, cases e vídeos sobre o assunto.
Quando do surgimento da fotografia na metade do século XIX dizia-se que estava decretado o fim da pintura, quando o tímido experimento dos irmãos Lumiere ganhou dimensões comerciais dizia-se que o teatro e os musicais se extinguiriam, o mesmo se falou da televisão em relação ao rádio.
De certo modo isto se manteve inalterado até a última década do séc. XX, momento a partir do qual a revolução digital e a internet começaram a varrer os últimos guerreiros analógicos das trincheiras da mídia.
Aos poucos quebramos a lógica de Mcluhan que dizia que o meio é a mensagem, quando hoje o meio , ou o suporte passa a ser indiferente já que informação digital rompe a parceria entre forma e conteúdo: o conteúdo são os bits e a forma pode ser aquela que quisermos em qualquer dispositivo que realize a decodificação dos bits…
Hoje, na segunda década do século XXI, estas questões começam a ficar para trás. A revolução digital já era!
Falar em revolução digital tinha sentido para aqueles que nasceram no mundo analógico e acompanharam a transição dos átomos para os bits. Do VHS para o DVD, do vinil para o iPod...
Que sentido tem falar em revolução digital para a geração que nasceu após 1995 e não conheceu o mundo sem WEB, MP3 e afins? Interatividade agora é palavra chave!
Os profissionais desta nova geração não têm mais necessidade de digitalizar o mundo, mas sim de interagir com ele. Este novo profissional, que começa a ser muito requisitado pelo mercado, é aquele que faz a ponte entre digital e o interativo.
É neste contexto que no sábado faço a abertura da disciplina Marketing Digital do MBA em Marketing e Vendas da UniAnhanguera em São Caetano do Sul
Compartilho com vocês os slides iniciais do curso (Revoluções) com vários links e sugestões de bilbliografia.
Computação Gráfica : novos profissionais, novas ferramentas e novos mercadosFábio Flatschart
O primeiro pintor de cavernas era artista ou engenheiro? Era ambas as coisas, é claro, como o foram, em sua maior parte, os artistas e engenheiros desde então.
Mas temos o hábito - cultivado por muito tempo - de imaginá-los como separados, os dois grandes afluentes correndo incessantemente para o mar da modernidade e dividindo, em seu curso, o mundo em dois campos: os que habitam nas margens da tecnologia e os que habitam na margem da cultura.
Qualquer analista profissional de tendências nos dirá que os mundos da tecnologia e da cultura estão colidindo. Mas o que surpreende não é a própria colisão - é o fato de ela ser considerada novidade ”
"JOHNSON, Steven. Cultura da interface: como o computador transforma nossa maneira de criar e comunicar"
Neste cenário apontado por Steven Johnson, encontra-se o tema da palestra de Campinas no Circuito de TI 2009 promovido pelo SENAC SP : Computaçao Gráfica : novos profissionais, novas ferramentas e novos mercados.
Entre as ferramentas destaco os lançamentos da ADOBE previstos para 2010 como os novos softwares integrantes da "Plataforma FLASH" ( Flash Catalyst / Flash Builder ) e a versão CS5 da Creative Suite.
Apresento e descrevo quem é este novo profissional : "O Devigner" - Devigner é uma brincadeira com as palavras : developer + designer , e é também o perfil de um novo profissional muito requisitado pelo mercado : aquele que faz a ponte entre o estático e o interativo.
Tecnologia, convergência, mobilidade e interatividade "costuram" e conduzem a palestra que é voltada não só para profissionais e estudantes diretamente envolvidos com o mundo da computação gráfica mas também para quem atua com tecnologia da informação, publicidade, comunicação, artes e educação.
Palestra apresentada no Universo Games 2009 promovido pelo SENAC SP : Conheça os primórdios e o futuro da interatividade e da relação homem - máquina através da história do games. Fique por dentro das tendências e da tecnologia que estão por trás dos lançamentos do universo dos games, um mercado que fatura bilhões de dólares.
Comunicação e Marketing na era da InteratividadeFábio Flatschart
Social Media, Mobile Marketing, Blogs, Mashups, Advergames, Ubiquidade, Web 2.0 e 3.0: Longe de serem modismos ou tergiversações acadêmicas são agora exigências crescentes de um panorama sócio-econômico no qual se destacarão os indivíduos, as empresas e as instituições que rapidamente adaptarem seus modelos de negócios aos novos paradigmas da era da interatividade.
Palestra na FGV - Santo André - Jun/2009
4. Fábio Flatschart
Gerente de Marketing e Inovação da Soyuz Sistemas
No mercado WEB desde 1997, é consultor de
desenvolvimento e implantação de soluções e ferramentas
da Adobe Systems Brasil.
Autor e escritor técnico da Editora Brasport e da
Editora SENAC/SP
No SENAC /SP atuou no atendimento corporativo e
intermediação de parcerias com grandes empresas como
Adobe, Apple, Editora ABRIL, Microsoft, UOL e W3C.
Certificado em HTML5 pelo W3C escritório Brasil.
FGV MBA Marketing
USJT Criação Visual e Multimídia
USP Escola de Comunicação e Artes
flatschart.com
6. O HTML5 não é uma ruptura, é a continuidade e evolução do modelo
concebido por Tim Berners-Lee nos anos 1990
INTRO
flatschart.com
7. WEB
Arquitetura cliente < > servidor
Modelo de localização universal
URL - Uniform Resource Locator
Protocolo de comunicação
HTTP - Hypertext Transfer Protocol
Linguagem de marcação
HTML - HyperText Markup Language
Documento estruturado na forma de hipertexto
Browser (navegador) como recurso de visualização do documento pelo cliente
flatschart.com
8. Client Side
A organização do desenvolvimento de projetos web em camadas independentes
confere flexibilidade e modularidade ao fluxo de trabalho para web integrando
equipes multidisciplinares de planejamento, produção, arquitetura da informação,
design e programação.
Marcação HTML
Apresentação CSS
Comportamento JavaScript
flatschart.com
9. HTML
1991 HTML
1994 HTML 2
1996 CSS 1 + JavaScript
1997 HTML 4
1998 CSS 2
2000 XHTML 1
2002 Tableless
2005 AJAX
2009 HTML 5
flatschart.com
10. HTML5
O HTML 5 é especificação do W3C, ainda não concluída, que deve ser candidata a uma
recomendação em 2012.
Pelas características modulares do seu desenvolvimento, as empresas, fabricantes dos
navegadores, desenvolvedores, designers e usuários não necessitam aguardar a
especificação final da linguagem para colocá-la em uso.
Esta nova especificação introduz novos elementos (tags) orientados para auxiliar no
desenvolvimento web baseado em padrões compatíveis com todos dispositivos, na
marcação semântica do código, na manipulação de elementos do CSS e do JavaScript
através da definição de APIs da arquitetura Web.
World Wide Web Consortium - Escritório Brasil
http://www.w3c.br
flatschart.com
11. APIs
O HTML 5 aceita um conjunto de APIs que fortalece, integra e valoriza a camada de
desenvolvimento do lado do usuário (client side) através de aplicações que permitem
geolocalização, controle de áudio e vídeo, arrastar componentes (drag & drop),
desenhar bitmaps (canvas), criar aplicações offline e outras.
Marcação HTML
Apresentação
Comportamento
APIs CSS
JavaScript
flatschart.com
12. APIs
O HTML5 não é uma ruptura, é a continuidade e evolução do modelo concebido por
Tim Berners-Lee nos anos 1990
HTML5
HTML CSS APIs + JS
flatschart.com
13. Compatibilidade
Renderização dos browsers
Motor Browsers
Gecko Firefox, SeaMonkey, Camino, K-Meleon
Presto Opera, Opera Mobile, Nintendo Wii, Nintendo DS e DSi
Trident Internet Explorer
WebKit Chrome, Safari (incluindo iPhones e iPads), Adobe AIR,
Android, Palm webOS, Symbian
A cada nova versão mais recursos são suportados e a concorrência entre os
fabricantes é grande de maneira que quando um fabricante implementa uma
funcionalidade é quase sempre seguido de perto pelos demais.
flatschart.com
14. Compatibilidade
http://html5test.com
Testa e avalia a compatibilidade do seu browser com os elementos específicos do
HTML5
http://html5readiness.com
Mostra como o suporte ao HTML5 evoluiu de 2008 até hoje
http://caniuse.com
Exibe tabelas de compatibilidade para recursos de HTML5, CSS3, SVG e outras
tecnologias web
flatschart.com
18. A simplicidade é o último grau de sofisticação
NOVIDADES
flatschart.com
19. Doctype
HTML 4.01
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
XHTML 1.0
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
HTML5
<!DOCTYPE html>
flatschart.com
22. Saber o significado das palavras é essencial para o entendimento!
SEMÂNTICA
flatschart.com
23. Elementos estruturais
Umas das maiores novidades do HTML5 é a possibilidade de atribuir às diversas
seções estuturais do documento um elemento próprio, nativo da linguagem.
HTML4 / XHTML HTML5
<body> <body>
<div id="topo"></div> <header></header>
<div id="navegacao"></div> <nav></nav>
<div id="principal"></div> <article></article>
<div id="lateral"></div> <aside></aside>
<div id="rodape"></div> <footer></footer>
</body> </body>
flatschart.com
25. O que eu ouço, esqueço. O que eu vejo, lembro. O que eu faço, aprendo.
MULTIMÍDIA
flatschart.com
26. Canvas
O elemento canvas,novidade do HTML 5, permite que a informação para a
construção de imagens baseadas em pixels seja inserida diretamente no código do
documento.
O elemento canvas apenas delimita em que local da tela isto acontece. O processo
de desenho é controlado por uma API específica para este elemento que interage com
JavaScript.
<canvas id="figura" width="300" height="300"></canvas>
<button onClick="desenhar()">Desenhar</button>
<script>
function desenhar()
{ var desenho = document.getElementById('figura');
var context = desenho.getContext('2d');
context.fillStyle = '#00FFFF‘;
context.fillRect(50,50,200, 200); }
</script>
http://bit.ly/nK6JCx
flatschart.com
27. SVG
<svg >
<rect width="90" height="60" x="10" y="100"
fill="#00FFCC" stroke="#FF0000" stroke-width="3" >
</svg>
No HTML5 o formato SVG (Scalable Vectorial Graphics) pode ser embutido
diretamente embutido no documento com o uso do elemento img
<img src="imagens/rabisco.svg" alt="Rabisco em SVG">
canvas bitmap
svg vetor
http://bit.ly/rqqZuK
flatschart.com
28. Áudio
<audio src="mozart_trompa.mp3" controls></audio>
Opção para vários formatos e opção de download do arquivo, visível quando o
browser do usuário não oferecer suporte para nenhum dos formatos indicados ou
para o elemento audio.
<audio controls>
<source src="mozart_trompa.aac"/>
<source src="mozart_trompa.ogg"/>
<source src="mozart_trompa.mp3"/>
<p>Baixe o arquivo<a href="mozart_trompa.mp3">.mp3</a></p>
</audio>
http://bit.ly/nDeClI
flatschart.com
29. Vídeo
A compatibilidade dos browsers ainda é problemática, mas existem várias
maneiras de contornar esta questão como, por exemplo, usar formatos
alternativos, indicar um link para download e incluir o uso do Flash Player para a
reprodução do vídeo.
<video height="272" width="360" controls preload poster=“poster_video.jpg">
<source src="videos/video.m4v"/>
<source src="videos/video.ogv"/>
<source src="videos/video.webm"/>
<p><a href="videos/video.m4v">Baixe o vídeo</a></p></video>
http://bit.ly/oKtdlT
Container Vídeo Áudio Suporte
MPEG4 H.264 AAC Chrome, Safari, IE9
OGG Theora Vorbis Chrome, Firefox, Opera
WebM VP8 Vorbis Chrome , Firefox, IE9, Opera
flatschart.com
30. O HTML não é uma linguagem de programação
APIS
flatschart.com
31. APIs
“O HTML não é uma linguagem de programação”
Apesar desta afirmação soar estranha para muitos, sempre devemos lembrar de que o
HTML é uma linguagem de marcação e de que sozinho ele não consegue formatar,
manipular ou criar conteúdo.
APIs Demo
Web Storage http://slides.html5rocks.com/#web-storage
Drag & Drop http://slides.html5rocks.com/#drag-and-drop
Desktop Drag-In http://slides.html5rocks.com/#drag-in
Desktop Drag-Out http://slides.html5rocks.com/#drag-out
Geolocation http://slides.html5rocks.com/#geolocation
Device Orientation http://slides.html5rocks.com/#slide-orientation
Speech Input http://slides.html5rocks.com/#speech-input
32. O estilo está sob as palavras como dentro delas. É igualmente a alma e a
carne de uma obra
ESTILO
flatschart.com
33. CSS3
@font-face
Efeitos de texto
Colunas
Cor e transparência
Bordas
Transições
Animações
Media queries
http://bit.ly/p4vtpS
http://slides.html5rocks.com/#css3-title
flatschart.com
34. Mobile não é uma tecnologia é um estilo de vida
WEB APPS
flatschart.com
38. HTML5 APPs
Soyuz Sistemas
Migração do fluxo de trabalho para produção
de apresentações em HTML5 para Sistema
UNO Internacional do Grupo Santillana /
Editora Moderna
Envolvimento e treinamento da equipe
Designers | Developers
Do PSD ao CODE com semântica
Crossbrowser
Permite distribuição para iOS e Android
Permite empacotamento Adobe AIR (Webkit)
Base para produção de futura ferramenta
colaborativa
flatschart.com
39. WEB GL e Visualização de dados
Dashboard em tempo real
mostrando a relação entre latitude,
longitude e altura dos municípios
brasileiros.
Baseado em dados abertos, esta é
uma experiência de visualização de
dados utilizando Ajax e Processing.js
como mecanismo para o gráfico em
WebGL.
http://labs.soyuz.com.br/dash/
flatschart.com
40. Mitos
• HTML5 ainda não pode ser usado comercialmente
• A maior mudança do HTML5 foi Vídeo, Áudio e Canvas
• Objetivo do HTML5 é matar o Flash
• HTML5 não faz diferença pra SEO/SEM
• HTML5 tem falhas graves de segurança
flatschart.com
42. Você é o que você compartilha
LINKS E REFERÊNCIAS
flatschart.com
43. Links e Referências
Soyuz Sistemas
http://www.soyuz.com.br/
Livro HTML5 – Embarque Imediato
http://flatschart.com/html5/
HTML5 Doctor, helping you implement HTML5 today
http://html5doctor.com/
Adobe HTML5 and CSS3 development
http://www.adobe.com/devnet/html5.html
DIVE INTO HTML5
http://diveintohtml5.org/
HTML5 and CSS3 - Adobe - The Expressive Web - Beta
http://beta.theexpressiveweb.com/
HTML5: Edition for Web Authors
http://dev.w3.org/html5/spec-author-view/
Adobe Dreamweaver CS5.5
http://www.adobe.com/br/products/dreamweaver.html
W3C Brasil
http://www.w3c.br
Adobe Labs
http://labs.adobe.com/
Curso de HTML5 do W3C Brasil
http://www.w3c.br/Cursos/CursoHTML5
Stickman
http://www.drawastickman.com/
20 Lições - Google flatschart.com
http://www.20thingsilearned.com/pt-BR