Aula 01 - Introdução à Programação Web (1)

Prévia do material em texto

Introdução à Programação Web
Prof. Dely Lima
1
O que é a Programação Web
Programação web é o processo de criar aplicativos e sites que podem ser acessados por meio de um navegador. 
Esses aplicativos podem variar de páginas simples de texto a aplicativos complexos, como redes sociais, plataformas de e-commerce, ou sistemas de gestão empresarial. 
A programação web envolve o uso de várias tecnologias e linguagens para criar interfaces de usuário, funcionalidades dinâmicas e comunicação entre o usuário final e servidores.
2
O que é a Programação Web
Em suma, programação web é a prática de desenvolver e manter páginas e aplicativos que são acessados via internet ou redes privadas, como intranets.
3
Diferença entre Front-End e Back-End
No desenvolvimento web, a arquitetura de software é geralmente dividida em duas partes principais:
Front-End: Refere-se à parte do aplicativo que os usuários interagem diretamente. É tudo o que os usuários veem e interagem em uma página da web: textos, imagens, botões, formulários, etc. As tecnologias principais utilizadas no front-end incluem HTML, CSS e JavaScript. A responsabilidade do desenvolvedor front-end é garantir que a interface do usuário seja intuitiva, atraente e funcional.
4
Diferença entre Front-End e Back-End
5
Diferença entre Front-End e Back-End
Back-End: É a parte "invisível" do aplicativo, responsável por gerenciar o banco de dados, lógica de negócios, autenticação e tudo o que precisa acontecer nos bastidores para que o aplicativo funcione corretamente. O back-end envolve a criação de APIs (Application Programming Interfaces), a gestão de servidores, e a integração com bancos de dados. As tecnologias comuns usadas no back-end incluem linguagens como Python, Ruby, PHP, Java, e frameworks como Node.js.
6
Introdução às Principais Tecnologias Usadas no Desenvolvimento Web
O desenvolvimento web é construído sobre uma variedade de tecnologias e linguagens. Algumas das mais comuns incluem:
HTML (Hypertext Markup Language): A linguagem de marcação que define a estrutura básica das páginas web. Ela permite criar elementos como parágrafos, títulos, links, imagens, e muito mais.
7
Introdução às Principais Tecnologias Usadas no Desenvolvimento Web
CSS (Cascading Style Sheets): Usado para estilizar elementos HTML, definindo cores, fontes, layouts, e outros aspectos visuais.
8
Introdução às Principais Tecnologias Usadas no Desenvolvimento Web
JavaScript: Uma linguagem de programação que adiciona interatividade e dinamismo às páginas web. Com JavaScript, é possível criar desde efeitos visuais até aplicativos web complexos.
9
Introdução às Principais Tecnologias Usadas no Desenvolvimento Web
Frameworks Front-End: Ferramentas como React, Angular, e Vue.js facilitam a criação de interfaces de usuário interativas e responsivas.
10
Mas o que são frameworks, Dely?
11
Frameworks
Um framework em front-end é um conjunto estruturado de ferramentas e componentes pré-escritos, criado para facilitar o desenvolvimento de interfaces de usuário (UI) para aplicações web. Ele oferece uma base de código padronizada e reutilizável que ajuda os desenvolvedores a construir interfaces de maneira mais rápida, eficiente e consistente. Frameworks de front-end normalmente incluem bibliotecas de componentes visuais (como botões, formulários, menus), modelos de design, e funcionalidades de interação (como manipulação de eventos, roteamento e manipulação de estados).
12
Características dos Frameworks de Front-End
Componentização: Frameworks permitem que desenvolvedores criem interfaces de usuário utilizando componentes modulares e reutilizáveis, como botões, cards, formulários e outros elementos visuais. Esses componentes são frequentemente personalizáveis e podem ser combinados para criar Uis (User Interfaces – Interfaces de Usuário) complexas.
13
Características dos Frameworks de Front-End
Consistência e Padrões: Eles ajudam a manter a consistência visual e funcional em toda a aplicação, promovendo o uso de estilos e práticas de codificação padronizadas. Isso facilita o trabalho em equipe e a manutenção do código.
14
Características dos Frameworks de Front-End
Eficiência no Desenvolvimento: Frameworks de front-end incluem muitas funcionalidades prontas, como roteamento de páginas, validação de formulários, animações e manipulação de dados. Isso reduz o tempo necessário para construir uma aplicação, permitindo que os desenvolvedores se concentrem em aspectos mais específicos e únicos da aplicação.
15
Características dos Frameworks de Front-End
Compatibilidade e Suporte a Navegadores: Eles geralmente incluem mecanismos para garantir que a aplicação funcione de maneira consistente em diferentes navegadores e dispositivos, lidando com particularidades e inconsistências de cada plataforma.
16
Características dos Frameworks de Front-End
Ecosistema de Ferramentas: Muitos frameworks vêm com um conjunto de ferramentas de suporte, como sistemas de build (para compilar e otimizar o código), gerenciadores de pacotes (para adicionar funcionalidades) e ferramentas de teste.
17
React
Embora tecnicamente seja uma biblioteca, React é frequentemente usado como um framework devido à sua vasta comunidade e ecossistema. Ele permite construir UIs com componentes reutilizáveis e é conhecido por sua eficiência na atualização do DOM (Document Object Model) com sua técnica de "Virtual DOM".
18
Angular
Um framework completo e robusto desenvolvido pelo Google. Angular fornece tudo o que é necessário para construir aplicações de página única (SPAs), incluindo ferramentas para manipulação de formulários, roteamento e comunicação com servidores.
19
Vue.js
Um framework progressivo, ou seja, pode ser adotado de maneira gradual. Vue é conhecido por sua simplicidade e flexibilidade, permitindo que os desenvolvedores escolham quais funcionalidades usar e como integrá-las em seus projetos.
20
Bootstrap
Embora seja mais uma biblioteca de design do que um framework completo, Bootstrap é amplamente utilizado para criar UIs responsivas rapidamente, fornecendo estilos prontos e componentes como grids, botões e formulários.
21
Introdução às Principais Tecnologias Usadas no Desenvolvimento Web
Tecnologias Back-End: Incluem linguagens como Node.js (JavaScript no servidor), Python, PHP, Ruby, e frameworks como Django (Python), Laravel (PHP), e Express.js (Node.js).
22
Introdução às Principais Tecnologias Usadas no Desenvolvimento Web
Bancos de Dados: Ferramentas como MySQL, PostgreSQL, MongoDB, e Redis são usadas para armazenar e recuperar dados.
23
Ferramentas Essenciais para o Programador Web
Para ser eficiente no desenvolvimento web, é fundamental estar familiarizado com algumas ferramentas que facilitam o trabalho:
Visual Studio Code: Um dos editores de código mais populares, que oferece suporte para várias linguagens de programação, integração com Git, e uma ampla gama de extensões.
24
Ferramentas Essenciais para o Programador Web
Git e GitHub: Git é um sistema de controle de versão que permite gerenciar e acompanhar mudanças no código ao longo do tempo. GitHub é uma plataforma de hospedagem de código onde você pode colaborar com outros desenvolvedores.
25
Ferramentas Essenciais para o Programador Web
Navegadores de Web Development Tools: Navegadores modernos, como Chrome e Firefox, vêm com ferramentas de desenvolvimento integradas que permitem depurar, analisar e testar o código diretamente no navegador.
26
Ferramentas Essenciais para o Programador Web
Terminal: Familiarizar-se com o uso de um terminal de linha de comando é crucial para a instalação de pacotes, gerenciamento de arquivos e automação de tarefas no desenvolvimento.
27
Configurando o Ambiente de Desenvolvimento no Visual Studio Code Online
O Visual Studio Code Online (agora parte do GitHub Codespaces) permite que você configure um ambiente de desenvolvimentodiretamente na nuvem, acessível de qualquer navegador. Isso elimina a necessidade de instalar software localmente e permite que você comece a programar rapidamente.
28
Passos para configurar o ambiente:
Acesse o Visual Studio Code Online: Acesse o site do GitHub e crie um novo Codespace. Isso abrirá uma versão online do Visual Studio Code em seu navegador.
Configuração Inicial: No Codespace, você pode instalar extensões que suportam as tecnologias que você está usando, como HTML, CSS, JavaScript, Python, etc.
Integração com GitHub: Se o seu projeto está hospedado no GitHub, você pode clonar o repositório diretamente para o Codespace, permitindo que você trabalhe no código e faça commits facilmente. 
Ambiente de Desenvolvimento: Configure o ambiente com as dependências necessárias (por exemplo, instalando Node.js ou Python) e comece a codificar.
Execução e Testes: Você pode executar e testar seu código diretamente no ambiente online, visualizando os resultados no navegador.
29
Instalando extensão Prettier
O Prettier é uma extensão popular para o Visual Studio Code (VS Code) que serve para formatar automaticamente o código de acordo com regras de estilo predefinidas. Ele é um "code formatter", ou seja, um formatador de código, que garante que o código fique organizado, padronizado e legível, independentemente de quem o escreveu.
30
Criando Primeira Página
31
Criando Primeira Página
    
    
    Meu Primeiro Site
    Bem-vindo ao Meu Primeiro Site!
    Este é o meu primeiro arquivo HTML. Estou aprendendo a criar páginas da web!
32
Obrigado!
33
image1.png
image2.png
image3.png
image4.png
image5.png
image6.png
image7.png
image8.png
image9.jpeg
image10.png
image11.png
image12.png
image13.png
image14.png
image15.png
image16.gif
image17.png
image18.png
image19.jpeg
image20.jpeg
image21.jpeg
image22.jpeg
image23.jpeg
image24.png
image25.png
image26.jpeg