Conteúdo programático. Desenvolvedor web - front end

Transcrição

1 Conteúdo programático Desenvolvedor web - front end

2 RESUMO O treinamento de DESENVOLVEDOR WEB - FRONT END é destinado para aqueles que querem entrar para a área da programação de sites com o máximo de interatividade que as tecnologias atuais possibilitam. O aluno aprenderá desde o desenvolvimento de sites e app s em HTML 5 e CSS 3, como também saberá programar sites Client Side com JavaScript, Ajax, Biblioteca Jquery, Bootstrap, Phone Gap, entre outros. Softwares e Recursos Utilizados JavaScript / HTML 5 / CSS3 / Ajax / Biblioteca Jquery / Bootstrap / Phone Gap Pré requisitos Conhecimento básico em windows / informática. Segundo grau completo. Duração do Curso 12 meses (40 semanas) Carga Horária 140 horas presenciais + 3 anos online

3 CONTEÚDO PROGRAMÁTICO DESENVOLVEDOR WEB - FRONT END Programação Web: Introdução ao HTML... 5 Programação Web: Introdução ao CSS... 5 Programação Web: Aplicações do CSS... 5 Webdesign: Layout I... 6 Webdesign: Layout II... 6 Webdesign: Codificação HTML e CSS do Projeto... 6 Webdesign: Tags e Fontes... 7 Webdesign: Formulário... 7 Webdesign: Codificando o Layout de Produtos... 7 Webdesign: Codificando o Layout de Serviços... 7 UI Design: Jquery e Slider... 8 UI Design: Jquery e Lightbox... 8 UI Design: Introdução ao Design Responsivo... 8 UI Design: Framework Bootstrap I... 8 UI Design: Framework Bootstrap II... 9 UI Design: Inserindo APIs... 9 UI Design: One Page I... 9 UI Design: One Page II... 9 Webhosting: Publicação do Site e Briefing Webhosting: Apresentação do Projeto 3 e Revisão Javascript: Introdução

4 Javascript: Sintaxe Javascript: Sintaxe II Javascript: Objeto Window e Eventos Javascript: HTML e DOM Javascript: HTML e DOM II API HTML5: Canvas API HTML5: Áudio e Vídeo API HTML5: Geolocalização Programando em Jquery: Introdução Programando em Jquery: Consultas Programando em Jquery: Eventos Programando em Jquery: Efeitos de Animação Programando em Jquery: plugin jquery UI Ajax (Javascript Server-Side): Jquery e Ajax Ajax (Javascript Server-Side): Eventos Phonegap (Web APP): Introdução Phonegap (Web APP): Jquery Mobile e Phonegap Phonegap (Web APP): Uso dos recursos Phonegap (Web APP): Compilação

5 1 Programação Web: Introdução ao HTML Esta é a primeira aula que o aluno iniciará a codificação. Durante a aula o aluno terá conhecimento dos principais seletores da linguagem Html para a codificação de sites. Sintaxe básica do HTML; Tags e Sintaxe; Propriedades e atributos das Tags; Diferença entre modelos XHTML e HTML 5; Tags Estruturais Semânticas (header, nav, section, article, aside, main e footer) Criação de uma página básica contendo os principais tags do Html 2 Programação Web: Introdução ao CSS Para dar continuidade a codificação do site é necessário a implementação do CSS, que trabalha vinculado ao html para aprimorar o design dos sites. Nesta aula o aluno conhecerá a sintaxe e os principais seletores, propriedades e valores que compõe o CSS. Introdução ao CSS (sintaxe e tipos); Tipos de integração com HTML; Tags e Sintaxe; Propriedades e atributos das Tags; Propriedades CSS mais comuns (font, text, color, padding, border, margin, width, height, line-height, list, background); Unidades de Medida. Formatação da página criada na aula anterior, com utilização dos recursos do CSS. 3 Programação Web: Aplicações do CSS Na continuação do conhecimento em CSS, nesta aula,complementaremos a aprendizagem com a inserção dos Id s, classes e formatação de menus, além de iniciar a integração com o html 5. Seletores; Id e Classe; Tipos de elementos (display); Formatação de Menus; Integração entre HTML 5 e CSS; Atividade aplicação do CSS em página Exemplo 5

6 4 Webdesign: Layout I Nesta o aluno terá contato com as principais ferramentas para criação e edição de vetores e bitmaps. O objetivo deste módulo é a criação do layout que servirá como referência para codificação posterior. Apresentação do Photoshop para WEB; Diferenças entre Design para Impressão e Design para Web; Resoluções e Dimensões para WEB; Apresentação do Projeto 1; Começo da criação de layout para Sites; Grids; Formas Vetoriais; Preechimento Sólido e Degradê; Ferramenta Texto; Inserir Imagens. Criação do layout do projeto Mountain Bike. 5 Webdesign: Layout II Nesta aula daremos continuidade ao projeto iniciado na primeira aula, no entanto, outras ferramentas serão apresentadas para o desenvolvimento do layout. O objetivo é finalizar nesta aula o layout do projeto1. Continuação do projeto 1; Recursos de alinhamento e distribuição; Opções de mesclagem de camadas; Exportação do Layout em formatos jpg e png Finalização do layout do projeto. 6 Webdesign: Codificação HTML e CSS do Projeto Após a apresentação do conteúdo que faz a codificação de sites, chegou a hora de colocarmos em prática. Nesta aula o aluno iniciará a codificação do layout criado nas duas primeiras aulas. Como será iniciado o projeto, utilizaremos um software Gerenciador de arquivos para adiantar o processo. Introdução ao Dreamweaver; Gerenciador de arquivos; Programação do layout desenvolvido; Tags novas da estrutura HTML (header, nav, section, article, aside e footer); Tableless; Dicas para estruturação Codificação de Layout do Projeto 1. 6

7 7 Webdesign: Tags e Fontes Nesta aula o aluno dará continuidade à codificação do projeto 1, utilizando as regras de sintaxe do html e css. Programação do layout desenvolvido; Tags novas da estrutura HTML; Dicas para estruturação; Implementação de fontes pelo Google Fonts; Inserção de símbolo na aba do site (favicon). Utilizar regras de CSS e marcação em html no Projeto 1. 8 Webdesign: Formulário Nesta aula o aluno aprenderá conceitos de criação de elementos para interação com o internauta. O aluno irá aprender a desenvolver formulário em html com formatação em CSS. Também será passado um arquivo em php que faz o envio dos dados para . TagForm; Elementos Input; Select; Formatação dos seletores em CSS; Integração com arquivo de php para envio de dados Desenvolvimento de formulário 9 Webdesign: Codificando o Layout de Produtos Nesta aula codificaremos o Layout da página de produtos do nosso projeto. HTML, CSS Desenvolvimento do Layout de Produtos do Site 10 Webdesign: Codificando o Layout de Serviços Nesta aula codificaremos o Layout da página de Serviços do nosso projeto. Html e CSS Desenvolvimento do Layout de Serviços do Site 7

8 11 UI Design: Jquery e Slider Chegou a hora de inserirmos elementos animados ao site. Nesta aula o aluno conhecerá o Jquery e aprenderá como implementá-lo no site e utilizar plugins prontos, além de aprender a fazer edições para adaptação aos projetos pessoais. Introdução ao Jquery; Baixando a biblioteca do Jquery; Implementação de Plugin de Slide; Edição do Plugin Inserção de plugin de Slider na página principal. 12 UI Design: Jquery e Lightbox Nesta aula o aluno continuará a aplicação de plug-ins do Jquery, além de aprender a aplicação de Lightbox para exibição de imagens. Continuação do Jquery; Inserção de plug-in e edição do mesmo; Introdução ao Lightbox; Aplicação do Lightbox Inserção de plugins e Lightbox no site desenvolvido simultaneamente ao conceito. 13 UI Design: Introdução ao Design Responsivo Com a recente ampliação da demanda de usuários de mobiles, fez-se necessário a adaptação dos sites a estes dispositivos. Com esta proposta, nesta aula, o aluno terá conhecimento do Design Responsivo. Introdução ao Design Responsivo; Media Queries; BreakPoints Criando um Protótipo para entendimento dos conceitos 14 UI Design: Framework Bootstrap I Para melhores resultados e, principalmente, velocidade para desenvolver utilizaremos o Framework Bootstrap para adaptar o projeto1 ao Design Responsivo. Introdução ao Framework Bootstrap; Aplicação do Bootstrap; Entendendo o Grid de 12 colunas do Bootstrap Adaptação do Projeto 1 no Bootstrap 8

9 15 UI Design: Framework Bootstrap II Nessa aula, continuaremos a trabalhar com o Framework, adaptando nosso layout codificado na estrutura de classes do Framework. Componentes Css; Menu Responsivo; Plugins de interação do Bootstrap; Slide de Produtos Continuando Adaptação do Projeto 1 no Bootstrap 16 UI Design: Inserindo APIs Além de aprendermos como ajustar o Site para melhores visualizações, aprenderemos como inserir mapas dinâmicos do Google Maps, vídeos do Youtube e componentes de redes sociais e RSS em nossos projetos. Google Maps; Vídeos do Youtube; Facebook Developers; RSS Aplicação dos API's no Projeto 1 17 UI Design: One Page I Nesta aula iniciaremos a Codificação do Projeto 2. Apresentação do Layout; Codificação HTML e CSS; Conceito de One Page; Diferença entre sites One Page e Multi Page Desenvolvimento do Projeto 2 18 UI Design: One Page II Continuação do Projeto 2. Links âncora; Plugins Jquery de Anchor Link Aplicando plugin de Anchor Link no Projeto 9

10 19 Webhosting: Publicação do Site e Briefing Chegou a hora tão esperada da publicação do site. Aprenderemos como configurar um servidor e enviar os arquivos por meio de FTP. Também nesta aula os alunos aprenderão como elaborar e fazer abordagem de um cliente por meio de Briefing. Domínio; Servidor de Hospedagem; FTP; Como criar um Briefing; Como abordar o cliente através de um Briefing Configuração de site em servidor e envio de arquivos. Início do Projeto Webhosting: Apresentação do Projeto 3 e Revisão Aqui os alunos deverão apresentar o Projeto 3. Apresentação de Projeto 3 Apresentação do Projeto Javascript: Introdução Na primeira aula da segunda parte do curso, faremos uma introdução à linguagem Javascript, hoje responsável pela interação dos componentes nos projetos web. Para tanto, veremos alguns conceitos da Lógica de Programação aplicados ao contexto da linguagem. Introdução ao Javascript; Lógica de Programação; Algoritmo; Variáveis; Operadores Aritméticos; Operadores Lógicos Criaremos uma aplicação de formulário que retorne respostas dependendo dos dados inseridos. 10

11 22 Javascript: Sintaxe Nessa aula, veremos como podemos obter respostas do Javascript e a estrutura da linguagem. HTML e Javascript; Execução de programas em javascript; Escrevendo Javascript Inline; Escrevendo Incorporado no HTML; Vinculando um arquivo externo de Javascript; Componentes da Linguagem (Estrutura, Tipos, Valores, Variáveis e Expressões) Criaremos uma calculadora que retorna os cálculos em caixas de entrada. 23 Javascript: Sintaxe II Estudaremos os tipos de dados de variáveis. Tipos de dados primitivos armazenados em uma variável (Number, String e Boolean); Objetos; Arrays; Funções; Classes Atividades de aplicação com os exemplos apresentados. 24 Javascript: Objeto Window e Eventos Estudaremos um dos principais objetos do Javascript e como criar funções e disparar as ações através de eventos. Objeto Window; Eventos (Load, Mouse, Keyboard) Atividades de aplicação com os exemplos apresentados. 25 Javascript: HTML e DOM Estudaremos como funciona a comunicação hierárquica entre HTML e Javascript. Visão Geral do DOM; HTML 5 e DOM; Seleção de Elementos do documento; Estrutura de documentos Atividades de aplicação com os exemplos apresentados. 11

12 26 Javascript: HTML e DOM II Continuaremos estudando a estrutura, os eventos e veremos como funciona o sistema de nós. Eventos DOM; Atributos; Conteúdo de Elemento; Trabalhando com nós (Criar, Inserir e Excluir) Atividades de aplicação com os exemplos apresentados. 27 API HTML5: Canvas Nessa aula começaremos a estudar as APIs de HTML 5 onde podemos inserir script para criar interação. A primeira API será o Canvas que possibilita renderizar imagens bitmap em tempo de execução. Elemento Canvas; Coordenadas x e y; Desenhando elementos por código; Criando animação no canvas; Criando interação no canvas Desenvolvimento de uma página com API em HTML API HTML5: Áudio e Vídeo Nessa aula veremos as APIs de Áudio e Vídeo. Elemento audio; Carregando o som; Controlando o som (play e stop); Elemento Video; Carregando Video; Criando os controles do video Inserção de Áudio e Vídeo na página Desenvolvida na aula anterior. 29 API HTML5: Geolocalização Nessa aula veremos a API de Geolocalização. Suporte a Geolocalização; Permissões de funcionamento da aplicação; Retornando a posição (latitude e longitude); Tratamento de Erros; Interagindo com o usuário; Inserção de Geolocalização. 12

13 30 Programando em Jquery: Introdução Nessa aula começaremos a estudar a sintaxe e a semântica da Biblioteca Javascript mais utilizada na Web. Introdução e Fundamentos em Jquery; Documentação (jquery.com); Variável $ Criação de página com exemplos de Jquery 32 Programando em Jquery: Consultas Nessa aula veremos como criar consultas de elementos do documento e então modificá-los. Métodos getter e setter; Seletores Jquery; Alterando a estrutura de documentos Páginas Exemplos com modelos de Consultas. 33 Programando em Jquery: Eventos Nessa aula veremos os tipos de eventos aceitos pela biblioteca. Eventos do Browser; Eventos de Carregamento; Eventos de Formulário; Eventos de Mouse; Eventos de Teclado; Tratando Eventos com JQuery; Função Callback Páginas Exemplos com Eventos em Jquery. 34 Programando em Jquery: Efeitos de Animação Nessa aula veremos como podemos, com facilidade, criar Efeitos de Animação nos objetos da interface. Método Animate(); Métodos Fade (fadein, fadeout, fadeto e fadetoggle); Métodos hide() e show(); Métodos Slide(slideDown, slidetoggle, slideup); Método stop(); Método toggle() Páginas Exemplos com Efeitos de Animação em Jquery. 13

14 35 Programando em Jquery: plugin jquery UI Nessa aula veremos como podemos estender várias possibilidades de interação através do plugin jquery Ui. Estendendo as possibilidades com Plugins; Biblioteca Jquery UI; Objeto Drag e Drop; Accordion; Autocomplete; Efeitos Páginas Exemplos com plug-ins em JQuery UI. 36 Ajax (Javascript Server-Side): Jquery e Ajax Nessa aula veremos como utilizar Ajax em Jquery para fazer requisições ao servidor, permitindo que nossas páginas se tornem mais interativas. Requisições AJAX em Jquery; $.get; $.post; $.getjson; $.getscript; $.ajax; Carregando Arquivos Externos Aplicação de Requisição Ajax em Páginas 37 Ajax (Javascript Server-Side): Eventos Nessa aula veremos como utilizar os Eventos da metodologia Ajax. Eventos Ajax; ajaxstart; ajaxstop; ajaxerror; ajaxsucess; ajaxcomplete Aplicação de Eventos Ajax em Páginas 38 Phonegap (Web APP): Introdução Nessa aula, começaremos a desenvolver um Web APP através do Framework Phonegap. Web App x App Nativo; Introdução ao PhoneGap; Instalação e configuração das Ferramentas (Android SDK, Node.js); Criando um projeto para o Android Criação de Framework em Phonegap 14

15 39 Phonegap (Web APP): Jquery Mobile e Phonegap Nessa aula veremos como utilizar a biblioteca jquery Mobile para criar interação em nosso web app. CSS Frameworks; Métodos; Propriedades; Eventos; Icones; Widgets; Plugins Aplicação de Jquery Mobile no Framework criado na aula anterior 40 Phonegap (Web APP): Uso dos recursos Nessa aula, veremos quais são os recursos permitidos pelo framework e como usá-los. Funcões Callback; Uso dos recursos; Accelerometer; Camera; contacts Aplicação de recursos para o Framework, dando continuidade ao projeto iniciado na primeira aula 40 Phonegap (Web APP): Compilação Nessa aula, continuaremos a explorar os recursos acessíveis pelo framework e compilar nossa aplicação. Geolocalização; LocalStorage; Compilação para outras plataformas Aplicação de Geolocalização e compilação para outras plataformas INSCREVA-SE 15