Mario Augusto

Aula 10

Depoimentos

FACEBOOK

Escreva no Facebook e nos dê as estrelas que você acha que a Velame Cursos merece.

Link para o Facebook

Confira exemplo abaixo:

GOOGLE

Escreva no Google e nos dê a nota que você acha que a Velame Cursos merece.

Link para o Google

Envie seu depoimento para o e-mail: atendimento@velamecursos.com.br

formmail.php

jQuery – Lightbox

Aula 09

tomatoes

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” />

Aula 08

banner

Guia de Tomatões

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

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

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)

Aula 07

flash

TOMATÕES (Projeto)

Aula 06

Nivel 4 do professor

TOMATÕES (Projeto)

EXTENSÕES DAS IMAGENS

  • GIF
    1. Quando utilizar: Utiliza quando tem poucas cores ou a imagem é pequena
    2. Vantagem: É leve e mantem as cores originais
    3. Desvantagem: Tem limite de 256 cores
  • JPG
    1. Quando utilizar: Utilizado para fotografias
    2. Vantagem: Serve para imagens com muitas cores e grandes
    3. Desvantagem: Distorce a imagem
  • PNG
    1. Quando utilizar: Quando precisar utilizar transparência real
    2. Vantagem: A transparência funciona
    3. Desvantagem: Muito pesado

ASSUNTOS – CSS

  • Zerando um novo projeto (Seletor Universal): Toda vez que formos iniciar um projeto precisaremos utilizar o seletor universal asterisco (*) e aplicar o valor zero (0) para margin, padding e border. Exemplo: * { margin:0; padding:0; border:0; }

EXERCÍCIOS

Aula 05

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

EXERCÍCIOS

Aula 04

CSS – Background image-replacement

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

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

Aula 03

Nivel 1 – inserir mudanças

Aula 03

Download do Nível 1

Aula 02

float-exercicio

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

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:

EXERCÍCIOS

  1. Fazer o SUPER site com HTML e CSS (leia instruções em anexo)
  2. Colorir mini-site nas cores do Brasil (Nomes das cores)
  3. Colorir o arquivo eFlash

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:
  • Comentário: Comentário serve como auxílio ao desenvolvedor (você). O código para comentário é .

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!