Exploração de Layouts no CSS

21082023 0944 Desenvolvimento Web httpssitesgooglecomfaculdadeimpactacombrdwp5pli1authuser1 135 Layouts no CSS Desenvolvimento Web 21082023 0944 Desenvolvimento Web httpssitesgooglecomfaculdadeimpactacombrdwp5pli1authuser1 235 Início de conversa Desenvolvimento Web 21082023 0944 Desenvolvimento Web httpssitesgooglecomfaculdadeimpactacombrdwp5pli1authuser1 335 Olá Cursista Nesta parte vamos explorar o tema layouts no CSS Assista o vídeo com os principais tópicos sobre o tema e anote suas dúvidas Envie suas dúvidas no Classroom da disciplina Classroom Atividades Dúvidas sobre o conteúdo interaja com o professor e colabore com seus colegas Aproveite para aprofundar os estudos explorando o material organizado na seção SAIBA MAIS Objetivos de aprendizagem Desenvolvimento Web 21082023 0944 Desenvolvimento Web httpssitesgooglecomfaculdadeimpactacombrdwp5pli1authuser1 435 Os objetivos de aprendizagem desta parte são Identificar as principais unidades de tamanho Compreender como funcionam os display básicos do CSS block inline inlineblock e none Conhecer o modelo de caixa BoxModel Associar como ocorre o posicionamento de elementos Entender o Media Query Desenvolvimento Web 21082023 0944 Desenvolvimento Web httpssitesgooglecomfaculdadeimpactacombrdwp5pli1authuser1 535 Conteúdo A seguir vamos ao vídeo Desenvolvimento Web 21082023 0944 Desenvolvimento Web httpssitesgooglecomfaculdadeimpactacombrdwp5pli1authuser1 635 Clique no ícone ao lado e aproveite para fazer suas anotações durante os estudos utilizando o Google Keep Desenvolvimento Web 21082023 0944 Desenvolvimento Web httpssitesgooglecomfaculdadeimpactacombrdwp5pli1authuser1 735 Desenvolvimento Web 21082023 0944 Desenvolvimento Web httpssitesgooglecomfaculdadeimpactacombrdwp5pli1authuser1 835 Leitura do texto de apoio Desenvolvimento Web 21082023 0944 Desenvolvimento Web httpssitesgooglecomfaculdadeimpactacombrdwp5pli1authuser1 935 Leia o texto para aprofundar os temas discutidos no vídeo Entre em contato com o professor para esclarecer suas dúvidas Classroom Atividades Dúvidas sobre o conteúdo Layouts no CSS Prof MSc Yuri Maximian Rottner Dirickson Texto revisto atualizado e ampliado por Prof Dr Rafael Will M de Araujo Resumo Na primeira parte do CSS vimos como conseguimos usálo para alterar a aparência dos elementos HTML sem precisar mudar o conteúdo semântico deles Agora falta entender como as propriedades do CSS comandam o posicionamento e o espaço que os elementos ocupam no navegador dimensões displays posições etc Entender esses aspectos nos dá muitas ferramentas para produzir layouts mais responsivos e fluidos Introdução Vimos como usar o CSS para dar estilos aos nossos elementos HTML alterando cores e textos usando as regras CSS e os seletores Agora para se pensar em layouts nas páginas HTML precisamos entender as principais propriedades que configuram a maneira que os elementos se dispersam pela tela do navegador Todo elemento HTML possui valores padrão para essas propriedades veremos como alterar elas para conseguir efeitos específicos Dimensões e unidades Para entender como criar layouts nas páginas primeiro é necessário entender como os elementos ocupam espaço na janela Como eles sempre são dispostos de maneira bidimensional consideramos duas medidas altura height e largura width duas propriedades fundamentais em CSS Mesmo que não tenhamos definido valores para essas propriedades o navegador calcula de acordo com suas regras de display que veremos mais à frente e o conteúdo interno do elemento Essas medidas calculadas ou informadas e qualquer outra informação de tamanho como os tamanhos de fonte usam por padrão a unidade da computação gráfica pixel abreviada como px no CSS Um pixel é a menor medida utilizada em computação gráfica e representa um dos pequenos quadradinhos que todas as telas possuem e são usados para renderizar as imagens Em geral a qualidade das telas é medida pela quantidade disponível de pixels Por exemplo um monitor Full HD possui 1920 pixels de Desenvolvimento Web 21082023 0944 Desenvolvimento Web httpssitesgooglecomfaculdadeimpactacombrdwp5pli1authuser1 1035 largura e 1080 de altura Já um monitor 4K possui 3840 pixels de largura e 2160 de altura A unidade pixel é considerada absoluta ou seja ela usa uma quantidade fixa de espaço da tela assim como outras unidades menos utilizadas na web milímetros polegadas pontos etc Com a popularização dos tablets smartphones e outras telas de diferentes tamanhos não se recomenda o uso das medidas absolutas Para melhor ajustar o conteúdo em vários formatos de tela diferentes recomendase o uso de medidas relativas Existem diversas medidas relativas mas vamos focar nas três principais para construção de layouts a porcentagem o em e o rem Mais informações sobre essas e outras unidades em CSS VALUES AND UNITS sd Uma lista concisa com unidades absolutas e relativas pode ser consultada em CSS UNITS sd A seguir explicamos as principais unidades de medida relativa Porcentagem A medida de porcentagem é sempre relativa à mesma medida no elemento pai Na Figura 51 temos um exemplo onde o tamanho da fonte da tag strong dentro de um parágrafo elemento pai será de 150 Por padrão os navegadores usam 16px para definir o tamanho da fonte este é o tamanho do texto do parágrafo Sendo assim o texto dentro da tag strong terá tamanho 150 maior ou seja 24px Caso o tamanho da fonte do parágrafo seja modificado para 20px por exemplo o trecho destacado pelo strong tem que continuar 150 maior e assim terá seu tamanho recalculado para 30px Esse comportamento também vale para qualquer propriedade que envolva medidas como width e height Figura 51 Modificando o tamanho da fonte com porcentagem CSS destacado fontsize 150 HTML pUm parágrafo no qual strong classdestacadoeste trecho está destacadostrong Note a diferença no tamanho da fontep Desenvolvimento Web 21082023 0944 Desenvolvimento Web httpssitesgooglecomfaculdadeimpactacombrdwp5pli1authuser1 1135 Fonte do autor 2022 Desenvolvimento Web 21082023 0944 Desenvolvimento Web httpssitesgooglecomfaculdadeimpactacombrdwp5pli1authuser1 1235 em e rem As medidas em e rem se popularizaram com o conceito de sites responsivos principalmente pensando nos dispositivos móveis A ideia é que ambas as medidas são relativas similares a porcentagem mas ao invés de ser relativa à medida em que a unidade está sendo aplicada ambas são sempre relativas ao tamanho da fonte Mesmo que usemos a unidade no width ela será calculada referente ao tamanho da fonte e não da medida width A diferença entre ambas é que o em é relativa ao tamanho da fonte do próprio elemento já a rem é relativa ao tamanho da fonte da tag raiz html Ambas unidades são interessantes pois conseguimos fazer com que todas as medidas respeitem a mudança do tamanho da fonte do navegador seja por pessoas que preferem ou precisam de letras maiores ou em dispositivos móveis que precisam aumentar o tamanho da fonte em pixels para conseguir mostrar seus textos O cálculo é relativamente simples 1em equivale a 1 vez o tamanho da fonte do elemento por padrão 16px 2em equivale a 2 vezes o tamanho por padrão 32px e assim por diante O rem calcula o tamanho de forma similar mas olhando para o tamanho da fonte do navegador que pode ser mudado colocando um fontsize na tag html BoxModel Além das medidas width e height os elementos HTML ainda possuem outras medidas que afetam a quantidade de espaço que eles ocupam Todas essas medidas juntas formam o que chamamos de modelo caixa BoxModel Este modelo consiste em algumas regiões que formam camadas em volta do elemento HTML em questão conforme mostra a Figura 52 A parte mais interna se refere ao espaço que o conteúdo do elemento ocupa o texto dentro de um parágrafo ou a imagem definida pela tag img por exemplo Logo após temos uma medida de preenchimento padding que é um espaço que se cria entre o conteúdo do elemento e seu limite Neste limite podemos criar uma borda border que ocupa algum espaço também Fora da borda e agora fora do elemento podemos criar um último espaço chamado de margem margin que afasta o elemento dos demais Todas essas medidas podem ser definidas com um tamanho geral o que afeta todos os 4 lados de maneira igual ou por direção top bottom right left dando origem a várias outras propriedades derivadas como por exemplo margintop marginbottom margin right marginleft paddingtop paddingbottom paddingright paddingleft bordertopwidth borderbottomwidth borderrightwidth borderleftwidth Desenvolvimento Web 21082023 0944 Desenvolvimento Web httpssitesgooglecomfaculdadeimpactacombrdwp5pli1authuser1 1335 Figura 52 O modelo de caixa BoxModel Fonte do autor 2022 Desenvolvimento Web 21082023 0944 Desenvolvimento Web httpssitesgooglecomfaculdadeimpactacombrdwp5pli1authuser1 1435 A Figura 53 mostra um exemplo do uso do box model Note que a propriedade border em especial necessita que 3 valores sejam definidos a espessura da borda o estilo da borda sólida e a sua cor Podemos também visualizar como o box model foi calculado ao redor de um determinado elemento como mostrado ao inspecionar o parágrafo canto inferior direito do Chrome Outro aspecto importante ao explorar o box model é que quando definimos a altura e largura de um elemento usando as propriedades height e width por padrão esses valores serão aplicados somente na região do conteúdo e não em toda a caixa ao redor do elemento Isso significa que quando adicionamos espaçamento interno padding borda e margem o elemento será maior do que o que foi definido nas propriedades height e width Para que toda a caixa fique do tamanho exato definido nessas propriedades é necessário usar a propriedade CSS boxsizing com o valor borderbox Os valores possíveis dessa propriedade são contentbox valor padrão conforme especificado pela norma CSS As propriedades altura e largura height e width são medidas incluindo só o conteúdo do elemento sem considerar padding border margin borderbox indica que o padding e border serão incluídos no cálculo das medidas de altura e largura Detalhe importante a propriedade margin não é considerada neste cálculo Figura 53 BoxModel de um parágrafo CSS exemplo padding 10px border 5px solid blue margin 20px HTML p idexemploExemplo do BoxModelp Desenvolvimento Web 21082023 0944 Desenvolvimento Web httpssitesgooglecomfaculdadeimpactacombrdwp5pli1authuser1 1535 Fonte do autor 2022 Desenvolvimento Web 21082023 0944 Desenvolvimento Web httpssitesgooglecomfaculdadeimpactacombrdwp5pli1authuser1 1635 Display Como visto anteriormente alguns elementos do HTML naturalmente fazem o conteúdo se separar verticalmente quebrando linhas e jogando tudo para baixo do próprio elemento Outros não atrapalham o fluxo do texto se ajustando ao tamanho do conteúdo que estão marcando A propriedade do CSS que comanda esse efeito chamase display Temos dois valores básicos para o display que quase todas as tags possuem por padrão inline e block Elementos que possuem display inline são aqueles que não interrompem o fluxo da informação sem nenhum tipo de quebra de linha e possuem seu tamanho ajustado de acordo com o tamanho do seu conteúdo apenas Exemplos desses elementos são os criados com as tags strong a e em Uma característica do inline é que ele não permite alteração dos valores de width e height Qualquer alteração nessas propriedades não reflete no tamanho do elemento pois ele continua ocupando apenas o tamanho do seu conteúdo Já elementos do tipo block ocupam todo espaço lateral disponível no navegador independente do tamanho do seu conteúdo jogando todo o resto do documento para baixo dele Exemplos são os elementos com tag p div e h1 até h6 O display block permite alterar a altura e largura do elemento através das propriedades height e width mas mesmo que haja espaço à direita do elemento com a diminuição da largura a região horizontal fica reservada para ele jogando os outros elementos para baixo dele Existem outros dois tipos de display muito usados que são o inlineblock e o none O valor inlineblock é uma mistura dos dois primeiros apresentados Ele por padrão se ajusta ao tamanho do conteúdo do elemento como o inline mas permite alterar os valores de largura e altura livremente como o block liberando espaço à direita para outros elementos Já o valor none acaba escondendo o elemento por completo fazendo com que ele não ocupe espaço algum mas ainda existe no navegador mesmo que alteremos os valores de altura e largura nada muda no espaço ocupado Outros detalhes e valores podem ser vistos em CSS DISPLAY PROPERTY sd Dois valores modernos que auxiliam na construção de novos layouts são o flex e o grid mas explicálos foge do escopo deste material Desenvolvimento Web 21082023 0944 Desenvolvimento Web httpssitesgooglecomfaculdadeimpactacombrdwp5pli1authuser1 1735 Você quer ler Os valores mais modernos de display o flex e o grid foram criados para facilitar na construção de layouts fluídos em uma e duas dimensões respectivamente Eles são a chave dos layouts fluídos e responsivos mais recentes O problema é que ambos requerem estudos específicos pois com eles vem uma lista grande de outras propriedades que fazem parte da especificação recomendamos a leitura dos seus respectivos tutoriais httpscsstrickscomsnippetscssaguidetoflexbox e httpscsstrickscomsnippetscsscompleteguidegrid Desenvolvimento Web 21082023 0944 Desenvolvimento Web httpssitesgooglecomfaculdadeimpactacombrdwp5pli1authuser1 1835 Position Outra propriedade que permite alterar a disposição dos elementos é a position Por padrão os elementos HTML são posicionados um após o outro seguindo a ordem de declaração no arquivo e o display definido para cada elemento Esse posicionamento pode ser mudado pela propriedade position que possui os seguintes valores possíveis static valor padrão Faz com que o elemento fique fixo na sua posição definida no arquivo html relative permite posicionar o elemento em relação ao pai dele fixed posição fixa em relação à tela do navegador absolute permite posicionar o elemento em relação a um pai que não seja static sticky se a posição do scroll do navegador está antes do elemento ele se comporta como relative se chegou no elemento ou passou dele comportase como fixed Para qualquer valor diferente do static podemos definir onde o elemento deverá ficar posicionado usando uma distância das quatro direções possíveis top right left e bottom Por exemplo se colocamos position relative e as propriedades top 10px o elemento fica a 10 pixels abaixo da sua posição original CSS POSITION PROPERTY sd Media Query O Media Query permite criar layouts mais responsivos Através dele é possível aplicar certos estilos para determinadas telas ou situações Tratase de uma maneira de definir uma condição para aplicação de estilos CSS que só será verdadeira quando o dispositivo possuir as capacidades definidas na regra do Media Query Por exemplo podemos dispor um menu em locais diferentes a depender se o usuário está acessando o site a partir de um computador ou de um celular de maneira que o espaço disponível na tela seja melhor aproveitado para exibir o conteúdo principal da página Usamos a notação media mediatype mediafeatures para passar ao navegador as condições de aplicação do estilo O mediatype é um identificador do que vai ser testado Por padrão o navegador testa todas mas as opções mais comuns são screen tela do aparelho print para impressoras e tv para aparelhos de TV As mediafeatures são capacidades a serem testadas no tipo de mídia especificado É uma lista relativamente extensa mas alguns comuns são maxwidth testa se é menor ou igual a uma unidade de tamanho minwidth testa se é maior ou igual a uma unidade de tamanho e orientation a orientação da tela portrait modo retrato ou então landscape modo paisagem Então a Media Query media screen and maxwidth 550px terá seus estilos aplicados se o tamanho atual da janela do navegador for até 550px Desenvolvimento Web 21082023 0944 Desenvolvimento Web httpssitesgooglecomfaculdadeimpactacombrdwp5pli1authuser1 1935 Figura 54 Código de exemplo com aplicação do Media Query CSS body backgroundcolor bisque divnaoimportante backgroundcolor yellow height 80px media screen and maxwidth 600px body backgroundcolor lightblue divnaoimportante display none HTML h1Exemplo de Media Queryh1 div classnaoimportanteSuponha que essa div não seja tão importante Então se a tela for muito pequena podemos omitila div pSuponha que esse seja o conteúdo principal da página Suponha que esse seja o conteúdo principal da página Suponha que esse seja o conteúdo principal da página Suponha que esse seja o conteúdo principal da páginap Fonte do autor 2022 Desenvolvimento Web 21082023 0944 Desenvolvimento Web httpssitesgooglecomfaculdadeimpactacombrdwp5pli1authuser1 2035 Na Figura 54 temos um exemplo do uso do Media Query Por padrão a cor de fundo da página é o valor bisque e a div com a classe nãoimportante aparece na página Mas quando o tamanho da tela diminui largura menor ou igual a 600px valem as regras do Media Query a cor de fundo da página muda para o valor lightblue e a propriedade display da div muda para o valor none o que faz com que a div desapareça Faça o teste rode o código do exemplo e modifique a largura da tela Figura 55 Visualização do exemplo da Figura 54 em uma janela com largura maior que 600px Fonte do autor 2022 Figura 56 Visualização do exemplo da Figura 54 em uma janela com largura menor ou igual a 600px Desenvolvimento Web 21082023 0944 Desenvolvimento Web httpssitesgooglecomfaculdadeimpactacombrdwp5pli1authuser1 2135 Fonte do autor 2022 Desenvolvimento Web 21082023 0944 Desenvolvimento Web httpssitesgooglecomfaculdadeimpactacombrdwp5pli1authuser1 2235 Vamos praticar 1 Edite o exercício com a página da empresa fictícia Cursinho Web para adicionar estilos Crie o arquivo estiloscss e adicioneo às páginas indexhtml disciplinashtml e contatohtml através da tag link O resultado deve ficar similar ao mostrado nas Figuras 57 e 58 O arquivo CSS deve conter as seguintes regras utilize os seletores adequados para implementálas o body deve ter cor de fundo eeeeee e cor do texto 6f6f6f o header e o footer devem usar o branco como cor de fundo todo h1 deve ter cor de fundo ff4020 cor do texto branco e tamanho do texto 2em todo link dentro de um nav deve ter tamanho do texto 1rem tipos de fonte Arial Helvetica sans serif negrito sem sublinhado além disso todo link dentro de um nav deve ter os seguintes efeitos cor padrão e visitado 6f6f6f ao colocar o mouse em cima dos links devem mudar para a cor ff4020 e ficar sublinhados enquanto o mouse estiver pressionado sobre o link ele deve ter cor azul e ficar sublinhado os elementos h2 da página disciplinashtml os títulos das disciplinas devem pertencer à mesma classe chamada tituloarticle modifique o HTML para que isso ocorra Para esta classe defina uma regra com o seguinte cor do texto royalblue o link do email no rodapé deve ter um id único chamado linkemail modifique o HTML para que isso ocorra com os seguintes efeitos a cor padrão do link e também se ele já for visitado ele será azul e ele não deve ser sublinhado quando o mouse estiver em cima deste link sua cor deve mudar para ff4020 e ele deve ficar sublinhado Desenvolvimento Web 21082023 0944 Desenvolvimento Web httpssitesgooglecomfaculdadeimpactacombrdwp5pli1authuser1 2335 Figura 57 Página indexhtml após as modificações no Vamos praticar 1 Fonte do autor 2022 Desenvolvimento Web 21082023 0944 Desenvolvimento Web httpssitesgooglecomfaculdadeimpactacombrdwp5pli1authuser1 2435 Figura 58 Página disciplinashtml após as modificações no Vamos praticar 1 Fonte do autor 2022 Desenvolvimento Web 21082023 0944 Desenvolvimento Web httpssitesgooglecomfaculdadeimpactacombrdwp5pli1authuser1 2535 Vamos praticar 2 Baixe o arquivo com o logotipo da empresa fictícia Cursinho Web e outras imagens atualizadas com fundo transparente clique aqui para fazer o download Em seguida faça Adicione a imagem do logotipo ao início do header com o id imglogo e remova as barras verticais entre os links dentro do nav Isso deve ser replicado em todas as páginas HTML Adicione a propriedade margin com valor 0px no seletor do body Adicione as seguintes propriedades ao seletor do header Altura height 80px Margem margin 0px Padding paddingright à direita de 1rem display flex justifycontent com valor spacebetween alignitems com valor center Adicione um seletor para a tag main com os seguintes valores Margem esquerda 1rem Margem direita 1rem Margem do topo 0px Margem do fundo 100px Adicione as seguintes propriedades ao seletor footer Alinhamento do texto centralizado Comprimento width 100 Propriedade position com o valor fixed Propriedade bottom com valor 0 para forçar o footer a ficar preso na parte de baixo da página Padding de 5px Mude a margem do topo para 0px no seletor h1 Adicione as seguintes propriedades a todos os links dentro do nav Cor de fundo ededed Borda 1px borda sólida com cor bbbbbb Padding de 5px Margem 1px Desenvolvimento Web 21082023 0944 Desenvolvimento Web httpssitesgooglecomfaculdadeimpactacombrdwp5pli1authuser1 2635 Figura 59 Página indexhtml após as modificações no Vamos praticar 2 Fonte do autor 2022 Desenvolvimento Web 21082023 0944 Desenvolvimento Web httpssitesgooglecomfaculdadeimpactacombrdwp5pli1authuser1 2735 Figura 510 Página disciplinashtml após as modificações no Vamos praticar 2 Fonte do autor 2022 Desenvolvimento Web 21082023 0944 Desenvolvimento Web httpssitesgooglecomfaculdadeimpactacombrdwp5pli1authuser1 2835 Referências Box model MDN Web Docs sd Disponível em httpsdevelopermozillaorgpt BRdocsWebCSSboxmodel Acesso em 05 jul 2022 CSS Colors W3Schoolscom sd Disponível em httpswwww3schoolscomcssrefcsscolorsasp Acesso em 05 jul 2022 CSS display property W3Schoolscom sd Disponível em httpswwww3schoolscomcssrefprclassdisplayasp Acesso em 05 jul 2022 CSS position property W3Schoolscom sd Disponível em httpswwww3schoolscomcssrefprclasspositionasp Acesso em 05 jul 2022 CSS values and units MDN Web Docs sd Disponível em httpsdevelopermozillaorgen USdocsLearnCSSBuildingblocksValuesandunits Acesso em 06 jul 2022 CSS units W3Schoolscom sd Disponível em httpswwww3schoolscomcssrefcssunitsasp Acesso em 06 jul 2022 Usando Media Queries MDN Web Docs sd Disponível em httpsdevelopermozillaorgptBRdocsWebGuideCSSCSSMediaqueries Acesso em 06 jul 2022 Desenvolvimento Web 21082023 0944 Desenvolvimento Web yp Desenvolvimento Web Saiba mais Que tal aprender jogando Acesse os sites a seguir e conheca mais sobre os displays flex FlexBox e grid GridLayout Flexbox Froggy A game for learning CSS flexbox Grid Garden A game for learning CSS grid httpssitesgooglecomfaculdadeimpactacombrdwp5pli1authuser1 2935 21082023 0944 Desenvolvimento Web httpssitesgooglecomfaculdadeimpactacombrdwp5pli1authuser1 3035 O site a seguir contém vários exemplos avançados de templates com GridLayout Você pode editar o código de cada um deles e aprender mais sobre como organizar o conteúdo de uma página web usando esse display moderno Desenvolvimento Web 21082023 0944 Desenvolvimento Web httpssitesgooglecomfaculdadeimpactacombrdwp5pli1authuser1 3135 Grid by Example Everything you need to learn CSS Grid Layout Start Here Examples Patterns Video tutorial Follow rachelandrew GRID BY EXAMPLE The examples Disponível em httpsgridbyexamplecomexamples Acesso em 23 ago 2022 Desenvolvimento Web 21082023 0944 Desenvolvimento Web httpssitesgooglecomfaculdadeimpactacombrdwp5pli1authuser1 3235 Finalizando Desenvolvimento Web 21082023 0944 Desenvolvimento Web Nesta parte buscamos os seguintes objetivos de aprendizagem Identificar as principais unidades de tamanho Compreender como funcionam os display basicos do CSS block inline inlineblock e none Conhecer o modelo de caixa BoxModel Associar como ocorre 0 posicionamento de elementos Entender o Media Query Reflita sobre o conteudo que vocé explorou e faca um debate com seus colegas e professores pelo Classroom ou na prdéxima aula ao vivo live Fique atento ao prazo de encerramento da atividade continua que compdem esses conteudos de aprendizagem Esperamos que vocé tenha aprofundado seus conhecimentos durante os estudos e tenha aproveitado todo o conteudo apresentado httpssitesgooglecomfaculdadeimpactacombrdwp5pli1authuser1 3335 21082023 0944 Desenvolvimento Web httpssitesgooglecomfaculdadeimpactacombrdwp5pli1authuser1 3435 Desenvolvimento Web 21082023 0944 Desenvolvimento Web httpssitesgooglecomfaculdadeimpactacombrdwp5pli1authuser1 3535 Classroom Gmail Drive Portal do Aluno Núcleo de Educação a Distância Faculdade Impacta Telefone 11 55935382 Horário de atendimento 10h às 18h Desenvolvimento Web