Desenvolvimento Web & Design 101

web_development_101Deseja conhecer os conceitos básicos de Desenvolvimento e Design Web? Impressionante…


Mas há um problema com essa linha de pensamento, ou várias delas na verdade …

  • Qual é o objetivo de ter um website? Todo mundo realmente precisa de um?
  • Se sim, como você cria um site de qualidade? Ou, em outras palavras, como você aprende o desenvolvimento e o design básicos da Web que permitiriam a você mesmo criar esse site de qualidade?
  • Mais importante, você pode criar um site de qualidade em sua PRIMEIRA tentativa? Ou você precisa de anos de experiência atrás de você, antes de poder esperar qualquer resultado acima do terrível?

Vamos responder tudo isso neste guia para iniciantes em desenvolvimento e design da web.

[Alerta de spoiler. Sim, você pode criar um site de qualidade em sua primeira tentativa.]

O que é coberto neste guia?

Ok, primeiro, ficamos felizes por você continuar lendo e por ter decidido experimentar o desenvolvimento da Web! Aqui está como vai acontecer:

Os capítulos são apresentados de uma maneira muito simples, com o conteúdo principal à esquerda e os itens acionáveis ​​à direita. Igual a:

Introdução do guia: Capítulo 1

Agora, como proceder:

  • Enquanto estiver na sua primeira leitura: Recomendamos que você leia a coisa toda de cima para baixo. Isso lhe dará uma boa visão de 10.000 pés do tópico e ajudará você a entender as partes mais importantes dele. Ele também fornecerá ferramentas e métodos básicos sobre como lidar com tarefas individuais.
  • Enquanto estiver na sua segunda leitura e: Use o sumário e pule para a parte que mais lhe interessa. Além disso, sinta-se à vontade para usar os botões de compartilhamento ao lado de cada capítulo e envie os links para você ou para seus amigos / seguidores que possam estar interessados.

Pronto? Vamos ao capítulo 1.

Para quem é este guia?

Se você deseja aprender o desenvolvimento e o design básicos da Web, este guia é para você. Qualquer que seja sua motivação.

Além disso, você não precisa de nenhum conhecimento técnico prévio para começar (além das “habilidades da Web” básicas). O objetivo deste guia é ser uma espécie de curso “101” para todos os interessados ​​em criar sites e aprender o desenvolvimento da web.

Aqui estão alguns motivos comuns pelos quais você pode estar interessado:

  • 1 1. Você precisa de um site para sua empresa (e você deseja ver se pode construí-lo você mesmo).
  • 2. Você quer APRENDER no desenvolvimento da Web por paixão ou interesse temporário (nada de ruim nisso).
  • 3. Você precisa de um site para a escola.
  • 4. Você está ajudando um amigo ou membro da família a colocar o site on-line.

A principal idéia que nos guiará

Isso é importante! E não fique com raiva de nós, se você é um desenvolvedor avançado da Web, mas a idéia principal que nos guiará por todo esse recurso de desenvolvimento e design da Web é:

“A abordagem de menor resistência”

Aqui estão os três princípios da abordagem de menor resistência:

  • Estavam não quebrar as coisas em um nível molecular. I.e. não vamos entender como funcionam as linguagens de programação ou como funciona um servidor da web.
  • Estavam não reinventar a roda. I.e. se alguém já resolveu um determinado problema e disponibilizou a solução, vamos usá-lo.
  • Estavam tornando uma solução simples incrível, em vez de uma solução complicada e aparentemente mais funcional de buggy e não compreensível.

CAPÍTULO 1: O plano

Sua ideia, tipo de site, nome de domínio e hospedagem.

Antes de configurar um site, você precisará de um plano

Por mais irônico que possa parecer – o show dos anos 80 “The A-Team” nos ensinou, um bom plano é chave para o sucesso.

Se você já tem um site há algum tempo, certamente está empolgado com a única idéia de finalmente divulgá-lo para outras pessoas lerem e navegarem.

Você quer que seu site seja incrível. Você provavelmente sabe como vai ser até certo ponto. Ou talvez você tenha o logotipo perfeito pronto.

Mas…

Não é onde você deve começar. Se você começar com expectativas pré-estabelecidas, isso só o levará a muita confusão ao longo do caminho e a um resultado insignificante no final.

Em vez disso, pense no seguinte:

  1. Separe-se de quaisquer objetivos técnicos que possa ter. Como, por exemplo, o objetivo de aprender tecnologias de sites ou determinados softwares de sites.
  2. Faça a si mesmo uma pergunta principal: “Para que eu preciso do site?”

Não é sobre você, é sobre o objetivo do site.

Perguntas que você precisa fazer antes de configurar seu site

  1. O que o site pretende alcançar?
  2. Qual será a principal “coisa” apresentada através do site? (por exemplo, sua empresa, um produto, suas postagens no blog etc.)
  3. O site terá algum objetivo especial? (por exemplo, uma loja de comércio eletrônico, o portfólio de um fotógrafo etc.)
  4. Quem é o público-alvo?
  5. Por que eles estão interessados ​​no tópico do site?
  6. Que dor o site resolve para os membros da audiência individual?

Sobre essas três últimas perguntas, vamos conversar com o público por um minuto …

Existem 2 regras principais para a criação de sites. Aqui está a regra nº 1:

 O leitor / visitante vem em primeiro lugar.Eles são a principal pessoa que seu site deve agradar.

De certa forma, seu site não é seu. É deles.

(Regra nº 2, discutiremos em um minuto.)

Esquecer-se desta orientação simples pode levá-lo a um caminho completamente errado, até o ponto em que você se encontra com um site que é confuso para todos os que estão ao seu redor, exceto você.

“Ugh! As pessoas simplesmente não entendem do que trata este site. Como eles podem ser tão ignorantes ?! ” – você acaba pensando. Mas, como se vê, o ignorante era você.

A única maneira de evitar isso é criar seu site com o leitor em mente desde o início.

Então … pegue esse pedaço de papel e responda a todas as perguntas acima.

Quando terminar, você terá o seu conjunto definitivo de diretrizes nas quais você irá agir enquanto estiver trabalhando no seu site..

Essas respostas serão uma ferramenta excepcionalmente poderosa à medida que você avança. Você poderá retornar a eles sempre que tiver uma decisão sobre seu website.

Você deveria fazer * isso * ou * aquilo *? Vá para a folha de respostas e descubra. Você deve usar uma barra lateral larga ou estreita? Vá para as respostas, descubra qual é mais provável que ressoe com o leitor alvo. E etc.

Nomes de domínio e hospedagem na web

Se você deseja ser proprietário de um site, precisa de um nome de domínio e um host da web.

Bem, tecnicamente, você pode criar um site de teste no seu próprio computador e executá-lo em um servidor da web local (também instalado como software no seu computador), mas isso não seria uma solução utilizável para 99% dos casos, então vamos pular.

Então, um host e um domínio …

A má notícia aqui é que ambos custam dinheiro.

As boas notícias … não é tanto dinheiro no grande esquema das coisas. Além disso, à medida que você aprende, você pode até lançar vários sites pequenos em um único nome de domínio e em um único host.

Mas vamos começar no começo.

Hosts da Web:

  • Em termos simples, um host é onde o seu site fica e onde os visitantes podem encontrá-lo. De certa forma, os hosts da web para sites são como apartamentos para humanos. Sob os bastidores, os hosts da web são empresas que alugam seus servidores em troca de dinheiro (… pequenos apartamentos para seus sites).
  • Para começar, um plano padrão de hospedagem compartilhada servirá. Você pode obtê-los para qualquer coisa a partir de US $ 3 / mês. Aqui está uma boa comparação de hosts da web populares. Confira e decida qual dessas empresas parece adequada para você. No entanto, nossas recomendações são para SiteGround, A2 Hosting e Dreamhost.

Domínios:

  • Se um host da web é um apartamento, um domínio é o endereço desse apartamento. Por exemplo, o domínio deste site é hostingfacts.com.
  • A maneira de começar é escolher o nome de domínio desejado e comprá-lo em um registrador. Aqui está um guia completo sobre como comprar um nome de domínio e uma lista de geradores de nomes de domínio.

 

Sugestões e dicas para escolher um nome de domínio

Ok, então, ir a algum registrador de domínio e realmente comprar o domínio é uma coisa, mas como você escolhe o nome de domínio certo?

Existem algumas escolas:

  • Nomes de domínio com marca. Esses são domínios compostos por palavras inexistentes. Pense, coisas como Google.com ou Yahoo.com. Antes dessas empresas aparecerem, essas palavras não significavam nada. A vantagem de um nome de domínio com marca é que ele é … bem, altamente brandável, memorável e é fácil distinguir seu site dos outros.
  • Nomes baseados em palavras-chave. Essas são compostas por palavras existentes, inseridas em uma sequência que descreve o objetivo do site. Pense, coisas como Pizza.com ou StartBloggingOnline.com. Com um nome de domínio como esse, seus visitantes poderão prever com precisão o tipo de site que estão prestes a visitar. A desvantagem é que esses domínios geralmente são menos brandable.
  • Nomes combinados. Esses são domínios de marca e domínios baseados em palavras-chave juntos. Pense, Facebook.com ou Copyblogger.com. Esses nomes sugerem “parte” da natureza do site para o visitante, mas ainda são altamente brandáveis.

Algumas diretrizes gerais, independentemente do tipo de domínio escolhido:

  • Facilite a memorização do domínio.
  • Seja breve e simples. Quanto mais longo o domínio, mais confuso é.
  • Obtenha um arquivo .com (se possível). O .com é o principal “domínio de nível superior” disponível. Não se contente com mais nada.
  • Tente evitar hífens. Obtenha seu nome em forma de blob único, como “cakerecipes.com” em vez de “cake-recipes.com”

Coisas a serem preparadas após este capítulo:

  • Um nome de domínio.
  • Um host da web.
  • Sua folha de respostas – os objetivos do seu site e como ele servirá ao público.

Precisa de mais ajuda? Aqui está uma leitura mais aprofundada para você:

  • Por que hospedagem compartilhada? Principais tipos de hosts comparados
  • 10 coisas que tornam um host bom
  • 12 regras para escolher o nome de domínio certo
  • Um guia abrangente de planejamento de sites

CAPÍTULO 2: Projeto e wireframing

Pegue um papel e uma caneta e raspe junto com a estrutura do seu site

Ok, vamos entrar na fase de design.

Para começar, aqui está a ética do trabalho que vamos seguir aqui:

  • Estamos usando caneta e papel o máximo de tempo possível e só então mudamos para o computador. Acredite, cada minuto gasto trabalhando em seu projeto no papel é economizado em uma hora quando você começa a ajustar as coisas no computador.
  • Estamos fazendo um trabalho iterativo … Verificamos os resultados »melhoramos» verificamos os resultados »repetimos até terminar.

No capítulo 1, mencionamos algo que chamamos de regra nº 1 de criação de sites. Agora é a hora da regra 2:

Regra nº 2 da criação de sites:

Pense primeiro no conteúdo.

Conteúdo é o que importa em um site. Não é o design. Conteúdo.

As pessoas vêm pelo conteúdo. Eles não vêm para o design. O design é apenas um veículo para entregar o conteúdo.

Nunca comece com a aparência do seu site. Comece com o conteúdo. Conteúdo. Conteúdo. Conteúdo.

Então, o que queremos dizer com “conteúdo”? Em resumo, é o que as pessoas desejam obter do seu site. Postagens de blog, produtos na loja, tópicos do fórum se você estiver criando um fórum, artigos de notícias, sua oferta comercial e etc..

“Realmente? A aparência realmente não importa? ” – Você pergunta.

Em vez de acabarmos com isso, confira esta página:

Site simples

Esta simples página da web é de longe a melhor explicação sobre o que é design e para que finalidade serve on-line.

Então lembre-se, o conteúdo primeiro!

Conteúdo e estrutura do site

Ok, então, como o conteúdo é a coisa mais importante, você precisa ter (a maior parte) pronto antes. Ou pelo menos, você precisa ter uma boa idéia de quanto conteúdo haverá e de que forma.

Nota. Sabemos que essa parte pode ser difícil. O início do conteúdo parece pouco natural para o design do site, mas é realmente a melhor maneira de obter um resultado excelente no final. Então pense no conteúdo que você deseja compartilhar com o leitor e como deseja apresentá-lo..

A próxima etapa é selecionar os tipos individuais de páginas que você precisará (como uma página inicial, uma página de produto, uma página de categoria, uma página sobre, uma página de contato, a página principal de vendas, uma página de entrada de newsletter, lista principal do blog, postagens individuais, talvez uma loja e o que mais parecer necessário).

Pense, qual é a maneira mais eficaz de organizar seu conteúdo no site?

Faça tudo isso no papel. Provavelmente será mais fácil e rápido para você do que aprender algum software de desenho de gráfico no local.

Exemplo:

estrutura de conteúdo

Scratch Together Wireframe

Um wireframe no design da web é simplesmente um esquema ou blueprint da página – um guia visual que representa a estrutura de um site (a Wikipedia nos diz).

Os wireframes são incríveis! Nós os usamos para a maioria das coisas que fazemos que devem aparecer on-line. Por exemplo, aqui está uma estrutura de arame para este mesmo guia:

Risque um wireframe

Como você pode ver, novamente, isso está no papel. Embora existam vários aplicativos para esse tipo de trabalho, na verdade não recomendamos o uso deles. Eles podem ser ótimos para designers profissionais, mas uma pessoa iniciante ou intermediária perderá tempo aprendendo-os e, no final, não obterá muita melhoria em relação ao que obteria com papel e caneta.

Então, como montar a estrutura?

Bem, existem duas abordagens se você é iniciante:

  • Siga o fluxo se estiver se sentindo forte e apenas se afaste (nem sempre é uma solução perfeita).
  • Obtenha conhecimento rápido sobre como montar a estrutura corretamente (geralmente melhor).

Para o último, vá aqui – um ótimo guia.

Crie uma estrutura de arame de todos os tipos importantes de páginas que você listou na etapa anterior.

Coisas a serem preparadas após este capítulo:

  • A maior parte do conteúdo do site, ou pelo menos a maior parte do previsto (por exemplo, se você confia no conteúdo gerado pelo usuário, é difícil obtê-lo com antecedência).
  • Estrutura de conteúdo do seu site preparada como um gráfico.
  • Uma estrutura de arame dos tipos individuais de páginas que você precisará.

Leitura adicional:

  • 9 etapas para planejar o conteúdo do site
  • Novo no web design? Começa aqui.

CAPÍTULO 3: UX e interface do usuário

Nunca subestime a importância da experiência do usuário e da interface do usuário

Experiência do usuário e interface do usuário.

O WebDesignerDepot nos dá uma definição bastante poética dos dois:

A interface do usuário é a sela, os estribos e os reinos.

UX é o sentimento que você consegue andar a cavalo e amarrar seu gado.

Para uma definição mais prática:

  • UI é o que o usuário vê quando olha para o seu site.
  • UX é como eles se sentem sobre isso.

O par, e quão bem ele é executado, basicamente define a utilidade do seu site para o usuário final / visitante.

O design da interface do usuário e da interface do usuário são grandes tópicos em si mesmos, e há muitos elementos menores que desempenham um papel no resultado final.

Em resumo, há muito a aprender se você está apenas começando sua jornada.

Portanto, em vez de tentarmos criar um curso completo de design de interface do usuário e de interface do usuário aqui, vamos apenas apontar alguns elementos importantes e, em seguida, enviá-lo para outro lugar para ler mais.

Objetivos do usuário

O UX tem a ver com objetivos do usuário … Não com tantos objetivos … Objetivos do usuário.

Ok, o que isso significa? Antes de tudo, volte ao objetivo do seu site – o que você trabalhou nos capítulos anteriores. O motivo pelo qual você está construindo o site e como ele ajuda o usuário / visitante.

Como isso se traduz na meta do visitante? … Qual é a única coisa que o visitante deseja obter ou alcançar quando chega ao seu site? Esse é o objetivo deles.

Quão fáceis são essas metas para alcançar?

Em seguida, concentre-se na seguinte pergunta:

  • O visitante pode alcançar seu objetivo facilmente? – Eles conseguem acessar as informações exatas que obtiveram de maneira simples?

Para responder a isso, você precisa voltar ao seu wireframe, sua estrutura de conteúdo e verificar as coisas.

Verifique se a estrutura de conteúdo e as páginas que você criou fazem sentido do ponto de vista de um usuário. Certifique-se de que eles possam navegar livremente entre as páginas importantes e de maneira não confusa.

Basicamente, aqui, garantimos que o site agregue valor a seus visitantes.

Difícil descobrir tudo sozinho, não é??

É altamente recomendável que você verifique os recursos listados na seção “leituras adicionais” deste capítulo … mas também pode tentar “um hack”, por assim dizer.

Ou seja, pense no que o frustra quando você visita sites semelhantes ao que você deseja criar? Talvez haja algumas informações realmente difíceis de acessar ou algum elemento da interface que torne o site confuso.

Faça anotações, tire conclusões, não cometa os mesmos erros com seu site.

Usando a emoção como uma ferramenta

Ao trabalhar na interface do usuário e na interface do usuário do seu site, o que você está basicamente buscando é invocar uma certa emoção em seu visitante.

Você quer que eles se sintam de uma certa maneira, o que os convencerá a agir de uma certa maneira. Assim, tornar seu site realmente útil.

Para trabalhar a parte emocional do trabalho, uma das melhores ferramentas é a cor.

As cores têm significados diferentes em diferentes culturas. Compreender essas diferenças pode facilitar muito o seu trabalho. Aqui está uma boa dica.

Quando você estiver de acordo com as cores que deseja (possivelmente) usar, aqui estão algumas diretrizes gerais ao trabalhar com cores:

  • Escolha um esquema de cores principal que consiste em duas cores que combinam bem. Aqui está um ótimo gerador de esquema de cores.
  • Escolha uma cor que seja sua cor de destaque – a cor que será usada para botões de ação, botões de compra e etc. Basicamente, qualquer coisa que precise da atenção do usuário.

Tipografia

Em muitos casos, tipografia é onde você ganha (ou perde) o jogo de criação de sites.

É muito fácil esquecer completamente a tipografia e usar Arial para tudo.

Não recomendado.

Hoje em dia, trabalhar com fontes personalizadas é super fácil, e você nem precisa fazer nada técnico para ativar essas fontes personalizadas em seu site..

A tipografia grande e grandiosa está muito na moda hoje em dia e também facilita muito o trabalho de um designer – especialmente o trabalho de um designer iniciante -.

Confira este site, por exemplo:

bonobos

Notou alguma coisa? Sim, as fontes são enormes e ficam ótimas!

Veja como trabalhar nisso:

  • Em geral, todo design de site precisa de dois tipos de texto: cabeçalhos e parágrafos. Na maioria dos casos, apenas uma fonte por cada fará.
  • Vá para o Google Fonts – a própria biblioteca de fontes gratuitas do Google que você pode usar no seu site – e procure uma fonte de título que você realmente goste.
  • Em seguida, pegue o nome dessa fonte e procure-a no Font Pair – é uma biblioteca de pares de fontes pré-fabricados que combinam bem.
  • Escolha um par que pareça incrível.
  • Anote os nomes das duas fontes, você precisará delas mais tarde.

Fazer dessa maneira acelerará seu processo e ainda lhe dará um ótimo resultado.

Por exemplo, encontramos uma fonte chamada Bree Serif no Google Fonts que gostamos bastante:

Bree-Serif

Depois, levamos para o Font Pair, e o site sugeriu que Bree Serif funcionasse bem com o Open Sans. Perfeito:

Bree-Serif-open-sans

A estrutura final

Finalmente, o último passo!

O objetivo deste capítulo é aterrar em um layout / estrutura final que você usará para o seu site. Neste ponto, você deve ter certeza sobre o que deseja fazer com seu design e interface do usuário.

Coisas a serem preparadas após este capítulo:

  • Suas metas de usuário listadas claramente.
  • Seu wireframe verificou duas vezes para garantir que essas metas não sejam confusas.
  • O esquema de cores selecionado.
  • A tipografia descobriu.
  • Todo o layout / estrutura / organização do site.

Leitura adicional: 

  • Revista UX
  • UX Booth
  • A psicologia e a emoção por trás das cores no web design
  • O que é design de experiência do usuário? Visão geral, ferramentas e recursos
  • Definindo metas de negócios inteligentes para um site
  • 8 regras para criar tipografia eficaz

CAPÍTULO 4: WordPress, HTML ou modelos?

Decida qual rota seguir – sistemas de gerenciamento de conteúdo ou codifique-o do zero

Aqui é onde começa o trabalho real, com as mãos sujas e oculto!

Essa também é provavelmente a parte mais assustadora do processo (admita!).

Pela primeira vez, é o momento certo de deixar papel e caneta de lado e começar a trabalhar com algum software.

E logo depois do portão, há uma tonelada de perguntas …

  • Devo aprender HTML?
  • E o CSS?
  • Os modelos de sites HTML prontos podem fazer o truque para mim?
  • Preciso aprender uma linguagem de programação como PHP?
  • Ouvi dizer que o WordPress é a maneira de criar um site hoje em dia.
  • Vi o anúncio do Squarespace Super Bowl. O que há com isso?
  • Como é essa coisa chamada Joomla? Ou Drupal?
  • e assim por diante.

A resposta para todos é sim.

Como sim, você pode fazer uma ou todas essas coisas, e cabe a você decidir qual caminho escolher.

O que estamos tentando dizer é que não há a melhor abordagem aqui. Tudo depende de quão envolvido você deseja se envolver no desenvolvimento da Web, de quanto você deseja aprender sobre o básico da construção de sites, a rapidez com que você precisa de um site de qualidade e o quão personalizável você deseja que seja depois..

Então, aqui está como vamos proceder a partir deste capítulo. Primeiro, escolha a persona que melhor define você:

  • a) Quero aprender sobre o que é desenvolvimento web, todos os conceitos básicos, todo o funcionamento interno de um site e todos os mecanismos que fazem um site funcionar.
  • b) Quero aprender a usar um construtor de sites confiável que lidará com a maior parte do trabalho pesado para mim.
  • c) Eu não sei o que fazer Eu só quero um site que eu possa construir e que funcione corretamente.

Respondeu a)? Vá para o Capítulo 5.

Respondida b)? Vá para o Capítulo 6.

Respondido c)? Fique à vontade para conferir este artigo e depois voltar (ele deve ajudá-lo a selecionar o caminho perfeito):

  • As 8 melhores plataformas de criação de blogs e criação de sites analisadas … Cada plataforma é descrita juntamente com seus prós e contras, e o recurso também sugere a melhor opção disponível (Wix ou SB) para suas necessidades específicas.

Você leu isso? Ótimo! Então, qual das personas acima descreve melhor você – a ou B)?

As ferramentas que podem ser úteis ao longo do caminho:

  • Placa de vídeo: Paint.NET, Gimp, Pixlr.
  • Escrita de código: Notepad ++, TextWrangler, SublimeText.
  • Gerenciamento de trabalho: Trello.
  • Design: esquemas de cores, fontes do Google, as ferramentas daqui.
  • Fotografia: Unsplash, AllTheFreeStock

CAPÍTULO 5: Introdução ao HTML, CSS & Javascript

Como os sites são uma realidade interna

Neste capítulo, mostraremos os princípios básicos do desenvolvimento da Web, explicaremos os termos mais importantes e enviaremos você a alguns recursos específicos, nos quais você poderá aprimorar seus conhecimentos e habilidades..

HTML

HTML é a linguagem dos sites. Toda página da Web é criada ou convertida em HTML em algum momento.

Por exemplo, para ver a estrutura HTML deste guia que você está lendo aqui, basta pressionar “Ctrl + U” no teclado.

HTML define todos os blocos que você vê em uma página da web. No final do dia, para exibir qualquer coisa em uma página da web, ele precisa ser convertido em HTML.

Para aprender HTML com eficiência, recomendamos que você se inscreva em um dos cursos (gratuitos ou pagos) disponíveis na Web. Alguns dos melhores podem ser encontrados na Codeacademy ou na Treehouse.

Por exemplo, aqui está uma seção específica da Codeacademy sobre HTML e CSS.

Página inicial do CodeCademy

Portanto, essa é a abordagem abrangente para HTML.

CSS

CSS – para ignorar os detalhes técnicos chatos – é responsável por estilizar tudo o que é visível em uma página da web.

O CSS pega as tags HTML e, em seguida, estrutura e adiciona estilo a elas. Coisas como: texto em negrito, ajustes de cores, sombras, layouts e até animações, agora são feitas principalmente com CSS.

Para uma melhor compreensão de como isso funciona exatamente, passe para este curso rápido na Codeacademy.

Para um aprendizado mais aprofundado, verifique também as seções CSS na Codeacademy ou na Treehouse.

JavaScript, jQuery, Bootstrap, etc.

JavaScript é uma linguagem de programação que permite introduzir algumas ações dinâmicas no seu site. Por exemplo, você pode validar formulários da Web ou interagir com o usuário de maneira mais simplificada, sem precisar recarregar a página em que está. Aqui está um bom tutorial do w3schools.

Tendo isso em mente, o jQuery é uma biblioteca JavaScript que permite criar coisas avançadas com menos codificação. Muito útil para um desenvolvedor web. Saiba mais aqui.

Finalmente, o Bootstrap é uma invenção muito interessante. Originalmente introduzido pelo Twitter, é basicamente um ambiente de front-end que acelera o processo de construção de um site, fornecendo a maioria dos elementos comuns do site já pré-criados. Parece complicado, não é??

Mas não é. Basta verificar este curso inicial na Codeacademy (a propósito, foi assim que aprendemos o Bootstrap originalmente).

Coisas a serem preparadas após este capítulo:

  • Basicamente, o primeiro rascunho do seu site HTML / CSS foi totalmente construído. A partir daí, você pode começar a iterar e melhorar o resultado final.

CAPÍTULO 6: Plataformas de criação de sites

Configurando seu primeiro site? Experimente plataformas gratuitas de sites como WordPress, Joomla ou Drupal

Capítulo 6: Plataformas de criação de sites

  • SquareSpace
  • WordPress
  • Joomla & Drupal

Existem mais construtores de sites por aí do que você pode agitar. (Se você é do tipo de pessoa que sacode as coisas.)

Ok, brincadeiras à parte.

Claramente, se você não deseja aprender a codificar as coisas manualmente, elas certamente são várias soluções que podem ajudá-lo.

Nota. Lembre-se de que tudo o que discutimos nos capítulos 1-4 ainda se aplica aqui. Mesmo que você opte por uma solução de criação de sites que seja prática, você ainda precisa ter cuidado para tornar o produto final amigável aos usuários e em sintonia com os objetivos de todos. Essas ferramentas de criação de sites são exatamente isso … ferramentas.

Começando pelos mais fáceis de entender:

SquareSpace

A única plataforma de site que anuncia durante o Super Bowl.

Em suma, uma solução muito útil que pode ser usada por qualquer pessoa. Nenhuma habilidade prévia necessária.

Ele permite que você crie sites clássicos, blogs e até lojas de comércio eletrônico, até escrevemos uma resenha sobre eles. A interface e todo o processo de uso são muito fáceis de entender, além do pessoal do Squarespace fornecer muitos tutoriais interessantes. Confira aqui.

WordPress

Honestamente, nós amamos o WordPress.

Na maioria das vezes, é a plataforma perfeita para criar um site. Possui o equilíbrio perfeito entre complexidade e facilidade de uso, e é basicamente infinitamente personalizável.

Animação WordPress

Além disso, atualmente é a plataforma de site mais popular de todas. Como compartilhado pelo criador do WordPress – Matt Mullenweg – o WordPress agora alimenta 25% de toda a Internet. Todas essas pessoas podem estar erradas?

Ok, para começar o WordPress, você basicamente só precisa do seu domínio e hospedagem. O próprio software WordPress é totalmente gratuito.

Para começar, sinta-se à vontade para seguir um destes caminhos:

a) “O caminho de início rápido”

  • Acesse aqui para aprender a maneira simplificada de instalar o WordPress e iniciar seu site em uma tarde.
  • Escolha um tema gratuito no diretório oficial – verifique se ele está em sintonia com as metas do seu site e se o layout / design não está longe da estrutura desejada (você o ajustará um pouco).
    • Verifique estes dois recursos para aprender como personalizar um tema existente.
    • Como alternativa, você pode escolher um tema premium multiuso que pode ser ajustado por meio de uma interface de usuário prática (sem necessidade de codificação). O tema X é um bom exemplo disso.
  • Instale alguns dos plugins mais populares e melhores para obter recursos extras.

b) “O caminho aprofundado”

  • Comece aprendendo o WordPress por meio de um curso on-line. Treehouse oferece uma incrível.
  • Escolha o seu tema e plug-ins da mesma forma que acima. Como alternativa, crie seu próprio tema a partir do zero.

No final, o WordPress é provavelmente a plataforma de site mais versátil do mercado. Com ele, você pode criar praticamente qualquer tipo de site, não apenas blogs ou sites de negócios simples. Aqui está uma lista de 47 (!) Maneiras diferentes de usar o WordPress, apenas para você pensar.

Joomla e Drupal

Embora ligeiramente diferentes um do outro, Joomla e Drupal são excelentes sistemas de gerenciamento de conteúdo para projetos web mais avançados.

Eles não são tão fortes em termos de design, mas são altamente personalizáveis ​​e capazes de lidar com qualquer tipo de site que você possa ter no plano.

Às vezes, dependendo da complexidade do seu projeto, eles podem exigir muito mais tempo para dominar e muito mais esforço para isso..

Para um treinamento mais aprofundado, existem cursos incríveis no Lynda.com, tanto para o Joomla quanto para o Drupal.

Coisas a serem preparadas após este capítulo:

  • O primeiro rascunho do seu site completamente construído, não importa se você decidiu usar o WordPress ou alguma outra plataforma.
  • Verifique se está em sintonia com suas metas iniciais, o público-alvo e se oferece um bom UX.

CAPÍTULO 7: Design responsivo móvel

Mais de 60% das pessoas usam celulares e tablets para navegar na web

A capacidade de resposta móvel agora é um aspecto muito importante da criação de sites, provavelmente mais do que nunca..

Eis a questão de toda a questão:

Basicamente, agora, há mais pessoas usando dispositivos móveis para acessar a Web do que nunca. De fato, estima-se que agora haja mais usuários de internet móvel do que usuários de internet de desktop (75,1% vs 52,7%).

Mas tem um problema.

Nem todo design de site será otimizado para ser visualizado em dispositivos móveis imediatamente.

Alguns problemas comuns incluem:

  • as fontes são muito pequenas,
  • o layout em si não está se ajustando a uma tela menor,
  • ou a tecnologia usada para criar o site não está disponível no celular.

É aqui que a idéia de capacidade de resposta móvel entra em jogo.

Um site responsivo responde ao ambiente em que está sendo visualizado. Se for um computador de mesa, o site é renderizado de uma certa maneira. Se é um celular, é processado de outra maneira.

Aqui está uma explicação melhor: o que diabos é responsivo Web Design?

Portanto, o que você deve fazer agora é verificar e garantir que seu site funcione em dispositivos móveis. Use seus próprios dispositivos para verificar isso, mas também experimente o teste móvel do Google ou acesse uma ferramenta como o Responsive Design Tester.

Se houver problemas, você precisará corrigi-los.

Algumas soluções:

  • Responsive Web Design – o como fazer
  • Como tornar o site responsivo em cerca de 15 minutos

CAPÍTULO 8: Reunindo tudo

Você sabe o básico, agora é a sua vez

Espere, estamos quase lá!

Este é o último capítulo da nossa longa jornada.

Neste ponto, você deve ter seu primeiro site criado … Seja com WordPress, HTML / CSS criado à mão, algum construtor de sites ou qualquer outra ferramenta que você selecionou para o trabalho.

Em suma, parabéns! Mas ainda há algumas coisas que vale a pena fazer:

  • Verifique as coisas discutidas nos capítulos 1 e 2. Verifique se os objetivos realmente funcionam para o usuário final e se o site não é confuso.
  • Valide sua estrutura de código através do serviço de validação de marcação do W3C.
  • Verifique se não há problemas de segurança no site. Use o scanner da Sucuri para isso.
  • Obtenha feedback da comunidade. Veja o que as outras pessoas pensam do seu trabalho. Os fóruns no Sitepoint podem ser bons para isso.

Se essa é sua primeira leitura deste recurso, recomendamos que você volte a ele algumas vezes e trate-o como um arquivo de referência para sua educação continuada.

Como dissemos no início, fique à vontade para usar o sumário e navegar de capítulo para capítulo e de recurso a recurso, como achar melhor.

Por fim, estamos curiosos … qual é o seu maior desafio quando se trata de criação de sites, desenvolvimento da Web ou design? Por favor, compartilhe nos comentários ou via Twitter. Somos todos ouvidos!

Obrigado pela leitura, você é incrível!

  • Total116
  • Facebook116
  • Twitter0
Jeffrey Wilson Administrator
Sorry! The Author has not filled his profile.
follow me

About the author

Adblock
detector