Carga-horária::
- 40 horas: curso prático, com mais de 50% do tempo dedicado a exercícios (pode ser customizado e combinado com outros treinamentos)
Pré-requisitos: : experiência em HTML e CSS. JavaScript e DOM são conhecimentos desejáveis (veja outros cursos que fornecem esses pré-requisitos, ou solicite um curso personalizado que os inclua).
Descrição:
Este curso ensina como construir aplicações interativas de última geração que usam padrões abertos e os mais novos recursos dos browsers modernos, smartphones e tablets. Este curso cobre as tecnologias necessárias para o desenvolvimento de aplicações Web interativas compatíveis com o iPad e iPhone.
Com HTML5, CSS3 e SVG pode-se construir aplicações Web que rodam de forma rápida e eficiente no Google Chrome, Safari, Firefox 4 e Opera, podendo substituir o Flash em aplicações para iPhone e iPad. Este curso explora os recursos inovadores do HTML5, CSS3 e SVG suportados por browsers que usam a plataforma WebKit (dentre eles Google Chrome e Apple Safari), Mozilla (Firefox) e Opera, mas vários dos principais recursos também são suportados no Internet Explorer 9.
Público-alvo: Web-designers, programadores Web, desenvolvedores de aplicações para iPhone/iPad.
Descrição
Este curso é destinado a Web designers que tenham conhecimento básico de scripting, CSS e HTML. Partindo desta base são explorados os temas abaixo
- Canvas: o componente Canvas permite o desenho de gráficos vetoriais numa área da tela delimitada pelo elemento <canvas>. Usando um conjunto de funções JavaScript simples pode-se desenhar desde formas básicas como linhas, círculos, retângulos, polígonos e texto, assim como criar efeitos de sombra e gradiente, transparência, aplicar filtros em imagens, realizar transformações de escala, rotação, movimento, criar animações, transições e responder a eventos. Neste curso exploraremos todas as funções do canvas para fazer uma interface de usuário sofisticada e leve.
- Geolocalização: um pequeno conjunto de propriedades e uma função JavaScript são usados para obter as coordenadas de latitude e longitude do navegador, seja ele um browser em um computador desktop ou dispositivo móvel. A partir dessas coordenadas pode-se utilizar bibliotecas públicas como Google, Microsoft ou Yahoo para obter nome de rua, bairro, estabelecimentos próximos, serviços de transporte, rotas, ou desenhar o mapa do lugar usando Google Maps. Usando canvas e outros recursos do HTML5, pode-se interagir com esses dados.
- Sincronização de áudio e vídeo: HTML5 introduziu dois novos tags que libertam o desenvolvedor Web da responsabilidade de saber tudo sobre o formato de áudio e vídeo que ele está embutindo na página. Até HTML4 a única forma eficiente de incluir áudio e vídeo era através de plugins ou recursos proprietários. Não apenas era uma solução complexa e vulnerável, como limitada. Como HTML5 possui suporte nativo, agora é possível controlar diversos eventos, propriedades e operações de áudio e vídeo através de uso básico de JavaScript. Neste curso veremos como sincronizar áudio e vídeo com animações e eventos, como manipular a forma de vídeos com canvas e filtros animados usando SVG e CSS3.
- Animação com CSS sem script: os novos recursos do CSS prometem tornar as animações na Web muito mais eficientes e fáceis de criar. Embora muitos recursos só funcionem nas últimas versões dos browsers Chrome, Safari e Firefox, já é possível - usando somente CSS - fazer animações e transições muito sofisticadas que antes só eram possíveis ou com plugins (Flash, Java) ou usando scripts complexos. Neste curso exploraremos transições, máscaras, gradientes, sombras, reflexos, animações 2D e 3D.
- Fundamentos de SVG: assim como Canvas, SVG permite desenhar figuras vectoriais, mas não usa script para isto. As figuras são representadas em XML e podem ser desenhadas via software como Illustrator e Corel Draw, e depois manipuladas como objecto usando JavaScript ou CSS, para criar componentes na página Web, máscaras para aplicar em imagens e vídeo, animações.
- Tags semantics e formulários: vários novos tas do HTML5 não incluem nenhuma aparência pré-definida, mas melhoram a estrutura da página e permitem tratamento especial por parte dos browsers. Outros permitem entrada de dados em qualquer elemento, validação automática de formulários, tratamento de datas, números, etc.
- Web storage: há várias formas de gravar dados em HTML5 para passar informações entre páginas e sessões. Neste curso aprenderemos a usar os objectos localStorage e sessionStorage. Web SQL storage pode ser abordado em cursos personalizados, caso haja interesse.
- Outros recursos: vários outros recursos do HTML5 estão em desenvolvimento ou não tem suporte na maior parte dos browsers, e alguns são mais complexos e ou requerem conhecimentos de programação avançada para utilização, ou dependem de recursos no servidor. Alguns desses recursos serão abordados e demonstrados neste curso, mas não serão explorados. Isto inclui Web Workers (threads), Web Sockets, Offline Cache, Web SQL database. Esses tópicos podem ser aprofundados em cursos personalizados, caso haja interesse.
Material didático: apostila em português e exemplos de código de autoria de Helder da Rocha e material de referência dos sites oficiais da Apple e de grupos de usuários online.
Exercícios: Ao longo do curso o aluno irá trabalhar em um website simples contendo páginas HTML, folhas de estilo CSS, bibliotecas JavaScript, imagens PNG e SVG, onde serão aplicados os recursos apresentados no curso. Mais de 50% do tempo de aula é dedicado a atividades práticas.
Solicite uma proposta com o programa detalhado e amostra do material didático e exercícios.
Disponibilidade: imediata (depende da disponibilidade de agenda do instrutor). Este curso pode ser realizado in-company (em qualquer cidade) para turmas fechadas (grupos, escolas ou empresas). O programa e carga-horária podem ser adaptados ou customizados de acordo com as necessidades do grupo interessado.
Tópicos - resumo:
- Parte I - Fundamentos essenciais (opcional)
- 1. HTML, XML, XHTML e CSS
- 2. Fundamentos de JavaScript e DOM
- 3. Diagramação com HTML e CSS
- 4. Ajax e bibliotecas JavaScript
- Parte II - HTML5, CSS3 e SVG
- 5. Atributos e tags do HTML5
- 6. Formulários
- 7. Manipulação de áudio e vídeo
- 8. Canvas
- 9. Fundamentos de SVG
- 10. Animação com canvas e SVG
- 11. Geolocalização
- 12. Offline cache, storage (e banco de dados)
- 13. CSS3
- 14. Animação com CSS (Webkit)
- 15. Melhores práticas
Cursos relacionados:
- X500 Scalable Vector Graphics
- W610 Fundamentos de JavaScript para Web Designers
- W110 Fundamentos de HTML e CSS
- W191 HTML5 Canvas
- W192 HTML5 Audio e Video
- W491 Animações e transformações com CSS3