Apresentação de LINGUAGEM DE Programação para Internet

1. LINGUAGEM DE
PROGRAMAÇÃO
HTML E CSS
Prof. Fernanda Mota

2. Leis
As principais leis que norteiam o desenvolvimento de um website variam dependendo do país e região,
mas geralmente incluem leis e regulamentações relacionadas à privacidade, acessibilidade,
direitos autorais e proteção ao consumidor. Abaixo estão algumas das principais leis que podem ser
relevantes:
1.LGPD (Lei Geral de Proteção de Dados):
No Brasil, a LGPD estabelece regras sobre o tratamento de dados pessoais por empresas e
organizações, incluindo requisitos para obtenção de consentimento, proteção de dados e notificação de
violações.

3. Leis
2.GDPR (Regulamento Geral de Proteção de Dados):
Na União Europeia, o GDPR é uma legislação abrangente de proteção de dados que impõe
obrigações
semelhantes à LGPD, garantindo a privacidade e segurança dos dados pessoais dos cidadãos
europeus.
3. Leis de Direitos Autorais:
As leis de direitos autorais protegem o conteúdo original publicado na web, como textos, imagens,
vídeos e música, estabelecendo os direitos e responsabilidades dos criadores e usuários de conteúdo.
4. Leis de Proteção ao Consumidor:
As leis de proteção ao consumidor podem abordar questões como publicidade enganosa,
práticas comerciais desleais, termos de serviço e políticas de reembolso em websites que oferecem produtos
ou serviços aos consumidores.

4. 5. WCAG (Web Content Accessibility Guidelines):
WCAG (Web Content Accessibility Guidelines) é um conjunto de diretrizes
estabelecidas pelo World Wide Web Consortium (W3C) para garantir que o conteúdo
da web seja acessível para todos, incluindo pessoas com deficiências.
Essas diretrizes são divididas em quatro princípios fundamentais:
Perceptível: Garantir que o conteúdo e a interface do usuário possam ser percebidos
por todos os usuários, independentemente de suas habilidades sensoriais. Isso inclui
fornecer alternativas para conteúdo não textual, como imagens, áudio e vídeo, além
de garantir contraste adequado entre o texto e o fundo.

5.  Operável: Garantir que os usuários possam operar facilmente o site e seus elementos interativos.
Isso envolve tornar o site navegável com teclado, proporcionar tempo suficiente para os usuários
lerem e interagirem com o conteúdo, e evitar conteúdo que possa causar convulsões ou distrações.
 Compreensível: Garantir que o conteúdo e a interface do usuário sejam compreensíveis para todos
os usuários. Isso inclui usar uma linguagem clara e simples, organizar o conteúdo de forma lógica e
consistente, e fornecer feedback claro sobre as ações dos usuários.
 Robusto: Garantir que o conteúdo seja robusto o suficiente para ser interpretado de forma
confiável por uma ampla variedade de agentes de usuário, incluindo navegadores, tecnologias
assistivas e dispositivos.

6. UX
UX, ou Experiência do Usuário (do inglês User Experience),
refere-se à percepção geral de uma pessoa ao interagir com um produto ou serviço,
como um website, aplicativo, dispositivo ou sistema. É uma disciplina que se preocupa com
todos os aspectos da interação do usuário, incluindo usabilidade, acessibilidade, design visual,
desempenho, utilidade e até mesmo o prazer que a experiência proporciona.
Em resumo, UX engloba tudo o que o usuário vivencia ao utilizar um produto ou serviço,
desde a primeira interação até o término da sua jornada, e tem como objetivo principal criar
experiências positivas e satisfatórias para os usuários. Isso envolve entender as necessidades,
expectativas e comportamentos dos usuários e projetar produtos e serviços que atendam a essas
necessidades da melhor forma possível.

7. Fonte

Um conjunto de fontes adequado para um website é aquele que oferece uma boa
legibilidade em diferentes dispositivos e tamanhos de tela.
 As fontes da família "sans-serif", como Arial, Helvetica, Roboto e Open Sans, são
frequentemente recomendadas devido à sua clareza e facilidade de leitura em telas
digitais. Elas também têm uma ampla disponibilidade e suporte em diferentes
navegadores e sistemas operacionais, garantindo consistência visual para os
usuários.

8. Além disso, o uso de uma fonte de backup genérica, como "sans-serif", pode
ser incluído para
garantir uma experiência de usuário consistente caso a fonte principal não
esteja disponível.
Sans-serif é um estilo de fonte que não possui "serifas",
que são as pequenas linhas ou traços adicionados às extremidades dos
caracteres.
Fontes sans-serif são conhecidas por sua simplicidade e limpeza, tornando-
as populares para uso em telas
digitais, como em websites, devido à sua melhor legibilidade em tamanhos
menores e em resoluções mais
baixas. Exemplos de fontes sans-serif incluem Arial, Helvetica, Roboto e
Open Sans.

9. Acessibilidade
 Definição: A acessibilidade em um website refere-se à capacidade de garantir que todas
as pessoas, incluindo aquelas com deficiências físicas, cognitivas ou sensoriais, possam
acessar e utilizar o conteúdo e funcionalidades do site de forma eficaz.
 Exemplos: Isso pode incluir a implementação de recursos como texto alternativo em
imagens para leitores de tela, teclado de navegação para pessoas com dificuldades
motoras, e garantir que o site seja compatível com tecnologias assistivas como leitores
de tela e ampliadores de tela.
 Um site com alta acessibilidade garantiria que todas as funcionalidades do site, como
formulários, botões e menus de navegação, sejam facilmente acessíveis e utilizáveis por
pessoas com diferentes tipos de deficiência, permitindo uma experiência inclusiva para
todos os usuários.

10. Usabilidade
 Definição: Usabilidade refere-se à facilidade com que os usuários podem interagir com um website para
atingir seus objetivos de forma eficiente e satisfatória.
 Exemplos: Isso inclui a organização lógica do conteúdo, a navegação intuitiva, tempos de carregamento
rápidos, formulários claros e fáceis de preencher, e design responsivo para adaptar-se a diferentes
dispositivos e tamanhos de tela.
 Um site com boa usabilidade permitiria que os usuários encontrassem facilmente as informações que estão
procurando, realizassem ações desejadas (como fazer uma compra ou preencher um formulário) sem
dificuldade e se sentissem confortáveis e confiantes ao usar o site.

11. Legibilidade
 Definição: Legibilidade refere-se à facilidade com que o texto pode ser lido e
compreendido pelos usuários.
 Exemplos: Isso inclui o uso de fontes legíveis, tamanho de fonte adequado, contraste
suficiente entre texto e fundo, espaçamento adequado entre linhas e parágrafos, e evitar
blocos longos de texto sem quebras ou formatação.
 Um site com boa legibilidade garantiria que o texto seja fácil de ler e compreender,
independentemente das condições de visualização, como tamanho da tela, resolução e
iluminação. Isso é especialmente importante para garantir que todos os usuários possam
consumir o conteúdo do site sem esforço, contribuindo para uma experiência de usuário
positiva.

12. Responsividade
 A responsividade é a capacidade de um site ou aplicativo se adaptar a diferentes
tamanhos de tela e dispositivos, oferecendo uma experiência de usuário
consistente e otimizada em smartphones, tablets, laptops e desktops. Isso é
alcançado por meio de técnicas de design e desenvolvimento, como layouts
flexíveis, imagens redimensionáveis e media queries CSS, que permitem ajustar o
estilo e o layout com base nas características do dispositivo. A responsividade é
essencial nos dias de hoje devido à variedade de dispositivos e tamanhos de tela
utilizados para acessar a web, garantindo que os usuários tenham uma experiência
agradável e funcional, independentemente do dispositivo que estão usando.

13.  max-width: Define a largura máxima que um elemento pode ter, permitindo que ele se ajuste
automaticamente para tamanhos menores de tela. É útil quando você deseja que o elemento não
se estenda indefinidamente, especialmente em telas menores, mas ainda pode ocupar 100% da
largura do contêiner pai, desde que esse contêiner seja suficientemente amplo.
 A propriedade CSS "min-width" define a largura mínima que um elemento deve ter. Isso significa
que o elemento não poderá ser dimensionado para menos do que o valor especificado pela
propriedade "min-width". Essa propriedade é útil para garantir que um elemento tenha uma
largura mínima aceitável, mesmo que o conteúdo interno seja reduzido ou em telas menores,
ajudando a manter a legibilidade e a usabilidade do layout.

14. Escolha das Cores
A escolha de cores em um website desempenha um papel crucial na experiência do usuário e na
eficácia da comunicação visual.
A escolha de cores em um website NÃO é apenas uma questão estética, mas sim uma parte
fundamental do design que afeta a comunicação, usabilidade e eficácia do site como um todo. Ao
selecionar uma paleta de cores, é importante considerar a identidade da marca, a legibilidade do
texto, a hierarquia visual, a consistência e a adaptação a diferentes dispositivos e contextos para criar
uma experiência de usuário envolvente e eficaz.

15. Comunicação e Identidade Visual: As cores comunicam mensagens e emoções sem
palavras. Uma paleta de cores bem escolhida pode transmitir a personalidade da
marca, estabelecer uma identidade visual única e criar uma conexão emocional com os
visitantes do site. Por exemplo, o uso de cores vibrantes e energéticas pode transmitir
uma sensação de vitalidade e dinamismo, enquanto cores suaves e pastéis podem
transmitir calma e serenidade.

16.  Legibilidade e Acessibilidade: As cores afetam a legibilidade do texto e a acessibilidade do site. É
importante garantir que haja contraste suficiente entre o texto e o fundo para que seja fácil de ler,
especialmente para pessoas com deficiências visuais. Por exemplo, usar texto escuro sobre um
fundo claro ou vice-versa pode melhorar significativamente a legibilidade.
 Hierarquia Visual e Destaque de Elementos: A escolha de cores pode ajudar a estabelecer uma
hierarquia visual, destacando elementos importantes e guiando os usuários através do conteúdo
do site. Por exemplo, o uso de cores mais brilhantes ou contrastantes para títulos e botões de
chamada para ação pode direcionar a atenção do usuário para esses elementos.

17.  Consistência e Profissionalismo: Uma paleta de cores consistente em todo o site transmite uma
sensação de coesão e profissionalismo. Cores consistentes ajudam os usuários a navegar pelo site
de forma mais intuitiva e tornam a experiência de usuário mais agradável e confiável.
 Adaptação a Diferentes Dispositivos e Contextos: As cores também devem ser escolhidas levando
em consideração a forma como serão exibidas em diferentes dispositivos e contextos. Por exemplo,
cores muito brilhantes podem ser cansativas para os olhos em telas pequenas ou em ambientes
com pouca luz. É importante testar a paleta de cores em uma variedade de dispositivos e
condições de visualização para garantir que ela funcione bem em todos os cenários.

18. Esquema de cores análogo
Um esquema de cores análogo é uma combinação de cores que estão próximas umas das outras
no círculo cromático. Essas cores geralmente compartilham uma cor principal e são escolhidas para criar
uma aparência harmoniosa e coesa.
Por exemplo, se a cor principal for o azul, as cores análogas podem incluir tons de azul claro, azul médio e
azul violeta. Essas cores geralmente funcionam bem juntas, criando uma sensação de unidade visual, mas
também podem ser usadas para criar contraste e destaque se uma delas for usada como ponto focal.
Os esquemas de cores análogas são frequentemente usados em design gráfico, web design, moda e outras
áreas criativas para criar paletas de cores visualmente atraentes e equilibradas.

19. 1.Complementares: Cores que estão diretamente opostas no círculo
cromático. Essas cores criam um forte contraste e são frequentemente usadas
para chamar a atenção para elementos específicos. Por exemplo, o roxo e o
amarelo são cores complementares.
2.Triádico: Três cores equidistantes umas das outras no círculo cromático.
Este esquema oferece um bom equilíbrio entre cores contrastantes e
harmoniosas. Por exemplo, vermelho, amarelo e azul são cores triádicas.

20. 3.Tetrádico (ou Composto): Consiste em duas cores complementares e suas
respectivas cores análogas. Isso oferece uma grande variedade de cores e é
útil para criar uma aparência vibrante e diversificada. Por exemplo, vermelho e
verde (complementares) com amarelo e azul (análogas).
4.Monocromático: Baseia-se em uma única cor, variando apenas em tom,
saturação e brilho. Este esquema é geralmente bastante sutil e harmonioso,
ideal para criar uma aparência sofisticada e coesa.
Estes são apenas alguns exemplos de esquemas de cores comuns, e há
muitas outras combinações possíveis.
Atenção
A escolha do esquema de cores adequado depende do contexto do projeto, da mensagem que se deseja
transmitir e da sensação visual desejada.

21. Técnica de Design 60-30-10
O modelo 60-30-10 é uma técnica de design que sugere distribuir as cores em
um projeto de acordo com a seguinte proporção:
 60% para uma cor dominante que seja a cor de fundo ou a cor predominante
na página.
 30% para uma cor secundária que complemente a cor dominante e seja
usada para áreas menores ou elementos secundários.
 10% para uma cor de destaque que seja mais vibrante e seja usada para
chamar a atenção para elementos importantes, como botões de chamada
para ação ou destaques.
 Essa técnica ajuda a criar harmonia visual e equilíbrio nas cores de um
projeto.