<?xml version="1.0" encoding="UTF-8"?><rss version="2.0"
	xmlns:content="http://purl.org/rss/1.0/modules/content/"
	xmlns:wfw="http://wellformedweb.org/CommentAPI/"
	xmlns:dc="http://purl.org/dc/elements/1.1/"
	xmlns:atom="http://www.w3.org/2005/Atom"
	xmlns:sy="http://purl.org/rss/1.0/modules/syndication/"
	xmlns:slash="http://purl.org/rss/1.0/modules/slash/"
	>

<channel>
	<title>Arquivo de Desenvolvimento Web - AGT Online</title>
	<atom:link href="https://agtonline.dev/category/desenvolvimento-web/feed/" rel="self" type="application/rss+xml" />
	<link>https://agtonline.dev/category/desenvolvimento-web/</link>
	<description></description>
	<lastBuildDate>Wed, 08 Mar 2023 17:39:43 +0000</lastBuildDate>
	<language>pt-BR</language>
	<sy:updatePeriod>
	hourly	</sy:updatePeriod>
	<sy:updateFrequency>
	1	</sy:updateFrequency>
	<generator>https://wordpress.org/?v=6.9.4</generator>
	<item>
		<title>As 10 etapas de criação de um site</title>
		<link>https://agtonline.dev/as-10-etapas-de-criacao-de-um-site/</link>
		
		<dc:creator><![CDATA[adm_agt_@]]></dc:creator>
		<pubDate>Wed, 08 Mar 2023 14:52:53 +0000</pubDate>
				<category><![CDATA[Criação de Sites]]></category>
		<category><![CDATA[Desenvolvimento Web]]></category>
		<guid isPermaLink="false">https://agtonline.dev/?p=9242</guid>

					<description><![CDATA[<p>Confira abaixo as 10 etapas da criação de um site: 1. Preenchimento do briefing 2....</p>
<p>O post <a href="https://agtonline.dev/as-10-etapas-de-criacao-de-um-site/">As 10 etapas de criação de um site</a> apareceu primeiro em <a href="https://agtonline.dev">AGT Online</a>.</p>
]]></description>
										<content:encoded><![CDATA[<h2>Confira abaixo as 10 etapas da criação de um site:</h2>
<ul class="etapas-blog">
<li><a href="#preenchimento-de-briefing">1. Preenchimento do briefing</a></li>
<li><a href="#envio-de-orcamento">2. Envio do orçamento</a></li>
<li><a href="#aprovacao-de-orcamento">3. Aprovação do orçamento</a></li>
<li><a href="#esboco-do-site">4. Esboço do site: wireframe e layouts</a></li>
<li><a href="#aprovacao-do-layout">5. Aprovação do layout</a></li>
<li><a href="#envio-do-conteudo">6. Envio do conteúdo</a></li>
<li><a href="#desenvolvimento-dos-codigos">7. Desenvolvimento dos códigos</a></li>
<li><a href="#validacao">8. Validação</a></li>
<li><a href="#aprovacao-final">9. Aprovação final</a></li>
<li><a href="#publicacao">10. Publicação (Go Live)</a></li>
</ul>
<p>A maioria dos clientes interessados em um novo site costuma me perguntar como é o <strong>processo de criação</strong> e <strong>quanto tempo leva</strong> para ficar pronto. O processo é simples de explicar. Já o tempo para conclusão do site vai depender da equipe e do tamanho do projeto.</p>
<p>Montei um resumo das etapas baseado no meu fluxo de trabalho e no infográfico do John Furness, designer e fundador da <a href="https://simplesquare.com/" target="_blank" rel="noopener noreferrer">Simple Square</a>. Nesse infográfico, John Furness considerou o tipo de envolvimento, qual a importância do evento e quem vai executar a tarefa (designer ou cliente).</p>
<p>No meu infográfico, mantive a divisão de tarefas mas preferi simplificar as etapas facilitando o entendimento do processo. A partir da reunião inicial temos:</p>
<p><img fetchpriority="high" decoding="async" class="alignnone wp-image-9246 size-full" src="https://agtonline.dev/wp-content/uploads/2023/03/infografico-processo-de-criacao-de-um-site.jpg" alt="Processo de Criação de Site - Resumo de Etapas da Criação de um Site" width="692" height="1115" srcset="https://agtonline.dev/wp-content/uploads/2023/03/infografico-processo-de-criacao-de-um-site.jpg 692w, https://agtonline.dev/wp-content/uploads/2023/03/infografico-processo-de-criacao-de-um-site-186x300.jpg 186w, https://agtonline.dev/wp-content/uploads/2023/03/infografico-processo-de-criacao-de-um-site-636x1024.jpg 636w" sizes="(max-width: 692px) 100vw, 692px" /></p>
<p>Explicando as etapas:</p>
<h3 id="preenchimento-de-briefing"><strong>1. Preenchimento do </strong><strong>briefing</strong></h3>
<p>O <strong>briefing</strong> é a base de informações sobre o site. É um questionário com perguntas sobre os produtos/serviços oferecidos, qual o público alvo, quem são os concorrentes, quais os objetivos a médio e longo prazos, história da empresa etc. Um briefing bem preenchido é o primeiro passo para um <a href="https://agtonline.dev/desenvolvimento-de-sites/">projeto de sucesso.</a></p>
<h3 id="envio-de-orcamento"><strong>2. Envio do orçamento</strong></h3>
<p>Com base nas informações do briefing, consigo saber quais as necessidades da empresa e quais funcionalidades teremos (formulários, sliders, galerias, dashboards, Google Maps, videos, métodos de pagamento para e-commerce etc). Essa é minha base para pesquisa de concorrência, análise dos pontos fortes e fracos e quais as características de mercado do cliente. Envio então um orçamento/contrato detalhado contendo descrição completa do serviço, suas etapas, cronograma, valor e forma de pagamento.</p>
<h3 id="aprovacao-de-orcamento"><strong>3. Aprovação do orçamento</strong></h3>
<p>Assim que o cliente aprovar o orçamento, dou início aos trabalhos.</p>
<p><img decoding="async" class="alignnone wp-image-9249" src="https://agtonline.dev/wp-content/uploads/2023/03/o-que-e-wireframe-300x169.jpg" alt="" width="691" height="389" srcset="https://agtonline.dev/wp-content/uploads/2023/03/o-que-e-wireframe-300x169.jpg 300w, https://agtonline.dev/wp-content/uploads/2023/03/o-que-e-wireframe.jpg 692w" sizes="(max-width: 691px) 100vw, 691px" /></p>
<h3 id="esboco-do-site"><strong>4. Esboço do site: wireframe e layouts</strong></h3>
<p>O primeiro passo é a construção do wireframe, que é um protótipo usado para sugerir a estrutura que o site terá e como ele vai se relacionar com as outras páginas (já falei sobre esse assunto <a href="https://agtonline.dev/afinal-o-que-e-um-wireframe/">aqui</a>).</p>
<p>O wireframe define quais os assuntos prioritários, a localização ideal de cada elemento e a distribuição dos links em todo o site. Nesse ponto já temos uma ideia geral do conteúdo do site. É o momento onde o cliente deve aprovar a estrutura do projeto.</p>
<p>Já os layouts são a transformação do esboço (wireframe aprovado) em imagens. Aqui é definida a identidade visual do site através da <a href="https://aledesigner.com.br/10-regras-basicas-de-tipografia-em-3-min/" target="_blank" rel="noopener">tipografia</a>, <a href="https://aledesigner.com.br/teoria-das-cores-guia-basico/" target="_blank" rel="noopener">paleta de cores</a>, iconografia, fotos, textos etc.</p>
<p>O primeiro layout a ser criado é a <a href="https://aledesigner.com.br/6-dicas-para-construir-uma-home-page-bem-sucedida/" target="_blank" rel="noopener">Home</a>. Com ela aprovada, partimos para a criação das páginas internas do site.</p>
<h3 id="aprovacao-do-layout"><strong>5. Aprovação do layout</strong></h3>
<p>Fase em que o cliente revisa os últimos detalhes gráficos apresentados.</p>
<h3 id="envio-do-conteudo"><strong>6. Envio do conteúdo</strong></h3>
<p>Com os layouts aprovados, o cliente já pode enviar todo o conteúdo do site (fotos, textos, videos, documentos para download etc).</p>
<p><img decoding="async" class="alignnone wp-image-9250" src="https://agtonline.dev/wp-content/uploads/2023/03/as-10-etapas-de-criacao-de-um-site-codigos-300x147.jpg" alt="" width="692" height="339" srcset="https://agtonline.dev/wp-content/uploads/2023/03/as-10-etapas-de-criacao-de-um-site-codigos-300x147.jpg 300w, https://agtonline.dev/wp-content/uploads/2023/03/as-10-etapas-de-criacao-de-um-site-codigos.jpg 692w" sizes="(max-width: 692px) 100vw, 692px" /></p>
<h3 id="desenvolvimento-dos-codigos"><strong>7. Desenvolvimento dos códigos</strong></h3>
<p>Aqui o layout aprovado será convertido em linguagem de programação adequada a todos os navegadores. Tecnicamente é dividida em duas partes: o desenvolvimento <strong>front-end</strong> (construção de tudo o que podemos ver na tela como animações, cores, disposições de texto e imagem, campos etc) e o <strong>back-end</strong> (tudo o que ocorre nos bastidores do site e invisíveis ao usuário: gerenciamento de banco de dados, segurança das informações, integração de sistemas etc).</p>
<p>Durante o desenvolvimento do código, o site fica disponível para navegação em um endereço provisório, permitindo ao cliente acompanhar todo o processo.</p>
<h3 id="validacao"><strong>8. Validação</strong></h3>
<p>Com todos os códigos desenvolvidos e conteúdos aplicados, é a hora da validação. Baseado na ferramenta de padronização do W3C, consórcio internacional que estabelece padrões de qualidade para sites do mundo todo, serão analisados e corrigidos todos os códigos do site. Para entender melhor, a validação funciona como uma “análise gramatical” que verifica possíveis erros na linguagem de código.</p>
<h3 id="aprovacao-final"><strong>9. Aprovação final</strong></h3>
<p>É a última fase de verificação e onde o cliente dá o ok final para a publicação do site.</p>
<h3 id="publicacao"><strong>10. Publicação (Go live)</strong></h3>
<p>Após a aprovação final, é hora de publicar o site. Isso envolve a contratação de um domínio (ex.: www.suaempresa.com.br) e também de uma hospedagem em servidores que tornarão seu site visível para os usuários da web.</p>
<p>—</p>
<p>Cada projeto tem suas próprias demandas assim como cada designer tem seu próprio método de trabalho. Aqui eu dividi em 10 fases com um tempo médio de produção entre 45 e 60 dias.</p>
<p>Após a publicação, o mais indicado é que o cliente faça um <a href="https://agtonline.dev/manutencao-de-sites/"><strong>contrato de manutenção</strong><strong> do site</strong></a>. Isso garante backups periódicos, suporte técnico, atualizações, verificações de vírus, entre outras tarefas. É a garantia de que todo o trabalho terá continuidade e funcionamento perfeito.</p>
<p>O post <a href="https://agtonline.dev/as-10-etapas-de-criacao-de-um-site/">As 10 etapas de criação de um site</a> apareceu primeiro em <a href="https://agtonline.dev">AGT Online</a>.</p>
]]></content:encoded>
					
		
		
			</item>
	</channel>
</rss>
