diff --git a/README.md b/README.md index 53b8fbf..37b3a7d 100644 --- a/README.md +++ b/README.md @@ -1,2 +1,31 @@ -# checkpoint2 -Atividade referente ao segundo checkpoint da disciplina de Introdução a Informática +# Checkpoint: BlogII DH + +Atividade referente ao segundo checkpoint da disciplina de Introdução a Informática. + +## Objetivo + +Avaliar os conhecimentos adquiridos ao longo das aulas e o trabalho em +equipe dos alunos, além de fazer um uso mais extensivo do GitHub entre o +grupo. + +## Atividade + +1. Serão constituídos grupos de 6 a 8 alunos e cada grupo receberá os seguintes temas para pesquisa: + 1. Paradigmas de programação + 2. Virtualização + 3. Redes de computadores + 4. Internet + 5. Segurança Informática + 6. Ética na computação +2. Cada grupo será responsável por coletar notícias e relacionar com o que foi visto na sala de aula. +3. A apresentação será feita via GitHub pages, ou seja, criar uma página usando o próprio GitHub e colocar as notícias, uma ou mais imagens e textos nesta página. O formato da página é livre, porém será disponibilizado um template para auxílio do trabalho. +4. A formatação da página **NÃO** será determinante para a nota. O importante é a compreensão da matéria, a relação com a notícia e o uso do GitHub. +5. Todos os integrantes do grupo devem estar como colaboradores e realizarem pelo menos um commit com uma alteração relevante (adição de um texto, correção de alguma característica da página ou inserção da imagem em cada um dos tópicos). + +**Fique atento:** + +- Este checkpoint é uma avaliação diagnóstica das aulas anteriores. +- A apresentação ocorrerá durante a aula ao vivo (síncrona). +- É importante ter em mente que esta atividade é obrigatória. +- Os alunos serão avaliados pela apresentação, por isso é importante que + todos tenham um tempo de fala durante o seminário. diff --git a/css/style.css b/css/style.css new file mode 100644 index 0000000..55c1c06 --- /dev/null +++ b/css/style.css @@ -0,0 +1,238 @@ +/* Reset e padrões */ +@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@400;500;700&display=swap'); +* { + margin: 0; + padding: 0; + box-sizing: border-box; + scroll-behavior: smooth; +} +a { + text-decoration: none; + color: var(--title-color-light); +} +:root { + --base-color: #1f2276; + --second-color: #512f89; + --body-color: #f9f9f9; + --title-color-light: #fff; + --title-color-second: #876bdc; + --text-color: #000; +} +.container { + margin: 0 7.68rem; +} +.flex { + display: flex; +} +body { + background: var(--body-color); + font: 500 1rem 'Roboto', sans-serif; + color: var(--text-color); +} + +/* Header e Hero(banner) */ +header { + height: 6.25rem; + position: fixed; + width: 100%; +} +.header-scrolled { + animation: header_backgroud 0.5s linear both; +} +h1 { + color: var(--title-color-light); + font: 700 1.75rem 'Montserrat', sans-serif; + font-size: 4rem; +} +svg { + fill: var(--title-color-second); +} +#header { + height: 100%; + display: flex; + align-items: center; + justify-content: space-between; +} +.logo { + display: flex; + align-items: center; + gap: 10px; + font: 700 1.75rem 'Montserrat', sans-serif; +} +header span, +.hero span { + color: var(--title-color-second); +} +.menu { + font: 400 1rem 'Montserrat', sans-serif; + list-style-type: none; + display: flex; + gap: 3.1875rem; +} +.menu a:hover { + color: var(--title-color-second); +} +#inicio { + background-color: #512f89; + height: 100vh; + display: flex; + flex-direction: column; + justify-content: center; + align-items: center; +} +.hero { + margin-top: 10rem; + margin-bottom: 10rem; +} +#inicio svg { + height: 1.875rem; + width: 1.875rem; +} + +/* Artigos */ +section { + height: 100vh; + justify-content: space-between; + align-items: center; +} +.inverted { + flex-flow: row-reverse; +} +.info__text, +section .img { + border-width: 0px; + border-color: #cccccc; + background-color: #ffffff; + color: #000000; + border-style: solid; + border-radius: 10px; + box-shadow: 0px 0px 5px rgba(66, 66, 66, 0.5); +} +section .img { + width: 30%; + height: 50%; +} +.info__text { + padding: 30px; + width: 68%; + height: 50%; + overflow: auto; +} +.info__text h2 { + margin-bottom: 15px; +} +.info__text h3, +.info__text p, +.Button_lerMais { + margin-bottom: 10px; +} +.info__text span { + color: var(--second-color); +} +.Button_lerMais { + box-shadow: 0px 10px 14px -7px #276873; + background-color: var(--base-color); + border-radius: 8px; + display: inline-block; + cursor: pointer; + font-family: Arial; + font-size: 20px; + font-weight: bold; + padding: 13px 32px; + text-decoration: none; + text-shadow: 0px 1px 0px #3d768a; +} +.Button_lerMais:hover { + background-color: var(--second-color); +} +.Button_lerMais:active { + position: relative; + top: 1px; +} + +/* Imagens dos artigos */ + +.artigo__paradigmas .img { + background: url(../img/linguagem-elixir-capa-tb.png); + background-repeat: no-repeat; + background-position: center; + background-size: cover; +} +.artigo__virtualizacao .img { + background: url(#); + background-repeat: no-repeat; + background-position: center; + background-size: cover; +} +.artigo__redes .img { + background: url(https://inputec.com.br/wp-content/uploads/2019/12/Inputec-Tipos-De-Redes-Internet-Computadores-Tecnologia-Da-Informa%C3%A7%C3%A3o-960x675.jpg); + background-repeat: no-repeat; + background-position: center; + background-size: cover; +} +.artigo__internet .img { + background: url(#); + background-repeat: no-repeat; + background-position: center; + background-size: cover; +} +.artigo__seguranca .img { + background: url(../img/pexels-pixabay-60504.jpg); + background-repeat: no-repeat; + background-position: center; + background-size: cover; +} +.artigo__etica .img { + background: url(#); + background-repeat: no-repeat; + background-position: center; + background-size: cover; +} + +/* Footer (sobre o grupo) */ +footer { + width: 100%; + height: 350px; + background-color: #171717; + color: #ffffff; + display: flex; + flex-direction: column; + gap: 40%; + position: relative; + bottom: 0; + left: 0; +} + +.infos { + display: flex; + flex-direction: row; + width: 100%; + padding: 1%; + text-align: center; + flex-wrap: wrap; + align-items: center; + justify-content: center; + justify-self: center; +} + +.infoAluno { + width: 33.33%; + display: flex; + flex-direction: column; + gap: 12px; + margin-bottom: 3%; +} + +.infoDesenvolvimento { + font-size: 0.8rem; + color: rgba(255, 255, 255, 0.75); +} + +@keyframes header_backgroud { + 0% { + } + 100% { + background: var(--base-color); + height: 2rem; + } +} diff --git a/img/githubLogo.png b/img/githubLogo.png new file mode 100644 index 0000000..4959722 Binary files /dev/null and b/img/githubLogo.png differ diff --git a/img/icon/c25372bd6584a7ac9717d84eb0ddacff.svg b/img/icon/c25372bd6584a7ac9717d84eb0ddacff.svg new file mode 100644 index 0000000..04cc1c0 --- /dev/null +++ b/img/icon/c25372bd6584a7ac9717d84eb0ddacff.svg @@ -0,0 +1,7 @@ + + + + + + + \ No newline at end of file diff --git a/img/icon/github.svg b/img/icon/github.svg new file mode 100644 index 0000000..ad0d576 --- /dev/null +++ b/img/icon/github.svg @@ -0,0 +1,7 @@ + + + + + Svg Vector Icons : http://www.onlinewebfonts.com/icon + + \ No newline at end of file diff --git a/img/icon/linkedin.svg b/img/icon/linkedin.svg new file mode 100644 index 0000000..4101f02 --- /dev/null +++ b/img/icon/linkedin.svg @@ -0,0 +1,7 @@ + + + + + Svg Vector Icons : http://www.onlinewebfonts.com/icon + + \ No newline at end of file diff --git a/img/linguagem-elixir-capa-tb.png b/img/linguagem-elixir-capa-tb.png new file mode 100644 index 0000000..13acdfc Binary files /dev/null and b/img/linguagem-elixir-capa-tb.png differ diff --git a/img/linkedinLogo.png b/img/linkedinLogo.png new file mode 100644 index 0000000..2cf614c Binary files /dev/null and b/img/linkedinLogo.png differ diff --git a/img/pexels-pixabay-60504.jpg b/img/pexels-pixabay-60504.jpg new file mode 100644 index 0000000..0ba00a3 Binary files /dev/null and b/img/pexels-pixabay-60504.jpg differ diff --git a/index.html b/index.html index c570e93..f5ccc7c 100644 --- a/index.html +++ b/index.html @@ -1,130 +1,500 @@ - - - - - - -
-

Checkpoint 2

-
- -
-
-
-

Paradigmas de Programação

-
Aula 13
-
Image
-

Referência da notícia + texto de como a notícia se relaciona com o que vimos em sala

-
-
-

Virtualização

-
Aula 14
-
Image
-

Referência da notícia + texto de como a notícia se relaciona com o que vimos em sala

-
-
-
-
-

Sobre o Grupo

-
Image
-
    -
  • Membro 1
    • -
  • Membro 2
    • -
  • Membro 3
    • -
  • Membro 4
    • -
  • Membro 5
    • -
  • Membro 6
    • -
-
-
-

Popular Post

-
Image

-
Image

-
Image
-
-
-

Siga-nos!

- -
-
-
- -
-

Digital House

-
+ Ler mais + + +
+
+
+

Virtualização

+

+ Lorem ipsum dolor sit amet consectetur adipisicing + elit. +

+

+ Lorem ipsum dolor sit amet consectetur adipisicing + elit. Eaque a perferendis, ex impedit deserunt + numquam alias veritatis nihil et doloribus + consequatur sit, repellat nisi vero, libero quos + autem rem ullam. +

+ Ler mais +
+
+
+ +
+
+

Redes de Computadores

+

+ Redes de dados, na informática e na telecomunicação + é um conjunto de dois ou mais dispositivos + eletrônicos de computação (ou módulos processadores + ou nós da rede) interligados por um sistema de + comunicação digital (ou link de dados), guiados por + um conjunto de regras (protocolo de rede) para + compartilhar entre si informação, serviços e, + recursos físicos e lógicos. Estes podem ser do tipo: + dados, impressoras, mensagens (e-mails), entre + outros. As conexões podem ser estabelecidas usando + mídia de cabo ou mídia sem fio. +

- +

+ Os dispositivos integrantes de uma rede de + computadores, que roteiam e terminam os dados, são + denominados de “nós de rede" (ponto de conexão), que + podem incluir hosts, como: computadores pessoais, + telefones, servidores, e também hardware de rede. + Dois desses dispositivos podem ser ditos em “rede” + quando um dispositivo é capaz de trocar informações + com o outro dispositivo, quer eles tenham ou não uma + conexão direta entre si. +

+ +

+ Os exemplo mais comuns de redes de computadores, + são: Internet; Intranet de uma empresa; rede local + doméstica; entre outras. +

+ +

Conexões

+

+ Trançado: facil instalação e barato, + Cabo coaxial: usado em tv, + Fibra óptica: melhor meio físico + disponível graças à sua velocidade e largura de + banda mas é custoso, Wireless : Seus + dados se espalham livremente pelo ar. Os mais usados + ​​são os infravermelhos, como o usado pelo controle + remoto. Seu grande problema é a direcionalidade + necessária para estabelecer a comunicação, + Bluetooth : é a solução mais utilizada + em redes PAN, pois seu alcance máximo é de 10 + metros, Wi-fi : É o mais utilizado em + redes LAN, pois tem alcance de 100 metros em + ambientes externos, Entretanto, seu alcance é + reduzido em residências devido à presença das + paredes, +

+

Endereço IP

+

+ Cada dispositivo em uma rede possui um identificador + único, que serve para indicar a origem ou o destino + da transmissão: Esse identificador é chamado de + endereço da rede (network address). +

+ +

+ O endereço IP é o identificador mais comum de um + dispositivo de rede, mas existem também outros + identificadores como o MAC address (Media Access + Control Address), que são utilizados em + configurações mais avançadas. +

+

+ Dinâmica: se permitirmos que o roteador + designe automaticamente nosso IP. +

+

+ Estática: quando o definimos a partir + do sistema operacional. +

+

+ Gateway: é usado por dispositivos de + uma rede quando eles se comunicam com um dispositivo + em uma rede diferente daquela em que estão. +

+

Meios de transmissão de informações

+

+ Mídia guiada: Constitui-se por cabos + que são responsáveis ​​por conduzir os sinais de uma + ponta a outra. A velocidade de transmissão depende + diretamente da distância entre os terminais +

+

+ Mídia não guiada : Constitui-se por + cabos que são responsáveis ​​por conduzir os sinais + de uma ponta a outra. A velocidade de transmissão + depende diretamente da distância entre os terminais. + A transmissão e recepção das informações é realizada + por antenas. Ao transmitir, a antena irradia energia + eletromagnética no meio e a antena a recebe ao + capturar as ondas eletromagnéticas do meio que a + rodeia. +

+ Ler mais +
+
+
+
+
+

Internet

+

+ Lorem ipsum dolor sit amet consectetur adipisicing + elit. +

+

+ Lorem ipsum dolor sit amet consectetur adipisicing + elit. Eaque a perferendis, ex impedit deserunt + numquam alias veritatis nihil et doloribus + consequatur sit, repellat nisi vero, libero quos + autem rem ullam. +

+ Ler mais +
+
+
+
+
+

Segurança Informática

+

+ Microsoft revela como grupo Lapsus$ invade empresas +

+

+ Em um comunicado publicado em seu site de segurança, + a Microsoft reconheceu ter sido vítima do Lapsus$ + Group. Após invadir um servidor Azure DevOps, os + hackers do grupo extraíram e vazaram códigos-fontes + de serviços como Bing e Cortana. A companhia afirma, + porém, que a ação foi mitigada e que dados de + clientes não foram comprometidos. +

+

+ A atividade foi atribuída a um grupo que a Microsoft + rastreia como DEV-0537, também conhecido como + LAPSUS$. O DEV-0537 é conhecido por usar um modelo + de extorsão sem implantar ransomware. Entre seus + primeiros alvos estão organizações no Reino Unido e + na América do Sul, mas expandiu para alvos globais, + incluindo organizações nos setores governamentais, + de tecnologia, telecomunicações, mídia, varejo e + saúde. +

+

+ Ao contrário da maioria dos grupos hackers que ficam + sob o radar, o DEV-0537 não parece cobrir seus + rastros. Eles chegam a anunciar seus ataques nas + mídias sociais ou anunciar sua intenção de comprar + credenciais de funcionários de organizações-alvo. O + DEV-0537 também usa várias táticas que são usadas + com menos frequência por outros grupos rastreados + pela Microsoft. Suas táticas incluem engenharia + social baseada em telefone; Troca de SIM para + facilitar a aquisição de contas; acessar contas de + e-mail pessoais de funcionários em + organizações-alvo; pagar funcionários, fornecedores + ou parceiros de negócios de organizações-alvo para + acesso a credenciais e aprovação de autenticação + multifator (MFA); e intrometendo-se nas chamadas de + comunicação de crise em curso de seus alvos. +

+ Ler mais +
+
+
+
+
+

Ética na computação

+

+ Lorem ipsum dolor sit amet consectetur adipisicing + elit. +

+

+ Lorem ipsum dolor sit amet consectetur adipisicing + elit. Eaque a perferendis, ex impedit deserunt + numquam alias veritatis nihil et doloribus + consequatur sit, repellat nisi vero, libero quos + autem rem ullam. +

+ Ler mais +
+
+ + + + + + diff --git a/js/script.js b/js/script.js new file mode 100644 index 0000000..116437e --- /dev/null +++ b/js/script.js @@ -0,0 +1,22 @@ +const header = document.querySelector('header'); +const sectionInicio = document.querySelector('#inicio'); + +const sectionOneOptiInicio = { + rootMargin: '-100px 0px 0px 0px', +}; + +const sectionOneObserInicio = new IntersectionObserver(function ( + entries, + sectionOneObserInicio +) { + entries.forEach(entry => { + if (!entry.isIntersecting) { + header.classList.add('header-scrolled'); + } else { + header.classList.remove('header-scrolled'); + } + }); +}, +sectionOneOptiInicio); + +sectionOneObserInicio.observe(sectionInicio); diff --git a/template.css b/template.css deleted file mode 100644 index a095843..0000000 --- a/template.css +++ /dev/null @@ -1,64 +0,0 @@ -body { - font-family: Arial; - padding: 20px; - background: #f1f1f1; - } - - /* Header/Blog Title */ - .header { - padding: 30px; - font-size: 40px; - text-align: center; - background: white; - } - - /* Create two unequal columns that floats next to each other */ - /* Left column */ - .leftcolumn { - float: left; - width: 75%; - } - - /* Right column */ - .rightcolumn { - float: left; - width: 25%; - padding-left: 20px; - } - - /* Fake image */ - .fakeimg { - background-color: #aaa; - width: 100%; - padding: 20px; - } - - /* Add a card effect for articles */ - .card { - background-color: white; - padding: 20px; - margin-top: 20px; - } - - /* Clear floats after the columns */ - .row:after { - content: ""; - display: table; - clear: both; - } - - /* Footer */ - .footer { - padding: 20px; - text-align: center; - background: #ddd; - margin-top: 20px; - } - - /* Responsive layout - when the screen is less than 800px wide, make the two columns stack on top of each other instead of next to each other */ - @media screen and (max-width: 2160px) { - .leftcolumn, .rightcolumn { - width: 100%; - padding: 0; - } - } \ No newline at end of file