BURIPACK - DESIGN E INTERFACES WEB

Transcrição

1 1 de 5 BURIPACK - DESIGN E INTERFACES WEB BC 41 LÓGICA DE PROGRAMAÇÃO COM JAVASCRIPT E HTML (32h) Ajudar aos alunos no desenvolvimento do raciocínio lógico, a partir da prática em lógica de programação, executada em parceria com o, uma das linguagens de programação mais importantes da WEB. Com este BuriCurso, oferecemos aos nosso alunos a oportunidade de iniciar no mundo da programação de computadores, apoiados por um poderoso conjunto de ferramentas e métodos de excelência. Conhecimentos básicos de computação. 1. Introdução à programação Entendendo o navegador Hello world Ambiente de desenvolvimento Chrome e o seu console Encoding 2. Falando com o usuário Mensagens e números Pensando em variáveis Cálculo da média das idades Trabalhando com funções Mensagens secretas e comentários Compartilhando o código 3. Resolvendo problemas O nosso time de futebol IMC ideal Adivinhe o número 4. Pensando em repetições Preciso repetir código Algumas repetições podem ser condicionais Qual a diferença entre caracteres e números? Conversão de texto em números Hora de fazer a tabuada Repensando na média de idades Um loop dentro do outro 5. Trabalhando com muitos dados Java Script e HTML Sequencias de números Evitar números repetidos 6. Brincando com gráficos Desenhando linhas e figuras Criando imagens legais APIs e bibliotecas Mais funções Loops e funções

2 2 de 5 BC 42 PROGRAMAÇÃO WEB COM HTML, CSS E JAVASCRIPT (40h) Apresentar aos alunos as melhores técnicas de desenvolvimento Web. Voltado ao programador de interfaces preocupado com a semântica, estilos CSS e correto e funcional. Um curso dedicado a criar interfaces Web com experiência rica do usuário, estruturação correta e otimizações de layouts. Lógica de programação e conhecimento básico de desenvolvimento Web. 7. Introdução a HTML e CSS Exibindo informações na Web Sintaxe do HTML Estrutura de um documento HTML Tags HTML Imagens A estrutura dos arquivos de um projeto Editores e IDEs Primeira página Exercício: primeiros passos com HTML Estilizando com CSS Sintaxe e inclusão de CSS Propriedades tipográficas e fontes Alinhamento e decoração de texto Imagem de fundo Bordas Exercício: primeiros passos com CSS Cores na Web Listas HTML Espaçamento e margem Exercícios: listas e margens Links HTML Exercícios: links Elementos estruturais CSS: Seletores de ID e filho Fluxo do documento e float Exercícios: seletores CSS e flutuação de elementos O futuro e presente da Web com o HTML5 8. HTML semântico e posicionamento no CSS O processo de desenvolvimento de uma tela O projeto Mirror Fashion Analisando o Layout HTML semântico Pensando no header Estilização com classes Exercícios: header semântico CSS Reset Block vs Inline Exercícios: reset e display Position: static, relative, absolute Exercícios: posicionamento Exercícios opcionais 9. Mais HTML e CSS Analisando o miolo da página Formulários Posicionamento com float e clear Decoração de texto com CSS Cascata e herança no CSS Para saber mais: o valor inherit Exercícios: menu e destaque Display inline-block Exercícios: painéis flutuantes Seletores de atributo do CSS3 Rodapé Substituição por Imagem Estilização e posicionamento do rodapé Exercícios: rodapé Para saber mais: suporte HTML5 no Internet Explorer antigo Exercícios opcionais 10. CSS Avançado

3 3 de 5 Seletores avançados Pseudo-classes Pseudo elementos Exercícios: seletores e pseudoclasses Exercícios opcionais CSS3: border-radius CSS3: text-shadow CSS3: box-shadow Opacidade e RGBA Prefixos CSS3: Gradientes Progressive Enhancement Exercícios: visual CSS3 CSS3 Transitions CSS3 Transforms Exercícios: CSS3 transform e transition Para saber mais: especificidade de seletores CSS 11. Web para dispositivos móveis Site mobile ou mesmo site? CSS media types CSS3 media queries Viewport Exercícios: adaptações para mobile Responsive Web Design Mobile-first Exercícios opcionais: versão tablet 12. Progressive enhancement e mobilefirst Formulário de compra Exercício: formulário da página de produto Design mobile-first Progressive enhancement Box model e box-sizing Exercícios: página de produto Evoluindo o design para desktop Media queries de conteúdo Exercícios: responsive design HTML5 Input range Exercícios: seletor de tamanho Tabelas Exercícios: detalhes Exercícios opcionais: fundo Discussão em aula: importância do Progressive Enhancement na Web atual 13. Bootstrap e formulários HTML5 Bootstrap e frameworks de CSS Estilo e componentes base A página de checkout da Mirror Fashion Exercício opcional: início do checkout sem PHP Exercícios: página de checkout Formulários a fundo Novos componentes do HTML5 Novos atributos HTML5 em elementos de formulário Ícones com glyphicons Exercícios: formulários Validação HTML5 Para saber mais: controlando as validações HTML5 Exercícios: validação com HTML5 Grid responsivo do Bootstrap Exercícios: grids Para saber mais: componentes JS do Bootstrap Exercícios opcionais: navbar e Para saber mais: outros frameworks CSS Discussão em aula: os problemas do Bootstrap e quando não usá-lo 14. Integrações com serviços Web Web 2.0 e integrações iframes Vídeo embutido com YouTube Exercícios: iframe Exercício opcional: Google Maps Botão de curtir do Facebook Exercícios: Facebook Para saber mais: Twitter Para saber mais: Google+ Exercícios opcionais: Twitter e Google+ Fontes customizadas Serviços de web fonts Exercícios: Google Web Fonts

4 4 de 5 BC 43 PROGRAMAÇÃO FRONT-END COM JAVASCRIPT E JQUERY (32h) Oferecer ao aluno técnicas para melhorar a interação dos usuários nas suas aplicações Web, mostrando como o puro e JQuery podem ser combinados para criar funcionalidades complexas no cliente. BC 41 programação web com html, css e javascript ou conhecimento em linguagens de programação, como Java, Ruby, PHP. 1. Fundamental Por que aprender? Características da linguagem Variáveis e atribuições Para saber mais: o console do navegador Tipos de dados Operadores Exercícios: formatando um número Comparações Blocos condicionais Funções Exercícios: tornando nosso formatador reutilizável Array Blocos de Repetição Expressão Regular Exercícios: trabalhando com expressão regular Exercícios: entendendo a estrutura do projeto O primeiro problema: carrinho de compras Exercícios: filtrando o que é digitado Navegando pelo DOM Exercícios: navegação no DOM e mais manipulação de elementos e CSS Exercícios: CSS através de Progressive enhancement Criando elementos dinamicamente Exercícios: novo elemento com não-obstrutivo Compatibilidade do nosso código 2. e o navegador DOM: sua página no mundo Manipulando elementos da nossa página Exercícios: manipulando elementos API do navegador: DOM e BOM Exercício - Explorando os objetos do DOM e do BOM Lidando com eventos Exercícios: lidando com eventos O projeto Mirror Fashion 3. jquery Conhecendo o jquery Eventos Funções mais comuns Exercícios: mais uma funcionalidade, agora com jquery Construindo elementos com jquery Exercícios: migrando parte de nosso código para jquery Mecanismo de delegação de eventos Exercício - Delegação de Eventos com jquery

5 5 de 5 AJAX com jquery $.getjson Exercício - Obtendo dados de um Web Service via AJAX Eventos customizados Exercício - Desacoplando nosso código através de evento customizado Um pouco mais de jquery Exercícios: filtrando resultado no lado do cliente A função data Exercícios: votação de sugestões 4. Organização de código com módulos e stric mode A palavra chave this Trabalhando ainda mais com objetos Exercícios: organizando nosso código através de objetos Para saber mais: outro tipo de bloco de repetição Lidando com o escopo de suas variáveis Exercícios: controlando melhor o escopo de suas variáveis Module Pattern Exercícios: nosso primeiro módulo Declarando as dependências do módulo IIFEs com jquery Exercícios: isolando o restante do nosso código Use strict Exercícios: ativando "strict mode" 5. Plugins com jquery Autocomplete com jquery UI Exercícios: evitando sugestões duplicadas jquery Mobile: lidando com eventos "touch" Exercício Opcional: adicionando produtos na sacola com eventos "touch" Criando seu próprio plugin Exercício - criando nosso primeiro plugin do jquery 6. Um pouco mais de Orientação a Objetos Função como "classe" Encapsulamento Exercícios: o objeto "Sacola" Para saber mais: herança em Para saber mais: sobrecarga de funções 7. AngularJS: o framework MVC da Google Características Organização do projeto Exercícios: primeira página com AngularJS A diretiva ng-repeat Requisições AJAX com $http Exercícios: painel de recomendações com AngularJS A diretiva ng-model Exercícios: data binding com ng-model Exercícios opcionais: melhorando o sistema 8. Grunt: automação de build de frontend Um pouco sobre Node.js Instalando Grunt Preparando o projeto para usar Grunt Exercícios: primeiros passos com Grunt Automatizando merge, minificação de scripts e CSS's Exercícios: merge e minificação de scripts/css's automáticos Para saber mais: uglify e cssmin de outros arquivos Minificação de imagens Exercícios - Minificação de imagens automática Watch e LiveReload com grunt Exercícios - livereload