{"id":3113,"date":"2017-06-22T16:24:38","date_gmt":"2017-06-22T16:24:38","guid":{"rendered":"https:\/\/projetoslayerup.com.br\/layerup\/hml\/\/?p=3113"},"modified":"2022-08-05T16:33:44","modified_gmt":"2022-08-05T19:33:44","slug":"como-criar-sites-confira-todos-os-passos","status":"publish","type":"post","link":"https:\/\/projetoslayerup.com.br\/layerup\/como-criar-sites-confira-todos-os-passos\/","title":{"rendered":"Como criar sites: confira todos os passos"},"content":{"rendered":"

A d\u00favida sobre como criar sites permeia h\u00e1 s\u00e9culos, mas na \u00faltima d\u00e9cada, a busca pelo desenvolvimento de sites ou sobre como cri\u00e1-los aumentou ainda mais e, o grande respons\u00e1vel por toda essa mudan\u00e7a repentina, com certeza foi a evolu\u00e7\u00e3o do universo digital<\/a>.<\/p>\n

Tamb\u00e9m \u00e9 importante destacar que um site se tornou o cart\u00e3o de visitas<\/strong> de uma empresa. \u00c9 atrav\u00e9s dele que a sua equipe \u00e9 apresentada, a hist\u00f3ria do seu neg\u00f3cio \u00e9 contada, onde seus valores e objetivos s\u00e3o mostrados. E, principalmente, ser\u00e1 o meio pelo qual todas as solu\u00e7\u00f5es que voc\u00ea oferece<\/strong> chegar\u00e3o at\u00e9 o seu p\u00fablico-alvo.<\/p>\n

Ou seja, atualmente, colocar a sua marca na internet se tornou vital para o seu neg\u00f3cio<\/strong>.<\/p>\n

At\u00e9 aqui, voc\u00ea j\u00e1 deve ter compreendido o quanto \u00e9 indispens\u00e1vel ter um site<\/a>. Mas afinal, quais passos s\u00e3o necess\u00e1rios para a cria\u00e7\u00e3o dele<\/strong>? Quer descobrir? Continue por aqui!<\/p>\n

 <\/p>\n

Para criar sites: sempre comece pelo dom\u00ednio e hospedagem<\/strong><\/h2>\n

Talvez esses sejam os itens que mais aparecem por quem busca criar sites<\/strong>. E n\u00e3o \u00e9 para menos, o dom\u00ednio e a hospedagem s\u00e3o um dos primeiros passos mais importantes <\/strong>para o desenvolvimento de um site.<\/p>\n

A dica \u00e9 que voc\u00ea mesmo fa\u00e7a, para que todos os registros relacionados ao site sejam feitos no seu nome <\/strong>e, assim, sejam evitados grandes surpresas com direitos autorais no futuro, por exemplo.<\/p>\n

 <\/p>\n

Conhe\u00e7a dois caminhos para contratar um dom\u00ednio:<\/h3>\n

Ao criar sites, o ideal \u00e9 que voc\u00ea escolha entre as duas op\u00e7\u00f5es a seguir para a contrata\u00e7\u00e3o de um dom\u00ednio: seja por meio do Registros BR<\/a><\/strong>; ou pela pr\u00f3pria empresa de hospedagem que escolher (Hostgator, Locaweb, Go Daddy etc.).<\/p>\n

Se voc\u00ea n\u00e3o domina o assunto, o mais indicado<\/strong> \u00e9 seguir a segunda op\u00e7\u00e3o<\/strong>, pois dessa forma o dom\u00ednio contratado j\u00e1 estar\u00e1 com todas as configura\u00e7\u00f5es necess\u00e1rias<\/strong>.<\/p>\n

A hospedagem \u00e9 necess\u00e1ria para colocar seu site em funcionamento e tamb\u00e9m para fun\u00e7\u00f5es como a cria\u00e7\u00e3o de e-mails profissionais<\/strong> a partir do seu dom\u00ednio (a mensalidade geralmente fica entre R$ 10 e R$ 30).<\/p>\n

 <\/p>\n

Cuidados fundamentais ao criar sites<\/strong><\/h2>\n

Desenvolver um site vai muito al\u00e9m de apenas coloc\u00e1-lo “no ar” com algumas informa\u00e7\u00f5es. \u00c9 preciso trabalhar diversas frentes para que ele seja funcional, din\u00e2mico, eficaz e com uma identidade que comunique o branding<\/a> da sua marca.<\/p>\n

Por exemplo, aqui na Layer Up<\/strong><\/a>, costumamos sempre focar no UX<\/strong> ou User Experience<\/em>, em tradu\u00e7\u00e3o “experi\u00eancia do consumidor”, porque consideramos essencial atentar-se a todo e qualquer detalhe que possa trazer dificuldades de navega\u00e7\u00e3o em nossa p\u00e1gina.<\/p>\n

Alguns dos fatores mais importantes para gerar uma boa experi\u00eancia em sites, s\u00e3o:<\/p>\n

 <\/p>\n

Layout<\/strong><\/h3>\n

Visualmente o site precisa ser agrad\u00e1vel e transmitir a identidade do seu neg\u00f3cio<\/strong>.<\/p>\n

H\u00e1 empresas cujo conte\u00fado principal s\u00e3o as imagens, como uma produtora de v\u00eddeo, ou um est\u00fadio de fotografia, por exemplo. J\u00e1 em outros casos, o importante \u00e9 ter uma interface simples, f\u00e1cil de ser assimilada e com o conte\u00fado reunido somente na home.<\/p>\n

H\u00e1 como comprar templates<\/em><\/strong> prontos para essa finalidade. Hoje h\u00e1 muitos sites que oferecem layouts<\/em> idealizados para determinados perfis de neg\u00f3cio.<\/p>\n

A\u00ed vai um dica:<\/strong>\u00a0para conferir as possibilidade de temas prontos, voc\u00ea pode acessar sites como o Themeforest<\/a><\/strong>.<\/p>\n

Outro ponto importante tamb\u00e9m \u00e9 que, seja qual for o formato escolhido, \u00e9 interessante que o site tenha otimiza\u00e7\u00f5es de programa\u00e7\u00e3o<\/strong> para que n\u00e3o seja pesado.<\/p>\n

 <\/p>\n

Mas, por que isso \u00e9 importante na hora de criar sites?<\/strong><\/h3>\n

Atualmente os usu\u00e1rios possuem pacotes de dados oferecidos pelas operadoras de telefonia celular, por exemplo, e utilizam bastante o smartphone para acessar a internet. Se o site for pesado, al\u00e9m de acabar com o pacote de dados, o usu\u00e1rio ficar\u00e1 limitado durante a navega\u00e7\u00e3o.<\/p>\n

Al\u00e9m disso, ningu\u00e9m gosta de ficar muito tempo esperando um site carregar, certo?<\/p>\n

 <\/p>\n

Linguagem<\/strong><\/h3>\n

Com quem sua empresa conversa<\/a>? \u00c9 com um gestor de uma empresa de tecnologia, clientes de uma loja virtual de roupas, ou com os pacientes de uma cl\u00ednica veterin\u00e1ria? A linguagem tem que ser acess\u00edvel para o seu p\u00fablico. Voc\u00ea deve conhec\u00ea-lo muito bem para fazer as adapta\u00e7\u00f5es necess\u00e1rias.<\/p>\n

Esse estudo indicar\u00e1 qual \u00e9 a persona<\/a> que voc\u00ea aplicar\u00e1 no conte\u00fado do site, ou seja, quais caracter\u00edsticas sua empresa assumir\u00e1 para conversar com o p\u00fablico-alvo, seja no tom do texto ou na escolha de termos utilizados.<\/p>\n

 <\/p>\n

Site responsivo<\/strong><\/h3>\n

Pense no usu\u00e1rio e estude seu comportamento. Depois disso, molde o desenvolvimento do seu site para melhor atend\u00ea-lo e trazer um aspecto profissional.<\/p>\n

Pensando nisso tamb\u00e9m, vale o alerta: todo site tem que ser responsivo e, assim, ter vers\u00f5es pensadas para mobile<\/em> (smartphones e tablets).<\/p>\n

 <\/p>\n

Como saber se um site \u00e9 responsivo? <\/strong><\/h2>\n

Basta encolher a tela no pr\u00f3prio computador e analisar como os elementos se comportam. Ou analisar se eles podem ser alterados para vers\u00f5es mais compactas, intercalar entre uma tela de computador ou Mobile e, continuar de f\u00e1cil leitura sem desconfigurar: isso j\u00e1 evidencia que o site \u00e9 realmente responsivo.<\/p>\n

 <\/p>\n

SEO e a cria\u00e7\u00e3o de sites<\/strong><\/h3>\n

O famoso SEO<\/a> tem que ser aplicado no seu site para torn\u00e1-lo mais otimizado<\/a> e atrativo ao seu p\u00fablico, por exemplo. Outro ponto, \u00e9 que essa pr\u00e1tica que far\u00e1 a t\u00e3o desejada indexa\u00e7\u00e3o no Google<\/strong>. Ent\u00e3o, \u00e9 preciso fazer uma an\u00e1lise para entender quais s\u00e3o as melhores palavras-chave<\/strong> para seu neg\u00f3cio e inclu\u00ed-las nos textos e t\u00edtulos presentes no seu site.<\/p>\n

 <\/p>\n

A\u00ed vai outra dica<\/strong><\/h3>\n

Se voc\u00ea optar por montar o seu site por meio do WordPress<\/strong>, utilize um plugin<\/em> (programa que permite otimizar recursos para o site<\/em>) chamado Yoast<\/strong><\/a>, que tornar\u00e1 a aplica\u00e7\u00e3o de palavra-chave muito mais f\u00e1cil. Caso optar por outro formato de desenvolvimento, como HTML<\/strong>, saiba que ser\u00e1 necess\u00e1rio aplicar o SEO com c\u00f3digos, ent\u00e3o \u00e9 melhor contar com um profissional de programa\u00e7\u00e3o.<\/p>\n

Mas calma, explicarei melhor sobre WordPress e HTML daqui a pouco. Conhe\u00e7a ent\u00e3o todas as etapas importantes para criar sites<\/strong>.<\/p>\n

 <\/p>\n

Etapas para criar sites de maneira efetiva<\/strong><\/h2>\n

Agora que voc\u00ea conhece os cuidados que precisa tomar para a cria\u00e7\u00e3o de sites, vamos para as etapas.<\/p>\n

 <\/p>\n

1\u00aa etapa – Briefing<\/strong><\/h3>\n

Uma reuni\u00e3o de briefing<\/em> para esclarecer quais objetivos se buscam atingir<\/strong> com a constru\u00e7\u00e3o do site \u00e9 primordial. \u00c9 esse alinhamento que dar\u00e1 um norte para os pr\u00f3ximos dois passos.<\/p>\n

 <\/p>\n

2\u00aa etapa – Site Map<\/strong><\/h3>\n

Com um briefing<\/em> detalhado, \u00e9 poss\u00edvel estruturar um bom Site Map, que \u00e9 a estrutura que lista todos os elementos que estar\u00e3o presentes no site: home, sobre, contato, servi\u00e7os etc. A ag\u00eancia ou freela que estiver respons\u00e1vel por essa etapa se encarregar\u00e1 de organizar esse processo e encaminhar para aprova\u00e7\u00e3o do cliente.<\/p>\n

\"\"<\/p>\n

<\/h3>\n

3\u00aa etapa – Wireframe<\/strong><\/h3>\n

Ap\u00f3s a aprova\u00e7\u00e3o do Site Map, chega a hora de “desenhar” o site. \u00c9 para isso que serve a etapa de Wireframe, um rascunho bruto do layout<\/strong> sugerido. Conclu\u00edda e aprovada essa parte, seguimos para os processos t\u00e9cnicos.<\/p>\n

 <\/p>\n

\"\"<\/p>\n

<\/h3>\n

<\/h3>\n

Tecniqu\u00eas <\/em>da cria\u00e7\u00e3o de um website<\/strong><\/h3>\n

Antes de explicar quais s\u00e3o as possibilidades t\u00e9cnicas na constru\u00e7\u00e3o de um site, vou mostrar aqui as linguagens mais populares no mercado.<\/p>\n

Provavelmente voc\u00ea j\u00e1 ouviu essas siglas e palavras, mas ficava curiosos sobre os significados. Aproveite para matar essa curiosidade agora<\/strong>.<\/p>\n

 <\/p>\n

HTML<\/strong><\/h4>\n

Ao acessar a home de qualquer site, \u00e9 f\u00e1cil identificar blocos de texto, certo? Pois esse \u00e9 o c\u00f3digo HTML<\/strong> em a\u00e7\u00e3o.
\nQuer um exemplo?<\/p>\n

No Facebook, encontramos bot\u00f5es com os dizeres “criar uma publica\u00e7\u00e3o”, ou ainda lemos no topo da p\u00e1gina algo como “pesquisar no Facebook”. Tudo o que for texto, como indiquei aqui, \u00e9 HTML.<\/p>\n

 <\/p>\n

CSS<\/strong><\/h4>\n

Se o HTML \u00e9 refer\u00eancia para texto, o CSS \u00e9 o que dar\u00e1 cor e estilo.<\/p>\n

Barras coloridas, caixas de texto com tamanhos espec\u00edficos, bot\u00f5es estilizados… tudo isso surge no site gra\u00e7as ao c\u00f3digo CSS<\/strong>. No exemplo do Facebook, \u00e9 com o c\u00f3digo CSS que o topo da p\u00e1gina e os demais bot\u00f5es s\u00e3o na cor azul.<\/p>\n

 <\/p>\n

Javascript<\/strong><\/h4>\n

O Javascript nada mais \u00e9 do que uma esp\u00e9cie de anima\u00e7\u00e3o que ocorre sem que seja preciso recarregar uma p\u00e1gina do site.<\/p>\n

Um exemplo simples para descomplicar:<\/p>\n

Vamos supor que voc\u00ea est\u00e1 navegando por um blog de gastronomia e, quando rola a tela, aparece um pop up<\/em> (pequena janela que abre no navegador em cima de determinada p\u00e1gina) com um bot\u00e3o para voc\u00ea se inscrever e receber novidades.<\/p>\n

Essa \u00e9 a a\u00e7\u00e3o do Javascript<\/strong>, pois o pop up aparece e voc\u00ea pode fech\u00e1-lo sem que a p\u00e1gina precise ser recarregada.<\/em><\/p>\n

 <\/p>\n

WordPress<\/strong><\/h4>\n

O WordPress<\/a> \u00e9 uma plataforma de desenvolvimento de site, que atualmente \u00e9 uma das mais f\u00e1ceis de ser administrada.<\/p>\n

Com essa ferramenta, \u00e9 mais f\u00e1cil montar um site, pois n\u00e3o \u00e9 preciso mexer na programa\u00e7\u00e3o. Toda informa\u00e7\u00e3o j\u00e1 \u00e9 puxada automaticamente de um banco de dados.<\/p>\n

 <\/p>\n

Front-end<\/strong><\/h4>\n

O front-end<\/em> \u00e9 justamente como se chama a parte est\u00e1tica do site, formada pelo texto, pela estiliza\u00e7\u00e3o e pelo Javascript.<\/p>\n

 <\/p>\n

Back-end<\/strong><\/h4>\n

O back-end<\/em> atua como se fosse um motor. Ele \u00e9 a segunda parte do desenvolvimento, respons\u00e1vel pelo funcionamento das a\u00e7\u00f5es do site.<\/p>\n

Quando voc\u00ea cria seu texto e insere em qualquer plataforma, por exemplo, o caminho natural \u00e9 clicar em “postar”. Nesse momento, o “motor” ser\u00e1 ativado e o texto ir\u00e1 para um banco de dados. Quando voc\u00ea recarregar a p\u00e1gina em quest\u00e3o, essas informa\u00e7\u00f5es ser\u00e3o puxadas desse banco de dados e aparecer\u00e3o publicadas.<\/p>\n

Esse conjunto de a\u00e7\u00f5es \u00e9 o back-end<\/em>.<\/p>\n

 <\/p>\n

PHP<\/strong><\/h4>\n

Voc\u00ea deve estar se perguntando \u201cqual elemento \u00e9 respons\u00e1vel por carregar as informa\u00e7\u00f5es para o banco de dados durante a a\u00e7\u00e3o do back-end?\u201d.<\/p>\n

Seu racioc\u00ednio est\u00e1 certo. Tem mesmo um item que faz isso. \u00c9 o chamado PHP.<\/p>\n

No momento de “postar”, que comentei aqui em cima, as informa\u00e7\u00f5es v\u00e3o para o banco e s\u00e3o puxadas pelo PHP, o qual inclui esse texto na tela, de forma din\u00e2mica.<\/p>\n

 <\/p>\n

Resumindo…<\/strong><\/h3>\n

H\u00e1 duas formas para se criar sites<\/strong>:<\/p>\n