Programação para Web I

Programação para Web I

Visão Geral

A World Wide Web (WWW, ou simplismente Web) foi inicialmente concebida como um meio para a troca de documentos, no entanto, atualmente está sendo usada como uma plataforma para aplicativos interativos sofisticados.

Os aplicativos baseados na Web oferecem inúmeras vantagens, como acesso instantâneo, atualizações automáticas e oportunidades de colaboração em grande escala. No entanto, a criação de aplicativos da Web requer abordagens diferentes das aplicações tradicionais e envolve a integração de inúmeras tecnologias.

Este curso apresentará conceitos fundamentais da Web e como utilizar as tecnologias básicas da Web (HTML, CSS e Javascript) para criação de aplicativos. No decorrer do curso o aluno vai ver como os conceitos fundamentais do desenvolvimento da Web podem ser aplicados para desenvolver software da Web real, independentemente das tecnologias, idiomas ou estruturas. Embora enfatizemos os conceitos, você demonstrará sua competência no desenvolvimento da Web desenvolvendo software dinâmico da Web com as tecnologias de programação mais comumente usadas.

Você trabalhará no design da interface do usuário e no desenvolvimento de front-end de aplicações Web responsivas, Além disso, você irá atuar na implantação dessas aplicações em ambientes online, tornando sua aplicações disponíveis para qualquer um acessar.

Durante o semestre, você trabalhará em cada tarefa de programação com no mínimo um parceiro. Cada tarefa será uma etapa na criação de um aplicativo da web. Você poderá escolher o que criar, com a atribuição restringindo os recursos que devem ser usados. Até o final do semestre, você terá construído no mínimo um aplicativo da web estático. Com grande parte do processo que envolve trabalho em equipe, habilidades interpessoais e gerenciamento de conflitos e gerenciamento de tempo, este curso o ajudará a praticar e se preparar para o seu desenvolvimento profissional.

Após concluir este curso, você entenderá e poderá projetar interfaces gráficas de usuário utilizáveis ​​e implementá-las na Web utilizando HTML, CSS e Javascript.

Objetivos de Aprendizagem

  • Compreender o funcionamento da Web e demonstrar um entendimento do modelo cliente-servidor;
  • Desenvolver software da Web usando tecnologias específicas, incluindo HTML, CSS e Javascript.
  • Desenvolver habilidades e técnicas para criar interfaces de páginas Web e perceber que a usabilidade é um dos mais importante aspectos de uma aplicação Web, sendo em muitos casos o principal fator que leva ao sucesso do produto;
  • Desenvolver habilidades técnicas para construção de soluções de acordo com os requisitos do cliente e os critérios de avaliação de usabilidade e acessibilidade;
  • Desenvolver habilidades de trabalho em equipe, para que possa colaborar profissionalmente com seu parceiro de projeto contribuindo para o sucesso do mesmo.

Pré-requisitos

  • Conhecimento básico em algoritmos e estrutura de dados;
  • Noções de comandos básicos do terminal linux/windows/mac;
  • Noções básicas de redes de computadores.

Ferramentas

  • Google Chrome - é um navegador de internet, desenvolvido pela companhia Google com visual minimalista. Link para download
  • Visual Studio Code (VS Code) - é um editor de código/IDE altamente recomendado para desenvolvimento web. É gratuito, open-source e está disponível para todos os principais sistemas operacionais. Link para Download. O VS Code oferece muitas extensões,e o melhor são fáceis de instalar e configurar. Abaixo vou deixar uma lista de extensões “maravilhosas” que podemos usar para otimizar e elegantear nosso ambiente de desenvolvimento.
    • Atom One Dark Theme - Tema escuro (meu preferido)
    • Atom One Light Theme - Tema claro (meu preferido, quando tenho que usar tema claro)
    • Bracket Pair Colorizer - Deixa as chaves, colchetes e parênteses coloridos, facilitando identificar onde abre e fecha cada um.
    • Material Icon Theme - Conjunton de ícones elegantes
    • Git History - Facilita ver o histórico dos arquivos do git
    • HTML Snippets - Autocomple e atalhos para tags HTML
    • Live Server - Servidor web local para arquivos estáticos (HTML, CSS e JS)
    • StandardJS - Guia de estilo Javascript com formator de código padronizado sem necessidade de configurações.
  • Git - é um sistema de controle de versões distribuído, usado principalmente no desenvolvimento de software. Link para instalação
  • Github - é uma plataforma de hospedagem de código-fonte com controle de versão usando o Git. Link para cadastro

Material para estudos (Referências)

Não existe um livro didático obrigatório para este curso, e não conheço um livro que seja uma combinação perfeita com o material para um curso de Web. O conteúdo do curso é definido pelo conteúdo programático e suas respectivas aulas. Em toda aula será informado o material base de referência e outros materiais extras. Você precisará de material de referência adicional para concluir os projetos de programação, mas esse material está disponível na Web. Uma boa fonte online para documentação de referência em HTML, CSS e DOM é a Mozilla Developer Network - MDN.

Instalando este site como um aplicativo nativo no seu celular?

Este site foi construindo no padrão PWA - Progressive Web App.

PWA possibilita que você adicione este site direto na tela inicial do seu celular para utilizá-lo como um aplicativo nativo, para isso basta acessar esta página (https://jesielviana.github.io/web-dev) pelo seu celular, em seguida:

Se você usa sistema Android ao abrir a página no ceular uma caixa pedirá que você acrescente a página em sua tela inicial. Depois é só acessar as Cartas PBL pelo ícone na tela de aplicativos.

Já para quem usa o iOS, a página será aberta no Safari e você deve clicar no ícone de compartilhar na parte inferior da tela e depois escolher: adicionar à tela de início. Pronto!