O que muda com HTML5 e CSS3?

Atenção alunos PROUNI: a direção/coordenação do curso pede que se encaminhem para acertar detalhes de documentação nos próximos dias. Não precisa abandonar a palestra! Por favor!! ;-)

Use a hashtag #ENTECH se for twittar durante a palestra!

• O que é a Web e quais as tecnologias envolvidas nela?
• Porque a HTML e a CSS são importantes para Web?
• No que HTML5 é diferente das versões anteriores?
• O que faz a CSS3 que antes não fazia?
• Quem quer HTML5 e CSS3?
• Finalmente, então: O QUE VAI MUDAR?
• Como eu me preparo pra esta mudança?
• Compartilhando minha experiência profissional

A Web é apenas mais um dos serviços existentes na INTERNET. Assim como existe o e-mail, transferência de arquivos, acesso remoto, chat, etc.

Em "computês": o protocolo HTTP é mais um do conjunto que tem o SMTP/POP/IMAP, FTP, Telnet, IRC, dentre outros sobre o TCP/IP.

Mas o HTTP é apenas um protocolo de transferência (leva e trás de pacotes com uma "aplicação"). O que tem dentro deste pacote?

Padrão é um documento aprovado por um organismo reconhecido que provê, pelo uso comum e repetitivo, regras, diretrizes ou características de produtos, processos ou serviços cuja obediência não é obrigatória.

Padrões Abertos costumam se referir àqueles que são disponibilizados publicamente para acesso e implementação e que costumam ser definidos por ampla participação de empresas, instituições e profissionais do mercado.

Padrão Fechado possuem aceitação pública generalizada mas não cumpre os requisitos para ser aberto. Também são conhecidos por "proprietários".

• O protocolo HTTP é padronizado abertamente por uma entidade chamada IETF (Internet Engineering Task Force).
• Documentos HTML e Folhas de Estilos são padrões aberto de um consórcio conhecido por W3C (World Wide Web Consortium).
• A Javascript é hoje um padrão aberto mantido pelo Ecma International.
• Alguns formatos de imagens, áudio e vídeo são padrões abertos: PNG, SVG (ambos do W3C) JPEG2000 (ISO/IEC) e Ogg (Xiph.org)
• Outras mídias são proprietárias: PSD (Adobe), CDR (Corel), WMA/WMV (Microsoft), MP3/AAC (parcialmente)
• Documentos em formato aberto: OOXML (Microsoft-ISO/IEC), ODF (OpenOffice-ISO/IEC), PDF (Adobe-ISO/IEC)

os padrões abertos são importantes para ajudar a criar soluções interoperáveis e acessíveis para todos. Eles também promovem concorrência sadia através do campo técnico ao nível de todos os players de mercado. Isto significa baixo custo para as empresas e, finalmente, para o consumidor.

Erkki Liikanen, União Européia

HTML é a linguagem para descrever a estrutura de páginas web. Possibilita aos autores:

• Publicar documentos on-line com títulos, texto, tabelas, listas, fotos, etc.
• Recuperar informação on-line através de links de hipertexto, com o clique de um botão.
• Criar formulários para a realização de transações com serviços remotos, para uso em busca de informações, fazer reservas, encomenda de produtos, etc
• Incluir planilhas, clips de vídeo, clips de som e outras aplicações diretamente em seus documentos.

Com a HTML, os autores descrevem a estrutura das páginas usando a marcação. Os elementos da linguagem são rótulo de conteúdo, tais como “parágrafo", "lista", “tabela", e assim por diante.

• A primeira versão da HTML foi conhecida em 1991 e foi criada por Tim Beners-Lee com o nome de HTML Tags.
• A segunda versão (HTML 2) foi publicada em 1995 pela IETF após ser implementada no navegador NCSA Mosaic.
• A terceira versão (HTML 3) não existiu por falta de consenso e o IETF abandonou o trabalho de padronização.
• Surgiu então, em 1996 o W3C e em 1997 aprovou-se a HTML 3.2 - incorporando recursos de apresentação gráfica.
• Em 1999 os recursos de apresentação gráfica foram removidos e o W3C publicou a HTML 4.
• Em 2000 surgiu a XHTML 1, que trata da mesma HTML 4 escrita na sintaxe da XML
• Em 2002 o W3C começava a trabalhar na XHTML 2, mas... continuamos depois!

É uma linguagem cuja principal função é separar apresentação de conteúdo

É possível, mantendo-se o mesmo conteúdo, obter apresentações diferentes, bastando para isso utilizar de regras de CSS diferentes para os mesmo elementos do documento HTML.

Quando dizemos apresentação, nos referimos a como o conteúdo será transmitido ao usuário: visual, oral ou impresso;

A CSS pode ser usada pra qualquer linguagem de marcação, e não só para HTML;

Em meio a briga para se definir a HTML 3, quando muitos queria incluir recursos gráficos na linguagem, Håkon Wium Lie sugeriu em 1994 uma solução que separava o conteúdo (HTML) da apresentação (CSS). Outros (Bert Bos) gostaram da idéia e em 1996 foi publicada a primeira versão, mas com pouca adoção dos navegadores da época.

Os trabalhos continuaram e perto de publicar a HTML 4, em 1998 o W3C publicou a versão 2 da CSS, revisada e atualizada em 2004, como CSS 2.1

É uma linguagem de programação criada pela Netscape em 1995 (e hoje padrão Ecma), para atender, principalmente, as seguintes necessidades:

• Validação de formulários no lado cliente (programa navegador);
• Interação com a página.
• Modificar dinamicamente os estilos dos elementos da página em HTML.

Juntas, HTML, CSS e Javascript formam as três camadas que podem compor uma página web: Conteúdo, Apresentação e Comportamento.

É interessantíssimo que essas camadas sejam criadas com padrões abertos.

A última versão da HTML tinha sido publicada em 1999 (ou 2000 pra XHTML 1) e em 2002 o W3C começava a trabalhar na XHTML 2, onde pretendia demandar esforços para melhor a web semântica.

Isso não agradou alguns players do mercado (Opera, Apple e Mozilla) e em 2004 eles fundaram o Web Hypertext Application Technology (WHAT) Working Group. Depois teve adesão da Google.

O objetivo do grupo era tornar os navegadores capazes de rodar aplicativos sob plataforma web e resolver também alguns outros problemas:

• Tocar áudio e vídeo sem necessidade de plugins
• Poder criar e manter um banco de dados local

Os esforços do WHATWG tiveram e efeitos e após encaminharem suas especificações em andamento pro W3C este as acatou e chamou de HTML 5.

Uma vez a HTML5 apoiada pelo W3C, esta suspendeu os trabalhos da XHTML 2 e intensificou também as atividades sobre a CSS 3.

Os navegadores passaram então frenéticamente a implementar os recursos da HTML 5 a fim de sair na frente com a oferta destes novos recursos para ganhar a preferência dos usuários e desenvolvedores.

Veja: HTML5Test.com

HTML 5 é uma buzzword e envolve não somente uma nova versão da linguagem de marcação (novas tags) mas também uma série de novos recursos que podem ser suportados pelos navegadores e explorados pelos autores de páginas web.

• Novas tags estruturais: HEADER, FOOTER, NAV, ARTICLE, SECTION, ASIDE, FIGURE e elementos de formulário: date, email, múltiplos arquivos, ...
• Áudio e Vídeo embutidos no documento, sem plugins! E também a possibilidade de embutir outros formatos abertos, como SVG e MathML.
• Editar conteúdo, desenhar com Js, arrastar e soltar elementos na tela e arquivos no browser, no desktop a e WebGL.
• Armazenar dados localmente (no navegador) e com isso poder criar aplicações offline
• Geolocalização, interação com o servidor sem requisição HTTP e interação com devices locais

Nome:

Email: Telefone:

Date: Time: DateTime:

Month: Week:

Number: Intervalo:

Color:

Cidade: Time de Coração:

enviar!

Este vídeo é fruto de desafio aplicado aos alunos. Saiba mais sobre como foi feito.

A renderização de código MathML ainda é precária nos navegadores.
Compare neste site a renderização abaixo com o mesmo código MathML usando como base esta URL: http://www.thiagotpc.com/entech/math.xml

Fórmula de Bhaskara:
$x=\frac{-b\pm \sqrt{b^2-4ac}}{2a}$

Com apenas um atributo no elemento e um pouco de código javascript, criamos áreas editáveis na página. Isto facilita a criação e melhoramentos de sistemas gerenciadores de conteúdo (CMS).

Possibilidades

• http://freshcode.co/plugins/jquery.contenteditable/demo.html
• http://aloha-editor.org/

Posição Atual Mostrar no google maps

Dividida em módulos, a especificação da CSS 3 inclui uma série de inovações há muto tempo desejada pelos webdesigners de designers de interação

• Bordas com cantos arredondados, caixas com degradês, sombras em caixas e em texto e opacidade.
• Múltiplos backgrounds no mesmo elemento.
• Muitos novos seletores de elementos: ímpares, pares, enésimo, desativados, ativados, reverso (<), vazio, irmão, etc.
• Redimensionar caixas, layout com multicolunas e grids!
• Transformar elementos (2D e 3D), executar transições e ANIMAR!
• Melhor detecção de dispositivos móveis
• Apresentação do conteúdo por voz (Speech)

Exemplo original

Mais exemplos

• Destacando elementos
• Histórias
• Ilustrações
• Menus animado
• O que mais a criatividade e habilidade permitir!

Exemplo 1| Exemplo 2

• A Apple, que baniu o Flash do iPad e iPhone por desempenho ruim e alto consumo de recursos.
• A Microsoft, que no Windows 8 lança a interface Metro, livre de plugins e web based.
• A Google, que com os novos recursos pode tirar mais proveito de suas aplicações web, competindo com softwares desktop e permitindo levá-los aos dispositivos móveis com Android.
• A Mozilla e a Opera, que com padrões abertos podem competir melhor no mercado de navegadores.
• Grandes portais de conteúdo, que podem com os novos padrões produzir mais facilmente páginas acessíveis, interoperáveis e com maior valor para ferramentas de busca.
• Eu e quem quiser mais interoperabilidade, acessibilidade e semântica com liberdade para escolha de sistema e navegador.

• Apple, US$ 76 bi, 49 mil empregados
• Microsoft, US$ 57 bi, 90 mil empregados
• Google, US$ 46 bi, 31 mil empregados
• Mozilla Foundation, US$ 100 mi
• Opera, US$ 80 mi, 750 empregados
• Adobe, US$ 5 bi, 9 mil empregados

As páginas serão mais ricas em experiência de uso, com animações, validações, armazenamento local e elementos de interação (manipulação direta)

Páginas com padrões são transferidas e renderizadas mais rapidamente, economizando banda, disco e recursos de processamento e memória.

O mesmo aplicativo poderá ser portado em diferentes ambientes, independente de SO (Windows, Mac, Linux, Android, iOS, Maemo) ou hardware (smartphone, tablet, desktop, smart tvs)

Jogos e outros aplicativos passarão a rodar no navegador ao invés de disputar janelas na barra de ferramentas ou depender de consoles específicos.

Novas ferramentas surgirão para o desenvolvimento de páginas de interfaces ricas com padrões, como o Sencha, o Edge, Tumult Hype, dentre outros.

O Desenvolvedor Front-End precisará desenvolver mais habilidades:

Aprofundar conhecimento de Javascript para manipulação das APIs que darão acesso e controle dos novos recursos.

Conhecer princípios de design de interação, usabilidade e acesibilidade para poder aplicá-los aos elementos de interface codificados.

Entender um pouco mais de semântica e estrutura adequada para proporcionar às páginas e aplicações "encontrabilidade" por ferramentas de busca, interoperabilidade com outros sistemas e melhores desempenho de execução.

Entender de Degradação Graciosa, Melhoria Progressiva e Fallbacks, para que o site desenvolvido seja funcional e agradável em qualquer tipo e versão de navegador e dispositivo.

Estude. E não pare de estudar. Pelo menos até os 45 anos!

• Experimente!
• Acompanhe a especificação, notícias e artigos
• Faça cursos bons
• Leia livros de bons autores
• Participe de eventos de peso

HTML 5

• https://demos.mozilla.org/en-US/
• http://www.chromeexperiments.com/
• http://ie.microsoft.com/testdrive
• http://html5.adamhunter.me/
• http://html5demos.com/
• http://playground.html5rocks.com/

CSS 3

• http://css3.me
• http://www.css3maker.com/
• http://css3please.com/
• http://css3generator.com/
• http://css3menu.com/
• http://border-image.com/

Especificações

• HTML
• CSS

Fontes Recomendadas

• A List Apart!
• HTML5 Rocks!
• The Smashing Magazine
• Tableless
• Pinceladas da Web

A UTFPR Londrina, em parceria com o IFPR Londrina lançam a turma 2 da Especialização em Desenvolvimento Web.

Inscrições a partir de novembro e início em março/2012. - http://www.utfpr.edu.br/londrina

• HTML, CSS e Javascript
• Arquitetura de Informação e Princípios do Design para Web
• Acessibilidade na Web
• Design de Interação, Ergonomia e Usabilidade na Web
• Infraestrutura de Serviços e Banco de Dados Web
• Linguagem de Programação para Servidor Web
• Gerência de Projetos na Web

• Maurício Samy Silva, conhecido como Maujor
• Jeffrey Zeldman
• Eric Meyer
• Mark Pilgrim
• Lewis Moscovitz
• Douglas Crockford

• 3a Conferência Web do W3C Brasil - em Novembro, dias 17 e 18 no Rio de Janeiro
• FrontInLondrina - previsto para 10 e 11 de dezembro
  me sigam no twitter (@thiagotpc) para informações em breve!
• QCON
• Google Developer Day

• Em meados de 1995, passei a ler a respeito dos protocolos de Internet e da HTML na extinta revista Internet.br da Ediouro.
• Em 1999 entrei no curso de Ciência da Computação, na UEL onde me formei em 2004. Durante o curso, trabalhei no suporte técnico do provedor Onda de onde saí em 2001 pra fundar a Agência Digital ICOMP.
• Nas atividades da agência estudei e aprendi PHP, ASP, MySQL e a usar as ferramentas comuns da época. Firmamos parceria com o provedor Terra para ações no norte do Paraná e desenvolvemos algumas dezenas de sites.
• Após a graduação fiz uma especialização em Desenvolvimento de Aplicações Web (2005-2006) na UEL.
• Em 2007 passei a trabalhar na Universidade Tecnológica Federal do Paraná, câmpus Londrina, como Analisa de TI. Já em 2007 comecei a especialização em Tecnologia Java da UTFPR de Cornélio Procópio, que concluí em 2008.

• Desde 2007 passei a contribuir com os Padrões Brasil e-Gov de Codificação, Acessibilidade, Usabilidade e Administração de portais do governo federal.
• Em 2008 e 2009 ministrei três cursos de 80h e 120h sobre Desenvolvimento de Sites com Padrões, Acessibilidade e Usabilidade na UTFPR Londrina.
• Em 2010 montei o projeto do curso de especialização que foi aprovado e a primeira turma iniciou-se em março de 2011. Neste período participei de duas Conferências do W3C, de Simpósios da Sociedade Brasileira de Computação sobre IHC e WebMedia e alguns outros seminários e semanas acadêmicas.
• Em 2009 cursei como aluno não-regular a disciplina de IHC no programa de Mestrado na UEM, onde estou hoje como regular trabalhando na área de IHC para pesquisas na Web.
• Sou professor convidado nas pós-graduações de MBA e Mkt Digital e Gestão de Projetos Web da Faculdade Pitágoras e Informática na Educação, da UEL.

Primeiro porque exemplifica a receita de como se preparar. E segundo, por que acredito que nestes quase 16 anos estudando e trabalhando com informática e web aprendi algumas coisas que posso compartilhar:

• Estudar é importantíssimo para manter-se atualizado e para não cair em armadilhas de tecnologias passageiras.
• Além dos estudos, é importante uma vida saudável, apoio da família e se possível, ter fé!
• Fazer o que gosta e ajudar os outros é importante para auto estima e realização, principalmente quando no início as perspectivas financeiras são pequenas.
• Tempo pra tudo isso todos temos, basta planejar e equilibrar as atividades.
• Não desanime, não desista. Comemore as conquistas e compartilhe conhecimento!

Esta apresentação foi toda escrita em HTML5 e CSS3 com auxílio de frameworks javascript, como jQuery e Deck.js.

Devido ao pouco tempo para preparo eventuais falhas na codificação podem existir. Se encontrar alguma, relate que farei a correção.

Algumas imagens e conteúdo podem ter sido retirados dos sites indicados nos slides anteriores e todos direitos a eles pertencem.

Fico à disposição para perguntas e comentários.

thiagotpc.com | @thiagotpc