Baixe o app para aproveitar ainda mais
Prévia do material em texto
Design para Web Aula 03: Uma página web Apresentação Um website é um conjunto de páginas web, em geral, construído de forma ordenada, objetivando manter a audiência e a experiência de navegação do usuário. Para tal, é preciso conhecer os elementos que compõem uma página web e a melhor forma de posicioná-los. Importante também é compreender os elementos e o funcionamento de um bom sistema de navegação, que não apenas valorize a experiência do usuário mas também propicie sua satisfação subjetiva ao navegar pelo website. As linguagens utilizadas para a construção de websites, do lado cliente (através do navegador), são em conjunto HTML, CSS e Javascript, cada qual com sua função. Objetivos Analisar os elementos comuns que compõem uma página; Descrever elementos e funcionamento da navegação; Examinar os recursos de linguagem CSS e HTML. Constituição de uma página web Fonte: Shutterstock Temos falado desde o início da aula 1 de página web, website e HTML. Chegou o momento de entender melhor o emprego e o uso desses termos. Uma página web é um documento, escrito na linguagem HTML, que pode ser exibido pelo navegador (browser), como Firefox, Safari (Apple), Internet Explorer, dentre outros. HTML (em inglês, Hypertext Markup Language), signi�ca Linguagem de Marcação de Hipertexto. Uma página web contém: 1 Texto informativo, condutor 2 Links Acesso a outros conteúdos 3 Estilos Relacionados ao design da página, de�nem o tipo e cor das letras, cor de fundo, das molduras etc. 4 Elementos multimídia Imagens, sons, vídeos e animações. Uma página web pode ser classi�cada em estática ou dinâmica em função da forma como disponibiliza conteúdo: Clique nos botões para ver as informações. Nas páginas estáticas, conteúdo é sempre o mesmo HTML. Para alterar o conteúdo é preciso alterar o arquivo HTML da página. Não demanda sistema de gerenciamento de conteúdo. Um exemplo clássico de página estática é a página em HTML como a apresentação de uma empresa, sem seu site. Na página estática, todo código implementado em HTML é interpretado no navegador da máquina do usuário. Páginas Estáticas Na página dinâmica, o seu conteúdo varia, por exemplo, em função de dados obtidos de um banco de dados. Um exemplo seria a página de produtos vendidos num site de e-commerce. Todos os produtos que estiverem no banco de dados serão apresentados conforme formato de�nido no HTML. Os produtos do e-commerce a serem exibidos são obtidos pela execução de um script no servidor (em linguagens como Python, PHP, Java dentre outras possibilidades) que acesse o banco de dados e retorne os produtos a serem exibidos. Em página dinâmica, há um processamento no servidor; no caso, a busca dos produtos a vender e, na sequência, a renderização no navegador, na máquina do usuário, apresentando cada produto à venda. Páginas Dinâmicas Um website, ou simplesmente site (ou, ainda, sítio) é um conjunto de páginas web relacionadas e vinculadas, que compartilham o mesmo endereço (o mesmo domínio), como, por exemplo, https://www.w3.org/. É o espaço virtual de uma pessoa ou organização. Existem diversos tipos de websites disponíveis, como, por exemplo, sites pessoais, institucionais, informativos, comunitários etc. Cada um tem seu propósito especí�co, variando, principalmente, em função do seu público. Características relevantes de páginas web e websites Cada página web é acessada pela sua URL, única; URL é o endereço que permite localizar e acessar uma página web (recurso) na internet. 1 Os websites são armazenados em servidores web. O conjunto de servidores web formam a World Wide Web ou WWW. javascript:void(0); https://estacio.webaula.com.br/cursos/go0413/aula3.html Componentes de uma página web O layout de uma página web deve re�etir a identidade visual da empresa, seja nas cores, no estilo e na escolha dos elementos. Entender os elementos básicos que compõem uma página web confere ao webdesigner maior capacidade para criar interfaces atraentes. A quantidade de elementos de uma página web varia em função do seu tamanho. Contudo, Beaird aponta os elementos que �guram na maioria dos websites: Clique nos botões para ver as informações. Por estar localizado no topo da página, costuma ser a primeira área que o usuário visualiza, até por que é a mais facilmente alcançada por estar na altura dos olhos. Assim sendo, sua relevância para o website é de muita importância. Trata-se da parte superior da tela, em destaque do restante do conteúdo, e deve permitir a melhor navegação e experiência do usuário. O logotipo, em geral, encontra-se no header, pois a entidade do negócio deve estar ali. Deve conter ainda o título da página, alguma aba de navegação e pesquisa de conteúdo (por palavra-chave, em geral). Caso seja página de e-commerce, caberá um carrinho de compras. Caso seja um homebank, deve trazer os edits para preenchimento dos dados de acesso à conta corrente. Cabeçalho (ou header) O uso do logotipo no website evidencia a identidade visual de marca (empresa, produto ou serviço). Assim sendo, o adequado posicionamento do logotipo na página web é fundamental para o fortalecimento da marca, na medida em que o logotipo a torna única em meio aos concorrentes, além de possibilitar que os parceiros, funcionários, fornecedores e clientes associem rapidamente o logotipo à marca. Logotipo Região da página web em que está o conteúdo, em seus diversos elementos. A largura do bloco de conteúdo pode ser �exível ou �xo. No primeiro caso, pode ser expandido de forma a preencher a largura da janela de navegação. Caso seja �xo, deve manter a mesma largura. No HTML, é representado pela tag <body>. Bloco de conteúdo O conteúdo é o motivo de ser do website. A estrutura do site deve ter como foco a possibilidade do usuário localizar, sem esforço, o conteúdo de interesse. O objetivo é que o usuário permaneça mais tempo possível navegando no site. Conteúdo teste A navegação é um elemento fundamental na página web, pois é a sua e�ciência que vai possibilitar que o conteúdo desejado pelo usuário seja localizado. Devemos portanto considerar fortemente as necessidades de busca dos usuários e ainda os diferentes tipos de dispositivos que possam acessar o conteúdo, para que ela seja e�ciente e permita uma melhor experiência de navegação. Os menus são elementos fundamentais na navegação. Navegação O rodapé, atualmente, pode não mais ser visto num website; contudo, sua relevância permanece. Geralmente, como diz o nome, �ca na parte inferior da página e revela informações pertinentes a direitos autorais, contatos, informações legais, links principais ou não. Sinaliza o �nal da página. Rodapé O espaço em branco, ou espaço negativo, compreende toda a área da página web sem preenchimento (no entorno e entre os elementos). É fundamental, evitando que o design visual pareça confuso e com excesso de informações. Além disso, guia o usuário e ajuda a equilibrar e criar unidade nos elementos Espaço em branco A navegação do website Fonte: Shutterstock O que um usuário web deseja em primeira instância é localizar a informação que deseja facilmente e sem esforço. A forma de navegar é fundamental para atender a contento a necessidade do usuário. O design de navegação é uma tarefa ampla, pois precisa coordenar os objetivos dos usuários com os objetivos do cliente. Um boa navegação nem é percebida pelo usuário, pois seu foco é ajudá-lo a atingir seu objetivo no website. Portanto, não temos uma regra geral que de�na como deve ser a navegação. Criar um e�ciente sistema de navegação faz parte da expertise e criatividade do webdesigner. Um das atividades mais complexas é a organização dos menus de acesso. Para Kalbach, a navegação em website é de�nida como: A junção da teoria à prática para tentar supor como os usuários se movem entre as páginas de um website; A forma de localizar, objetivamente, a informação desejada em um ambiente de hyperlink; Conjunto de links, rótulos e elementos que fornecem acesso às páginas e orientamos usuários durante sua interação no website. O design de um sistema e�ciente de navegação deve considerar a sua capacidade em: Clique nos botões para ver as informações. O objetivo do design de navegação é permitir que o usuário melhore, constantemente, sua experiência de navegação para acesso assertivo à informação; Fornecer acesso à informação Muitas vezes, em função de links inadequados e falta de orientação na tela, o usuário se perde e �ca sem saber onde está dentro do site. São questões que o design de navegação deve responder ao usuário: Onde está? Qual conteúdo tem aqui? E para onde posso seguir, a partir desse ponto?; Mostrar a localização em um site O design da navegação deve preocupar-se com a relação dialógica entre os conteúdos que apresenta, que devem ser coerentes e com signi�cado claro ao usuário. Devem estar claros, ao navegar, os assuntos principais do website, de forma que não re�itam em di�culdade para encontrar o que se queira. Pode-se considerar ainda a existência de diferentes conteúdos para sites em que o usuário precisa se logar; Mostrar o assunto de um site O posicionamento visual da marca leva em consideração o logotipo, as cores relacionadas, as fontes usadas e sua localização na página, dentre outros aspectos, incluindo a navegação, em que a ordem dos elementos, os rótulos usados e o estilo (visual) são fundamentais; Re�etir a marca A usabilidade de um site considera a qualidade subjetivamente percebida pelo usuário. Um bom design de navegação encoraja o usuário a explorar as propriedades superlativas do website em busca do que necessita. A credibilidade de um site é fundamental para alcançar os objetivos pretendidos; Afetar a credibilidade do site Informação é considerada sem utilidade sempre que não puder ser localizada pelo usuário, gerando custo para o negócio. Mecanismos de busca, desempenho técnico, necessidades dos usuários e seus comportamentos, além da usabilidade geral, devem ser considerados em uma boa navegação do site. Uma navegação ruim não ajuda o cliente a encontrar aquilo que quer comprar; impede o funcionário de conseguir acessar a informação desejada, afetando a produtividade; o custo por suporte ao cliente aumenta; e desvaloriza a marca. Interferir na rentabilidade Conhecendo HTML e CSS e seus recursos Fonte: Shutterstock O pro�ssional de webdesign deve estar bem próximo do Desenvolvedor Front-End. Portanto, ter um mínimo de conhecimento de como funciona o HTML e CSS é fundamental. Quanto menores forem as barreiras de comunicação entre ambos, melhores as oportunidades de inovação e criação. A linguagem HTML Clique no botão acima. A linguagem HTML A história da página web coincide com a da própria história da linguagem HTML, idealizada por Tim Berners-Lee, na década de 1990, viabilizando a web 1.0. HTML é uma linguagem concebida para ser independente de plataforma ou meio de acesso. Plataforma seria a combinação de sistema operacional e hardware dos servidores, e meios de acesso são os diferentes navegadores que suportam as páginas HTML. Essa independência é o que faz da internet um meio democrático, padronizado, em que não existem formatos proprietários dominantes. Em 2008 foi publicada a especi�cação da mais nova versão do HTML, o HTML5, que abandonou alguns dogmas do passado e buscou revolucionar a web com novos elementos, abrindo portas para novas aplicações. O HTML é a linguagem usada em todo o conteúdo que vemos na internet. Seja qual for a tecnologia usada no desenvolvimento do website, ou o dispositivo que o acessa (desktop, notebook, celular etc.), sua visualização geralmente será neste formato. Seu funcionamento é baseado através das tags (ou etiquetas), consideradas marcações de conteúdo. O objetivo do HTML é estruturar as páginas (e seus conteúdos) do site, sem focar a estrutura estética e sim a marcação do conteúdo. A estrutura do HTML5 é baseada no signi�cado da marcação de seu conteúdo, facilitando a manutenção e compreensão do conteúdo HTML. A linguagem HTML é responsável pela estrutura e semântica das páginas web. Mas ela não opera sozinha, e sim em conjunto com linguagens: CSS e JavaScript. A linguagem HTML não gera um programa executável e sim um arquivo texto, que é lido e interpretado pelo navegador (Chrome, Internet Explorer, Safari, dentre outros). A linguagem HTML não é, portanto, uma linguagem de programação convencional, posto que não possui estruturas de controle, decisão e repetição, não sendo possível a criação de rotinas (procedimentos e funções) ou a chamada de rotinas de um sistema operacional, quando será necessário escrever código na linguagem Javascript. Podemos citar como características da linguagem HTML: Independente de plataforma (hardware e sistema operacional), o que permite a qualquer computador, com navegador instalado, ler e interpretar o código HTML de uma página. Foi idealizada para ser usada na web; Não existe uma empresa privada (ou pública) ou pessoa que monopolize a linguagem, sendo controlada pelo consórcio W3C; Os arquivos HTML são pequenos e relacionados pelos hiperlinks, que são de�nidos nos documentos HTML. Isso permite a rápida transmissão nos meios de comunicação, mesmo que de baixa velocidade; Não há necessidade de ambientes de desenvolvimentos (IDE), como as linguagens de programação. Editores de texto simples, como bloco de notas, ou outros, são su�cientes para gerar os documentos ilustrados na �gura em HTML. A estrutura de um documento é composta de três tags essenciais, que devem estar presentes em todos os documentos, conforme ilustrado na Figura 1, abaixo: De�nição do documento (doctype) Sempre deve existir e na 1ª linha do documento: <DOCTYPE html>; Não é uma TAG HTML, mas a informação, ao navegador e outros programas que leiam o site, de que ali está um código em HTML. Cabeçalho do documento (head) Contém dados de uso e controle do documento: Ligação com outros arquivos, como hiperlinks, código de programação de scripts etc.; Não são informações aos usuários do website; Todo cabeçalho �ca delimitado entre a abertura e fechamento da tag HEAD. Corpo do documento (body) Trata-se da informação que será exibida ao usuário: Informação textual, imagem, som, vídeo, conteúdo multimídia, formulários de entrada de dados; Delimitado pelo par de tags <body>e <body > Contém os elementos semânticos de construção da página, em que estarão identi�cados os cabeçalhos, rodapé, conteúdo principal etc. Abaixo, temos um exemplo de um arquivo HTML5, com sua estrutura básica: Imagem 1: Estrutura de TAGS essências de um documento HTML | Fonte: Educação Pública. javascript:void(0); Fonte: https://tableless.github.io/iniciantes/manual/html/estruturabasica.html A Tabela 1, abaixo, exibe as propriedades de cada tag essencial e seus respectivos atributos. Tabela 1: Elementos básicos do HTML A versão 5 da linguagem HTML, o chamado HTML5, trouxe as linguagens CSS3 e o Javascript 5, conforme ilustrado pela Imagem 2. O HTML5 traz novas tags orientadas a uma organização da estrutura do site, conforme ilustrado pela Imagem 3, abaixo. Abaixo, comentamos as novas tags do HTML5: <!DOCTYPE html> <html lang="pt-br"> <head> <Título da página> <meta charset="UTF-8"/> </head> <body> Aqui vai o código HTML que fará seu site aparecer. </body> </html> Tags Definição Atributos <html> </html> Identifica que o documento é HTML Não define <head> </head> Início de fim do cabeçalho Não define <title> </title> Título do documento a ser mostrado na barra de títulos do navegador Não define <body> </body> Aqui está o que será exibido pelo navegador Vários, como: Cor e imagem de fundo, margens, cor dos textos e links <!-- e -- > Comentários, pode estar em qualquer local do documento. Seu conteúdo não é exibido ao usuário Não define Imagem 2: As linguagens vindas com HTML5 Imagem 3: Novas tags HTML, orientadas à estrutura do site | Fonte: World Wild Webdesign. javascript:void(0); A imagem abaixo apresenta outrocódigo com a estrutura básica do HMTL5, em que: Linha 1 indica ao navegador que trata-se de um arquivo HTML; Linha 2 de�ne a linguagem principal do documento; Linha 4 exibe a tabela de caracteres que a página utiliza; Linha 5, tag link que importa o CSS para a página. O atributo rel=”stylesheet”, indica que o link é importação de um arquivo CSS (folha de estilo). Tags Utilidade Header Destina-se ao cabeçalho do conteúdo Nav Área de navegação: Menus e links Article Apresentação do conteúdo principal Section Seções (divisões) do conteúdo Aside Separação de conteúdo, em barra lateral Footer Rodapé Imagem 4: Integração HTML5 x CSS. A linguagem CSS No início, a aparência e a estrutura eram feitas na linguagem HTML. Com a criação da linguagem CSS, abreviatura de Cascading Style Sheets (Folhas de estilo em cascata), houve uma ruptura. Passamos a ter: A separação entre de�nições de aparência, agora realizadas pelas folhas de estilo em CSS e da estrutura em HTML, inclusive na versão HTML5. A exemplo do que foi apresentado acima, na Imagem 4. CSS é uma linguagem de folha de estilos, objetivando estilizar as páginas em HTML. Sua atual versão, vinda ao mundo junto com HTML5, é a CSS3, e funciona por meio de um conjunto de regras. O CSS3 implementou grandes melhorias no uso das cores, gradientes, sombras e cantos arredondados, o que anteriormente era possível somente por meio de imagens ou implementação em JavaScript. Como são formadas as regras CSS? Clique no botão acima. Como são formadas as regras CSS? Um ou mais seletores, que permitem saber a quais elementos a regra se aplicará; Chaves; Declarações, como uma propriedade e valor para cada; E xemplo: p {color:red}; em que p é o seletor; color é a propriedade e red, o valor. A regra termina com o ; (ponto e vírgula). 🡪 com isso, será aplicada a cor vermelha a todas as tags P; Todos os parágrafos da página serão em vermelho. Exemplo: body { background-color: white } 🡪 a cor de fundo da tag body será branca. Como inserir as regras da folha de estilo ao arquivo de marcação HTML? Existem três formas; vamos descrever abaixo, da melhor para a pior. 1. Usar a tag <link> para associar o arquivo CSS à página HTML, conforme exemplo abaixo. Atente que esse mesmo CSS pode ser aplicado a um conjunto de páginas de seu interesse, facilitando a manutenção do site como um todo. Em que: O atributo href indica o endereço do arquivo CSS; O atributo rel determina a relação deste link com a página, no caso uma stylesheet, ou folha de estilos; 2. Usar a tag <style>, no <head> da página HTML, conforme exemplo abaixo, em que a cor vermelha será aplicada a todo parágrafo da página. 3. Usar o atributo style, dentro de um elemento da página HTML, conforme abaixo exempli�cado: • Em que será aplicada a cor vermelha apenas ao parágrafo, onde há essa de�nição. Não recomendada pois mistura CSS com HTML, tornando a manutenção mais complexa e morosa. Cascata (Cascading) e herança <link href="css/arquivo.css" rel="stylesheet"> <style> p { color: red; } </style> <p style="color: red;">Texto Algumas das propriedades aplicadas a elementos HTML são “herdadas” por seus elementos internos (também chamados de "�lhos"). Cascading signi�ca que a maioria das propriedades que aplicamos a um elemento irá passar aos seus "herdeiros". Todos os elementos internos a body usarão a fonte arial ou a fonte sem serifa padrão do sistema operacional (caso arial, não esteja disponível) 🡪 de�ne a fonte da página toda. Outro exemplo: Abaixo, arquivo HTML. Abaixo, arquivo CSS. A propriedade color foi aplicada, no HTML, a <div> TEXTO, que passou a ser aplicada ao parágrafo e ao destaque. Benefícios do CSS Controle e manutenção da aparência visual de vários documentos HTML a partir de um único arquivo CSS; Aplicação de diferentes estilos de layout, conforme o dispositivo utilizado. Ou seja, aplicar o design responsivo; Manter a mesma aparência visual, usando mais de um navegador; Diminuição do consumo de banda da internet; Melhoria signi�cativa no desempenho pelo reuso de código para formatar várias páginas. Qual a função do Javascript (JS) na trilogia HTML-CSS-JS? Linguagem de programação, interpretada, que permite implementar funcionalidades complexas nas páginas web, como, por exemplo: Preenchimento de formulários, exibição e manipulação de mapas interativos, grá�cos 2D ou 3D animados. Implementa conteúdos que são dinamicamente atualizados, como, por exemplo, geração de uma tabela HTML contendo dados de uma tabela de um banco de dados. Exemplo: body { font-family: Arial, sans-serif; } <!-- HTML --> <div class="texto"> <p> Texto exemplo <strong>com um destaque </strong> </p> </div> /* CSS */ .texto { color: #F00; } A linguagem de programação JavaScript é de scripting, permitindo a um programa controlar outros, como, por exemplo, um código javascript controlar o comportamento dos navegadores, via código enviado na página HTML. Como integrar HTML com Javascript (JS)? Abaixo, um código HTML, com chamada a uma rotina em JS, na linha em destaque, entre as tags <script > e </script>: <!DOCTYPE html > <html lang="en-US" > <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <title > Time right now:</title > </head& > <body > </body& #62; <script src="js/myscript.js"></script> </html > Abaixo, o conteúdo em JS do arquivo myscript.js, que mostra a hora corrente: et d = new Date(); document.body.innerHTML = "<h1>Time right now is: " + d.getHours() + ":" + d.getMinutes() + ":" + d.getSeconds()</h1>" Atividades 1. Acesse um site de seu interesse, digitando a URL em seu navegador e, depois, com o botão esquerdo do mouse, clique na opção “exibir código fonte da página” e tente identi�car o uso de folhas de estilo CSS. Por exemplo, clique www.estacio.br ou yduqs.com.br. 2. São componentes básicos de um website, exceto: a) Logotipo. b) Bloco de Navegação. c) Rodapé. d) Grid com dados de uma tabela do banco. 3. Avalie as assertivas a seguir: I. HTML é uma linguagem de script que visa criar rotinas de acesso ao sistema operacional; II. CSS é uma linguagem de apresentação; III. Javascript é uma linguagem de marcação; IV. A última versão do HTML é a 5, que traz consigo CSS3 e Java5. Com base em sua análise das assertivas, assinale a única opção correta. a) Apenas II. b) Apenas I e III. c) Apenas I. d) Apenas II e III. e) Apenas I, II e IV. 4. Qual a utilidade de um espaço em branco em uma página web? 5. Abaixo, são justi�cativas para um e�ciente sistema de navegação exceto: a) Fornecer acesso à informação. b) Mostrar a localização em um site. c) Mostrar o assunto de um site. d) Refletir a marca. e) Apresentar o conteúdo correto. javascript:void(0); javascript:void(0); Notas URL 1 É a abreviatura de Uniform Resource Locator, ou Localizador Padrão de Recursos. Título modal 1 Lorem Ipsum é simplesmente uma simulação de texto da indústria tipográ�ca e de impressos. Lorem Ipsum é simplesmente uma simulação de texto da indústria tipográ�ca e de impressos. Lorem Ipsum é simplesmente uma simulação de texto da indústria tipográ�ca e de impressos. Referências BEAIRD, J. Princípios do Web Design Maravilhoso. Rio de Janeiro: Alta Books, 2012. MARINHO, A.L. (Organizador). Desenvolvimento de Aplicações para Internet [BV:PE]. São Paulo: Pearson, 2017. Disponível em: https://plataforma.bvirtual.com.br/Leitor/Loader/128201/pdf. Acesso em 29 jun. 2020. MILETTO, E.M.; BERTAGNOLLI, S.C. Desenvolvimento de Software II: Introdução ao Desenvolvimento Web com HTML, CSS, JavaScript e PHP [BV:MB]. Porto Alegre: Bookman, 2014. Disponível em: https://integrada.minhabiblioteca.com.br/#/books/9788582601969/. Acesso em 29 jun. 2020. KALBACH, J. Design de Navegação Web: Otimizando a Experiência do Usuário. Porto Alegre, RS: Bookman, 2009. Disponível em: https://books.google.com.br/books?id=MkD7AwAAQBAJ&printsec=frontcover&hl=pt-BR#v=onepage&q&f=false. Acesso em29 jun. 2020. Próxima aula Requisitos e pesquisa visual do projeto web; Sites concorrentes e conceito editorial; Justi�cativa do projeto. Explore mais Leia os textos: Introdução ao HTML5; Curso o�cial do HTML 5 no escritório Brasil da W3c; Tendências do webdesign para 2020; Recursos e ferramentas para melhorar a experiência de utilização de sítios públicos javascript:void(0); javascript:void(0); javascript:void(0); javascript:void(0); javascript:void(0); javascript:void(0); javascript:void(0); Recursos e ferramentas para melhorar a experiência de utilização de sítios públicos. Acesse: Como os navegadores funcionam; Manual completo do HTML5.. javascript:void(0); javascript:void(0); javascript:void(0);
Compartilhar