Módulo 1

MÓDULO 1
Anatomia de uma tag HTML
• Geralmente as tags em html possuem uma abertura e um fechamento e entre essa abertura e fechamentos possuem o seu
conteúdo. <p> </p>
• As tags <br>(Line Break) e <hr>(Horizontal Rule) significam quebra de linha.
• Cada elemento HTML pode ter atributos predefinidos, atributo(é uma espécie de meta dados) é um par de valor de nome.
• EX: <p id="myId"> </p> --> Neste elemento estamos atribuindo o valor "myId" ao atributo id.
• Os atributos só podem ser especificados nas tags de abertura.
• Pode-se utlizar uma tag sem conteúdo, em determinadas situações. Ex: Se haver necessidade de deixar um espaço reservado
no documento HTML para um conteúdo que será inserido ainda, utiliza-se a tag de maneira completa, com abertura e
fechamento.
Estrutura básica de um documento HTML.
• <!doctype html>  Cada página HTML deve começar com o tipo de documento ou declaração do tipo de documento e o <!
doctype> tem essa função, ele basicamente diz ao navegador que ele deve se preparar para renderizar HTML.
• <html> </html> Esta tag contém todo o documento html, todo o conteúdo do documento HTML.
• <head></head> Contém itens que descrevem o conteúdo principal da página. Ex: codificação de caracteres, descrição dos
autores da página, título da página... e outros recursos externos necessários para renderizar a página.
• <body></body>  É a tag onde fica todo o conteúdo visível para o usuário
Modelos de conteúdo HTML
• Em HTML existem conteúdo em bloco de códigos(Block Level Elements) e conteúdos inline (Inline Elements).
• Uma tag de conteúdo de fluxo(Flow Content) é uma tag de conteúdo a nível de bloco. Ex: div
• Uma tag de conteúdo fraseado(Phrasing Content) é uma tag de conteúdo inline. Ex: span
• Um Flow Content nunca pode estar dentro de um Phrasing Content.
Elementos de Título(Heading Elements)
• Um semantic html element é um elemento que implicam algum significado para o conteúdo, ou seja, é um elemento que diz
algo sobre o conteúdo, seja sua importância, seja um pouco de sua descrição.
• <h1></h1>...  São as tags voltadas para os títulos da página. Eles não devem ser usados para estilo, esses elementos são
utilizados para transmitir a estrutura da sua página HTML. Elas tem como objetivo transmitir o tamanho valor do título para a
página, ou seja, o que estiver entre <h1></h1> provavelmente é o principal título da página. O conteúdo de h1 é crucial para a
otimização do motor de busca.
• <header></header>  Está tag contém as informações de cabeçalho da página, como: logotipo da empresa, slogan, muitas
vezes a navegação...
• <nav></nav>  É uma tag usada para inserir os conteúdos usados para a navegação dentro do site.
• <aside></aside>  Comunica que o que está dentro dela, está relacionado ao conteúdo principal da página, porém não tão
direto com o mesmo.
• <footer></footer>  É a etiqueta de rodapé
Listas
• Lista ordenada:
• <ul></ul>  Para criar a lista.
• <li></li>  Para adicionar itens.
• Lista não ordenada:
• <ol></ol>  Para criar a lista.
• <li></li>  Para adicionar itens a lista.
• Em lista, é possível adicionar uma dentro da outra. Ex:
• As listas fornecem um agrupamento natural e comumente usado para conteúdo, e muitas vezes são utilizadas para criar o
menu de navegação da página web.
Referências de entidades de caracteres HTML
HTML Character Entity References
• Caracteres que devem ser utilizados de maneira especial.

• <  <
• >  >
• &  &
• Referências de entidades.
• ©  ©
•  É utilizada quando não queremos separar uma palavra da outras, quando acontece a diminuição da janela ou
expensão da mesma.
• "  É utilizada para não deixar caracteres estranhos, quando uma pessoa estiver utilizando um Unicode limitado,
• Se alguma vez haver a necessidade de ter espaços entre as palavras ou espaços extras, você deve envolver o texto em uma tag
<span> e aplicar alguma "margem".
Links
• Para inserir links utiliza-se a tag <a> </a>.

• <a></a>  É uma tag "Flow Content" e "Phrasing Content", ou seja, é uma tag a nível de bloco de código como também é
uma tag inline.
• A tag <a> possui alguns atributos:
• href=""  É neste atributo que colocamos o link interno ou externo da página, ou seja, o endereço para onde ir.
• title=""  É usado pelos leitores de tela que ajudam as pessoas com deficiência visual a passar pela página.
• target=""  É o atributo de destino, possui alguns valores, ex: target="_blank", obriga o navegador à abrir a página em
uma nova guia.
Exibindo Imagens
• Para adicionar imagens em HTML, utiliza-se.

• <img>  É a tag onde inseri a imagem.
• src=""  É o atributo onde colocamos o endereço da imagem, endereço externo ou interno.
• width=""  Atributo para definir a largura da imagem.
• height=""  Atributo para definir o tamanho da imagem.
• alt=""  Atributo para colocar a descrição da imagem, este atributo é utilizado para leitores de tela, que ajudam pessoas
com deficiência visual.
• É de extrema importância sempre definir o "width" e "height" da imagem, para o navegador não carregar com atraso espaço
da imagem. E também é importante especificarmos o "width" e "height" da imagem para ela não quebrar o layout da página.
MÓDULO 2
CSS
• Seletores do CSS são utilizados para indicar qual elemento HTML sofrerá as formatações do CSS.
• O navegador usa API para atravessar o DOM e escolher os elementos correspondentes ao seletor.
• Element Seletor.
• Element name  é o seletor onde você apenas específica o nome do elemento.
• Class selector  é especificado com um ponto inicial, e em seguida o nome da class .
• ID selector  é especificado com "#"(libra).
• É possível aplicar CSS em mais de um seletor ao mesmo tempo.
Combinando Seletores(Combining Selectors)
• Em CSS é possível combinar elementos, Ex: combinar um elemento p com um seletor de classe.
• Nesse exemplo, estamos combinando o elemento <p> com o seletor de classe ".big", com todos os parágrafos da DIV que tiver
a class "big", terão um tamanho de 20px.
• OBS: Também é possível fazer da seguinte maneira 
• Na primeira maneira não pode-se utilizar espaços entre o "p" e o ".big", já na segunda maneira é possível utilizar espaço entre
o ".big" e o "p".
Combinando Seletores(Combining Selectors)
Elemente with class selector

• Em CSS é possível combinar elementos, Ex: combinar um elemento p com um seletor de classe.
• Nesse exemplo, estamos combinando o elemento <p> com o seletor de classe ".big", com todos os parágrafos da DIV que tiver
a class "big", terão um tamanho de 20px.
Child Selector:
• Sintaxe: Um seletor é seguido por um colchete ângulo reto ">" seguido por outro seletor.
• A maneira de ler a sintaxe dessa combinação é da direta para a esquerda.
• No exemplo ao lado estamos tentando alterar o elemento "<p>" que apenas está dentro do "<article>", ou seja, o elemento
"<p>" é o filho do elemento "<article>".
Descendent Selector (Seletor descendente)
• Sintaxe: Seletor, espaço e outro seletor.
• No exemplo acima eu quero dizer que, todos os elementos <p> que estão dentro dos <article> tenham cor azul.
• OBS: Essa combinação é lida da direita para a esquerda.
Seletores de Pseudoclasse (Pseudo-Class Selectors)
• Esses seletores são aqueles que irão realizar determinadas ações quando passarmos o mouse por cima do conteúdo
determinado.
• Seletores de Pseudoclasse:
• :link  Seleciona todos os links dentro de um elemento.
• :visited  Indica se o link já foi usado pelo usuário.
• :hover  Resulta em uma ação quando se passa o mouse por cima do link
• :active  Resulta em uma ação quando o link é pressionado.
• :nth-child()  Seleciona um elemento específico dentro de um grupo de elementos irmãos.
Colocação de Estilo
• É possível implementar o css de três maneira.

• CSS Inline  É o CSS que vai diretamente no elemento
• CSS no Head  É o CSS que vai no head do html
• CSS externo  É o CSS que vai em um arquivo separado do HTML, sendo assim o mais recomendado.
Resolução de conflitos(Conflict Resolution )
• O CSS, combina a importância, origem, especificidade e ordem de origem das declarações de estilos aplicáveis, pois assim o
CSS determina exatamente qual declaração deve ser aplicada a um determinado elemento.
• Alguns Conceitos (Some Conceps)do CSS.
• Origim(Origem) 
• Last Declaration Wins (Última declaração ganha)  O CSS é lido sequencialmente, ou seja, de cima para baixo.
• Merge 
• Declarations Merge (Fusão de declarações)  Ocorre quando duas declarações de origens diferente se fundem, ex:
você declarar em uma origem que o color=green; e em outra declarar font-size=20px; as duas declarações iram se
fundir mesmo que tenham sido declaradas em origens distintas
• Inheritance(Herança) 
• Se você especificar alguma propriedade CSS em um elemento, todos os filhos, netos... herdarão esse propriedade
CSS também, sem precisar assim especificar a propriedade CSS para cada elemento. EX: Se especificar um
propriedade CSS para a tag <body> todos os elementos dentro dela gherdarão essa propriedade CSS.
body{color:green}.
• Specifity 
• Most Specific Selector Combination Wins (A Combinação de Seletor mais específica vence)  Através dessa
regra de Specifity a combinação de seletores com maior pontuação vence. Essa pontuação é feita através do Score de
Specifity(Próximo Slide).
• OBS: Se em algum momento haver a necessidade de ignorar essa regra de Specifity é possível utilizar "!
important"(Ex: Próximo Slide).
Estilo de Texto(Styling text)
• font-family:  Utilizada para definir a fonte do texto, geralmente é definido mais de uma fonte nessa propriedade, pois
muitas vezes o usuário pode não ter determinada fonte instalada e com isso seu computador irá utilizar a fonte seguinte
Ex: font-family: "Times New Roman", Times, serif;
• color:  Defini a cor do texto. Ex: color: #0000ff;
• font-style:  Específica se a fonte vai ser italic ou normal. Ex: font-style: italic;
• font-weight:  Específica se a fonte vai ser negrito(bold) ou normal. Ex: font-weight: bold;
• font-size:  Defini o tamanho da fonte. Ex: font-size: 24px; A maioria dos navegadores tem por padrão um fonte de tamanho
de 16 pixels.
• text-transform:  Controla a aparência do texto, como: maiúscula, minúscula, capitalize.... Ex: text-transform: capitalize;
• text-align:  Permite que você alinha o texto a sua maneira, como: justificado, esquerda, direita, centro.... Ex:
text-align:center; or text-aling:justify;
• Unidades de Medidas:
• É uma medida equivalente à largura da letra, está unidade de medida é relativa, ela basicamente vai dobra, triplicar... o
tamanho da fonte atual, ou seja, se você define um font-size:12px e depois defini outro font-size: 2em; no final a sua fonte
terá um tamanho de 24px.
The Box Model
• width:  Defini a largura do elemento. Ex: width: 300px;
• height :Defini o tamanho do elemento. Ex: height: 300px;
• Obs: É interessante destacar, que nem sempre o que você definir

no width e height será o real tamanho do elemento, visto que o
elemento sofre alterações no seu tamanho também através do
padding, margin e border.
• Padding  Defini a distância que o conteúdo(content) terá em relação as suas bordas.

• É possível definir o padding de várias maneira:
• padding: 10px  Todos os lados (top, bottom, left, right) terão um padding de 10px.
• padding: 10px 10px 10px 10px  Todos os lado também terão um padding de 10px, porém dessa maneira você
pode escolher separada quanto cado lado vai ter de px.
• padding-top: 10px;
• padding-bottom:10px; Está maneira de declaração é a mesma que a de cima, porém desta maneira pode ficar
• padding-right:10px; mais fácil a compreensão.
• padding-left:10px;
• border:  Está propriedade CSS adiciona um borda ao elemento indicado.
• border: 5px solid black  Nesta declaração teremos uma borda de 5px de espessura, solida e preta.
• Obs: A formatação da borda ou edição dela, não se limita apenas a indica acima, é possível editar ela muito mais, com
outras propriedades CSS..
• Margin  Está propriedade CSS defini a área de margem nos quatro lado do elemento, ou seja, basicamente ela defini a
distância que o elemento indicado terá dos demais elementos.
• Maneira de Declaração:
/* Aplica para todos os quatro lados */
margin: 1em;
/* vertical | horizontal */
margin: 5% auto;
/* topo | horizontal | inferior */

margin: 1em auto 2em;
/* topo | direita | inferior | esquerda */

margin: 2px 1em 0 auto;
/* Valores globais */
margin: inherit;
margin: initial;
margin: unset;
• Como dito lá no começo, nem sempre o que você definir no width e height será o real tamanho do elemento, visto que o
elemento sofre alterações no seu tamanho também através do padding, margin e border.
• Para resolver este problema utiliza-se a propriedade CSS.
• box-sizing: border-box;  Está propriedade faz com que o elemento tenha o tamanho indicado.
No primeiro CSS a class .box tem uma largura de 520px, mesmo que no CSS tenha sido definido 500px de largura
Já no Segundo CSS a class.box tem uma largura de 500px, assim como foi definido no CSS
OBS: A propriedade box-sizing não é herdada, por conta disso se haver a necessidade de utilizar essa propriedade em todos os
elementos, deve-se declará-la no CSS utilizando o seletor *
Cumulative Margins
Se tivermos dois elementos lado a lado e definirmos uma margem para cada, a
margem entre eles dois se juntaram, como mostrado ao lado
Se tivermos dois elementos um embaixo do

outro e definirmos uma margem para cada,
as margens não se juntarem como no
exemplo acima, a maior margem
prevalecera, como mostrado ao lado.
Obs:
• Muitas vezes o conteúdo de um elemento pode ficar para fora
como mostrado ao lado. E para resolver este problema utiliza-se
a propriedade CSS overflow:;
Propriedades do background(The Background Property)
• background-color  Está propriedade defini a cor de fundo do elemento.

• background-color: blue;
• background-image  Está propriedade defini a imagem de fundo do elemento.
• background-image: url("fundo.png");
• background-repeat  Está propriedade defini de a imagem de fundo irá se repetir ou não.
• background-repeat: no-repeat;
• background-position  Está propriedade defini a posição do background.
• background-position: bottom right;
• background  Está propriedade defini todas as anteriores de um vez só
• background: blue url('fundo.png') no-repeat bottom right;
Posicionando elemento com float
• float:;  Está é a propriedade é usada basicamente para, colocar vários elemento um ao lado do outros.
• Sempre que flutuamos um elemento, o navegado tira o mesmo do fluxo normal do documento, ou seja, sua posição será
ocupada pelo próximo elemento.
• Muitas vezes quando utiliza-se a propriedade float, pode encolher a div
como mostrado ao lado, e para resolver este problema, utiliza-se a
propriedade clear, esta propriedade vai basicamente dizer para o navegador
retomar o fluxo regular do documento.
• No exemple ao lado devemos utilizar o clear no elemento responsável pelo texto
Consulta de mídias(Media Queries)
• Uma Media Query começa com uma palavra chave @media e em seguida, é seguido por um recurso de mídia(Media Feature),
que é seguido por chaves.
• Dentro das chaves vão os estilos, é basicamente um CSS dentro de outros CSS.
• Cada Media Feature é resolvido como verdadeiro ou falso.
• É possível combinar medias Features utilizado operadores lógicos
Sintaxe de um Media Query

O exemplo ao lado basicamente diz,
que se a tela um número de pixels
menor ou igual a 767 a cor dos
parágrafos será azul.
Recursos Comuns de Consulta de Mídia

Na imagem ao lado, está sendo combinado dois recursos
de mídia(Media Feature) através de um operador lógico
"and". A imagem ao lado está dizendo que se a largura
de pixels do dispositivos estiver entre 768 e 991 será
adicionado os estilos que estão entre as chaves.
Na imagem ao lado, está sendo combinado dois recursos

de mídia(Media Feature) através da vírgula, a vírgula
equivale ao operador lógico "or". A imagem ao lado está
dizendo que se a largura em pixels do dispositivo for
menor/igual a 767 ou for maior/igual a 992, será
aplicado os estilos que estão entre as chaves.
A imagem ao lado, é um exemplo de como são estruturadas

as consultas de mídias no CSS.
No primeiro @media  quer dizer que se a largura em pixels
da tela for maior/igual a 1200 será aplicado os estilos;
No segundo @media  quer dizer que se a largura em pixels
da tela estiver entre 992 e 1199 será aplicado os estilos,
percebe-se que nesse @media foi combinado dois Media
Feature.
OBS: É necessário ter muito cuidado para não sobrepor os limites de alcance, ou limites de largura, ou seja, nunca especificar a
mesma largura nos @media, pois pode causar confusão.
Design Responsivo(Responsive Design)
• É necessário projetar os sites para dispositivos móveis também, mesmo que tenham muitos dispositivos móveis hoje, é
necessário dar suporte a todos eles. E o Design Responsivo, nos ajuda a dar suporte a todos eles.
• Design Responsivo  É um site projetado para adaptar seu layout ao ambiente de visualização usando grades fluídas e
baseadas em proporções, imagens flexíveis e Consultas de Mídias CSS3.
• Grades baseadas em proporções,  Significa que a largura ou colunas dessas grades devem ser especificadas com
porcentagem.
• O layout do site deve se adaptar ao dispositivo, o site deve se ajustar com base na largura do dispositivo.
• O layout responsivo mais comum, é um que contém 12 grades.
Temos, conteúdos com

suas larguras divididas
através das 12 grades, e
a porcentagem de
largura de cada
Temos conteúdos com suas

Temos, conteúdos larguras dividas entre as 12
com suas larguras grades, porém dessa vez
divididas através temos mais conteúdo
das 12 grades dividido dentro do outro
conteúdo, através das 12
Introdução ao Twitter Bootstrap(Introduction to Twitter Bootstrap)
• Bootstrap é um framework CSS, que foi feito por engenheiros do twitter.

• Bootstrap é o framework HTML, CSS e JS mais popular para o desenvolvimento de projetos responsivos, móveis primeiro na
web
• Bootstrap consiste principalmente em CSS, ele predefine um monte de classes para você
• Desvantagens do Bootstrap.
• Ele é muito grande e está muito inchado.
• Basicamente há muitos recursos nele que você provavelmente não usará.
MÓDULO 3
Visita com o cliente(Visit with the client)
Regras básicas sobre como lidar com os clientes:

1. A maioria dos clientes não sabem o que querem, geralmente eles não tem ideia do que querem no site, e como funciona:
• É meu trabalha fazer perguntas ao cliente, pois fazendo as perguntas certas, o cliente pode descobrir o que ele quer em
seu site.
• É fundamental sempre levar exemplos de sites de negócios semelhantes ao cliente, assim você pode pode ver como o
cliente reage a esses sites e perguntar "O que você gosta nesse?" "O que você não gosta?" "Você gosta disso?", com isso
você consegue descobrir junto com os clientes o que ele preferem ou não, dentre outras coisas...
2. Menos é mais:
• Muitos clientes querem colocar um monte de informações no site, pois para eles tudo é importante, mas "Se tudo é
importante, nada é importante", então devo incentivar o cliente a seguir a regra "Less is more"(Menos é mais). Quanto
menos informações serem colocadas mais impacto as colocadas terão.
• Devo ajudar o cliente a não colocar muitas informações no site, e junto disso deve ajuda-lo a identificar/encontrar as
informações mais importantes/cruciais.
3. Sempre encontre uma maneira para o cliente investir no projeto:
• Se você estiver fazendo um projeto para criar um portfólio, é bom que o cliente invista no projeto, para digamos ele se
sentir no jogo, sentir como é..., pois assim o cliente dará atenção ao projeto, e você consegue obter cooperação do mesmo.
Quando o cliente investe dinheiro em um projeto ele com certeza irá se comprometer e dar atenção ao mesmo.
• Faça o cliente comprometer com o projeto, faça com que ele forneçam os produtos necessários.
4. É necessário sempre ter alguém responsável pelas decisões, se não tiver, pode acontecer de uma pessoa dizer que querem de
tal maneira e outra pessoa do negócio dizer que querem diferente.
5. Limite o número de revisões UPFRONT:
• Certifique-se sempre de assinar um contrato que limite o número de revisões, principalmente se for um Projeto para o seu
portfólio, pois se não o cliente pode ficar te pedindo inúmeras revisões.
• Se for um trabalho pago, nunca limite o número de revisões, mas limite o número de revisões gratuitas
6. Google for "web development cliente questionnaire", é um ótimo recurso para você saber o que perguntar ao cliente.
7. Sempre envolva outras pessoas no projeto.
• Se você não é um design gráfico, você pode procurar em uma faculdade algum estudante que esteja disposto a fazer o
serviço gratuitamente e poder colocar isso em seu portfólio.
• Para as fotografias também, você pode procurar um fotografo que esteja disposto a realizar serviços gratuitamente, desde
que ele seja mencionado e creditado para poder colocar no seu currículo.
8. Sempre que tiver uma reunião com o cliente, procure conhecer sobre o negócio, saber qual a situação atual do cliente.
Visão geral do design(Design Overview)
• Quando formos criar um site, nunca devemos começar codificando, é necessário antes de tudo criar o design do site. E para
isso você pode contratar um Design Gráfico ou fazer uma parceria.
• Porém antes de ir para o Design do site, é necessário criar um esboço do mesmo, e para isso existem ferramentas como
Balsamiq, que nada mais é que uma ferramenta de simulação, e ela permite montar simulação para sites.
• Ou seja, através do Balsamiq você monta o layout do seu site, para depois aplicar o Design a esse layout e então você está
pronto para começar o processo de codificação.
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-
target="#collapsable-nav" aria-expanded="false">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
</button>
Coursera - HTML_CSS_JS
/* Aplica para todos os quatro lados */
margin: 1em;
/* vertical | horizontal */
margin: 5% auto;
/* topo | horizontal | inferior */
margin: 1em auto 2em;
/* topo | direita | inferior | esquerda */
margin: 2px 1em 0 auto;
/* Valores globais */
margin: inherit;
margin: initial;
margin: unset;

Módulo 1

Enviado por

Dados do documento

Direitos autorais

Formatos disponíveis

Compartilhar este documento

Compartilhar ou incorporar documento

Opções de compartilhamento

Você considera este documento útil?

Este conteúdo é inapropriado?

Direitos autorais:

Formatos disponíveis

Módulo 1

Enviado por

Direitos autorais:

Formatos disponíveis

MÓDULO 1

Anatomia de uma tag HTML

Estrutura básica de um documento HTML.

Elementos de Título(Heading Elements)

• Caracteres que devem ser utilizados de maneira especial.

• Para inserir links utiliza-se a tag <a> </a>.

• Para adicionar imagens em HTML, utiliza-se.

Combinando Seletores(Combining Selectors)

Elemente with class selector

• Sintaxe: Seletor, espaço e outro seletor.

• É possível implementar o css de três maneira.

• width:  Defini a largura do elemento. Ex: width: 300px;

• height :Defini o tamanho do elemento. Ex: height: 300px;

• Obs: É interessante destacar, que nem sempre o que você definir

• Padding  Defini a distância que o conteúdo(content) terá em relação as suas bordas.

/* topo | horizontal | inferior */

/* topo | direita | inferior | esquerda */

Se tivermos dois elementos um embaixo do

Propriedades do background(The Background Property)

• background-color  Está propriedade defini a cor de fundo do elemento.

Sintaxe de um Media Query

Recursos Comuns de Consulta de Mídia

Na imagem ao lado, está sendo combinado dois recursos

A imagem ao lado, é um exemplo de como são estruturadas

• O layout responsivo mais comum, é um que contém 12 grades.

Temos, conteúdos com

Temos conteúdos com suas

• Bootstrap é um framework CSS, que foi feito por engenheiros do twitter.

Regras básicas sobre como lidar com os clientes:

Você também pode gostar