📰 post - Adding the "Introdução ao HTML na Prática" certificate

kastney · Nov 10, 2024 · ed1bfb9 · ed1bfb9
1 parent 28e6334
commit ed1bfb9
Show file tree

Hide file tree

Showing 9 changed files with 142 additions and 33 deletions.
diff --git a/004certificates.md b/004certificates.md
@@ -6,5 +6,5 @@ permalink: "/certificados/"
 permalink_us: "/certificates/"
 menu_enabled: false
 collection: certificates
-per_page: 10
+per_page: 12
 ---
diff --git a/_collections/_certificates_br/2024-11-09T18-01.md b/_collections/_certificates_br/2024-11-09T18-01.md
@@ -0,0 +1,81 @@
+---
+layout: certificate
+type: course
+code: "yPyPeMlZ3EagHzEIkLs05w"
+authority: dio
+certificate:
+    name: "Introdução ao HTML na Prática"
+    workload: "0000-00-00T02:00:00"
+competencies: [
+    html5,
+    visual-studio-code,
+    live-server,
+    google-chrome
+]
+date: "2024-11-09T18:01:00"
+---
+
+Ao concluir o curso **Introdução ao HTML na Prática**, aumentei minha base sobre a construção e estruturação de documentos HTML. O curso seguiu uma abordagem prática, desde a **instalação das ferramentas essenciais** até o desenvolvimento de uma página HTML simples, mas funcional. Esse aprendizado abrangeu a criação de **tags** e **atributos**, o uso de **listas**, **links** e **formatação de textos**, além de explorar ferramentas do navegador, como o **Inspetor de Elementos**.
+
+## Ferramentas Utilizadas
+
+O primeiro passo foi preparar o ambiente de desenvolvimento. Instalei o **Visual Studio Code** e configurei o *Live Server*, que possibilita a visualização em tempo real das alterações no código HTML. Para o navegador, optei pelo **Google Chrome**, garantindo uma **visualização consistente** e otimizada das páginas durante o desenvolvimento.
+
+## Inspetor de Elementos
+
+Descobrir novos recursos do **Inspetor de Elementos** do navegador foi especialmente útil. Essa ferramenta permite visualizar e modificar o código HTML diretamente na interface do navegador, o que facilitou **experimentos rápidos** e o entendimento do comportamento dos elementos. Foi interessante observar que as alterações no inspetor são temporárias, voltando ao estado original ao atualizar a página, que surgi a possibilidade um ambiente seguro para testes e novas possibilidades no site.
+
+## Estrutura Básica do HTML
+
+No curso, foi apresentada a estrutura básica de um documento HTML, dividida em duas partes principais:
+
+- **Cabeça (*Head*)**: onde se definem informações carregadas antes do conteúdo principal, como o título e metadados.
+- **Corpo (*Body*)**: onde são colocados os elementos visíveis ao usuário.
+
+Essa separação ajuda a organizar o documento HTML de forma lógica, garantindo que o navegador carregue primeiro as informações essenciais antes do conteúdo visual.
+
+## Tags em HTML
+
+Foi abordado o uso de **tags**, que são fundamentais para construir a estrutura da página. Reforcei o uso das principais tags:
+
+- **Tags Estruturais**: `<html>`, `<head>`, `<body>`, que formam a base do documento.
+- **Tags de Formatação**: `<i>` e `<strong>`, que aplicam *itálico* e **negrito** ao texto.
+- **Tags Autocontidas**: como `<input>` e `<img>`, que não exigem uma tag de fechamento.
+
+Essas tags foram essenciais para criar estruturas variadas e compreender o uso de aninhamento, aplicando múltiplas formatações a um mesmo elemento.
+
+## Atributos das Tags
+
+A seção sobre **atributos** ampliou minha capacidade de personalizar os elementos HTML. Com atributos, consegui ajustar o comportamento e a aparência dos elementos de maneira prática:
+
+- **Atributos Gerais**: como `id`, `style` e `class`, amplamente aplicáveis para modificar a apresentação visual e o comportamento no CSS.
+- **Atributos Específicos**: aplicáveis a tags específicas, como `type` em `<input>` e `src` em `<img>`, que oferecem controle adicional sobre esses elementos.
+
+Esses atributos permitiram a criação de elementos mais personalizados e funcionais, como *inputs* configurados para diferentes tipos de dados.
+
+## Textos e Tipografia
+
+A formatação de texto em HTML é essencial para a **legibilidade**. No curso, reforcei o uso de tags para **cabeçalhos** (`<h1>` a `<h6>`), **parágrafos** (`<p>`) e **citações** (`<blockquote>`), estruturando o conteúdo de forma hierárquica e visualmente agradável. Tags como `<u>`, `<mark>` e `<sup>` ajudam a **sublinhar**, **destacar** e **posicionar** textos de modo versátil, enriquecendo a apresentação do conteúdo.
+
+## Listas Ordenadas e Não Ordenadas
+
+Outro tema abordado no curso foram as listas em HTML, elementos importantes para a organização de informações:
+
+- **Listas Ordenadas** (`<ol>`): para itens numerados sequenciais.
+- **Listas Não Ordenadas** (`<ul>`): para itens sem ordem específica.
+
+Com essas listas, criei **menus** e **listas** que facilitam a navegação e a leitura, especialmente em conteúdos com múltiplos tópicos.
+
+## Links e Navegação
+
+O curso também abordou a navegação com a **tag `<a>`**, fundamental para conectar páginas e conteúdos na web. Os principais atributos explorados foram:
+
+- `href`: para definir o destino do link.
+- `target`: para determinar se o link abre na mesma aba (`_self`) ou em uma nova aba (`_blank`).
+- `title`: que exibe uma dica ao passar o mouse sobre o link.
+
+A prática incluiu a criação de links entre duas páginas (`index.html` e `about.html`), permitindo uma compreensão prática da estrutura de navegação entre páginas.
+
+## Reflexão Final
+
+Esse curso de **Introdução ao HTML na Prática** me proporcionou um **entendimento prático** sobre a linguagem e sua estrutura. Trabalhar com **tags** e **atributos** reforçou minha habilidade técnica e a importância da **organização** e **clareza** no código para uma boa experiência de desenvolvimento. A introdução ao **Inspetor de Elementos** e ao uso de ferramentas como o *Visual Studio Code* com *Live Server* aumentou minha produtividade, permitindo **visualizações em tempo real e ajustes rápidos**. Esse conhecimento amplia minha confiança para desenvolver **páginas estruturadas** e navegar com mais domínio nos fundamentos do HTML, consolidando uma base sólida para evoluir no desenvolvimento web.
diff --git a/_collections/_certificates_us/2024-11-09T18-01.md b/_collections/_certificates_us/2024-11-09T18-01.md
@@ -0,0 +1,16 @@
+---
+layout: certificate
+type: course
+code: "yPyPeMlZ3EagHzEIkLs05w"
+authority: dio
+certificate:
+    name: "Practical Introduction to HTML"
+    workload: "0000-00-00T02:00:00"
+competencies: [
+    html5,
+    visual-studio-code,
+    live-server,
+    google-chrome
+]
+date: "2024-11-09T18:01:00"
+---
diff --git a/_data/competencies.yml b/_data/competencies.yml
@@ -1,18 +1,22 @@
-html5:
-  logo: "/assets/images/logos/html5.svg"
 css3:
   logo: "/assets/images/logos/css3.svg"
-javascript:
-  logo: "/assets/images/logos/javascript.svg"
-google-gemini:
-  logo: "/assets/images/logos/google-gemini.svg"
-visual-studio-code:
-  logo: "/assets/images/logos/visual-studio-code.svg"
 git:
   logo: "/assets/images/logos/git.svg"
-github:
-  logo: "/assets/images/logos/github.svg"
 git-bash:
   logo: "/assets/images/logos/git-bash.svg"
+github:
+  logo: "/assets/images/logos/github.svg"
+google-chrome:
+  logo: "/assets/images/logos/google-chrome.svg"
+google-gemini:
+  logo: "/assets/images/logos/google-gemini.svg"
+html5:
+  logo: "/assets/images/logos/html5.svg"
+javascript:
+  logo: "/assets/images/logos/javascript.svg"
 markdown:
-  logo: "/assets/images/logos/markdown.svg"
+  logo: "/assets/images/logos/markdown.svg"
+visual-studio-code:
+  logo: "/assets/images/logos/visual-studio-code.svg"
+
+# live-server:
diff --git a/_includes/cards/certificate.html b/_includes/cards/certificate.html
@@ -61,18 +61,19 @@
 
         <!-- Área para o conteúdo principal do certificado -->
         <div class="certificate-area">
-            <!-- Empresa emissora do certificado -->
-            {%- assign authority = site.data.authority[card_post.authority] -%}
-            {%- if authority -%}
-                <div class="certificate-authority">
-                    <img src="{{authority.logo}}" />
-                    <span>{{authority.name}}</span>
-                </div>
-            {%- endif -%}
+            <div>
+                <!-- Empresa emissora do certificado -->
+                {%- assign authority = site.data.authority[card_post.authority] -%}
+                {%- if authority -%}
+                    <div class="certificate-authority">
+                        <img src="{{authority.logo}}" />
+                        <span>{{authority.name}}</span>
+                    </div>
+                {%- endif -%}
 
-            <!-- Nome do certificado -->
-            <p><strong>{{card_post.certificate.name}}</strong></p>
-
+                <!-- Nome do certificado -->
+                <p><strong>{{card_post.certificate.name}}</strong></p>
+            </div>
             <!-- Data de emissão do certificado -->
             <span>{{card_post.date | localized_date: site.translations[site.lang].core.lang}}</span>
         </div>

diff --git a/_layouts/default.md b/_layouts/default.md
@@ -19,7 +19,9 @@ layout: compress
       {%- include scripts/core.js -%}
       {%- include scripts/scroll-status.js -%}
       {%- include scripts/click-to-top.js -%}
-      {%- include scripts/click-to-more.js -%}
+      {%- if page.banner -%}
+        {%- include scripts/click-to-more.js -%}
+      {%- endif -%}
       {%- include scripts/contextmenu-disabled.js -%}
       {%- include scripts/dropdown.js -%}
     </script>

diff --git a/_sass/layouts/_card.scss b/_sass/layouts/_card.scss
@@ -45,9 +45,9 @@
             column-gap: 4px;
 
             img {
-                background-color: rgba(255, 255, 255, 0.5);
+                background-color: rgba(255, 255, 255, 0.6);
                 backdrop-filter: $frosted-glass-effect;
-                box-shadow: 0 4px 4px rgba(0, 0, 0, 0.7);
+                box-shadow: 0 4px 4px rgba(0, 0, 0, 0.5);
                 border-radius: 6px;
                 padding: 5px;
                 height: 28px;
@@ -58,26 +58,30 @@
         .certificate-area {
             background-color: $card-light;
             backdrop-filter: $frosted-glass-effect;
-            padding: 5px 10px 5px 10px;
+            padding: 5px 10px;
+            height: 100px;
+            display: flex;
+            flex-direction: column;
+            justify-content: space-between;
 
             span {
                 font-size: 10px;
             }
 
-            img {
-                height: 13px;
-                width: 13px;
-            }
-
             p {
-                padding: 8px 0;
+                padding-top: 4px;
             }
 
             .certificate-authority {
                 display: flex;
                 align-items: center;
                 column-gap: 5px;
             }
+
+            img {
+                height: 13px;
+                width: 13px;
+            }
         }
     }
 }
diff --git a/assets/images/certificates/yPyPeMlZ3EagHzEIkLs05w/thumb.jpeg b/assets/images/certificates/yPyPeMlZ3EagHzEIkLs05w/thumb.jpeg
diff --git a/assets/images/logos/google-chrome.svg b/assets/images/logos/google-chrome.svg