Este curso de Web Design da Universidade Federal de Minas Gerais abrange desde os fundamentos básicos da criação de sites até técnicas mais avançadas envolvendo interatividade e design responsivo.
O objetivo é capacitar os alunos com uma compreensão sólida de como sites são desenvolvidos e mantidos, usando uma combinação de tecnologias front-end e back-end.
Não há pré-requisitos para participar do curso, recomenda-se apenas a instalação de um bom editor de texto e de um navegador.
Além disso, noções de programação e de edição de imagem podem complementar as habiliades desenvolvidas durante o curso. Este não é, entretanto, um curso voltado para programação.
O que você vai aprender?
- HTML
- CSS
- JavaScript
- Ferramentas Git
- Bootstrap
- JQuery
Introdução ao Web Design
Aqui está o resumo da parte de introdução ao material de Web Design da sua aula:
Objetivos da Aula
- Apresentar o panorama geral: A aula visa fornecer uma visão geral do funcionamento e desenvolvimento de sites.
- Ensinar conceitos de ferramentas essenciais: Focar em ferramentas fundamentais para o Web Design.
- Capacitar para criar um site estático completo: Orientar sobre a construção de um site estático do início ao fim.
- Motivar a evolução para sites dinâmicos: Encorajar o avanço em direção ao desenvolvimento de sites mais complexos e dinâmicos.
Pré-requisitos
- Noções básicas de programação.
- Noções básicas de edição de imagem.
- Vontade de aprender.
- Bom gosto e bom humor.
Ferramentas Introduzidas
- HTML: Linguagem de marcação base para estruturar sites.
- CSS e Bootstrap: Uso de CSS para estilo e Bootstrap para design responsivo.
- JavaScript e JQuery: Programação client-side para interatividade.
- PHP e Codeigniter: Frameworks para programação server-side, focando em sites dinâmicos.
Considerações de Design
- Importância da otimização de imagens, incluindo ajustes de resolução e proporção.
- Uso de cores e a diferença entre desenhos rasters e vetoriais.
Este resumo aborda os principais tópicos que serão explorados e as habilidades que os estudantes desenvolverão ao longo da aula de introdução.
Isso inclui uma compreensão básica de tecnologias web fundamentais e um incentivo para evoluir para projetos mais avançados.
HTML – Estrutura básica dos sites
O HTML é apresentado como a ferramenta principal para a criação de sites, sendo a linguagem de marcação de hipertexto responsável pela estruturação básica dos conteúdos na web.
Esta seção provavelmente aborda como usar tags HTML básicas para montar a estrutura de páginas web, incluindo cabeçalhos, parágrafos, listas e outros elementos essenciais.
Este trecho é uma parte essencial do curso, pois fundamenta toda a construção visual e funcional de sites na internet, e é a primeira ferramenta que os estudantes aprendem para começar a desenvolver páginas web.
CSS e Bootstrap – Modularização das configurações de estilo
CSS (Cascading Style Sheets) é destacado como uma das ferramentas principais para o design web.
Nesta seção, é provável que se discuta como o CSS é usado para estilizar e apresentar documentos HTML, abordando tópicos como cores, fontes, layouts e mais.
O uso do framework Bootstrap também é introduzido, mostrando como ele pode ajudar na criação de designs responsivos e na modularização das configurações de estilo, facilitando o desenvolvimento de interfaces consistentes e profissionais.
Este segmento é crucial para entender como os visuais dos sites são criados e gerenciados, permitindo aos estudantes ganhar habilidades para fazer páginas web não apenas funcionais, mas também visualmente atraentes.
Aqui está o resumo da seção sobre Bootstrap a partir do slide 76 do seu material de aula, com os títulos em formato H4:
Framework CSS Bootstrap
O Bootstrap é apresentado como um framework CSS essencial para design responsivo e modularidade.
Ele fornece várias classes pré-definidas que facilitam a implementação de um design responsivo que se ajusta automaticamente ao tamanho da tela do dispositivo.
A seção inclui:
- Uso de Classes de Grid: Explica como usar a grade do Bootstrap para layout, com a regra de que a soma das colunas deve ser igual a 12 dentro de uma
.row. Demonstra como ajustar o layout com as classescol,col-sm,col-md,col-lg, ecol-xl, baseando-se nos breakpoints de mídia para diferentes tamanhos de tela. - Responsividade: Discussão sobre a responsividade automática e como o Bootstrap facilita esse aspecto do design web com classes que ajustam conteúdos e imagens de forma fluida.
- Tipografia e Botões: Direciona sobre como utilizar as classes do Bootstrap para alinhar texto (
text-center,text-left,text-right,text-justify) e personalizar botões (btn-color,text-color). Links para documentação oficial são fornecidos para explorar mais opções de personalização. - Componentes Visuais: Aborda o uso de classes para a manipulação de imagens (
img-thumbnail,rounded-top, entre outros), permitindo ajustes finos nos elementos visuais do site. - Links úteis: Fornece vários links para a documentação oficial do Bootstrap, permitindo que os alunos aprofundem seus conhecimentos e explorem mais recursos disponíveis.
Este segmento do curso é fundamental para os alunos aprenderem a criar interfaces que não apenas pareçam boas em todos os dispositivos, mas que também sejam práticas e acessíveis, utilizando o poder do Bootstrap para acelerar o desenvolvimento e garantir consistência em projetos web.
Fundamentos de JavaScript
O JavaScript é apresentado como uma linguagem de programação interpretada, de alto nível, e multi-paradigma, com foco em funcional, imperativo, scripting e orientação a objetos. Sua tipagem é dinâmica, fraca e implícita.
Uso do JavaScript no Web Design
O material enfatiza que o foco da seção não é a programação em JavaScript em si, mas como usar JavaScript para alterar dinamicamente o conteúdo, o estilo e o comportamento dos sites. Sugere-se inserir scripts geralmente ao final do <body> para garantir que o HTML seja carregado antes de executá-los.
Modularização com JavaScript
Instruções sobre como modularizar o código JavaScript, recomendando a declaração de um arquivo main.js e a execução de comandos básicos como alert e console.log.
Estruturas e Operações em JavaScript
- Tipos de Dados: Exploração dos principais tipos de dados em JavaScript, como String, Number, Boolean e Array.
- Operadores: Descrição dos operadores básicos (aritméticos, de comparação e lógicos), incluindo operações como adição, subtração, multiplicação, divisão, e operações lógicas como AND, OR, e NOT.
- Controle de Fluxo: Discussão sobre estruturas de controle como condicionais e loops, incluindo o uso de
switch,break, econtinue.
Modificando HTML com JavaScript
Exemplos práticos sobre como usar JavaScript para manipular elementos HTML, alterar atributos como background-color, e responder a eventos, usando uma variedade de atributos de eventos HTML para manipular elementos baseados em ações do usuário.
Introdução ao JQuery
Breve introdução ao JQuery como um framework que simplifica a manipulação do HTML, mencionando que a declaração deve ser feita após a do arquivo jquery.js. Destaca a facilidade de uso do JQuery para executar métodos após o carregamento da página e manipular elementos de forma mais intuitiva e com menos código.
Este resumo abrange os principais tópicos discutidos na seção de JavaScript, focando nas capacidades de JavaScript para interagir com o HTML e como ele pode ser utilizado para criar sites interativos e dinâmicos.
JQuery – Facilitando a Manipulação do HTML
O jQuery é apresentado como um framework JavaScript poderoso que simplifica a manipulação de HTML, tornando-a mais acessível e menos propensa a erros. Ele é valorizado por sua versatilidade e extensibilidade, especialmente em tarefas comuns como eventos, animações e chamadas Ajax.
Características do jQuery
- Simplificação do JavaScript: jQuery minimiza a complexidade do código JavaScript, especialmente ao lidar com a compatibilidade entre navegadores.
- Execução Após o Carregamento da Página: Os métodos do jQuery são geralmente executados após o carregamento completo da página para garantir que todos os elementos HTML estejam disponíveis para manipulação.
- Manipulação Direta: jQuery permite a manipulação direta de elementos HTML, facilitando tarefas como alterar conteúdos, estilos, e responder a eventos do usuário.
Exemplos Práticos
- Interatividade com Botões: Demonstração de como adicionar funcionalidades interativas a botões, como alterar textos ou estilos dinamicamente. Por exemplo, um exercício proposto envolve configurar um botão para alterar a cor do texto em uma página quando clicado.
Esta seção destina-se a ensinar aos alunos como utilizar o jQuery para melhorar a interatividade e dinamismo de sites, empregando menos código e aproveitando os métodos prontos oferecidos pelo framework para manipulação rápida e eficiente do DOM.
Conteúdo Baseado no Usuário e Programação Server-side
Essa parte do curso parece focar em preparar os alunos para aspectos mais técnicos e avançados do desenvolvimento web, como a gestão de back-end e a interação com bancos de dados, essenciais para sites que requerem funcionalidades interativas e personalizadas baseadas no usuário.
- Tecnologias Server-side: Discute o uso de linguagens de programação server-side como PHP e Java, necessárias para a criação de sites dinâmicos que podem interagir com bancos de dados e manter estados de sessão.
- Bancos de Dados: Introdução à importância de bancos de dados em web design para armazenar dados de usuário, preferências e outras informações dinâmicas.
Configuração e Ferramentas de Desenvolvimento
- XAMPP: Tutorial sobre como baixar e configurar o XAMPP, um ambiente de servidor local para testar e desenvolver aplicações web que utilizam PHP e MySQL.
- Controle de Versão e Upload: Discussão sobre as melhores práticas para fazer upload de sites para servidores através da linha de comando (CLI), e dicas para evitar desconexões por inatividade, usando ferramentas como FileZilla.
Recursos Adicionais
- Links Úteis: O material fornece uma variedade de links para recursos externos como documentação oficial do Bootstrap, tutoriais interativos e sites de referência em web design como W3Schools e Mozilla Developer Network.
Sobre a UFMG
A Universidade Federal de Minas Gerais (UFMG) é uma das instituições de ensino superior mais prestigiadas do Brasil. Fundada em 1927 como Universidade de Minas Gerais, adquiriu seu status federal em 1949. Situada em Belo Horizonte, Minas Gerais, a UFMG é conhecida por sua excelência acadêmica e pesquisa intensiva.
