Alexandre Mendes

Módulo 2 – Aula 08

produtos

Incorporação de Font

formmail.php

jQuery – Lightbox

HTML – Formulário

  • Form: Todo formulário deve ser filho de uma tag <form> contendo os atributos action=”" e method=”"
    • action: Atributo que direciona para qual arquivo serão enviados os dados. Exemplo: <form action=”formmail.php” method=”">
    • method: Atributo que diz o método de envio dos dados podendo ser POST ou GET. Exemplo: <form action=”" method=”post”>. OBS: utilizaremos o method post
  • Campo de texto: Campo de texto é uma tag <input type=”text” /> e deverá vir sempre com o atributo name. Exemplo: <input type=”text” name=”telefone” />
  • Área de texto: Área de texto é uma tag <textarea name=”mensagem”></textarea> e deverá vir sempre com o atributo name.
  • Lista de seleção: Para fazer uma lista de seleção você deverá utilizar a TAG <select name=”estado”></select> sendo que dentro da TAG <select> deverão existir as opções com seus valores. Exemplo: <option value=”ba”>BA</option>, <option value=”rj”>RJ</option> e <option value=”sp”>SP</option>
  • Radio (bola): O campo radio serve para que apenas uma opção seja selecionada. Exemplo: <input type=”radio” name=”sexo” value”masculino” />. OBS: para inserir duas respostas para uma mesma pergunta você deverá utilizar o mesmo name para os dois campos. Exemplo: <input type=”radio” name=”sexo” value”masculino” /> e <input type=”radio” name=”sexo” value”feminino” />
  • Checkbox (quadrado): O campo checkbox serve para marcar e desmarcar quantas vezes você quiser, inclusive podendo marcar mais de uma opção. Exemplo: <input type=”checkbox” name=”esporte” value”interesse” />
  • Botão de enviar: O botão de enviar é uma TAG <input type=”submit” value=”Enviar” />

PHP – EasyPHP

Iniciando o EasyPHP

  • Instale normalmente como qualquer programa
  • Acesse a pasta onde o EasyPHP foi instalado e execute o arquivo EasyPHP-X.exe, sendo X a versão do seu EasyPHP
  • Aparecerá um ícone do EasyPHP ao lado do relógio na barra do windows
  • Clique com o botão direito do mouse sobre o ícone e escolha a opção Local Web
  • Note que ele abrirá uma página no navegador. Essa página exibirá todos os projetos que você tem armazenado na pasta /www dentro da pasta do /EasyPHP
  • OBS: a partir de hoje todos os projetos deverão ser salvos dentro da pasta /www dentro da pasta /EasyPHP (exemplo: c:/Arquivos de Programas/EasyPHP/www)
  • OBS2: para navegar no seu projeto você precisará sempre acessar o EasyPHP através do Local Web do ícone (conforme etapas anteriores)

PHP – Include

  • O comando include() é uma função PHP que serve para incluir outro arquivo no lugar exato onde a função é inserida.
  • O código deverá ser: <?php include(“nome-do-arquivo.php”); ?>
  • No nosso projeto do Tomatões recortamos as DIVs #topo, #banner e #menu e inserimos num arquivo chamado topo.php. No local exato onde tiramos as DIVs devemos inserir o código <?php include(“topo.php”); ?>
  • O mesmo processo foi feito para a DIV #rodape

Módulo 2 – Aula 07

flash

TOMATÕES (Guia)

TOMATÕES (Projeto)

4 etapas para instalar jQuery

  • Ver funcionando no seu PC
  • Transferir o arquivo HTML (que está funcionando) para a mesma pasta do arquivo a receber o efeito
  • Mudar os caminhos do arquivo que foi transferido
  • Aplicar os códigos no arquivo do seu site

jQuery – Nivo Slider

DESENVOLVIMENTO

  • index.html: Aprendemos que é preciso nomear nosso arquivo da página inicial como index para que o servidor entenda qual arquivo exibir

EXERCÍCIOS

  • Fazer um SLIDER com as imagens do Elefante (DOWNLOAD)
  • Colocar o ícone que fica na aba do navegador
  • Colocar imagens das redes sociais no rodapé
  • Trocar a imagem da segunda notícia
  • Colocar link nas imagens das notícias
  • Quando colocar mouse na imagem da notícia a borda deverá ficar vermelha (#ac0000)

Módulo 2 – Aula 06

Firebug

DREAMWEAVER

Editando a cor do código:

  1. Vá em: Edit / Preferences…
  2. Escolha a opção Code Coloring
  3. Em Document Type, selecione a linguagem que terá sua cor alterada (HTML, PHP, CSS, etc)
  4. Escolha o comando e as cores para esse comando (Exemplo: HTML Comment)

MENU TOMATÕES

  • display: inline – Serviu para colocarmos nossa lista que é VERTICAL na posição HORIZONTAL (em linha)
  • line-height: 40px – Serviu para alinhar o texto de forma vertical num espaço de 40px

EXERCÍCIOS

Módulo 2 – Aula 05

TOMATÕES (Projeto)

SEO (Otimização para o Google)

  • SEO são técnicas de Otimização para buscadores, entre eles o principal que é o Google
  • Tomaremos como exemplo a otimização de uma pizzaria que queira otimizar o termo “pizza delivery salvador”
  • As técnicas de SEO são divididas em duas partes:
  • Técnicas ON-PAGE
    • Título nas páginas com a tag <title> (exemplo: <title>Pizzaria Velame – Melhor Pizza Delivery de Salvador</title>)
    • Heading tags (<h1>, <h2>, etc) (exemplo: <h1>Pizza delivery em salvador é Velame</h1>)
    • Imagens: Nome do arquivo (exemplo: pizza-calabresa.jpg) e Atributo ALT (exemplo: <img src=”" alt=”Pizza de Calabresa” />)
    • Domínio (exemplo: ao invés de apenas “velame.com” seria melhor “velamepizzas.com”)
    • URL da página (exemplo: ao invés de “velamepizzas.com/pagina1.html” seria melhor “velamepizzas.com/delivery-salvador.html”)
    • Conteúdo (é todo restante do código como <p>, <li>, etc
  • Técnicas OFF-PAGE
    • Quantidade de links externos. Cada link é chamado de backlink. Para conferir seus backlinks acesse www.backlinkwatch.com
    • Qualidade dos links externos. É melhor ter um blog de receita apontando pro site de pizzaria do que dois sites de tecnologia.
    • Texto âncora dos links externos (ao invés de <a>Velame Pizzas</a> seria melhor se fosse <a>Pizza Delivery Salvador</a>
    • Idade do domínio
  • Existem técnicas que são consideradas Black Hat e técnicas White Hat. As Black Hat são proibidas, confira algumas:
    • Criar vários domínios apenas para colocar links apontando para seu sites. Essa técnica é conhecida como Link Farm
    • Escrever algo interessante para o Google e depois esconder texto com display none para que o usuário não enxergue, apenas o Google enxergue
    • Detectar o IP de acesso. Se for o Google, ele direciona para um HTML e se for o usuário direciona para outro
  • Download do Slide

Módulo 2 – Aula 04

CSS – Background

IMAGE-REPLACEMENT (Substituição por imagens)

  • Para que serve: A técnica de Image-replacement serve para substituir um texto por imagem, escondendo o texto (que não deixa de existir) e exibindo uma imagem de fundo (background)
  • Quando utilizar:Quando for criar um botão que precise de um efeito “:hover”
  • Exemplo:
    • HTML: <p class=”botao”><a href=”#”><span>Inscreva-se</span></a></p>
    • CSS: .botao a { background: url(botao.gif); width: 235px; height: 45px; } .botao a:hover { background-position: 0 45px; } .botao span { display: none; }
    • Download de image-replacement padrão

DREAMWEAVER

  • Apenas trabalharemos no modo CODE e nunca no SPLIT e nem DESIGN
  • Configuramos para que todo novo documento seja do tipo xHTML 1.0 Strict. Basta ir em Edit / Preferences / New Document
  • Configuramos para fechar automático após digitar “>” da tag de abertura. Basta ir em Edit / Preferences / Code Hints
  • Criando atalhos no Dreamweaver via Snippet
    • Criando um Snippet
      1. Escreve o código que será inserido
      2. Seleciona o código e com o botão direito do mouse escolhe “Create New Snippet”
      3. Automaticamente abrirá uma nova janela (Snippet)
      4. Escolha o nome do Snippet e depois o que será inserido ANTES (before) e o que será inserido DEPOIS (after). O mouse será posicionado no meio entre eles.
      1. Atalho de Teclado
      2. Vá em Edit / Keyboard Shortcuts
      3. Se for a primeira vez, clica em Duplicate Set (1º dos 4 ícones da direita)
      4. Escolha um nome
      5. Em COMMANDS escolha SNIPPETS
      6. Localize sua Snippet
      7. Clique no campo PRESS KEY
      8. Escolha o atalho (exemplo: “CTRL + SHIFT + D” para a DIV)
      9. Clique em CHANGE

ASSUNTOS – CSS

  • border: Para funcionar uma borda sempre precisaremos colocar 3 propriedades: Cor (border-color), Estilo (border-style) e Largura (border-width). Exemplo: img { border: red solid 3px; }
  • background: Existem várias propriedades de background.
    1. background-color: Serve para colocar a cor de fundo. Exemplo: body { background-color: yellow; }
    2. background-image: Coloca uma imagem de fundo. Exemplo: body { background-image: url(gmail.png); }
    3. background-repeat: Serve para dizer se deverá ser repetido ou não (precisa ter um background-image). Exemplo: body { background-repeat: no-repeat; }
    4. background-position: Posiciona sua imagem de fundo para cima (top), direita (right), baixo (bottom), esquerda (left) e centro (center). Exemplo: body { background-poition: bottom right; }
    5. background-attachment: Dirá se o seu background é fixo ou rola com a tela (precisa ter um background-image). Exemplo: body { background-attachment: fixed; }
    6. OBS: Poderemos e passaremos a utilizar a propriedade background pura para tudo. Exemplo: body { background: yellow url(gmail.png) no-repeat bottom; }
  • Formatação de texto: Faça download do arquivo
    1. letter-spacing: Espaçamento entre as LETRAS. Exemplo: div { letter-spacing: 5px; }
    2. word-spacing: Espaçamento entre as PALAVRAS. Exemplo: div { word-spacing: 30px; }
    3. line-height: Altura da linha. Aumenta a altura de uma linha para a outra. Exemplo: div { line-height: 36px; }
    4. text-align: Alinha o texto. Exemplo: div { text-align: right; }
    5. text-transform: Transforma o texto. Exemplo: div { text-transform: uppercase; }
    6. font-weight: Diz o peso da font (negrito). Exemplo: div { font-weight: bold; }
    7. font-style: Estilo da font. Exemplo: div { font-style: italic; }
    8. font-family: Diz a família tipográfica da font. Quando tem mais de um valor, caso não exista a primeira font ele passa para a segunda e assim por diante. Exemplo: div { font-family:”Trebuchet MS”, Arial, Helvetica, sans-serif; }

Módulo 2 – Aula 03

nivel1-com-mudancas

Exercício: Nivel 1 – inserir mudanças

Regras W3C

  1. Toda página deve ser documentada (DTD). O próprio Dreamweaver dá a tag pronta. Exemplo: <!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Strict//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd”>

Download do Nível 2

LIMPADOR

  • Quando utilizar: duas situações de quando utilizar o limpador:
    1. Quando a mãe sumir por causa dos filhos que flutuaram. SOLUÇÃO: Colocar um LIMPADOR antes de fechar a div mãe
    2. Quando dois elementos que não deveriam estar se misturando acabaram misturados. SOLUÇÃO: Colocar um LIMPADOR entre os dois irmãos
  • HTML: <div class=”limpador”></div>
  • CSS: .limpador { clear: both; }

ASSUNTOS – CSS

  • HERANÇA: O CSS aceita trabalhar seletores com herança permitindo aplicar propriedades mais específicas como #menu a { color: yellow; } que está dizendo que TODA tag </a> que estiver dentro de #menu ficará com a cor amarela
  • :first-child (Pseudo-elemento): serve para atingir o primeiro filho. Exemplo: #conteudo p:first-child { color: white; } fará com que apenas o PRIMEIRO </p> dentro de #conteudo ficará branco
  • margin: Espaçamento EXTERNO. Empurra quem está FORA dele.
  • padding: Espaçamento INTERNO. Empurra quem está DENTRO dele (os filhos).

Módulo 2 – Aula 02

Download do Nível 1

CLEAR

  • Para que serve: Serve para LIMPAR seu elemento e impedir que o mesmo se misture (fique atrás de outro)
  • Quando utilizar: Quando quiser impedir que um elemento fique atrás do outro ou ao lado do outro.
  • Exemplo: Em sala utilizamos essa propriedade na DIV do RODAPÉ para que ela não ficasse por trás de MENU e CONTEÚDO

FLOAT

  • Para que serve: Serve para “flutuar” um elemento.
  • Quando utilizar: TODAS as vezes que quisermos colocar um elemento ao lado do outro precisaremos utilizar o FLOAT em ambos.
  • Exemplo: Em sala utilizamos o FLOAT no MENU e no CONTEÚDO do exercício Nível 1

ASSUNTOS – HTML

  • Negrito: Serve para deixar um texto em negrito. O texto que deverá ser negrito ficará dentro das TAGs . Exemplo: Meu texto está <strong>negrito</strong>
  • Itálico: Serve para deixar um texto em itálico. O texto que deverá ser itálico ficará dentro das TAGs . Exemplo: Meu texto está <em>itálico</em>
  • span: A TAG é uma TAG “nada”, ou seja, ela não tem uma função específica, ficando a critério do desenvolvedor utilizá-la no momento que achar adequado. Ela é uma espécie de coringa. Exemplo: <p>Tenho um parágrafo, mas <span>aqui</span> terá uma cor diferente.</p>
  • div: é um BLOCO DE INFORMAÇÕES que pode conter parágrafos, imagens, links e qualquer outra coisa. Os blocos de informações mais utilizados são Topo, Menu, Conteúdo e Rodapé. Exemplo: <div></div>

ASSUNTOS – CSS

  • Pseudo-class: Vimos 3 pseudo-classes.
    1. :visited – Quando tiver sido visitado. Exemplo:
    2. :hover – Quando colocar o mouse em cima. Exemplo:
    3. :active – No momento do clique do mouse. Exemplo:
  • comentário: O comentário no CSS é composto por /* para abrir e */ para fechar. Exemplo:
  • Seletor ID: o seletor ID serve para criar uma regra CSS que possa ser utilizada em um único ponto da sua página. É composto por sustenido e o nome do seletor. Exemplo:
  • Seletor CLASS: o seletor CLASS serve para criar uma regra CSS que possa ser utilizada em pontos específicos da sua página e por mais de uma vez. É composto por ponto e o nome do seletor. Exemplo:
  • margin: Espaçamento EXTERNO. Empurra quem está FORA dele.
  • padding: Espaçamento INTERNO. Empurra quem está DENTRO dele (os filhos).

ASSUNTOS – CSS

  • Regra CSS:
  • Existem 3 tipos de CSS: inline, interno e externo
  • Seletor TAG: o seletor TAG formatará todas as TAGs daquele tipo das páginas que tenham vínculo com aquele CSS. Exemplo: Se escrevermos no CSS então todos as TAGs ficarão azul.
  • Link do HTML com CSS: para que haja vínculo entre HTML e CSS você precisará colocar a tag dentro da tag

Regras xHTML

  1. Quando quiser deixar negrito utilizar a tag e não <b>
  2. Quando quiser deixar itálico utilizar a tag e não <i>

Regras W3C

  1. Utilizar CSS externo

Módulo 2 – Aula 01

Exercício – Criação de Layouts no Photoshop 2a

DOWNLOAD NOTEPAD++

ASSUNTOS – HTML

  • Estrutura básica: Composta pelas TAGs e
  • Título: Composto pela TAG . Serve para criar um título para o seu projeto.
  • Parágrafo: Composto pela TAG . Serve exclusivamente para a criação de parágrafos.
  • Cabeçalhos: São TAGs que criam hierarquia à sua página. As TAGs são , , , , e . IMPORTANTE! Cada TAG de cabeçalho apenas existe se a superior a ela existir. Exemplo: H3 apenas existirá se for uma subseção de H2.
  • Listas: Existem 2 tipos de listas, ORDENADAS e NÃO ORDENADAS . Independente da lista escolhida você deverá ter os itens da lista que serão aplicados com a TAG
  • Imagem: Para inserir imagens é necessário utilizar a marcação junto com o atributo , sendo que o valor dentro de src será o caminho para a imagem. Exemplo:
  • Link: Os links são a base da Web. A TAG de link é e assim como a imagem ela precisa de um atributo chamado onde o valor desse atributo será o destino do link. Exemplo:

Regras W3C

  1. HTML para marcação e CSS para estética
  2. Toda página deve ter e o deve dizer o que a página oferece
  3. Toda página deve conter um e somente um
  4. Utilizar apenas para subseção de , para subseção de e assim por diante.
  5. Todo menu deve ser em lista. Utilizaremos a lista não ordenada
  6. Toda imagem deve conter um texto alternativo (Atributo ALT). Exemplo:

Regras xHTML

  1. Toda TAG deve ser minúscula
  2. Toda TAG deve ser fechada. Nos casos de TAGs únicas utilizaremos uma “/” no final. Exemplo:

Regras HTML

  1. Toda TAG vem entre “<” e “>”
  2. As TAGs de fechamento possuem uma “/”. Exemplo:
  3. Atributos HTML – 1: Devem vir na TAG de abertura | 2: Tem a estrutura nome=”valor”

Regra Velame

  1. Abriu FECHOU!

EXERCÍCIOS

Aula 07

PÁGINAS INTERNAS

  1. O Designer do projeto é também responsável pelo design das páginas internas, por isso ele deverá criar um arquivo PSD para cada página interna.
  2. Para o projeto do curso iremos criar 2 páginas internas:
    1. Página de padronização (exemplo):
      1. Título 1
      2. Subtítulo 2
      3. Subtítulo 3
      4. Subtítulo 4
      5. Parágrafo
      6. Parágrafo
      7. Link
      8. Link Hover (quando colocar o mouse em cima do link)
    2. Página de Contato (exemplo)
  3. Exemplos de formulário: http://www.velamecursos.com.br/index.php/blog/22-criativos-formularios-e-paginas-de-contato/

10 MANDAMENTOS DA USABILIDADE NA WEB

  1. O site deve falar a linguagem do usuário
  2. Minimizar sobrecarga de memória do usuário
  3. Consistência
  4. Mecanismo de navegação clara
  5. Personalização de erro
  6. Ajuda
  7. “Onde estou?” e “O que ele faz por mim?”
  8. Cadastrar no Google
  9. Possibilitar retorno à página anterior
  10. Todo link deve ser manifestado quando colocar o mouse em cima

Aula 06

Velame Cursos – Importância do processo

TIPOGRAFIA

  1. DAFONT.COM – Site para download de FONTS

Classificação das fonts

  • Com Serifa: Font que possui o “rabinho”. Indicada para mídia impressa (livro, revista, jornal) | ver exemplo
  • Sem Serifada: Font que NÃO possui o “rabinho”. Indicada para display (monitor, celular, tv) | ver exemplo
  • Cursiva: Font escrita à mão | ver exemplo
  • Dingbats: Font decorativa ou de ícone | ver exemplo

Dicas do uso de Tipografia

  • Evite alinhamento centralizado em textos longos
  • Nunca utilize tipo claro em fundo claro, ou tipo escuro em fundo escuro
  • Use apenas uma categoria de fonte

3 formas de destacar uma font

  • Deixar negrito
  • Colocar sublinha
  • Escolher uma família de font diferente
  • Escolher uma cor diferente
  • Escolher um tamanho diferente

Lista das melhores fonts

ÍCONES

  1. A utilização de ícones enriquece bastante o projeto, seja em menu, botões ou qualquer outro lugar
  2. Find Icon
  3. Icon Finder
  4. Google Images (pesquise por icon e o nome. Ex: “icon facebook”, “icon home”, “icon contact us”)
  5. Icon Monstr
  6. Web Design Ledger

DIMENSÃO DO SITE

  1. Download da BASE para um Novo Layout
  2. Todo o conteúdo do site deverá ficar entre as duas linhas do centro. Caso não esteja enxergando as linhas aperte “CTRL ;”
  3. Apenas Trabalhar com 100% de visualização
  4. Importante! Colocamos 2000 px de altura para que você pudesse trabalhar tranquilamente, portanto não “force” o layout a ter exatamente essa alturo (no final iremos cortar o retsante)

UIs PSDs prontos

  1. São elementos prontos do Photoshop para você utilizar em seus projetos
  2. Sites para download de UIs PSD

PATTERNS

  1. Design M
  2. Brusheezy
  3. Smashing Magazine

EXERCÍCIOS

  1. Adiantar seu layout

Aula 05

CORES

  • Contraste: O contraste mede a diferença entre duas ou mais cores
  • Brilho: O brilho mede a quantidade de cor branca adicionada a imagem
  • Saturação: A saturação mede a quantidade de uma determinada cor presente na mistura
  • DOWNLOAD: Estudo de cores (impacto psicológico das cores)

Paleta de cores

STYLES

  1. ultimate-collection-500-photoshop-layer-styles-your-design-free-download
  2. 131 Layer Styles
  3. 220 Layer Styles
  4. 12 Layer Styles
  5. Madeira
  6. Ferrugem
  7. Cromado
  8. Refração
  9. Transparente
  10. Metal
  11. Jóia
  12. Neon

EXERCÍCIOS

  1. Escolher a Paleta de cores para seu projeto
  2. Concluir o Wireframe do seu projeto para iniciarmos o Photoshop na próxima aula
  3. Concluir os 3 banners

Aula 04

WIREFRAME

  • Serve para separar o momento de Criação e Execução. Através do Wireframe nós podemos nos preocupar apenas com a criação, sem pensar ainda na execução que será feita mais tarde no Photoshop.

PESQUISA DE SITES REFERÊNCIA

Aula 03

BRUSHS PARA PHOTOSHOP

Dicas

  1. Quando for pesquisar no Google use “Download Photoshop Brush” antes da palavra desejada. Ex: “Download Photoshop Brush Moon”, “Download Photoshop Brush Tree”
  2. Crie uma camada nova toda vez que for aplicar o Brush
  3. Mude a cor e o tamanho antes de aplicar o Brush

Sites de download

  1. BrushKing
  2. Brusheezy
  3. Celestial Star
  4. BlendFu
  5. Get Brushes
  6. 1000 Brushes para download
  7. HeroTurko

GUIA DA VAQUINHA

TENDÊNCIAS WEB

  1. Feedback
  2. Menu Fixo (derivado do Feedback)
  3. Slider
  4. BGzão (BG Grande)
  5. Rodapé Grande
  6. Formulário bem trabalhado
  7. Transparência PNG
  8. Exploração da Tipografia
  9. Exploração de ícones
  10. Carousel
  11. Profundidade
  12. Site de página única
  13. Parallax Scrolling (BG Movendo)
  14. Flat Design (design plano)
  15. Menu Drop Down
  16. Metro Windows 8

SLIDES DE TENDÊNCIAS

  1. Tendências 2014: http://www.slideshare.net/davidleeking/web-trends-to-watch-in-2014
  2. Tendências 2012-2013: http://prezi.com/4kv5elhyazu0/2012-2013-web-design-trends/

PHOTOSHOP – Rane ADM

Aula 02

PESQUISA DE IMAGENS

EXERCÍCIOS

  1. Boneco Business Man
  2. Estudar Layer Styles do Photoshop
  3. Aprender a justificar o texto
  4. Concluir o Layout da Vaquinha
  5. Continuar pesquisa de imagens

Aula 01

PHOTOSHOP – Vaquinha

DOWNLOAD DO PHOTOSHOP

CRACK DO PHOTOSHOP

MÍDIAS SOCIAIS DA VELAME CURSOS

EXERCÍCIOS

  1. Boneco Business Man