Este documento apresenta um workshop sobre fundamentos de interfaces e desenvolvimento web. O workshop é dividido em 15 módulos que cobrem tópicos como HTML, CSS, semântica, estrutura básica de páginas, formatação de texto, imagens, links, listas e posicionamento. O objetivo é ensinar as bases de HTML5 e CSS3 para criação de sites e páginas web.
Slide da disciplina de linguagem de programação para a web do curso técnico em informática do IFPE - Campus Garanhuns. Faz uma apresentação sobre o que é o CSS, por que o utilizamos, suas vantagens, como o utilizamos e algumas de suas propriedades.
Slide da disciplina de linguagem de programação para a web do curso técnico em informática do IFPE - Campus Garanhuns. Faz uma apresentação sobre o que é o CSS, por que o utilizamos, suas vantagens, como o utilizamos e algumas de suas propriedades.
Slides da apresentação HTM Básico para inciantes.
Este tutorial é destinado para inciantes em HTML e que pretende ter uma base de conhecimento mínimo para poder avançar seus estudos. O material faz parte de um contexto de uma apresentação, assim sendo, seria muito relevante assistir também sua apresentação.
Espero que gostem!
América Latina: Da Independência à Consolidação dos Estados NacionaisValéria Shoujofan
Aula voltada para alunos do Ensino Médio focando nos processos de Independência da América Latina a partir dos antecedentes até a consolidação dos Estados Nacionais.
Slides Lição 9, Betel, Ordenança para uma vida de santificação, 2Tr24.pptxLuizHenriquedeAlmeid6
Slideshare Lição 9, Betel, Ordenança para uma vida de santificação, 2Tr24, Pr Henrique, EBD NA TV, 2° TRIMESTRE DE 2024, ADULTOS, EDITORA BETEL, TEMA, ORDENANÇAS BÍBLICAS, Doutrina Fundamentais Imperativas aos Cristãos para uma vida bem-sucedida e de Comunhão com DEUS, estudantes, professores, Ervália, MG, Imperatriz, MA, Cajamar, SP, estudos bíblicos, gospel, DEUS, ESPÍRITO SANTO, JESUS CRISTO, Comentários, Bispo Abner Ferreira, Com. Extra Pr. Luiz Henrique, 99-99152-0454, Canal YouTube, Henriquelhas, @PrHenrique
Atividade - Letra da música "Tem Que Sorrir" - Jorge e MateusMary Alvarenga
A música 'Tem Que Sorrir', da dupla sertaneja Jorge & Mateus, é um apelo à reflexão sobre a simplicidade e a importância dos sentimentos positivos na vida. A letra transmite uma mensagem de superação, esperança e otimismo. Ela destaca a importância de enfrentar as adversidades da vida com um sorriso no rosto, mesmo quando a jornada é difícil.
Slides Lição 10, CPAD, Desenvolvendo uma Consciência de Santidade, 2Tr24.pptxLuizHenriquedeAlmeid6
Slideshare Lição 10, CPAD, Desenvolvendo uma Consciência de Santidade, 2Tr24, Pr Henrique, EBD NA TV, Lições Bíblicas, 2º Trimestre de 2024, adultos, Tema, A CARREIRA QUE NOS ESTÁ PROPOSTA, O CAMINHO DA SALVAÇÃO, SANTIDADE E PERSEVERANÇA PARA CHEGAR AO CÉU, Coment Osiel Gomes, estudantes, professores, Ervália, MG, Imperatriz, MA, Cajamar, SP, estudos bíblicos, gospel, DEUS, ESPÍRITO SANTO, JESUS CRISTO, Com. Extra Pr. Luiz Henrique, de Almeida Silva, tel-What, 99-99152-0454, Canal YouTube, Henriquelhas, @PrHenrique, https://ebdnatv.blogspot.com/
Na sequência das Eleições Europeias realizadas em 26 de maio de 2019, Portugal elegeu 21 eurodeputados ao Parlamento Europeu para um mandato de cinco ano (2019-2024).
Desde essa data, alguns eurodeputados saíram e foram substituídos, pelo que esta é a nova lista atualizada em maio de 2024.
Para mais informações, consulte o dossiê temático Eleições Europeias no portal Eurocid:
https://eurocid.mne.gov.pt/eleicoes-europeias
Autor: Centro de Informação Europeia Jacques Delors
Fonte: https://infoeuropa.mne.gov.pt/Nyron/Library/Catalog/winlibimg.aspx?doc=52295&img=11583
Data de conceção: maio 2019.
Data de atualização: maio 2024.
Projeto de articulação curricular:
"aLeR+ o Ambiente - Os animais são nossos amigos" - Seleção de poemas da obra «Bicho em perigo», de Maria Teresa Maia Gonzalez
Sequência Didática - Cordel para Ensino Fundamental ILetras Mágicas
Sequência didática para trabalhar o gênero literário CORDEL, a sugestão traz o trabalho com verbos, mas pode ser adequado com base a sua realidade, retirar dos textos palavras que iniciam com R ou pintar as palavras dissílabas ...
Sequência Didática - Cordel para Ensino Fundamental I
Fundamentos e Desenvolvimento de Interface Web com HTML5 & CSS3
1. Fundamentos de Interfaces
e Desenvolvimento Web
@cristofersousa
Workshop
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title> </title>
#web25@nos
2. Who?
@cristofersousa
<h1>Olá!</h1>
@cristofersousa | cristofersousa.com.br
Engineer Front-End
Cursando - Técnologo em Análise e Desenvolvimento de Sistemas – IFSP São Carlos
Skills {Desenvolvimento de E-commerce | UX & UI - User Interface}
3. Sumário
MÓDULO 01
Apresentação
O que vamos aprender?
O que é HTML e sua evolução?
Por que precisamos aprender HTML?
MÓDULO 02
Tags
HTML5, o que mudou?
Formatação antiga e a chegada do CSS
A relação com os navegadores
MÓDULO 03
Estrutura básica de um documento HTML5
Cabeçalhos
Conteúdo texto
Caracteres especiais
Destaques em textos
Formatação de texto
Comentários
Linhas
MÓDULO 04
Listas ordenadas
Listas não ordenadas
Inserindo subitens
Estrutura de um menu a partir de listas.
MÓDULO 05
URL
Links / Href
Âncora
DIV
MÓDULO 06
Tag IMG
Atributos e links
MÓDULO 07
Tag form
Text
Password / Textarea / E-mail / Search / URL
Checkbox / Radio
Label / Select
File / Button
MÓDULO 08
Melhores Práticas?
MÓDULO 09
Tabelas, linhas e colunas
Mesclagem de células e personalização
MÓDULO 10 - CSS3
O que é CSS e o que são Seletores?
Prioridade de propriedades
Quando usar elemento, classe ou id
MÓDULO 11
Propriedade Font
Propriedade Text
Propriedade Margin
Propriedade Padding
Trabalhando com DIVs
Combinação de formatações
MODULO 12
Propriedade Position
Propriedade Float e Clear
Criando Menu Com Listas Horizontal
Criando Menu Com Listas Vertical
Criando Menu Com Listas e Com Sub-menu
MÓDULO 13
Tipos de layouts
Propriedade Overflow
Display e Visibility
MÓDULO 14
Formatando campos do tipo input
Formatando campo Select
Formatando botões
Formatando fieldset e label
CSS Reset e Normalize
MÓDULO 15
Extras
Conclusão
4. Front-end e sua complexidade?
.tags {!important;}
@cristofersousa
5. Front-end e sua complexidade!
E-commerce
Social-Media
Filmes
Músicas
Notícias
O HTML5 é a nova versão do
HTML4. Enquanto o WHATWG
define as regras de marcação que
usaremos no HTML5 e no XHTML,
eles também definem APIs que
formarão a base da arquitetura
web. Essas APIs são conhecidas
como DOM Level 0.
Um dos principais objetivos do
HTML5 é facilitar a manipulação do
elemento possibilitando o
desenvolvedor a modificar as
características dos objetos de
forma não intrusiva e de maneira
que seja transparente para o
usuário final
6. O que são elementos semânticos?
Um elemento semântico descreve
claramente o seu significado tanto para o
navegador eo desenvolvedor.
Exemplos de não-semânticas elementos:
<div> e <span> - Não diz nada sobre o seu
conteúdo.
Exemplos de semânticas elementos:
<form>, <table> e <img> - define
claramente o seu conteúdo
@cristofersousa
7. Elementos semânticos em HTML5
<Header>
<Nav>
<Section>
<Article>
<Aside>
<Figure>
<Figcaption>
<Footer>
<detalhes>
<Summary>
<branding>
<Time>
8. Criando menu semanticamente com HTML5
@cristofersousa
<nav>
<a href="#">HTML</a>
<a href="#">CSS</a>
<a href="#">JavaScript</a>
<a href="#">jQuery</a>
</nav>
9. Tag de conteúdo
Uma tag de conteudo serve para marcar um trecho de texto para
que ele obedeça uma instrução no momento em que for exibido,
por exemplo a tag de parágrafo.
<p> Este texto deve ser tratado pelo browser como um parágrafo </p>
Tag de recurso
Uma tag de recurso serve para indicar para o navegador o endereço
e as intruções para exibir um certo elemento, como por exemplo a
tag de imagem <img>
<img alt=“Tusca Chegando!” src=“../img/minhafoto.jpg”>
@cristofersousa
10. Estrutura de um página básica com HTML
Um documento HTML válido precisa
seguir obrigatoriamente a estrutura
Composta pelas tags:
<html>
<head>
<body>
e o <!Doctype> ? DOCTYPE
NÃO é uma tag HTML, mas um Document Type
Definition (DTD), uma instrução que indica para
o navegador qual versão do HTML, ele deve
utilizar para renderizar a página, utilizaremos o
<!DOCTYPE html>, que indica para o
navegador a utilização do HTML5.
11. Elementos de Block e elemento inline
BLOCO : são aqueles que ocupam toda a largura do
documento, tanto antes quanto depois deles.
Ex: <h1>,<p>,<div>
Inline: são aqueles que ocupam somente o espaço
necessário para que seu próprio conteudo seja
exibido, permitindo que outros elementos em linha
possam ser renderizado na mesma linha.
Ex: <a>,<strong>, <small> <span>
12. CSS - Cascading Style Sheets “Folha de Estilo em Cascata”
CSS Inline
<p style=“color:red”; background-color:”blue; ”>
O contéudo dessa tag será na cor vemelho e o fundo será azul!
</p>
<style>
p {color: red;
background-color: yellow;
}
</style>
@cristofersousa
14. CSS – Alinhamento e Decoração de Texto
p{text-align: right;}
p{
line-height: 3px; /*tamanho da altura de cada linha*/
letter-spacing: 3px; /*espaçamento de cada letra*/
word-spacing: 5px; /*espaçamento de cada palavra*/
text-indent: 30px; /*tamanho da margem da primeira linha do texto*/
}
CSS – Figura de fundo
h1{
background-image: url(../img/minhaimagem.png);
}
@cristofersousa
16. Imagens
<figure>
<img src=“../img/teste.jpg”>
<figcaption>Texto Maroto – R$199.99 </figcaption>
</figure>
Listas - Não ordenada
<ul>
<li>Primeiro item da lista </li>
<li> Segundo item da lista</li>
<ul>
<li>Primeiro item da lista aninhada </li>
<li>Segundo item da lista aninhada </li>
</ul>
<li> terceiro item da lista</li>
</ul>
@cristofersousa
17. Listas - definidas
Listas - ordenada
<dl>
<dt>HTML</dt>
<dd>HTML é a linguagem de marcação de textos utilizadas
<ol>
<li>Primeiro item da lista </li>
<li>Segundo item da lista</li>
<li>Terceiro item da lista</li>
<li>Quarto item da lista</li>
</ol>
para exibir textos como páginas nas Internet.
</dt>Browser</dt>
<dd>Browser é o software que requisita um documento
HTML através do protocolo HTTP e exibe seu conteudo
em uma janela.
</dd>
</dl>
@cristofersousa
18. Listas - definidas
Alguns desenvolvedores defendem o uso
da lista de definição para a exibição de uma
determinada informação, por exemplo, um
contato.
<dl>
<dt>Nome</dt>
<dd>Instituto Federal de Educação, Ciência e Tecnologia</dd>
</dt>Endereço</dt>
<dd>Rod. W. Luiz, km 247 – Vila Marina</dd>
</dt>Cidade</dt>
<dd>São Carlos</dd>
</dl>
@cristofersousa
19. Espaçamento e Margem
Utilizamos a propriedade
padding para espaçamento
e margin para margem.
Padding é utilizada para definir uma margem interna em alguns elementos (por margem
interna queremos dizer a distância entre o limite do elemento, sua borda, e seu respectivo
conteúdo) e tem as subpropriedades listadas como:
1. padding-top
2. padding- right
3. padding-bottom
4. padding-left
Essa ordem é importante para entender como funciona a shorthand property do padding.
@cristofersousa
20. Espaçamento e Margem
p{padding: 10px;} /*mesma medida em todas as direções*/
p{padding: 10px 15px;} /*10px top e 15px bottom && 10px right e 15px left*/
p{padding: 10px 20px 15px;} /*10 px top, 20px right 20px left 15 px bottom*/
p{padding: 10px 20px 15px 5px;} /* 10px top, 20px right, 15px left e 5px bottom*/
@cristofersousa
21. Margin - CSS
A propriedade margin é bem parecida com a propriedade padding,
exceto que ela adiciona espaço após o limite do elemento, ou seja,
é um espaçamento além do elemento em si. Temos a shorthand
property margin que se comporta da mesma maneira que a shorthand
property padding.
1. margin-top
2. margin- right
3. margin-bottom
4. margin-left
p{margin: 0 auto;} /*no margin top & bottom*/
*browser define uma margem igual para
ambos os lados de acordo com o espaço
@cristofersousa
22. Box Model - CSS
Quando alteramos as propriedades de elementos dentro de uma página, precisamos
estar cientes de como essas alterações se comportarão na presença de outros
elementos. Uma forma de entender o impacto causado pela mudança é pensar no
box model ou modelo em caixa.
@cristofersousa
Essas áreas se desenvolvem de dentro
pra fora, na ordem listada abaixo:
1. Content (aquilo que será exibido);
2. Padding (distância entre a borda e o conteudo);
3. Border (quatro linhas que envolvem a caixa (box);
4. Margin (distância que separa um box de outro).
24. @cristofersousa
Links âncoras - HTML <a href>
<p>Visite nosso site no
<a href=“http://www.meusite.com.br”
target=“_blank”
title=“Site do IFSP”>
IFSP
</a>
</p>
Outro uso para a tag âncora é a demarçacão de destinos para links
Dentro do próprio documento, o que chamamos de bookmark.
<p> Mais informações<a href=#info”>aqui</a>.</p>
<p>Conteudo da página.....</p>
<p> Mais informações<a href=#info”>aqui</a>.</p>
<a name=“info”> Mais informações sobre o assunto:</a>
<p>Informações</p>
25. @cristofersousa
Elementos Estruturais - HTML <div>
Podemos usar em nossos
documentos a organizaçãos
dos elementos através da
tag <div> que é do tipo block ou
<span> que é do tipo inline!
<div>
<h1>Title </h1>
<ul>
<li> Capitulo I</li>
<li> Capitulo II</li>
</ul>
</div>
<div>
<p>Aqui vai o artigo do primeiro capítulo.</p>
</div>
26. @cristofersousa
Elementos Estruturais - HTML <span>
Essa tag por padrão não interfere na
renderização do texto, ela somente aplica um
atributo naquele trecho, um atributo qualquer
dentre os atributos aceitos pela tag!
<p>
Dentro de um texto, posso demarcar
<span style=“color:blue;”>qualquer trecho</span>
</p>
A tag <span> é util quando queremos adicionar
um atributo a um trecho qualquer de texto sem
interferir na estrutura organizacional do
documento.
28. Flutuando elementos Float - CSS
@cristofersousa
#myfigure img {
float:right;
margin:0 0 1px 2px;
}
“O caos é a rima do inaudito.”
- Zack de la Rocha
29. @cristofersousa
CSS Reset
HTML5 Boilerplate
YUi3 CSS Reset
Eric Meyer - CSS Reset
<http://meyerweb.com/eric/tools/css/reset>
Referenciando o arquivo no nosso head.
<link rel=“stylesheet” href=“css/reset.css”>
CSS Avançado
30. CSS Avançado - Block vs Inline
O elemento <li> de uma <ul> por
padrão assume o valor block para
sua propriedade display.
Se quisermos os elementos na
horizontal, basta alterarmos a
propriedade display da <li> para
inline:
@cristofersousa
ul li{
display: inline;
margin-left:20px;
}
31. CSS Avançado - Position: Static, Relative
A propriedade position determina
qual é o modo de posicionamento
de um elemento.
@cristofersousa
Static /*default – fica no mesmo lugar*/
Relative /* podemos passar coordenadas*/
.logotipo{
position:relative;
top:20px;
left:50px;
}
32. @cristofersousa
CSS Avançado - Absolute
/*pega como referencia o elemento pai */
.quadrado{background: green;
height: 200px;
width:200px;
}
.absoluto {
position: absolute;
top:20px;
right:20px;
}
<div class=“quadrado”></div>
<div class=“quadrado absoluto”></div>
33. @cristofersousa
CSS Avançado - Fixed
/*pega como referencia a porção visivel no documento
do navegador, e mantem essa posição inclusive
quando há rolagem na tela. É uma propriedade útil
para avisos importantes que devem ser visíveis com
certeza. */
.quadrado{background: green;
height: 200px;
width:200px;
}
.absoluto {
position: absolute;
top:20px;
right:20px;
}
<div class=“quadrado”></div>
<div class=“quadrado absoluto”></div>
34. Função: Capturar os dados do usuário e submetê-lo
a algum serviço da internet.
Formulários HTML são usados para transmitir dados a um servidor.
Um formulário HTML pode conter elementos de entrada, como
campos de texto, caixas de seleção, botões de rádio, apresentar
botões e mais.
Um formulário também pode conter listas de seleção, textarea,
fieldset, legenda, e elementos de rotulagem.
A tag <form> é usada para criar um formulário HTML:
35. @cristofersousa
O que é HTTP?
O Hypertext Transfer Protocol (HTTP) é projetado para permitir a
comunicação entre clientes e servidores.
HTTP funciona como um protocolo de solicitação-resposta entre
um cliente e servidor.
Um navegador da Web pode ser o cliente, e um aplicativo em um
computador que hospeda um site pode ser o servidor.
36. Dois métodos comumente utilizados para a resposta do pedido entre
um cliente e servidor são: GET e POST.
GET - os dados pedidos de um recurso especificado.
POST - os dados se submete a ser processado para um recurso
especificado.
@cristofersousa
<form action="demo_form.asp" method="get">
First name: <input type="text" name="fname"><br>
Last name: <input type="text" name="lname"><br>
<input type="submit" value="Submit">
</form>
40. PROTOTIPAÇÃO
• Modelo de Processo
• Projeto rápido da interface e das funcionalidades
• Concepção de fragmentos do sistema
• Artefato construído iterativamente
• Engenharia de Software
• Representação dos requisitos
• Interação Humano-Computador
• Modelo de Interação entre usuário final e sistema
Foco: avaliar resultados obtidos com o protótipo
(Brown, 1996; Pressman, 2007; Spinelli; Rei, 2011)
41. Por que prototipar interfaces?
A principal motivação para a construção de
protótipos é avaliar interfaces com o usuário de
forma a diminuir a carga de trabalho cognitivo,
aumentar a facilidade de uso e auxiliar o usuário
a realizar tarefas que resultam na realização de
seus objetivos.
(Pagani,Talita 2014)
42. Modelos de IHC e prototipação
(Brown, 1996; da Silva et al., 2005)
45. Atividade
Prototipar a aplicação do “Desafio Condlink-Petiko”
Depois de definida a aplicação, cada grupo irá definir a funcionalidade que
deseja prototipar
Grupo deve debater o cenário de uso e pensar nas características do
produto e nas necessidades do usuário antes de desenhar
Depois da criação de cada protótipo, aplicar teste com moderação:
Elaborar o roteiro de teste;
Cada grupo deve escolher quem será o moderador, o usuário, o
observador e o computador;
O usuário de cada grupo irá para outro grupo ser o testador.