Skip to main content

3 posts tagged with "css"

View All Tags

· 5 min read

24/04/2021 - Aula 3 de HTML5, CSS3 e ES6 (Remoto)

Professor Jemerson ministrou a terceira aula da matéria de HTML5, CSS3 e Javascript, começou fazendo uma revisão sobre a aula anterior e mostrando o que vai ser visto pra aula de hoje. Comentou que hoje vai ter trabalho a ser feito, visto que é a ultima aula dessa matéria.

Trabalho

As informações do trabalho estão na pagina da disciplina.
Link

Continuando a aula anterior, a partir da página 47, professor se aprofundou em Jquery, utilizou o material em .PDF, professor comenta que vamos fazer um exemplo utilizando o formulário feito na aula atividade 2 do qual os itens vão ser salvos numa tabela que vai manipulada pelo DOM, utilizando Jquery.

Foi apresentado métodos de manipulação do DOM, como adicionar ações a elementos, manipular dados do elemento, adicionar novos atributos ou retornar o valor que ele tem e até mesmo manipular informações visuais, como adicionar CSS ou remover CSS.

A aula seguiu assim até umas 10:10, que foi quando foi feito um intervalo.

Voltando do intervalo as 10:30, deu continuidade na aula com uma atividade, para treinar o que foi visto até então. Após um tempo, o professor fez a atividade na aula com todos para explicar uma das possíveis soluções.

Tudo isso foi visto antes do almoço, até as 12:00. A aula voltou as 13:20

A aula continuou falando sobre o ES6 (ECMAScript), falando sobre o escopo que as variáveis tem nessa versão, o let e o var. É recomendado utilizar sempre let, visto que ele só funciona dentro do escopo em que ele esta declarado.

Exemplos

Exemplo 1
{
var x = 2;
}
// x pode ser utilizado aqui
{
let y = 2;
}
// y não pode ser utilizado aqui
Exemplo 2
var x = 10
// x = 10
{
var x = 2;
// x = 2
}
// x = 2

let y = 10
// y = 10
{
let y = 2;
// y = 2;
}
// y = 10


Nessa versão também tem o suporte a Arrow Functions, uma forma mais simples de declarar uma função.

Exemplos

Exemplo
// ES5
var x = function(x, y) {
return x * y;
}

// ES6
const x = (x,y) => x * y;


Podemos trabalhar com listas de forma melhor, utilizando o for/of, ele vai passando elemento por elemento, e salvando em uma variável para utilizar dentro do seu código.

Exemplos

Exemplo
var cars = ["BMW", "Volvo", "Mini"];
var x;

for (x of cars) {
document.write(x + "<br >");
}


Foi adicionado também o suporte a classes, para trabalhar com orientação a objetos. Promises também foram adicionadas para poder se trabalhar de forma assíncrona. Muitas outras novidades foram adicionadas, a lista completa pode ser vista em https://www.w3schools.com/js/js_es6.asp.

Após falar dos novos recursos, o professor fez um exemplo utilizando map, reduce e filter para mostrar para a turma como que funciona e possíveis utilizações.

Com isso terminamos o material da aula 02 e vamos dar inicio a aula 03.

O material dessa aula está no .PDF, e começamos vendo recursos da API HTML 5, recursos que são chamados, que os navegadores fornecem recursos para nossa aplicação, como a utilização da localização, microfone ou câmera do dispositivo. Uma lista completa pode ser vista aqui.

O Drag/Drop é um desses recursos que a API do HTML 5 fornece, para poder arrastar arquivos para dentro da aplicação. Professor fez um exemplo utilizando a atividade 1, adicionando a opção de mover as noticias para outro local.

O professor comentou que podemos salvar dados no navegador, dentro de um limite que varia de acordo com cada navegador, mas podemos utilizar o Web Storage, tanto para salvar dados, como informações de sessão, a diferença é que os dados de sessão são perdidos quando o navegador é fechado.

O professor também fez um exemplo de armazenamento utilizando local storage e a atividade feita anterior.

AS 16h o professor fez um intervalo de 15 minutos, e após voltar, continuou com a solução do exemplo de local storage.

Após o exemplo, foi falado de acessibilidade, responsividade e de performance dos site, alguns exemplos são:

Além de ferramentas, foi apresentado sites de templates, que ajudam a dar o ponta pé inicial, dentre eles temos:

Com isso foi finalizado a aula.

Trabalho

As informações do trabalho estão na pagina da disciplina.
Link

Antes de terminar, professor comenta do trabalho, que tem data de entrega dia 08/05/2021. O trabalho tem que atender ao seguintes requisitos:

  • Estilizar a página de forma livre utilizando css, sass e/ou Bootstrap; (60%)
  • Utilizar HTML5 API Drag/Drop fazendo com que os produtos da seção produtos possa ser movida para seção carrinho. (+20%)
  • Utilizar JavaScript (com ou sem JQuery) fazendo com que ao alterar a quantidade dos produtos, a tabela contendo informações de total de tens e valor total sejam atualizadas com os dados correspondentes;

· 4 min read

10/04/2021 - Aula 2 de HTML5, CSS3 e ES6 (Remoto)

Professor Jemerson ministrou a segunda aula da matéria de HTML5, CSS3 e Javascript, começou fazendo uma revisão sobre a aula anterior e mostrando o que vai ser visto pra aula de hoje.

Continuou utilizando o material em .PDF, a partir da página 49. Este material pode ter algumas diferenças em relação ao material da aula anterior pois o professor fez alguns ajustes e correções.

A aula continuou o material da primeira aula, na parte de CSS e seus tipos de seletores, classes, elementos, inline, etc.

Professor mandou um link para um repositório no GitHub e utilizando este projeto, o professor foi fazendo durante a aula a estilização do conteúdo com CSS e explicando o que cada alteração iria impactar.

Informação

Foi feito uma copia(fork) do projeto que o professor apresentou, está disponível no Github no seguinte link:
https://github.com/pos-unipar/.

Um .zip foi gerado, do projeto no commit 92aaa8d, que é o commit em que estava o projeto na aula de hoje.

Foi comentado sobre o normalize.css, um projeto que contem formatações CSS para sobrescrever configurações de navegadores, o que pode garantir uma maior compatibilidade com diversos navegadores.

Entrando na parte de fontes, foi apresentado como importamos fontes, que da para trabalhar elas de forma externa ou interna, de que o sistema operacional precisa ter a fonte, caso contrario, uma fonte padrão vai ser utilizada.

Foi falado de outros componentes como Media Queries, Box model, Motores de renderização, tudo isso antes da hora do almoço.

Após o almoço, professor pediu para fazer a atividade da página 84 do .PDF, fazer essa atividade utilizando o projeto que o professor passou, já com as alterações que ele fez durante a aula de hoje, utilizando os arquivos da pasta exemplo.

Depois de um tempo para o pessoal tentar fazer, professor começou a fazer a atividade e explicar cada alteração.

Terminando essa parte da atividade, o professor começa a falar de frameworks front-ent:

Além de ver alguns dos principais front-ends, utilizamos o Bootstrap para modificar a pasta atividade, aplicando a versão 4.6 do framework. Após esse processo, professor fez o envio dessa alteração para o Github.

Com tudo isso, terminamos o material que era da aula 01 do dia 27/03/2021.


Agora vamos começar o conteúdo da aula de hoje utilizando o .PDF, começando vendo sobre SASS.

No conteúdo de SASS, o professor mostra o que é, como fazer a instalação e como trabalhar com ele. Começa apresentando as formas de se criar um arquivo .sass, que podemos trabalhar com variáveis, com alinhamento das propriedades, @Mixin, @extend, @import e Compass.

Em sequencia, é solicitado para instalarmos a extensão Live Sass Compiler no Visual Studio Code. Depois de instalado, foi solicitado para adicionar a seguinte configuração no Visual Studio Code. Vale notar que a extensão comentada tem dois plugins, instale a do link.

"liveSassCompile.settings.formats": [
{
"format": "expanded",
"extensionName": ".css",
"savePath": "~/../css"
}
],

Após essas configurações, migramos o .css da pasta exemplo do projeto do professor para ser um .scss e ver como ele se comporta. O plugin vai gerando o arquivo .css conforme vai sendo alterado o .scss.

Terminando esse assunto, entramos em JavaScript, vendo o que é, como utilizar ele na aplicação, como chamar, sua sequencia de chamada, o que pode ser feito, quais elementos consegue manipular, etc.

Além de JavaScript, foi visto JQuery, que é uma biblioteca em javascript para facilitar ações que queira fazer com javascript, como a seleção de elementos, que em javascript seria muito trabalhoso.

Com isso terminamos a segunda aula, conseguindo terminar tudo qeu tinha que ser visto para hoje.

· 2 min read

27/03/2021 - Aula 1 de HTML5, CSS3 e ES6 (Remoto)

Professor Jemerson ministrou a primeira matéria do curso, a de HTML5, CSS3 e Javascript. Durante a primeira aula, foi realizado apresentações, tanto do professor como dos alunos. Em seguida o conteúdo começou a ser apresentado utilizando utilizando o material em .PDF.

Após o almoço, iniciou a aula na pratica, professor tinha solicitado para instalar o Visual Studio Code anteriormente e pediu para instalar a seguinte extensão:

Começamos dai a ver na pratica as tags HTML e suas funções e em seguida o professor Jemerson passa uma atividade para ser feito.

Após 20 minutos, ele volta e começa a explicar para fazer o upload da atividade para o Github, ele explica como criar um projeto, e os passos iniciais para poder enviar o projeto da nossa maquina para o servidor do github.

Após essa atividade, professor mostrou algumas ferramentas para criar sites, um template que ajuda com recursos e ferramentas:

  • Modernizr: É uma pequena biblioteca Javascript que identifica a disponibilidade das novas características do HTML5 e CSS3 nos browsers. https://modernizr.com/
  • HTML5 Boilerplate: É um conjunto de arquivos de código aberto, disponível para download que fornecem uma base para criação de qualquer site - https://html5boilerplate.com

Foi apresentado também algumas ferramentas para verificar compatibilidade com html5:

Seguindo o conteúdo, começamos a ver os tipos de inputs existentes no HTML5

Professor iniciou também a parte de CSS, comentando o que é, mas não se aprofundou nos seus recursos.

Nota

Para o primeiro dia de aula, não se foi concluído o objetivo, o material em PDF tem 81 paginas e chegamos somente até a página 47.