Trabalho Do Grupo 4 PWM

Universidade Gregório Semedo
Faculdade de Engenharia e novas tecnologias

Licenciatura em Informática de Gestão
Trabalho de
Programação Web e Multimídia
TEMA: Site Responsivo

Site Responsivo
Grupo nº 4
Integrante
Nome:
Leonel
Samuel.............................................................................................................................190273
Luquenia
Antônio........................................................................................................................190167
Maria Sapalo ...............................................................................................................................190658
Miguel
Tomás...............................................................................................................................100179
Masina
Mpova .............................................................................................................................191002
Pedro da
cruz................................................................................................................................170277
Vanda
Diogo..................................................................................................................................190050
Site Responsivo
 Site responsivo
 Viewport e Unidades Relativa
 Media Types e Media Query
 Display Flex / Flexbox
 Display Grid
Site Responsivo
Introdução
No presente trabalho abordamos sobre o que é um site
responsivo .E dizer que este método consiste em assegurar
que um site seja apresentado de forma perfeitamente
legível, independentemente do dispositivo em que seja
necessário, para isso também abordaremos sobre alguns
elementos que tornam ou ajudam a fazer um site a ser
responsivo.
Site Responsivo
Sites Responsivos
São aqueles que se adaptam ao tamanho das suas
páginas(alteração do layout) , ao tamanho das telas que estão
sendo exibidas, como as telas dos celulares, tablets e entre
outros dispositivos. E as sua vantagens derivam da adaptação a
qualquer ferramenta que o usuário esteja usando para facilitar a
sua visualização e utilização
Site Responsivo
ViewPort
Uma viewport representa uma área poligonal
(normalmente retangular) que está sendo exibida no
momento. Em termos de navegador web, se refere a
parte do documento que é exibida na janela (ou tela,
se o documento estiver exibido em modo tela-cheia).
Conteúdos fora da viewport não são visíveis na
janela/tela até que seja rolado para sua área de
visualização.
Site Responsivo
Tipos de ViewPort
Na web existem duas viewport a que é visível é
chamada de visual viewport.
Ela geralmente é menor que a layout viewport, que é o
conteúdo inteiro.
Ex: Quando um usuário dá zoom na página com o
seu celular, a Layout viewport continua a mesma, quem
muda (no caso diminui) é a visual viewport.
Site Responsivo
Figura ilustrativa dos viewport

Site Responsivo
Unidades Relativas
Unidades Relativas (%, em, ex , rem , ch, etc) : São
medidas que se baseiam em um valor de referência
definido anteriormente. Portanto essas unidades são
mais úteis porque podem mudar de acordo com o
tamanho da tela, se adaptando ao contexto em que são
inseridos.
Usamos essa medida relativa quando queremos
que um elemento use, por exemplo, 100% do espaço
disponível.
Site Responsivo
Unidades Relativas
Obs. : EM e REM tem o mesmo conceito de %,

mas ao invés de serem baseadas no tamanho de um
elemento, essas medidas são baseadas em tamanho de
fonte. EM usa o tamanho da fonte,do Elemento pai e
REM sa o tamanho da fonte do <html>.
Site Responsivo
Unidades Relativas
Exemplo: Sem aplicação de Com a aplicação da

unidade relativa unidade relativa
Html: div{
<div> Width :400px;
<img src=“img/gato.png” }
alt=“Foto de um gato” > Img{
</div> Width :100%; /*ocupe
Css: 100% do espaço
div{ disponível *\}
Width:400px;
}
Site Responsivo
Vantagem
A vantagem de usar essas medidas é que se tivermos

outros elementos usando essas medidas e precisarmos
mudar o tamanho de todos os elementos
proporcionalmente, basta mudarmos em um lugar só. Estas
unidades de medidas ideias para quando o site precisa ser
exibido em diferentes tamanhos de telas, onde em cada
tamanho de tela a fonte deve ser exibida em escala de
tamanhos diferentes e proporcionais entre si.
Site Responsivo
Desvantagem
A principal desvantagem centra-se na medida

em que a web evolui, existirá sempre necessidade de
mais respostas, portanto essas unidades podem tornar-
se insuficientes Para solucionar esses problemas.
Site Responsivo
Medias Types
As Medias Types, basicamente definem pra qual

tipo de media o css que você usa em seu site será
direcionado, ou seja, para cada dispositivo diferente
que você acessa um website, será necessário um css
diferente também.
Site Responsivo
Medias Types
Com a quantidade cada vez maior de dispositivos de
diversos tamanhos e com hardware muitos bons, quase
como um desktop surgiram algumas duvidas muitos
fortes em que media usar, pois os smartphfones mais
potentes por exemplo, possuem uma navegação bem
parecida com a de um desktop, mais ainda sim são
handheld’s e não podem ser considerados desktops, ou
seja, não podemos disponibilizar um css para
handheld’s, nenhum css totalmente screen.
Site Responsivo
Média Queries
Média Queries, elas definem algumas

condições para o uso de css específicos. Como o
bom e velho “IF” das linguagens de
programação, ela funciona de maneira parecida,
fazendo com que se as condições do dispositivo
se adequarem aquela condição que você disse na
media querie, ela vai aplicar aquele css, caso
contrário, não aplica.
Site Responsivo
Media Queries
<link rel="stylesheet" href="estilo.css"
media="screen and (color)" />
Neste exemplo, o CSS será aplicado em

dispositivos de media screen, que tenham uma
característica color, ou seja, se este dispositivo
for monocromático o css não será aplicado.
Site Responsivo
Display Flex / Flexbox
O Flexbox é um conceito do CSS3 que

visa organizar os elementos de uma página HTML
dentro de seus containers de forma dinâmica. Ou seja,
independente das suas dimensões eles sempre
manterão um layout flexível dentro do seu elemento
pai, reorganizando-se e acordo com a necessidade.
Site Responsivo
Display Flex / Flexbox
O Flexbox é um conjunto de propriedades que tem

por objetivo organizar itens dentro de um elemento pai,
normalmente chamado de container, conforme ilustra
a figura à baixo.
Site Responsivo
Display Grid
CSS Grid Layout introduz um sistema bi-

dimensional de grid (literalmente "grades") para CSS.
Grids podem ser usados para o design de layouts de
grandes seções de uma webpage, assim como de pequenos
elementos de interface. Esse artigo apresenta o CSS Grid
Layout e a terminologia que é parte da especificação CSS
Grid Layout Level 1.
Site Responsivo
Display Grid
As funcionalidades demonstradas neste resumo serão

posteriormente explicadas em maiores detalhes nas demais seções
desse guia. O que é grid? Grid é uma malha formada pela
interseção de um conjunto de linhas horizontais e um conjunto de
linhas verticais – um dos conjuntos define colunas e outro linhas.
Dentro de um grid, respeitando-se a configuração criada pelas
suas linhas, pode-se inserir elementos da marcação.
Site Responsivo
Conclusão
Segundo as pesquisas feitas concluímos que um site
responsivo é aquele projetado para se adaptar a qualquer tipo
de resolução, sem distorções. O design responsivo identifica a
largura de cada dispositivo, o espaço disponível e como a
página será apresentada. Ele também ajusta a dimensão das
imagens, das fontes e dos demais elementos para não ficarem
desproporcionais.
Site Responsivo
Referência Bibliográfica
www.devmedia.com.br/css3-flexbox
https:/www.w3schools.com/css/css3
https:/www.devmedia.type.com.br/utilizando-css-media-queries/
https:/www.devmedia.com.br/css3-viewport
https:/www.unidade.relativa.com.br/css3
Material de estudo html , css e javaScript.
Site Responsivo
Muito Obrigado

Trabalho Do Grupo 4 PWM

Enviado por

Dados do documento

Título original

Direitos autorais

Formatos disponíveis

Compartilhar este documento

Compartilhar ou incorporar documento

Opções de compartilhamento

Você considera este documento útil?

Este conteúdo é inapropriado?

Direitos autorais:

Formatos disponíveis

Trabalho Do Grupo 4 PWM

Enviado por

Direitos autorais:

Formatos disponíveis

Universidade Gregório Semedo

Faculdade de Engenharia e novas tecnologias

TEMA: Site Responsivo

Figura ilustrativa dos viewport

Obs. : EM e REM tem o mesmo conceito de %,

Exemplo: Sem aplicação de Com a aplicação da

A vantagem de usar essas medidas é que se tivermos

A principal desvantagem centra-se na medida

As Medias Types, basicamente definem pra qual

Média Queries, elas definem algumas

Neste exemplo, o CSS será aplicado em

Display Flex / Flexbox

O Flexbox é um conceito do CSS3 que

O Flexbox é um conjunto de propriedades que tem

CSS Grid Layout introduz um sistema bi-

As funcionalidades demonstradas neste resumo serão

Você também pode gostar