Baixe o app para aproveitar ainda mais
Leia os materiais offline, sem usar a internet. Além de vários outros recursos!
Texto_Aula_2
Faça como milhares de estudantes: teste grátis o Passei Direto
Esse e outros conteúdos desbloqueados
16 milhões de materiais de várias disciplinas
Impressão de materiais
Agora você pode testar o
Passei Direto grátis
Faça como milhares de estudantes: teste grátis o Passei Direto
Esse e outros conteúdos desbloqueados
16 milhões de materiais de várias disciplinas
Impressão de materiais
Agora você pode testar o
Passei Direto grátis
Faça como milhares de estudantes: teste grátis o Passei Direto
Esse e outros conteúdos desbloqueados
16 milhões de materiais de várias disciplinas
Impressão de materiais
Agora você pode testar o
Passei Direto grátis
Faça como milhares de estudantes: teste grátis o Passei Direto
Esse e outros conteúdos desbloqueados
16 milhões de materiais de várias disciplinas
Impressão de materiais
Agora você pode testar o
Passei Direto grátis
Faça como milhares de estudantes: teste grátis o Passei Direto
Esse e outros conteúdos desbloqueados
16 milhões de materiais de várias disciplinas
Impressão de materiais
Agora você pode testar o
Passei Direto grátis
Faça como milhares de estudantes: teste grátis o Passei Direto
Esse e outros conteúdos desbloqueados
16 milhões de materiais de várias disciplinas
Impressão de materiais
Agora você pode testar o
Passei Direto grátis
Faça como milhares de estudantes: teste grátis o Passei Direto
Esse e outros conteúdos desbloqueados
16 milhões de materiais de várias disciplinas
Impressão de materiais
Agora você pode testar o
Passei Direto grátis
Faça como milhares de estudantes: teste grátis o Passei Direto
Esse e outros conteúdos desbloqueados
16 milhões de materiais de várias disciplinas
Impressão de materiais
Agora você pode testar o
Passei Direto grátis
Faça como milhares de estudantes: teste grátis o Passei Direto
Esse e outros conteúdos desbloqueados
16 milhões de materiais de várias disciplinas
Impressão de materiais
Agora você pode testar o
Passei Direto grátis
Faça como milhares de estudantes: teste grátis o Passei Direto
Esse e outros conteúdos desbloqueados
16 milhões de materiais de várias disciplinas
Impressão de materiais
Agora você pode testar o
Passei Direto grátis
Compartilhar
Prévia do material em texto
10/09/2021 16:12 UNINTER - FERRAMENTAS DE DESENVOLVIMENTO WEB https://conteudosdigitais.uninter.com/libraries/newrota/?c=/gradNova/2021/analiseDesenvSistemas/ferramentasDesenvWeb/a2 1/28 FERRAMENTAS DE DESENVOLVIMENTO WEB AULA 2 Prof. Yanko Costa 10/09/2021 16:12 UNINTER - FERRAMENTAS DE DESENVOLVIMENTO WEB https://conteudosdigitais.uninter.com/libraries/newrota/?c=/gradNova/2021/analiseDesenvSistemas/ferramentasDesenvWeb/a2 2/28 CONVERSA INICIAL Nesta aula, vamos apresentar uma tecnologia complementar ao HTML. O CSS já foi brevemente citado em nossos estudos para informar que a formatação visual do HTML seria desenvolvida utilizando essa tecnologia. Durante esta aula, aprofundaremos o conceito do CSS e serão utilizados exemplos em conjunto com o HTML para apresentar a utilização prática dessas duas tecnologias na interface de um sistema. Também serão verificadas algumas formas de adaptação dessas tecnologias conforme o tipo de dispositivo que será utilizado para executar o sistema (ou aplicação web). Por último, será apresentado um framework que auxiliará na produtividade da montagem de interfaces atrativas e flexíveis que poderão ser utilizadas em diferentes dispositivos. TEMA 1 – CASCADING STYLE SHEETS (CSS) Com o propósito de melhorar a estética dos documentos HTML, que estavam se tornando mais robustos em atributos visuais, e tornar os sistemas web mais atrativos e operacionalmente mais confortáveis, em 1996 foi implementado o conjunto de tecnologias web CSS (Cascading Style Sheets, ou folha de estilo em cascata), que seria o responsável por separar a estrutura do documento HTML da parte estética (CSS, 2020). Antes do CSS, e com base no HTML 3.2, foram acrescentadas algumas opções de formatação usando atributos de alguns elementos HTML e tags específicas para formatação visual. Por exemplo, no HTML 3.2, um atributo bgcolor na tag <body> possibilitava alterar a cor de fundo da página e a tag <center> centralizava um texto na tela. Com a implantação dessas folhas de estilos no HTML 4, o CSS ficaria responsável por aplicar cores, definir fontes de letras, garantir o posicionamento dos objetos em tela e implementar adereços aos componentes HTML, trazendo a oportunidade de criar documentos mais ricos no aspecto visual e mais práticos na formatação de um conjunto muito grande de documentos dinâmicos. 10/09/2021 16:12 UNINTER - FERRAMENTAS DE DESENVOLVIMENTO WEB https://conteudosdigitais.uninter.com/libraries/newrota/?c=/gradNova/2021/analiseDesenvSistemas/ferramentasDesenvWeb/a2 3/28 Com base nessa versão do HTML pôde-se realizar uma maior separação da estrutura do documento da sua formatação visual, e, com a possibilidade de manter a configuração visual em arquivo separada, a manutenção e a alteração visual de um documento poderiam ser realizadas sem interferência na informação e sua classificação, bastando para isso alterar apenas o arquivo do CSS. 1.1 SINTAXE BÁSICA Para aplicar a formatação ao documento HTML é necessário especificar qual elemento terá seu estilo alterado. Para isso, a primeira parte do CSS é a indicação do seletor, que poderá ser o nome de uma tag HTML existente, ou um nome novo que será utilizado posteriormente em um ou mais elementos HTML. O Quadro 1 expõe a sintaxe básica da descrição de um seletor, podendo os itens serem digitados na mesma linha (a) ou em linhas diferentes para facilitar a leitura (b). Em (c) é apresentado um exemplo real de alteração de estilo de uma tag <h1>, que terá o texto alterado para a cor azul (blue), conforme mostra o exemplo de HTML (a) e o resultado (b) no quadro Erro! Fonte de referência não encontrada.. Quadro 1 – Seletor no CSS No Quadro 2 (a) é exibido o documento HTML completo, trazendo a tag <style>, que permite inserir um elemento CSS que será usado em todos os elementos <h1> que estiverem inseridos no documento. Os demais elementos não são afetados: o funcionamento do seletor é semelhante a um filtro de pesquisa que procura em todo o documento pelo seletor indicado e aplica a troca da cor do texto para azul em cada H1 que é encontrado. Quadro 2 – HTML completo de aplicação do CSS em H1 10/09/2021 16:12 UNINTER - FERRAMENTAS DE DESENVOLVIMENTO WEB https://conteudosdigitais.uninter.com/libraries/newrota/?c=/gradNova/2021/analiseDesenvSistemas/ferramentasDesenvWeb/a2 4/28 Com o CSS todas as características do elemento podem ser alteradas, mesmo que, com essa mudança, o elemento perca os atributos que ele normalmente possui e que diferencia ele dos demais. Veja o exemplo no quadro 3 –. Nesse exemplo, em (a) temos a aparência padrão dos elementos <p> e <h1>. Depois, em (b), temos o CSS que será aplicado. Em (c) temos o resultado com os elementos alterados. Não existe mais diferença visual entre a tag <h1> e <p>, pois as duas estão com o mesmo tamanho (16 pixels) e a tag <h1> está sem o negrito (font-weight: normal). Quadro 3 – Eliminando as diferenças entre as tags <p> e <h1> Existem diversas propriedades que podem ser aplicadas em textos, tabelas, parágrafos, formulários e imagens. As mesmas características que podem ser aplicadas na formatação de publicações impressas, usando um bom editor de texto, podem ser replicadas num documento HTML, tornando a interface de um sistema com algo grau de sofisticação. Com o CSS podemos configurar bordas duplas laterais, sombras, cores, espaçamento entre letras, entre palavras, entre parágrafos ou blocos de elementos e, inclusive, animação de elementos HTML. 10/09/2021 16:12 UNINTER - FERRAMENTAS DE DESENVOLVIMENTO WEB https://conteudosdigitais.uninter.com/libraries/newrota/?c=/gradNova/2021/analiseDesenvSistemas/ferramentasDesenvWeb/a2 5/28 Numa situação extrema, um alerta de um sistema pode ser apresentado no formato de uma caixa com fundo vermelho, flutuando em cima do restante da tela com a mensagem percorrendo o interior da caixa, movendo-se da esquerda para a direita, trocando o texto de cor a cada ciclo de movimento. Esse alerta poderá ficar na frente da tela do sistema, enquanto o operador não clicar em alguma parte da tela com o mouse. Nesta aula, serão vistas algumas propriedades para exemplificar o seu uso. Nas práticas, outras propriedades serão utilizadas, mas nem todas as propriedades existentes do CSS serão comentadas, pois são muitas e com diferentes variações de valores na aplicação. Recomenda-se como uma das fontes de consulta sobre as propriedades existentes do CSS a lista de referência da Fundação Mozilla desenvolvedora do navegador Firefox (Mozilla, 2020). Uma sugestão para aprofundar o entendimento e uso das propriedades é pesquisar os elementos utilizados na formatação das telas que serão vistas nas aulas sobre JavaScript e Angular, assim como nas aulas práticas, para identificar outras variações de valores e novas formas de aplicação. Assim o leitor vai experimentando formas alternativas de utilização das propriedades do CSS e aumentando seu repertório. No Quadro 4 foi criada uma lista com um conjunto básico de propriedades e uma descrição simplificada para iniciar o entendimento dos exemplos didáticos na sequência. Quadro 4 – Exemplos de propriedades gerais do CSS 10/09/2021 16:12 UNINTER - FERRAMENTAS DE DESENVOLVIMENTO WEB https://conteudosdigitais.uninter.com/libraries/newrota/?c=/gradNova/2021/analiseDesenvSistemas/ferramentasDesenvWeb/a2 6/28 Para alterar algumas das propriedades, pode-se utilizar como seletor um elemento HTML já existente ou pode-se criar um termo específico. Esse termo deve estar associado posteriormente a um elemento HTML dentro do documento, usando os atributos “id=” ou “class=”, como será visualizado nos próximos exemplos. No Quadro 5, temos um exemplo de várias das propriedades listadas no quadro anterior (Quadro 4) sendo aplicadas no mesmo seletor. Quadro 5 – Aplicação de diferentes propriedades em um seletor A mesma sequência de propriedades apresentadas no Quadro 5 pode ser aplicadaem uma tag <h1> ou num bloco com <div>. Para que a formatação possa ser aplicada de uma maneira mais 10/09/2021 16:12 UNINTER - FERRAMENTAS DE DESENVOLVIMENTO WEB https://conteudosdigitais.uninter.com/libraries/newrota/?c=/gradNova/2021/analiseDesenvSistemas/ferramentasDesenvWeb/a2 7/28 flexível, podemos colocar um termo no lugar do seletor p do Quadro 5 e utilizar um atributo no elemento que precisarmos formatar. Veja o novo exemplo no Quadro 6. Quadro 6 – Seletor CSS utilizado no atributo class= No exemplo do Quadro 6 temos alguns pontos a considerar: a. o seletor agora não é o nome de uma tag HTML, mas sim um termo “.quadroAula” que poderá ser aplicado a vários tipos diferentes de tags; b. o termo usado como seletor tem um “.” no início, indicando que poderá ser aplicado com um atributo “class=’quadroAula’”; c. somente o elemento <p> com o atributo class foi formatado, o outro elemento <p> não; d. o elemento <h1> foi formatado, mas manteve o negrito original, pois nas propriedades aplicadas não havia nenhuma que alterava o estilo da fonte. Em alguns casos, será preciso aplicar um grupo de propriedades CSS em um grupo de elementos, de maneira que todos sejam envolvidos pela formatação. Esse é o caso de utilizar a tag de bloco <div> com o atributo de formatação desejado, como pode ser visto no Quadro 7. Quadro 7 – Aplicação de CSS em bloco de elementos 10/09/2021 16:12 UNINTER - FERRAMENTAS DE DESENVOLVIMENTO WEB https://conteudosdigitais.uninter.com/libraries/newrota/?c=/gradNova/2021/analiseDesenvSistemas/ferramentasDesenvWeb/a2 8/28 No Quadro 7, todos os elementos que estão dentro do bloco formado pelo início e fechamento da tag <div> receberão a formatação aplicada pelo seletor “quadroAula” em forma de herança. Na construção de interfaces de sistemas o uso de um agrupador como o <div> torna mais flexível a aplicação de alguns tipos de formatação em partes da tela sem a preocupação em identificar o tipo de tag que será utilizado para apresentar cada informação. 1.2 CASCATA Até este ponto da aula, utilizamos a tag <style> na área <head> para configurar os seletores e suas propriedades, que depois seriam aplicadas aos elementos do documento. Mas existem duas outras formas de incluir e alterar propriedades no documento: importando um arquivo CSS externo, ou aplicando um atributo CSS diretamente no elemento HTML. E todas as formas podem ser utilizadas no mesmo documento, o que nos leva a verificar como o navegador vai tratar os conflitos na aplicação das propriedades. Essa característica faz parte do nome do CSS (cascade ou cascata) e se refere a possibilidade de organizar a ordem de aplicação da formatação (CSS1, 1996). Na Figura 1, temos um diagrama que mostra uma sequência genérica de aplicação de formatação CSS num documento, em que as três formas são utilizadas. Figura 1 – Aplicação do CSS em documentos 10/09/2021 16:12 UNINTER - FERRAMENTAS DE DESENVOLVIMENTO WEB https://conteudosdigitais.uninter.com/libraries/newrota/?c=/gradNova/2021/analiseDesenvSistemas/ferramentasDesenvWeb/a2 9/28 Um exemplo de um conflito está exposto no Quadro 8. Nesse exemplo, o mesmo seletor e a mesma propriedade, mas com valores distintos, estão aplicados em um arquivo externo (cascata.css), no elemento <style> e no atributo style. Quadro 8 – Conflito de aplicação de CSS No exemplo do Quadro 8, temos o carregamento do arquivo CSS externo “cascata.css”, que contém a propriedade de cor de fundo azul para todos os elementos <p>. Na sequência, o navegador identifica o tag <style>, que contém a propriedade de cor de fundo amarelo para todos os elementos <p>. Por final, o navegador encontra em um dos elementos <p> um atributo que contém a propriedade de cor de fundo cinza para aquele elemento. Qual dessas propriedades terá prioridade e vencerá a disputa? Seguindo a Figura 1, a aplicação das propriedades vai se dando por 10/09/2021 16:12 UNINTER - FERRAMENTAS DE DESENVOLVIMENTO WEB https://conteudosdigitais.uninter.com/libraries/newrota/?c=/gradNova/2021/analiseDesenvSistemas/ferramentasDesenvWeb/a2 10/28 sobreposição, sendo que a mais próxima do elemento será a vencedora. No caso do primeiro elemento <p> do documento, a propriedade do arquivo externo é sobreposta pela propriedade do elemento <style> e o fundo fica amarelo. No segundo elemento <p> a propriedade do elemento <style> também é sobreposta pelo atributo local e o fundo fica cinza. Apesar de facilitar o entendimento e ajudar nas primeiras montagens de formatação CSS, esta é uma forma didática de visualizar o cascateamento de propriedades CSS. À medida que o leitor vai se aprofundando no tema, vão surgir outras considerações, e a especificação CSS estabelece um algoritmo que impõe uma pontuação para cada situação até concluir qual propriedade vai ser aplicada no final. Entra nesse cálculo a formatação incluída pelo autor do documento, se a propriedade é em seletor HTML ou em uma classe ou ID, se existe alguma hierarquia entre propriedades ou herança entre elementos aninhados. Nas aulas práticas, quando alguma destas condições for aplicada em um caso, ela será explicitada. É importante destacar que, apesar de o arquivo externo ter sido sobreposto pelas demais formas de inclusão de CSS, esta é uma das formas mais flexíveis e práticas de aplicar a formatação CSS em sistemas, podendo inclusive o sistema ter sua aparência totalmente remodelada sem alterar uma linha de código, simplesmente alterando o arquivo CSS externo. 1.4 CORES As cores têm um propósito importante na apresentação de informações na tela, sendo uma das formas que o ser humano percebe mais rapidamente e representa o maior percentual de captação de informação quando em comparação com outros sentidos (Kulpa; Pinheiro; Silva, 2011), como podemos ver pela Figura 2. Figura 2 – Percentual de captação de informação pelos sentidos 10/09/2021 16:12 UNINTER - FERRAMENTAS DE DESENVOLVIMENTO WEB https://conteudosdigitais.uninter.com/libraries/newrota/?c=/gradNova/2021/analiseDesenvSistemas/ferramentasDesenvWeb/a2 11/28 Fonte: Kulpa; Pinheiro; Silva, 2011. O CSS permite configurar a cor de um elemento de diferentes formas e com base em diferentes padrões (W3, 2020). As cores podem ser informadas usando nomes padronizados em inglês (ex. Black, Purple, Aqua), mas pode também ser uma combinação de números decimais ou hexadecimais representando a combinação RGB (Red, Green e Blue, ou vermelho, verde e azul). A partir do CSS3, foi incluído o esquema HSL (Hue, Saturation e Lightness ou matiz, saturação e brilho) e com o CSS4, temos também o HWB (Hue, whiteness e blackness ou matiz, branqueamento e escurecimento). Em exemplos passados, foram utilizados os nomes padronizados das cores em inglês na propriedade color e background-color para indicar a cor do texto e do fundo da tela, respectivamente. No Quadro 9, temos um exemplo com a utilização de combinação de vermelho, verde e azul do RGB. Quadro 9 – Formatação de cor usando RGB 10/09/2021 16:12 UNINTER - FERRAMENTAS DE DESENVOLVIMENTO WEB https://conteudosdigitais.uninter.com/libraries/newrota/?c=/gradNova/2021/analiseDesenvSistemas/ferramentasDesenvWeb/a2 12/28 No resultado do Quadro 9 (b), as linhas de teste 1 e 2 têm a mesma tonalidade de cor, com base no valor máximo de vermelho e azul, resultando em um tom de rosa (usando o termo em inglês, essa combinação é representada pelo nome Fuchsia). Na linha de teste 1, a informação de vermelho e azul é aplicada em hexadecimal sendo FF (255) o valor máximo de cada cor. Na linha de teste 2, a combinação de cores é criada com base na função “rgb()” com o valor em decimal, sendo o máximo 255. Na linha de teste 3, os mesmos valores máximos de vermelho e azul, mas com o adicional de canal de transparência em 50% (0.5) com o uso da função “rgba()”, resultando numa tonalidade mais fraca de rosa. Quadro 10 – Comparação entre RGB, HSL e termo em inglês Uma comparação entre o padrão RGB, HSL e o termo Fuchsia pode ser vistono Quadro 10. Nessa comparação foi identificado visualmente o tom de cor no padrão HSL que fosse semelhante ao padrão RGB usado no exemplo anterior. Também foi pesquisado o termo padronizado em inglês semelhante aos dois padrões (RGB e HSL). O resultado, no quadro 10 – (b), mostra que as tonalidades 10/09/2021 16:12 UNINTER - FERRAMENTAS DE DESENVOLVIMENTO WEB https://conteudosdigitais.uninter.com/libraries/newrota/?c=/gradNova/2021/analiseDesenvSistemas/ferramentasDesenvWeb/a2 13/28 de cores podem ser representadas e usadas na construção da interface do sistema independente do padrão utilizado. 1.5 TABLELESS O uso do CSS permite uma outra forma de posicionar as informações na tela sem a utilização de tabelas, ainda que o modelo visual utilizado seja em linhas e colunas. Isso pode ser feito devido a algumas propriedades que podem alterar o fluxo que as informações podem ser dispostas na tela. Quadro 11 – Configuração de colunas com CSS No Quadro 11 (a), no seletor col foi feita uma divisão da largura da tela de forma proporcional (25%) indicando que um total de 4 espaços poderiam ser utilizados. Para distribuir os elementos na tela e eles ficassem lado a lado, foi configurado a propriedade float indicando a ordem inicial pela esquerda left. Assim os parágrafos com a classe col foram sendo apresentados iniciando com o texto 10/09/2021 16:12 UNINTER - FERRAMENTAS DE DESENVOLVIMENTO WEB https://conteudosdigitais.uninter.com/libraries/newrota/?c=/gradNova/2021/analiseDesenvSistemas/ferramentasDesenvWeb/a2 14/28 “Coluna de teste n.1” na lateral esquerda e os demais sendo posicionados no lado esquerdo deste primeiro texto. Para facilitar a visualização, foi formatada uma borda simples vermelha. Mas, ao indicar que a largura do elemento seria 25%, qualquer pixel a mais sendo posicionado na tela junto aos 4 parágrafos teria ultrapassado a largura total, que é o caso da borda de 1 pixel (duas laterais com um pixel de borda vezes os 4 parágrafos teríamos 8 pixels a mais). Para que todos esses espaçamentos fossem utilizados pelo navegador, também no cálculo da largura (25%) foi atribuída a propriedade de “box-sizing: border-box;”. Dessa forma, não houve necessidade de calcular os pixels utilizados na borda ou no espaçamento do texto na largura total das colunas. No exemplo do Quadro 11 também é apresentada a propriedade float com o valor right, indicando que a disposição dos elementos iniciaria pela lateral direita. Isso pode ser comprovado pela ordem que foram inseridos os elementos de parágrafo que estavam com a classe “col2”. Ficaram ao contrário dos elementos da classe col acima. Essa forma de posicionar os elementos e criar a visão de colunas e linhas através do CSS é mais flexível e é processada pelos navegadores de forma mais rápida. Conforme a versão do CSS disponível no navegador, outras formas de posicionamento são liberadas para facilitar a diagramação da interface. TEMA 2 – RESPONSIVE WEB DESIGN (RWD) Com a proliferação de diferentes tipos de dispositivos conectados a uma rede e com navegadores de internet pré-instalados, as telas de páginas e sistemas web puderam ser acessadas em vários equipamentos: smartphones, TVs, notebooks, tablets, computadores ou displays embutidos em aparelhos. Mas ao disponibilizar um navegador em um aparelho com uma tela pequena, as páginas acessadas nem sempre ficavam no formato idealizado pelo autor da página e muitas vezes as informações ficavam deslocadas e confusas, sem o visual atrativo que tinha sido cuidadosamente elaborado. O conceito de projeto web responsivo está associado ao desenvolvimento de interfaces web que sejam adaptáveis a diferentes tamanhos de telas, e o termo RWD – Responsive Web Design tendo sido criado em 2010 por Ethan Marcotte (MDN Web Docs Mozilla, 2021). 10/09/2021 16:12 UNINTER - FERRAMENTAS DE DESENVOLVIMENTO WEB https://conteudosdigitais.uninter.com/libraries/newrota/?c=/gradNova/2021/analiseDesenvSistemas/ferramentasDesenvWeb/a2 15/28 Segundo Almeida e Monteiro (2017), a criação de uma interface responsiva deve incluir: a. a possibilidade de os itens distribuídos na tela se adaptarem à resolução do dispositivo; b. as imagens disponibilizadas na página devem poder ser redimensionadas conforme o tamanho da tela; c. Adaptar o tamanho de botões e links para que possam ser utilizados em telas sensíveis ao toque, quando não houver teclado nem mouse disponíveis; d. usar sensores adicionais disponíveis nos dispositivos móveis para auxiliar na orientação dos conteúdos. Algumas técnicas para adaptação de elementos na tela envolvem a utilização de unidades de largura e altura em percentuais – que já existiam em versões antigas do HTML – e outras ferramentas que vieram com as novas versões do CSS. Um exemplo é inserir uma imagem ou uma tabela com uma largura de 100%, o que faria com que estes dois itens se adaptassem ao tamanho da tela. Uma propriedade incluída no CSS permite também a montagem de layout em grade (grid), que é semelhante ao uso de tabelas, mas que foi desenvolvido com a expectativa de ser responsivo. Assim, o desenvolvedor de interfaces pode usar esse método como alternativa ao uso de tabelas e floats, como mostrado no Quadro 12. Quadro 12 – Colunas com o uso de grid 10/09/2021 16:12 UNINTER - FERRAMENTAS DE DESENVOLVIMENTO WEB https://conteudosdigitais.uninter.com/libraries/newrota/?c=/gradNova/2021/analiseDesenvSistemas/ferramentasDesenvWeb/a2 16/28 No exemplo do Quadro 12, temos a aplicação do “display: grid;” no seletor grade-completa. A quantidade de colunas foi configurada para quatro com a largura calculada automaticamente (“auto auto auto auto”). Na primeira parte do exemplo, os parágrafos são disponibilizados um ao lado do outro, formando as quatro colunas, bastando, para isso, estarem incluídos dentro da <div>, que tem a classe grade-completa. A borda vermelha que envolve todas as colunas faz parte da grade-completa e não permite diferenciar as colunas. Para perceber os limites das colunas, foi aplicado na segunda parte do exemplo, em cada parágrafo, uma classe col-grade, que possui entre as propriedades a formatação de uma borda verde. Mesmo com a possibilidade de utilizar unidades em percentual e cálculos de larguras automatizados, em alguns casos o desenvolvedor ainda vai precisar identificar em qual dispositivo o sistema web está sendo visualizado e fazer algumas adaptações específicas. Nesses casos, havia a possibilidade de se utilizar códigos em Javascript para retornar a resolução da tela. Com base no CSS 3, foi introduzida uma possibilidade de tratar a resolução do aparelho diretamente no CSS e, com 10/09/2021 16:12 UNINTER - FERRAMENTAS DE DESENVOLVIMENTO WEB https://conteudosdigitais.uninter.com/libraries/newrota/?c=/gradNova/2021/analiseDesenvSistemas/ferramentasDesenvWeb/a2 17/28 isso, criar combinações alternativas de layout responsivo e posicionamentos na tela, podendo criar conjuntos de propriedades específicas para um tipo de resolução (W3C, 2020). Esse mecanismo foi o Media Queries. 2.1 MEDIA QUERIES Conforme o tipo do dispositivo ou conforme a resolução da área do navegador onde o HTML será apresentado, uma quantidade de colunas pode deixar o conteúdo muito pequeno, ou algumas imagens não podem ser dispostas uma ao lado da outra sem que seja habilitado o scroll horizontal do navegador. Saiba mais Scroll é uma pequena barra (horizontal ou vertical) que permite ao operador deslizar lateralmente ou horizontalmente para conseguir ver a informação que passa a área útil do navegador. Com a criação das media queries, o CSS pode ser configurado dinamicamente conforme a resolução do aparelho em uso. Pode também identificar se o conteúdo vai ser exibido na tela (screen), impresso (print) ou lido por um mecanismo de voz (speech) (MDN Web Docs Mozilla, 2019). Usando a técnica de construção de colunas com o uso de float, o Quadro 13 mostra a condição a ser aplicada conforme a resolução da janela do navegador.Quadro 13 – Condição de aplicação do float, conforme resolução 10/09/2021 16:12 UNINTER - FERRAMENTAS DE DESENVOLVIMENTO WEB https://conteudosdigitais.uninter.com/libraries/newrota/?c=/gradNova/2021/analiseDesenvSistemas/ferramentasDesenvWeb/a2 18/28 No exemplo do Quadro 13, temos duas configurações para o mesmo seletor col. Na primeira configuração, a largura está configurada para 25%. A segunda configuração está subordinada ao media querie, em que temos uma condição para que seja aplicada: deve ser uma tela (screen), e a janela deve ter no máximo 600 pixels. Acima de 600 pixels a formatação volta a ser a primeira (padrão). O resultado das duas situações está indicado no Quadro 14. Quadro 14 – Resultado das colunas conforme dimensionamento da janela do navegador 10/09/2021 16:12 UNINTER - FERRAMENTAS DE DESENVOLVIMENTO WEB https://conteudosdigitais.uninter.com/libraries/newrota/?c=/gradNova/2021/analiseDesenvSistemas/ferramentasDesenvWeb/a2 19/28 No primeiro resultado (a) do Quadro 14, a janela do navegador está dimensionada para um pouco acima de 600 pixels. Ao diminuir um pouco a janela e a resolução útil ficar abaixo (basta um pixel a menos), a configuração aplicada é a interna da media querie. Nesse caso, em dispositivos menores como o smartphone, apenas duas colunas (50%) serão apresentadas no navegador. Se for necessário, outras configurações podem ser condicionadas a resolução, assim como outras resoluções podem ser incluídas, podendo a interface do sistema web apresentar elementos dispostos de maneira diferente em smartphones, computadores, tablets ou TVs. TEMA 3 – EXTENSÃO CSS Um arquivo CSS de um sistema pode ficar extenso e com muitas situações criadas especificamente para o projeto em questão, e outras que podem ser usadas em outros projetos. Mas, ao criar valores específicos para a largura de um objeto ou tamanho de fonte, por exemplo, algumas condições podem mudar (tamanho de tela) ou mesmo em diferentes partes do sistema podem não ser adequadas. Nesses casos, seria interessante criar alguma forma de generalizar o trecho de CSS com algumas variáveis ou até condições. Alguns desenvolvedores criaram mecanismos de estender o uso do CSS para aumentar a produtividade, pois alguns arquivos ficavam grandes e difíceis de gerenciar, e trechos, para serem reaproveitados em diferentes sistemas, necessitavam de muitas adaptações. Alguns desses projetos funcionam como uma linguagem simples que vai gerar o arquivo CSS padrão a ser incluído no 10/09/2021 16:12 UNINTER - FERRAMENTAS DE DESENVOLVIMENTO WEB https://conteudosdigitais.uninter.com/libraries/newrota/?c=/gradNova/2021/analiseDesenvSistemas/ferramentasDesenvWeb/a2 20/28 sistema web. Podem ser incluídos no framework Angular (Angular Styles, [S.d.]) que será visto nesta disciplina. Duas funcionalidades que podem auxiliar a entender este mecanismo e estão implementados nos projetos Sass, Less e Stylus exemplificados neste tema são o uso de variáveis e mixins (Sass, [S.d.]; Less, [S.d.]; Stylus, [S.d.]). Quadro 15 – Uso de variáveis No Quadro 15 foi feita uma adaptação das propriedades usadas em exemplos anteriores para as três ferramentas citadas, facilitando a comparação do uso de variáveis e as diferenças na sintaxe entre elas. O uso de variáveis pode auxiliar o desenvolvedor que precisa utilizar alguns arquivos de CSS entre diferentes projetos. Pode criar um local separado para as variáveis e os parâmetros que precisam ser adaptados entre os projetos. Quadro 16 – Uso de mixins 10/09/2021 16:12 UNINTER - FERRAMENTAS DE DESENVOLVIMENTO WEB https://conteudosdigitais.uninter.com/libraries/newrota/?c=/gradNova/2021/analiseDesenvSistemas/ferramentasDesenvWeb/a2 21/28 No Quadro 16, há um exemplo de reaproveitamento de trecho de CSS dentro do próprio contexto do sistema em desenvolvimento. Um conjunto de propriedades que devem ser aplicadas em diferentes classes pode ser chamado conforme a necessidade, sem a repetição dos trechos e deixando o arquivo CSS mais limpo. TEMA 4 – BOOTSTRAP Quando um sistema precisa ser desenvolvido, a interface com o usuário muitas vezes requer diferentes componentes visuais para destacar informações variadas, sejam estas buscadas em bases de dados, coletadas do próprio operador do sistema ou produzidas por meio de cálculos e combinações entre dados. Durante o desenvolvimento da interface do sistema, conceitos de usabilidade como satisfação do usuário e facilidade de uso (Abran et al., 2003) são utilizados como forma de tornar a experiência de uso do sistema mais atrativa. Uma das formas de facilitar o uso é a combinação de componentes gráficos de uso comum como cartões, botões, barra deslizante, adesivos, placas, com o uso de mouse ou telas sensíveis ao toque e janelas com diferentes tamanhos (ver tema sobre RWD). Um dos frameworks mais utilizados para o desenvolvimento de interfaces web é o Bootstrap, que foi desenvolvido e utilizado internamente na empresa Twitter e depois foi liberado na forma aberta (open-source). Além do conceito de grade visto nos temas anteriores, possui diversos componentes gráficos prontos para utilização no sistema e com a vantagem de ser responsivo (Bootstrap, [S.d.]). Como exemplo de uso do Bootstrap temos uma tela utilizada anteriormente em nossos estudos, reapresentada na Figura 3. Figura 3 – Tela de formulário com o uso do Bootstrap 10/09/2021 16:12 UNINTER - FERRAMENTAS DE DESENVOLVIMENTO WEB https://conteudosdigitais.uninter.com/libraries/newrota/?c=/gradNova/2021/analiseDesenvSistemas/ferramentasDesenvWeb/a2 22/28 Nesta tela, foram utilizados botões, listas personalizadas e opções para cor e sombra, combinados com CSS normal. TEMA 5 – EXEMPLO DE BOOTSTRAP Para utilizar o Bootstrap num projeto, é necessário fazer a referência para seu conjunto de componentes CSS e Javascript. No Quadro 17, foi utilizado o formato de referência externa para tornar mais prático, mas outras formas podem ser utilizadas conforme a documentação do framework. Quadro 17 – Inclusão do Bootstrap no documento HTML 10/09/2021 16:12 UNINTER - FERRAMENTAS DE DESENVOLVIMENTO WEB https://conteudosdigitais.uninter.com/libraries/newrota/?c=/gradNova/2021/analiseDesenvSistemas/ferramentasDesenvWeb/a2 23/28 Com essa configuração o Bootstrap pode ser chamado por meio das classes pré-configuradas, e no último link foi incluído também uma fonte externa chamada Awsome, que contém muitos ícones que podem ser usados na interface. 5.1 COMPONENTES Alguns componentes já utilizados em nossos estudos são apresentados no Quadro 18. Esses componentes foram utilizados para tornar o HTML apresentado mais estimulante. As cores utilizadas fazem parte do padrão do Bootstrap, que indica a cor azul (a) com primary e verde (c) com success. Quadro 18 – Componentes Bootstrap No Quadro 18 foram incluídos: a. uma configuração na imagem do logotipo do sistema, tornando-o arredondado e com sombra; b. configuração de listas com fundo azul, linhas divisórias e cor de texto branco; 10/09/2021 16:12 UNINTER - FERRAMENTAS DE DESENVOLVIMENTO WEB https://conteudosdigitais.uninter.com/libraries/newrota/?c=/gradNova/2021/analiseDesenvSistemas/ferramentasDesenvWeb/a2 24/28 c. botão com ícone de sinal de checagem com fundo verde e letra branca. Este último item também é uma opção de formulário (submit) que coleta e envia as informações para processamento. 5.2 COMPONENTES ADICIONAIS Além dos componentes utilizados anteriormente, foram listadas opções para servir de exemplo no desenvolvimento de aplicações. No Quadro 19, mais três opções a serem consideradas. Quadro 19 – Componentes adicionais para sistemas web 10/09/2021 16:12 UNINTER - FERRAMENTAS DE DESENVOLVIMENTO WEB https://conteudosdigitais.uninter.com/libraries/newrota/?c=/gradNova/2021/analiseDesenvSistemas/ferramentasDesenvWeb/a2 25/28 Na opção (a), temos um menu dinâmico que lista as opções ao ser clicado. É muito usado em interfaces para mostrar opções do usuário ou de rápido acesso.Na opção (b), um quadro dinâmico que será fechado e liberado o espaço ocupado ao clicar no x do canto superior direito. E, na opção (c), um botão que pode dar acesso a um relatório do sistema, mas que também informa um dado numérico dentro do próprio botão, permitindo o usuário avaliar antes se precisa ou não clicar no botão com base na informação adicional. Na Figura 4, um exemplo da aparência de um conjunto de abas dinâmicas que mostram conteúdo diferente ao serem clicadas. Cada aba mostra uma tabela com informações de Faturas pagas ou Faturas em aberto. Figura 4 – Abas dinâmicas No Quadro 20, temos o código HTML usado na criação de abas de conteúdo da Figura 4. Quadro 20 – Criação de abas dinâmicas 10/09/2021 16:12 UNINTER - FERRAMENTAS DE DESENVOLVIMENTO WEB https://conteudosdigitais.uninter.com/libraries/newrota/?c=/gradNova/2021/analiseDesenvSistemas/ferramentasDesenvWeb/a2 26/28 No Quadro 20, também é apresentada a configuração das tabelas usando classes específicas do Bootstrap para tabelas (bordas e fundo listrado). Ao clicar em uma aba, o conteúdo de uma das tabelas torna-se visível para o usuário e este poderá interagir. FINALIZANDO Nesta aula, foram apresentados os mecanismos utilizados para a formatação visual das interfaces de sistemas web. Junto com os aspectos técnicos da apresentação visual foi incluído um conceito presente na arquitetura dos sistemas web atuais: responsividade. No conjunto de ferramentas, o CSS é uma importante base para a construção das telas de sistemas e, mesmo que o desenvolvedor utilize posteriormente um framework com componentes prontos como o Bootstrap, vai precisar conhecer como o CSS funciona para conseguir integrar as diversas bibliotecas e frameworks utilizados no desenvolvimentos de sistemas e aplicativos. 10/09/2021 16:12 UNINTER - FERRAMENTAS DE DESENVOLVIMENTO WEB https://conteudosdigitais.uninter.com/libraries/newrota/?c=/gradNova/2021/analiseDesenvSistemas/ferramentasDesenvWeb/a2 27/28 Para melhorar a produtividade no gerenciamento de extensos grupos de códigos CSS, também foram expostas nesta aula algumas ferramentas que convertem algumas extensões da sintaxe do CSS para um arquivo CSS puro, aproveitando os recursos de variáveis e de reaproveitamento de código. REFERÊNCIAS ABRAN, A. et al. Usability meanings and interpretations in ISO standards. Software quality journal, v. 11, n. 4, p. 325-338, 2003. ALMEIDA, F.; MONTEIRO, J. The Role of Responsive Design in Web Development. Webology, v. 14, n. 2, 2017. ANGULAR. Angular workspace configuration. Angular, [S.d.]. Disponível em <https://angular.io/guide/workspace-config#styles-and-scripts-configuration>. Acesso em: 10 mar. 2021. BOOTSTRAP. Disponível em: <https://getbootstrap.com/docs/5.0/about/overview/>. Acesso em: 10 mar. 2021. CSS1. Cascading Style Sheets, level 1. CSS1, [S.d.]. Disponível em <https://www.w3.org/TR/CSS1/>. Acesso em: 10 mar. 2021. KULPA, C. C.; PINHEIRO, E. T.; SILVA, R. P. A influência das cores na usabilidade de interfaces através do design centrado no comportamento cultural do usuário. Perspectivas em Gestão & Conhecimento, v. 1, n. 1, p. 119-136, 2011. LESS. Disponível em: <http://lesscss.org/>. Acesso em: 10 mar. 2021. MDN WEB DOCS MOZILLA. Referência de CSS. Mozilla, 24 set. 2019. Disponível em <https://developer.mozilla.org/pt-BR/docs/Web/CSS/CSS_Reference>. Acesso em: 10 mar. 2021. _____. Responsive design. Mozilla, 3 mar. 2021. Disponível em <https://developer.mozilla.org/en-US/docs/Learn/CSS/CSS_layout/Responsive_Design>. Acesso em: 10 mar. 2021. SASS. Sass – CSS with superpowers. Sass, [S.d.]. Disponível em <https://sass-lang.com/guide>. Acesso em: 10 mar. 2021. 10/09/2021 16:12 UNINTER - FERRAMENTAS DE DESENVOLVIMENTO WEB https://conteudosdigitais.uninter.com/libraries/newrota/?c=/gradNova/2021/analiseDesenvSistemas/ferramentasDesenvWeb/a2 28/28 STYLUS. Disponível em <https://stylus-lang.com/>. Acesso em: 10 mar. 2021. W3. Standards. W3, [S.d.]. Disponível em <https://www.w3.org/standards/>. Acesso em: 10 mar. 2021. _____. CSS Color Module Level 4. W3, 12 nov. 2020. Disponível em <https://www.w3.org/TR/css- color-4/>. Acesso em: 10 mar. 2021. W3C. Media Queries Level 5. W3C, 31 jul. 2020. Disponível em: <https://www.w3.org/TR/mediaqueries-5/>. Acesso em: 10 mar. 2021.
Materiais relacionados
9 pág.
176 pág.
Compartilhar