Logo Passei Direto
Buscar
Material
páginas com resultados encontrados.
páginas com resultados encontrados.

Prévia do material em texto

09/08/2018 AVA UNINOVE
https://ava.uninove.br/seu/AVA/topico/container_impressao.php 1/22
Linguagem HTML, CSS e o
Framework Bootstrap
APRESENTAR UM BREVE RESUMO SOBRE A LINGUAGEM HTML E CSS, ALÉM DE INTRODUZIR OS
CONCEITOS DO FRAMEWORK BOOTSTRAP, UTILIZADO PARA O DESENVOLVIMENTO DE PÁGINAS WEB.
AUTOR(A): PROF. EDSON MELO DE SOUZA
1. Introdução
O desenvolvimento de aplicações Web é centrada na utilização de tecnologias que permitem a manipulação
de elementos a serem apresentados ao usuário, ou seja, qualquer tecnologia utilizada no backend
(processamento do lado do servidor) é repassada ao usuário no formato HTML e as demais tecnologias que
podem ser agregadas para melhorar a interface e o desempenho.
O desenvolvimento de páginas Web é de certa forma simples, entretanto a complexidade das aplicações
demanda que o esforço para sua realização torne a tarefa complexa, além da necessidade de contornar
problemas de compatibilidade com navegadores.
Neste tópico serão revisadas as principais tags HTML e CSS, além de uma rápida explanação sobre jQuery
(biblioteca Javascript) e do framework Bootstrap, com o objetivo de mostrar as possibilidades de aplicação
destas tecnologias no desenvolvimento de aplicações para o ambiente Web.
01 / 21
09/08/2018 AVA UNINOVE
https://ava.uninove.br/seu/AVA/topico/container_impressao.php 2/22
Legenda: TECNOLOGIAS HTML5, CSS3, BOOTSTRAP E JQUERY.
2. HTML 5
A linguagem HTML - Hypertext Markup Language - Linguagem de Marcação de Hipertexto é utilizada para a
publicação de conteúdo na Web (texto, imagem, vídeo, áudio, entre outros). Esta linguagem possui
elementos que permitem a manipulação de conteúdos por meio da utilização de tags (instruções
reduzidas). Em sua versão 5, apresenta novas tags e modifica a função de outras (W3C, 2015), permitindo ao
desenvolvedor maior flexibilidade no desenvolvimento de páginas.
2.1 Tags HTML 5
O conjunto de tags disponíveis no HTML 5 é bastante extensa, portanto, serão abordadas neste tópico
apenas aquelas que merecem destaque para construção da estrutura de páginas, tabelas e formulários, pois
estas serão utilizadas com o Framework Bootstrap. A seguir é mostrado um código para a criação de uma
página padrão HTML 5:
02 / 21
09/08/2018 AVA UNINOVE
https://ava.uninove.br/seu/AVA/topico/container_impressao.php 3/22
 <!DOCTYPE HTML>
 <html lang="pt-br">
 <head>
 <meta charset="utf-8"/>
 <meta content="width=device-width, initial-scale=1, maximum-scale=1" n
 <title>Título da Página</title>
 <link href="css/folha-de-estilo.css" rel="stylesheet"/>
 <script src="scripts/script.js"></script>
 </head>
 <body>
 <header> <!-- O elemento header representa uma área de introdução. Po
 <nav> <!-- O elemento nav é utilizado para representar uma seção d
 <ul>
 <li><a href="#">Home</a></li> <!-- -->
 <li><a href="#">Postagens</a></li>
 </ul>
 </nav>
 </header>
 
 <section> <!-- A tag section define uma nova seção do site, uma área g
 <article> <!-- O elemento article é utilizado para representar o c
 <header>
 <h2>Título da postagem 1</h2>
 <p>Publicado em <time datetime="2015-09-21">21 de Setembro
 </header>
 <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, se
 </article>
 
 <article>
 <header>
 <h2>Título da postagem 2</h2>
 <p>Publicado em <time datetime="2015-09-21">21 de Setembro
 </header>
 <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, se
 </article>
 </section>
 
 <aside> <!-- A tag aside representa um bloco de conteúdo que referênci
 <h2>Fale Conosco</h2>
 <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do
 </aside>
 
 <footer> <!-- -->
03 / 21
09/08/2018 AVA UNINOVE
https://ava.uninove.br/seu/AVA/topico/container_impressao.php 4/22
E d Bl /
 <!DOCTYPE html>
 <html lang="pt-br">
 <!-- Cabeçalho da página -->
 <head>
 <meta charset="utf-8"/>
 <meta content="width=device-width, initial-scale=1, maximum-scale=1" n
 <title>Título da Página</title>
 
 <!-- Arquivo ou arquivos CSS - formatação de stilos-->
 <link href="css/folha-de-estilo.css" rel="stylesheet"/>
 
 <!-- Arquivo contendo os sripts Javascript ou um conjunto de arquivos
 <script src="scripts/script.js"></script>
 </head>
 <!-- Corpo da página -->
 <body>
 
 ... conteúdo e demais tags ... 
 
 </body> <!-- Fim do corpo da página -->
 </html>
04 / 21
09/08/2018 AVA UNINOVE
https://ava.uninove.br/seu/AVA/topico/container_impressao.php 5/22
Legenda: RESULTADO DA PáGINA APóS O PROCESSAMENTO.
Uma página bem estruturada e com alguma funcionalidade, além da apresentação de textos, emprega, na
grande maioria, tabelas e formulários, pois este último é o responsável por enviar dados coletados em uma
página para processamento no lado do servidor. Vale ressaltar que a tecnologia AJAX - Asynchronous
Javascript and XML e a jQuery também podem realizar esta tarefa.
O uso de formulários é amplamente empregado, pois eles são capazes de receber dados, os quais são
submetidos ao servidor para o processamento. Existe uma grande variedade de formatos de formulários,
embora os elementos que possibilitam sua construção são sempre os mesmos, sendo alterado apenas o
layout em cada caso.
05 / 21
09/08/2018 AVA UNINOVE
https://ava.uninove.br/seu/AVA/topico/container_impressao.php 6/22
SAIBA MAIS!
Embarque Imediato: http://flatschart.com/html5/ (http://flatschart.com/html5/)
3. CSS 3
A definição de estilos em documentos HTML é amplamente utilizado, pois elimina diversos elementos das
páginas como: imagens e códigos embutidos. Além dessas características, a utilização do CSS facilita a
manutenção das páginas por centralizar, em um ou mais arquivos, as definições a serem empregadas nas
páginas.
O CSS 3 trouxe diversas melhorias em relação a versão 2, principalmente no que diz respeito à animação de
elementos 2D e 3D, sendo mais utilizados os de movimento, rotação e transição. Alguns elementos também
dispensam a utilização de Javascript, como a definição de barras de rolagem com a tag overflow-x e
overflow-y.
Um recurso muito interessante é a criação de colunas sem a utilização de tabelas, apenas com o uso do div,
conforme mostra o exemplo a seguir:
Legenda: IMAGEM DA PáGINA GERADA COM A UTILIZAçãO DO CSS 3 - CHROME
O CSS 3 é muito poderoso, apesar de ainda não estar implementado em todos os navegadores, o que
necessita de ajustes específicos para cada navegador.
06 / 21
09/08/2018 AVA UNINOVE
https://ava.uninove.br/seu/AVA/topico/container_impressao.php 7/22
SAIBA MAIS!
W3schools – CSS Introdution: http://www.w3schools.com/css/css3_intro.asp
(http://www.w3schools.com/css/css3_intro.asp)
4. jQuery
A jQuery é uma biblioteca Javascript, a qual é uma linguagem de programação que tem por finalidade criar
pequenos programas para serem executados dentro de uma página Web (ZAKAS, 2009). Criada por John
Resig para facilitar a utilização do Javascript (CHAFFER; SWEDBERG, 2009), a jQuery é disponibilizada
como software livre, ou seja, seu emprego e uso são regidos segundo licença e regras (item 2.10),
estabelecidas pelo MIT (Massaschussets Institute of Technology) e pelo GPL (GNU General Public License)
(SILVA, 2008).
A jQuery possui muitos recursos (BIBEAULT; KATZ, 2010; RICHARDS et al., 2010), destacando-se:
orientação a objetos; adição de efeitos visuais e animações; acesso e manipulação de objetos HTML;
recuperação de informações no servidor sem a necessidade de recarregamento da página; disponibilizainteratividade e alteração de conteúdos dinamicamente. Tais características favorecem sua aplicação no
desenvolvimento de páginas Web com segurança e desempenho satisfatório, podendo ser utilizada em
conjunto com outras linguagens de programação, tal como a PHP (BATISTA; MANOCHIO, 2009).
No próximo item será apresentado o framework Bootstrap, o qual utiliza amplamente a jQuery na criação
de páginas HTML, bem como o CSS 3.
FIQUE POR DENTRO!
jQuery Oficial: https://jquery.com/ (https://jquery.com/)
5. Framework Bootstrap
Devido à alta demanda, o desenvolvimento de aplicações Web já quase não é mais possível sem a utilização
de um framework, pois o trabalho manual é árduo e moroso. Portanto, ferramentas que auxiliam na
realização das tarefas cotidianas são muito bem-vindas.
Mas enfim, o que é um framework?
07 / 21
09/08/2018 AVA UNINOVE
https://ava.uninove.br/seu/AVA/topico/container_impressao.php 8/22
Um framework nada mais é do que um conjunto de elementos que visam facilitar o desenvolvimento de
tarefas. A maioria das linguagens de programação possuem frameworks desenvolvidos para elas dentro de
diversos conceitos como: desenvolvimento da interface, persistência de dados, entre outros.
Neste contexto, o Bootstrap se apresenta como um framework CSS muito poderoso, versátil e de fácil
aprendizagem, colaborando para o desenvolvimento em equipe, já que há uma padronização dos elementos,
além destes serem esteticamente atraentes.
O Bootstrap foi desenvolvido pelo time de desenvolvedores do Twitter (www.twitter.com
(http://www.twitter.com)) para facilitar a manutenção dos códigos CSS, na criação de menus desdobráveis,
animações, barras laterais, banners, entre outros elementos. Uma de suas características marcantes é a
responsividade, ou seja, a capacidade de uma página ou site ajustar-se automaticamente a um dispositivo e
resoluções diferenciadas de telas. Fazendo uso de Javascript e da jQuery, as aplicações ficam com uma
interface muito mais eficiente, acessível e atrativa, além da rapidez no desenvolvimento.
5.1 Instalação
Para utilizar o Bootstrap no desenvolvimento de páginas é necessário que seja realizado primeiramente o
download do framework no link (http://getbootstrap.com (http://getbootstrap.com)). Também é possível
utilizá-lo diretamente dos repositórios, entretanto é necessária uma conexão com a internet para que
funcione. Após o download, a estrutura de pastas deverá ser como apresentada na imagem a seguir:
08 / 21
09/08/2018 AVA UNINOVE
https://ava.uninove.br/seu/AVA/topico/container_impressao.php 9/22
Legenda: ESTRUTURA DAS PASTAS DO BOOTSTRAP.
5.2 Bootstrap Grid System
O Bootstrap trabalha com um sistema chamado Grid System, o qual é baseado em linhas e colunas, similar a
uma tabela. Sua estrutura padrão é dividida em 12 colunas, mas é possível aumentar este número,
dependendo do conteúdo que será inserido na página.
As imagens a seguir representam o sistema de Grid do framework.
09 / 21
09/08/2018 AVA UNINOVE
https://ava.uninove.br/seu/AVA/topico/container_impressao.php 10/22
Legenda: SISTEMA DE GRID DO BOOTSTRAP.
Legenda: SISTEMA DE GRID DO BOOTSTRAP COM A DEFINIçãO DAS COLUNAS.
10 / 21
09/08/2018 AVA UNINOVE
https://ava.uninove.br/seu/AVA/topico/container_impressao.php 11/22
SAIBA MAIS!
GetBootstrap: http://getbootstrap.com/examples/grid/ (http://getbootstrap.com/examples/grid/)
O Grid System é classificado de acordo com o dispositivo no qual será apresentado o conteúdo, ou seja, o
CSS que controla o sistema possui classes determinadas que manipulam os objetos da tela fazendo com que
os mesmos se adaptem. Esse termo de adaptação é conhecido como Design Responsivo.
A tabela a seguir apresenta os tipos de classes com o tamanho de exibição.
Classe Dispositivo Resolução
Classes de exibição por tamanho de tela.
XS (Extra Small) Dispositivos muito pequenos (Telefones) <768px
SM (Small) Dispositivos pequenos (Tablets) ≥768px
MD (Medium) Dispositivos médios (Desktops) ≥992px
LG (Large) Dsipositivos grandes (Desktops) ≥1200px
 
SAIBA MAIS!
W3Schools: http://www.w3schools.com/bootstrap/bootstrap_grid_examples.asp
(http://www.w3schools.com/bootstrap/bootstrap_grid_examples.asp)
Agora que você já sabe o básico do Bootstrap, é hora de partir para a criação de uma página utilizando o
framework.
5.3 Desenvolvendo uma página
O Bootstrap utiliza classes CSS para realizar as transformações de estilo nos documentos HTML, portanto,
não há nenhuma sintaxe especial para a aplicação dos recursos. A versão do framework utilizada nos
exemplos é a bootstrap-3.3.5-dist. Iniciaremos com a construção da página HTML utilizando os elementos
do HTML 5.
11 / 21
09/08/2018 AVA UNINOVE
https://ava.uninove.br/seu/AVA/topico/container_impressao.php 12/22
Corpo da página com Barra de Navegação
Antes de começar o desenvolvimento, é importante que você não se esqueça que: todo “container” terá no
mínimo 1 “row - linha” e toda “row - linha” terá no máximo 12 “cols - colunas”.
A seguir é mostrado o código HTML para construção da página.
12 / 21
09/08/2018 AVA UNINOVE
https://ava.uninove.br/seu/AVA/topico/container_impressao.php 13/22
<!DOCTYPE html>
<html lang="en">
 <head>
 <meta charset="utf-8">
 <meta http-equiv="X-UA-Compatible" content="IE=edge">
 <meta name="viewport" content="width=device-width, initial-scale=1">
 <meta name="description" content="">
 <meta name="author" content="">
 <title>Exemplo Bootstrap</title>
 <!-- Bootstrap core CSS -->
 <link href="bootstrap-3.3.5-dist/css/bootstrap.min.css" rel="styleshee
 </head>
 <body>
 <nav class="navbar navbar-inverse navbar-fixed-top">
 <div class="container">
 <div class="navbar-header">
 <button type="button" class="navbar-toggle collapsed" data
 <span class="sr-only">Toggle navigation</span>
 <span class="icon-bar"></span>
 <span class="icon-bar"></span>
 <span class="icon-bar"></span>
 </button>
 <a class="navbar-brand" href="#">Exemplo Bootstrap</a>
 </div>
 <div id="navbar" class="navbar-collapse collapse">
 <ul class="nav navbar-nav">
 <li class="active"><a href="#">Link</a></li>
 <li><a href="#">Link 1</a></li>
 <li class="dropdown">
 <a class="dropdown-toggle" href="#" data-toggle="d
 <ul class="dropdown-menu">
 <li><a href="#">Link 1</a></li>
 <li><a href="#">Link 2</a></li>
 <li><a href="#">Link 3</a></li>
 <li class="divider"></li>
 <li><a href="#">Link separado</a></li>
 <li class="divider"></li>
 <li><a href="#">Mais um link separado</a></li>
13 / 21
09/08/2018 AVA UNINOVE
https://ava.uninove.br/seu/AVA/topico/container_impressao.php 14/22
 </ul>
SAIBA MAIS!
As classes utilizadas podem ser conferidas no site abaixo, onde estão disponíveis todas as opções
disponíveis.
W3Schools.com: http://www.w3schools.com/bootstrap/default.asp
(http://www.w3schools.com/bootstrap/default.asp)
Na imagem a seguir é mostrada a página construída, executada pelo navegador.
14 / 21
09/08/2018 AVA UNINOVE
https://ava.uninove.br/seu/AVA/topico/container_impressao.php 15/22
Legenda: RESULTADO DA PáGINA COM A UTILIZAçãO DO BOOTSTRAP.
Formulários
Na imagem abaixo são mostrados dois formulários com aspectos diferenciados.O código a seguir mostra a construção dos formulários, utilizando uma classe personalizada que está sendo
inserida na linha 15 para construir a caixa que envolve o formulário de “Inscreva-se”.
15 / 21
09/08/2018 AVA UNINOVE
https://ava.uninove.br/seu/AVA/topico/container_impressao.php 16/22
Existem diversas possibilidades de utilizar as classes fornecidas pelo Bootstrap, tudo vai depender da
imaginação e necessidade do desenvolvedor. É aconselhável que a documentação oficial seja estudada para
você conhecer todos os recursos. O que foi apresentado até aqui já lhe possibilita criar sites muito mais
atraentes e funcionais.
16 / 21
09/08/2018 AVA UNINOVE
https://ava.uninove.br/seu/AVA/topico/container_impressao.php 17/22
<!DOCTYPE html>
<html lang="en">
 <head>
 <meta charset="utf-8">
 <meta http-equiv="X-UA-Compatible" content="IE=edge">
 <meta name="viewport" content="width=device-width, initial-scale=1">
 <meta name="description" content="">
 <meta name="author" content="">
 <title>Exemplo Bootstrap</title>
 <!-- Bootstrap core CSS -->
 <link href="bootstrap-3.3.5-dist/css/bootstrap.min.css" rel="styleshee
 <!-- CSS personalizado -->
 <link href="bootstrap-3.3.5-dist/css/signin.css" rel="stylesheet">
 </head>
 <body>
 <nav class="navbar navbar-inverse navbar-fixed-top">
 <div class="container">
 <div class="navbar-header">
 <button type="button" class="navbar-toggle collapsed" data
 <span class="sr-only">Toggle navigation</span>
 <span class="icon-bar"></span>
 <span class="icon-bar"></span>
 <span class="icon-bar"></span>
 </button>
 <a class="navbar-brand" href="#">Exemplo Bootstrap</a>
 </div>
 <div id="navbar" class="navbar-collapse collapse">
 <ul class="nav navbar-nav">
 <li class="active"><a href="#">Link</a></li>
 <li><a href="#">Link 1</a></li>
 <li class="dropdown">
 <a class="dropdown-toggle" href="#" data-toggle="d
 <ul class="dropdown-menu">
 <li><a href="#">Link 1</a></li>
 <li><a href="#">Link 2</a></li>
 <li><a href="#">Link 3</a></li>
 <li class="divider"></li>
 <li><a href="#">Link separado</a></li>
 <li class="divider"></li>
 <li><a href="#">Mais um link separado</a></li>
17 / 21
09/08/2018 AVA UNINOVE
https://ava.uninove.br/seu/AVA/topico/container_impressao.php 18/22
 </ul>
</li>
A seguir o código do CSS (signin) inserido na linha 15 para personalização do formulário.
18 / 21
09/08/2018 AVA UNINOVE
https://ava.uninove.br/seu/AVA/topico/container_impressao.php 19/22
body {
 padding-top: 00px;
 padding-bottom: 40px;
 background-color: #eee;
}
.form-signin {
 max-width: 330px;
 padding: 15px;
 margin: 0 auto;
}
.form-signin .form-signin-heading,
.form-signin .checkbox {
 margin-bottom: 10px;
}
.form-signin .checkbox {
 font-weight: normal;
}
.form-signin .form-control {
 position: relative;
 height: auto;
 -webkit-box-sizing: border-box;
 -moz-box-sizing: border-box;
 box-sizing: border-box;
 padding: 10px;
 font-size: 16px;
}
.form-signin .form-control:focus {
 z-index: 2;
}
.form-signin input[type="email"] {
 margin-bottom: -1px;
 border-bottom-right-radius: 0;
 border-bottom-left-radius: 0;
}
.form-signin input[type="password"] {
 margin-bottom: 10px;
 border-top-left-radius: 0;
 border-top-right-radius: 0;
}
Legenda: FORMULáRIOS CRIADOS COM O BOOTSTRAP.
19 / 21
09/08/2018 AVA UNINOVE
https://ava.uninove.br/seu/AVA/topico/container_impressao.php 20/22
IMERSãO EM CSS BOOTSTRAP!
Neste link existem explicações detalhadas sobre cada elemento mais utilizado na construção de
sites. Vale a pena dedicar uma parte do seu tempo estudando e praticando.
CSS Base: http://alexanmtz.github.io/bootstrap/base-css.html
(http://alexanmtz.github.io/bootstrap/base-css.html)
Conclusão
A linguagem HTML 5, juntamente com o CSS3 e o framework Bootstrap abrem quase que infinitas
possibilidades na construção de páginas Web e para dispositivos móveis. É importante que seja dedicado
um tempo para detalhe sobre as tecnologias, assim, no momento da construção de um site, você terá muitos
recursos para empregar e criar algo com uma estética refinada e funcionalidades à mão do usuário.
ATIVIDADE
A linguagem HTML é utilizada para: 
A. Desenvolver vídeos. 
B. Criar sistemas de ERP. 
C. Criar conteúdo apenas para sistemas móveis. 
D. Publicar conteúdo para Web. 
ATIVIDADE
O CSS pode ser definido como: 
20 / 21
09/08/2018 AVA UNINOVE
https://ava.uninove.br/seu/AVA/topico/container_impressao.php 21/22
A. Criar vídeos para internet. 
B. Linguagem de programação. 
C. Aplicar estilos em páginas Web. 
D. Framework. 
ATIVIDADE FINAL
Qual a vantagem da utilização do Bootstrap? 
A. Economizar espaço em disco. 
B. Criar conteúdo para a Web. 
C. Facilitar a manutenção do código CSS. 
D. Melhorar o processamento das linguagens de script. 
REFERÊNCIA
BATISTA, E. A.; MANOCHIO, K. D. Disponibilizando Dados de um sistema escrito em COBOL para serem
consultados em ambiente WEB: Um Estudo de Caso. Revista Network Technologies, v. 3, n. 1, p. 1-12, 2009.
ISSN: 1809-5240.
BIBEAULT, B.; KATZ, Y. jQuery in Action. 2 ed. Greenwich, CT: Manning Publications Co., 2008. p. 475. ISBN
1-935182-32-3.
DE SOUZA, Edson Melo. Desenvolvimento de um Sistema de Apoio à Decisão e Operacional para a
Otimização dos Parâmetros de Corte em Usinagem (COPPISYS). 2013. 149 f. Dissertação (Mestrado em
Engenharia de Produção) – Programa de Mestrado em Engenharia de Produção, Universidade Nove de Julho,
São Paulo, 2013.
RICHARDS, G.; LEBRESNE, S.; BURG, B.; VITEK, J. An analysis of the dynamic behavior of JavaScript
programs. 2010 ACM SIGPLAN conference on Programming language design and implementation PLDI 10,
v. 45, n. 6, p. 1, 2010.
TUTORIAL WEB DESIGN. Tutorial Bootstrap. Disponível em: < http://www.tutorialwebdesign.com.br
(http://www.tutorialwebdesign.com.br)>. Acesso em 15 de set. 2015.
W3C. HTML, The Web¿s Core Language.  Disponível em: <http://www.w3.org/html/
(http://www.w3.org/html/)>. Acesso em: 21 de set. 2015.
21 / 21
09/08/2018 AVA UNINOVE
https://ava.uninove.br/seu/AVA/topico/container_impressao.php 22/22

Mais conteúdos dessa disciplina