Tecnologias Web com foco na criação de Landing Pages

546
-1

Published on

Material utilizada no nivelamento na Especialização de Landing Pages.

Published in: Technology
0 Comments
1 Like
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
546
On Slideshare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
Downloads
0
Comments
0
Likes
1
Embeds 0
No embeds

No notes for slide

Tecnologias Web com foco na criação de Landing Pages

  1. 1. Tecnologias Web 1
  2. 2. About me • Carlos Rangel (chame Rangel) • Sistemas de Informação | FJN • Aluno Mestrando | C.E.S.A.R – Recife • Design há 7 anos; • Desenvolvedor Joomla! há 5 anos; • Desenvolvedor PHP há 3 anos; 2
  3. 3. Contatos flavors.com/rangeljavier carlosrangelxavier@gmail.com 3
  4. 4. Objetivos da Disciplina • Mostrar os conceitos e técnicas das Tecnologias Web no ambiente web. • Formar webdesigners 4
  5. 5. O que iremos utilizar • Softwares – Aptana • Ambiente de Desenvolvimento – Google Chrome/Firefox • Navegador – Tecnologias e Ferramentas Webs 5
  6. 6. Como funciona uma página web? 6
  7. 7. Como funciona um website? • Uma página é solicitada, via navegador; • Está página encontra-se em algum servidor na internet; • Assim que o servidor recebe as informações solicitadas pelo navegador, ele faz uma busca de onde está e retorna para o seu cliente. • A página é visualizada no navegador;
  8. 8. Como funciona um website?
  9. 9. O que é necessário criar um website? • Linguagem para marcação: HTML; • Linguagem para estilização: CSS e JS; • Linguagem de programação: PHP; • Banco de Dados; Podemos entender por banco de dados qualquer sistema que reúna e mantenha organizada uma série de informações relacionadas a um determinado assunto em uma determinada ordem.
  10. 10. O que é HTML e CSS? • São tecnologias para criação de páginas web; • Enquanto o HTML fica responsável por criar a estrutura da página, o CSS é responsável por estilizar o HTML, colocar cores, margens, estilizar fontes e etc... 10
  11. 11. W3C • O World Wide Web Consortium (W3C) é a principal organização de padronização da World Wide Web. Consiste em um consórcio internacional com quase 400 membros (empresas, órgãos governamentais e organizações independentes) com a finalidade de estabelecer padrões para a criação e a interpretação de conteúdos para a Web. 11
  12. 12. O que podemos fazer? • Utilizando HTML e CSS podemos criar a interface para: – Websites – Portais – Hotsites – Landing Pages – Etc... 12
  13. 13. Hotsites? Landing Pages? • Hotsites e Landing Pages, são “mini-sites” com a finalidade de vender um determinado produto por curto espaço de tempo. 13
  14. 14. Diferença: Hotsite e Landing Pages? Landing Pages costumam ser páginas isoladas com o objetivo de passar a mensagem mais importante sobre um produto ou serviço oferecido. Geralmente, encontram-se dentro site principal e é comum que direcionem os clientes a esse site. Hotsites costumam ser independentes focados em um produto, sem necessariamente direcionarem clientes para o site principal. 14
  15. 15. Exemplos • Com o conceito passado anteriormente, utilizando apenas as URL poderíamos entender que se fossemos criar uma Landing Page do vestibular da FJN, uma boa sugestão seria: www.fjn.edu.br/vest2013. • Já um hotsite, poderia ter seu próprio site, com vários links internos: www.vest2013fjn.com.br 15
  16. 16. Objetivo da Landing Page • Fazer com que simples navegantes da internet, tornem-se clientes 16
  17. 17. HTML Senta que lá vem a história... 17
  18. 18. O que são Tags HTML? • É a estrutura utilizada para criar páginas HTML. As tags são responsáveis pelo navegador interpretar o que estão entre elas. Sem elas não seria possível interpretar um website.
  19. 19. Browser ou Navegador FIREFOX
  20. 20. Tags Básicas (importantes) • <html> - abertura do documento • <head> - cabeçalho • <title> - titulo da página • <body> - corpo da página
  21. 21. Tag <head> • Dentro do cabeçalho podemos encontrar os seguintes comandos: • <title>: define o título da página, que é exibido na barra de título dos navegadores. • <style>: define formatação em CSS
  22. 22. Tag <body> • Dentro do corpo podemos encontrar outras várias etiquetas que irão moldar a página, como por exemplo: • <h1>, <h2>,... <h6>: cabeçalhos e títulos no documento em diversos tamanhos. • <p>: novo parágrafo. • <img>: imagem
  23. 23. Simples Documento • <html> • <head><title>Meu site</title> • </head> • <body> • Aqui ficam as imagens, links, textos, vídeos, etc. • </body> • </html>
  24. 24. Simples Documento • <html> • <head><title>Meu site</title> • </head> • <body> • <p>Navegador interpreta um parágrafo</p> • </body> • </html>
  25. 25. Cabeçalhos Obs: Os cabeçalhos vão do NÍVEL H1 AO H6
  26. 26. Tags sem fechamento • Geralmente Inserem um elemento na página. • <br/> Insere uma quebra de linha • <hr/> Insere uma linha horizontal
  27. 27. Tags sem fechamento • Note que a tag é escrita como se fosse uma mistura de tag de abertura e de fechamento com uma barra "/" no final: • <br/> Insere uma quebra de linha • <hr/> Insere uma linha horizontal
  28. 28. Links • É uma propriedade importante dos documentos HTML é a possibilidade de fazer hiperligações. Para isso usa-se a etiqueta <a> (do inglês, anchor).
  29. 29. Links • Para inserir um link em um documento, utilizamos a etiqueta <A>, da seguinte forma: • <A HREF = “contato.html">âncora</A> • onde: • Contato.html -> é a URL do documento de destino; • Âncora-> é o texto ou imagem que servirá de ligação do documento apresentado para o documento de destino.href -> é abreviação para "hypertext reference" - referência a hypertexto - e especifica o destino do link – que normalmente é um endereço na Internet ou um arquivo.
  30. 30. Links • <A HREF = “http://www.fjn.edu.br"> Visitar site da FJN</A> Visitar site da FJN O que aparece para o usuário: Página de Destino
  31. 31. Links • <A HREF = http://www.fjn.edu.br target=“_blank”>Visitar site da FJN</A> Página de Destino target-> O atributo target permite-nos abrir o link em uma nova janela diferente daquela em que se clicou. O target _blank é útil em especial para links externos ou seja, o visitante abre o link de outro site, mas a janela atual não se fecha.
  32. 32. Tags (Fontes) Aumentar o tamanho da Fonte: <font size=“+1”>Texto</font> Alterar a cor da Fonte <font color=“yellow”</font> Alterar a Fonte(letra) <font face=“verdana”</font>
  33. 33. Atributos e Valores • Uma etiqueta/tag é formada por atributos e valores. Os atributos modificam os resultados padrões e os valores caracterizam essa mudança.
  34. 34. Atributos e Valores (Exemplo) • <font color=“red">Meu Texto</font> • No qual: • font = Tag utilizada para alterar opções de uma palavra ou texto. • color = atributo que especifica a cor da palavra ou texto. • red = valor do atributo color, que é a cor do texto que será apresentado (neste caso vermelho).
  35. 35. Atributos e Valores • Cada etiqueta tem seus atributos possíveis e seus valores. • Um exemplo, é o atributo size que pode ser usado com a tag FONT, com a HR mas que não pode ser usado com a tag BODY. • Isso quer dizer que devemos saber exatamente quais os atributos e valores possíveis para cada comando.
  36. 36. Tags - Listas • <ul> • <li>Texto 1</li> • <li>Texto 2</li> • </ul> • Texto 1 • Texto 2 Resultado: *Listasdesordenadas.
  37. 37. Tags - Listas • <ol> • <li>Texto 1</li> • <li>Texto 2</li> • </ol> • Listas Ordenadas. 1. Texto 1 2. Texto 2 Resultado:
  38. 38. Negrito e itálico • <b> • Meu Texto • </b> • <i> • Meu Texto • </i> Meu Texto Resultado: Meu Texto Resultado:
  39. 39. Tags Aninhadas • <b> • <i> • Meu Texto • </i> • </b> Meu Texto Resultado:
  40. 40. Tags Aninhadas • <h1> • <b> • <i> • Meu Texto • </i> • </b> • </h1> Meu Texto Resultado:
  41. 41. Tags Aninhadas • Conclusão: • As últimas tags a serem abertas têm que ser as primeiras a serem fechadas, e as primeiras a serem abertas terão de ser as últimas a serem fechadas.
  42. 42. Mais Tags - Imagens • <IMG>: Tag para inserir uma imagem. • Src: Local de origem da imagem • Alt: Atributo para descrever a imagem. • Width: Atributo para definir a largura da imagem. • Height: Atributo para definir a altura da imagem. • Border: Inserir uma borda na imagem. • Align: Alinhamento da Imagem. Código para inserir uma imagem: <img src=“imagens/brasil.jpg” alt=“Brasil”/>
  43. 43. Mais Tags - Imagens Código para inserir uma imagem: <img src=“img1.jpg” alt=“Desc” align= “left” border=“1” /> Seu texto irá ficar alinhado a esquerda da imagem. A imagem tem uma borda que foi definida pelo atributo BORDER=“1”.
  44. 44. Mais Tags - Tabelas Tabelas são usadas para apresentar "dados tabulares", isto é, informação que deva ser apresentada em linhas e colunas, de forma lógica e organizada.
  45. 45. Mais Tags - Tabelas Código para inserir uma tabela: <table> <tr><td>Célula 1 </td></tr> <tr> <td>Célula 2</td> </tr> </table> Célula 1 Célula 2 Resultado:
  46. 46. Mais Tags - Tabelas Código para inserir uma tabela: <table border=“1”> <tr><td>Célula 1 </td></tr> <tr> <td>Célula 2</td> </tr> </table> Célula 1 Célula 2 Resultado:
  47. 47. <table border=“1”> <tr> <td>Célula 1 </td><td>Célula 2 </td> </tr> <tr> <td>Célula 3 </td><td>Célula 4 </td> </tr> </table> Célula 1 Célula 3 Resultado: Célula 2 Célula 4
  48. 48. Blocos de Divisões • A tag <div> define uma divisão ou uma seção em um documento HTML. • A tag <div> é usada para agrupar blocos- elementos, e assim formatá-los com nossa folha de estilo. 49
  49. 49. Blocos de Divisões <div> <h1>Este é meu bloco acima</h1> </div> <div> <p>Este é meu bloco abaixo</p> </div> 50
  50. 50. Blocos de Divisões • ID: Faz referência a um elemento único e exclusivo. (No CSS é utilizado com “#”) • CLASS: É usado para especificar um modelo para um grupo de elementos. Ao contrário do seletor id, o seletor de classe é mais frequentemente usado em vários elementos. (No CSS é utilizado com “.”) 51
  51. 51. Bloco de Divisões <div id=“superior”> <h1>Este é meu bloco acima</h1> </div> <div id=“inferior”> <p>Este é meu bloco abaixo</p> </div> 52
  52. 52. CSS 53
  53. 53. CSS • Cascading Style Sheets (ou simplesmente CSS) é uma linguagem de estilo utilizada para definir a apresentação de documentos escritos em uma linguagem de marcação, como HTML ou XML. • É uma tecnologia criada para definir estilos (cores, tipologia, posicionamento, etc...); • CSS facilitam a criação, formação e manutenção da páginas web. 54
  54. 54. HTML + CSS Inline: CSS diretamente nas tags HTML <p style="color:#B000FF;">CSS dentro das tags HTML</p> Embutido: CSS dentro do Head de sua página <head> <style type="text/css"> .texto {color:#B000FF;} </style> </head> Externo: CSS dentro do Head de sua página vindo de um arquivo externo <link rel=”stylesheet” type=”text/css” href=”estilo.css” /> 55
  55. 55. CSS A estrutura básica (“fórmula”) seletor{ propriedade: valor; } 56
  56. 56. Sintaxe do CSS • Seletor = elemento contido na estrutura HTML. • Você irá selecionar pelo seu nome ou tipo de TAG então indicará isso em primeiro lugar. P { color: green; }
  57. 57. Sintaxe do CSS • Propriedade = É a propriedade que você irá manipular desse elemento. Cor de fundo, tamanho do texto, cor de texto, posição, largura, altura etc. P { color: #CCCCCC; }
  58. 58. Sintaxe do CSS • Valor = É o valor referente a propriedade escolhida. Se você quer mudar a cor do texto, o valor da propriedade será o nome da cor. P { color: white; }
  59. 59. Todas as propriedades Aqui veremos a listagem de todas as possibilidade possíveis de propriedades CSS e usa-las. http://www.w3c.br/divulgacao/guiasreferencia/css2/ 60
  60. 60. 61
  61. 61. HTML5 e CSS3 • São as novas versões das tecnologias para criação web. Houveram mudanças e 62
  62. 62. DocType <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> Isto é o doctype! Deve ser sempre a primeira linha de qualquer documento HTML e serve para indicar ao browser qual a versão do HTML em que o documento está escrito. Existem dezenas de doctypes, que podem fazer o browser “entender” o HTML de diferentes formas. 63
  63. 63. DocTypes É importante usar um doctype que faça o browser correr num modo padrão. Por exemplo, o doctype acima – XHML 1.0 Strict – contem todos os elementos e atributos HTML, mas NÃO INCLUI elementos de apresentação ou obsoletos (como tag font). 64
  64. 64. DocTypes O HTML padronizou um novo DocType que é menor, legível e faz os todos os browsers recentes correr em modo padronizado: <!DOCTYPE HTML> 65
  65. 65. HTML5 66
  66. 66. Dicas para sua Landing Page 67
  67. 67. 1. Use fotos • Estudos comprovam que fotos reais são mais eficientes até mesmo que ilustração. • Chamam mais atenção e são mais elegantes 68
  68. 68. • Compre fotos, contrate fotografo ou prepare você mesmo. 69
  69. 69. 2. Claro e simples • Você tem 5 segundos, CINCO SEGUNDOS para convencer seu usuário a ficar na página e se interessar. Não tente explicar como o produto funciona em seus devidos detalhes. 70
  70. 70. 3. Destaque quem merece • Use sempre texto de vários tamanhos, dando destaque para quem merece. 71
  71. 71. 4. O foco é o produto • A marca de sua empresa não deve aparecer mais do que o produto – ou você quer que ele fique clicando em seu logotipo ao invés do botão comprar? • Foco é o produto e não sua empresa! 72
  72. 72. 5. Nada de pop-ups • Não seja chato com o usuário. Hoje, temos diversos browsers com bloqueador de pop-up e pop-under – o que pode prejudicar a taxa de conversão de sua página. 73
  73. 73. 6. Mostre depoimentos • Uma grande parcela de visitantes mais desconfiados só tomam a decisão quando lêem reviews de outros consumidores, ou especialistas da área (veículos, blogueiros e outros formadores de opinião) dão seu testemunho sobre o produto ou serviço. 74
  74. 74. 7. Senso de urgência • O senso de urgência é capaz de fazer o usuário tomar uma decisão por impulso, seja pelo título impressionante, pela foto impactante do produto, botão imponente, e principalmente pela oferta que está próxima do botão. 75
  75. 75. 8. Não use navegação • Lembre-se que você tem uma única missão – vender seu produto. Navegação foi feita para websites e não para Landing Pages. Leve o seu visitante para percorrer o mais rápido possível o caminho entre TÍTULO > TEXTO > OFERTA > CALL TO ACTION (botão). 76
  76. 76. 9. Cuidado com cores • O visitante pode até não ser designer, mas sem perceber, ele ficará desconfiado ao entrar em uma Landing Page preta para vender serviços médicos, ou uma branca/verde/azul para uma pizzaria. Aplicação de cores é importantíssimo para usabilidade assim como é para a conversão. 77
  77. 77. 10. Call to Action • Este é o seu objetivo. Ele deve ter um lugar de destaque na sua página e ser um elemento com contraste forte e que chame a atenção do usuário. Inclua-o duas, três vezes, quantas vezes achar necessário (sem exagero!). 78
  78. 78. Apps 79
  79. 79. Registro no Lander 80

×