-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
139 lines (117 loc) · 7.18 KB
/
index.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
<!DOCTYPE html>
<html lang="pt-br">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="style.css">
<link rel="shortcut icon" href="img/favicon-32x32.png" type="image/x-icon">
<title>InfoWeb - Informação e inclusão</title>
</head>
<body>
<header>
<div id="recursos">
<ul>
<li>Navegar utilizando atalhos: alt + número</li>
<li>5️⃣Libras</li>
<li><a href="ajuda-acessibilidade.html" accesskey="6">6️⃣Ajuda de Acessibilidade</a></li>
</ul>
<div id="size-menu">
Alterar tamanho da fonte:
<button onclick="aumentar()"><img src="img/font+.png" alt="Aumentar fonte"></button>
<button onclick="diminuir()"><img src="img/font-.png" alt="Diminuir fonte"></button>
</div>
<div class="container-contrast">
Alto contraste: <button id="contrast-icon"><img src="img/simbolo-do-circulo-de-contraste (1).png" alt="Alterar para alto contraste"></button>
</div>
</div>
<hr>
<nav>
<a href="index.html"><img src="img/InfoWeb-logo.png" alt="Logotipo InfoWeb - Informação e inclusão"></a>
<ul>
<li><button onclick="mostrar1()" class="tab-btn" accesskey="1">1️⃣O que é WordPress</button></li>
<li><button onclick="mostrar2()" class="tab-btn" accesskey="2">2️⃣Como surgiu</button></li>
<li><button onclick="mostrar3()" class="tab-btn" accesskey="3">3️⃣Oque é um CMS</button></li>
<li><button onclick="mostrar4()" class="tab-btn" accesskey="4">4️⃣Exemplos</button></li>
</ul>
</nav>
</header>
<div vw class="enabled"> <!---------botão de libras------->
<div accesskey="5" tabindex="0" vw-access-button class="active"></div>
<div vw-plugin-wrapper>
<div class="vw-plugin-top-wrapper"></div>
</div>
</div>
<main>
<div class="container" id="caixa1">
<div class="item">
<h1>O que é WordPress?</h1>
<p>O WordPress é uma plataforma de código aberto usada para gerenciar sites e blogs. Com interface intuitiva e recursos personalizáveis, é acessível para usuários sem conhecimento de programação. A plataforma tem uma comunidade ativa de desenvolvedores e usuários que criam e compartilham plugins e temas para aprimorar a experiência do usuário.</p>
</div>
<img src="https://www.gocache.com.br/wp-content/uploads/2017/11/wordpress_everywhere.png" alt="Imagem ilustrativa de um computador com fundo do WordPress">
</div>
<div class="container" id="caixa2">
<div class="item">
<h2>Como surgiu o WordPress?</h2>
<p>O WordPress foi criado em 2003 por Matt Mullenweg e Mike Little como uma plataforma de blog de código aberto.</p>
<p>Ele foi criado como uma alternativa ao programa de blog que já existia na época, oferecendo uma interface de usuário simples e intuitiva e recursos de personalização. Com o tempo, o WordPress evoluiu para se tornar uma plataforma CMS completa.</p>
<p>fonte: <a href="https://rockcontent.com/br/blog/historia-wordpress/">rockcontent</a> </p>
</div>
<img src="img/undraw_Teaching_re_g7e3.png" alt="Imagem ilustrativa de um homem apresentando uma interface">
</div>
<div class="container" id="caixa3">
<div class="item">
<h2>Oque é um CMS?</h2>
<p>CMS é uma sigla que significa "Sistema de Gerenciamento de Conteúdo". É uma ferramenta de software que ajuda na criação, organização e publicação de conteúdo em um site ou aplicativo. Com um CMS, os usuários podem criar e gerenciar conteúdo sem precisar de conhecimento técnico avançado em programação ou design. O sistema geralmente inclui um painel de controle que permite editar páginas, postar conteúdo, gerenciar usuários e comentários, configurar opções de design, entre outras funcionalidades.
</p>
<p>é uma alternativa para pessoas que não têm conhecimentos em linguagem de programação e precisam, de um método de gestão fácil.</p>
</div>
<img src="https://www.hamyarit.com/wp-content/uploads/2021/07/cms.png" alt="Imagem ilustrativa de um homem em pé lendo um tablet e uma mulher sentada acessando seu computador, tendo a sigla CMS no fundo">
</div>
<div class="container" id="caixa4">
<div class="item item4">
<h2>Grande marcas que utilizam WordPress</h2>
<P>Veja alguns sites em WordPress bem famosos, que farão você acreditar que realmente é possível usá-lo em qualquer projeto.</P>
<div class="container-sites">
<div class="sites-wordpress">
<h3>BBC America</h3>
<p>O site possui um grande volume de infomações, e possui plugins de acessibilidade</p>
<div class="zoom-efect">
<img src="https://rockcontent.com/br/wp-content/uploads/sites/2/2020/07/image-29.png.webp" alt="Imagem mostrando o site BBC America">
</div>
</div>
<div class="sites-wordpress">
<h3>Sony Music</h3>
<p>Um exemplo de site elegante, moderno e muito funcional.</p>
<div class="zoom-efect">
<img src="https://rockcontent.com/br/wp-content/uploads/sites/2/2020/07/image-25-1024x622.png.webp" alt="Imagem mostrando o site Sony Music">
</div>
</div>
<div class="sites-wordpress">
<h3>MTV News</h3>
<p>O destaque nesse site é o processamento rápido, utilizando de plugins de otimização.</p>
<div class="zoom-efect">
<img src="https://rockcontent.com/br/wp-content/uploads/sites/2/2020/07/image-28.png.webp" alt="Imagem mostrando o site MTV News">
</div>
</div>
</div>
</div>
</div>
</main>
<footer>
<p>©2023 Instituto da Oportunidade Social
<br>
Site Desenvolvido por <a href="https://fherexe.github.io/MyLinks/" target="_blank">Fernando</a> e <a href="https://www.linkedin.com/in/rafael-barreto-dos-santos-319257247/" target="_blank">Rafael Barreto</a>, todos direitos reservados.</p>
</footer>
<script src="main.js"></script>
<script src="https://vlibras.gov.br/app/vlibras-plugin.js"></script>
<script>new window.VLibras.Widget('https://vlibras.gov.br/app');</script>
<style>
.access-button {
width: 34% !important;
border-radius: 50% !important;
margin-right: 2% !important;
}
</style>
</body>
</html>