Buscar

Design para Web aula 03

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

Você também pode ser Premium ajudando estudantes

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

Você também pode ser Premium ajudando estudantes

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

Você também pode ser Premium ajudando estudantes
Você viu 3, do total de 19 páginas

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

Você também pode ser Premium ajudando estudantes

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

Você também pode ser Premium ajudando estudantes

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

Você também pode ser Premium ajudando estudantes
Você viu 6, do total de 19 páginas

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

Você também pode ser Premium ajudando estudantes

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

Você também pode ser Premium ajudando estudantes

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

Você também pode ser Premium ajudando estudantes
Você viu 9, do total de 19 páginas

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

Você também pode ser Premium ajudando estudantes

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);

Continue navegando