LoboMaker - Aprendendo a Criar um Site para sua equipe/empresa DO ZERO [#1]

[Sir Lobo]

ATENÇÃO: Este tutorial é voltado para iniciantes que tenham o mínimo de conhecimento em HTML e CSS, mas nada que impeça um iniciante de conseguir

Olá! Eu sou Sir Lobo e estou retornando as atividades depois de quase 3 anos fora  e vos trago a nova série de tutoriais para que você finalmente pare de procrastinar e faça aquele site pra divulgar sua grandiosa equipe e o seu projeto 

#	Aula	Tópico	Status
01	Preparação do Ambiente	Vamos configurar e baixar os programas necessários para poder iniciar nosso site	ATUAL
02	Configuração Inicial	Vamos configurar e baixar os programas necessários para poder iniciar nosso site	[ACESSAR]
03 e 04	Construção de Layout / Estilizando os Elementos	Vamos primeiramente, criar a estrutura que servirá de base para nosso site / Criação da folha de estilos e respectiva estilização de elementos	[ACESSAR]
05	Página de Contato	Utilizando PHP, vamos adentrar à lógica de programação para um sistema simples de mensagens built-in	AGUARDANDO
06	Listagem de Jogos	Também utilizando PHP, iremos criar nossa base de dados e popular dinamicamente com os jogos produzidos	AGUARDANDO
07	Sistema de Blog	Pra finalizar com o PHP, um sistema de posts dinâmicos simples, mas útil para informes de atualizações e anúncios sobre novas produções	AGUARDANDO

Aula #1 - Preparação do Ambiente

[box2 class=titlebg title=Programas Necessários]

Notepad++ (Ou qualquer outro editor de texto e código fonte, inclusive o "bloco de notas")	Baixe de acordo com a sua versão do Windows. Caso utilize outro SO, utilize alguma alternativa a este software Windows 32bits: https://github.com/notepad-plus-plus/notepad-plus-plus/releases/download/v7.8.5/npp.7.8.5.Installer.exe Windows 64bits: https://github.com/notepad-plus-plus/notepad-plus-plus/releases/download/v7.8.5/npp.7.8.5.Installer.exe
XAMPP	Escolha a instalação de acordo com seu SO na página de download https://www.apachefriends.org/pt_br/index.html
Software de Edição de Imagem	Neste tutorial utilizarei o Photoshop, mas escolha o software no qual você domina mais as ferrramentas

[/box2]

ATENÇÃO: Este tutorial leva em consideração o uso da plataforma Windows. Caso esteja utilizando outro sistema operacional, favor consultar sobre localizações dos diretórios ou comandos usados, por gentileza

[box2 class=titlebg title=Configuração do Diretório]

Depois do XAMPP e dos softwares necessários devidamente instalados e/ou disponíveis, verifique se o XAMPP está rodando em segundo plano e se o mesmo está com os serviços funcionando devidamente (Apache e MYSQL):

Spoiler

Painel do XAMPP. Não é necessário configurar nada previamente

[close]

Em seguida, vamos ao diretório onde se localiza a pasta raíz de todos os sites/projetos:

C:\xampp\htdocs

Nela provavelmente não vai haver nenhum diretório, mas esta será o diretório raíz do projeto, ou root. Crie um pasta com o nome do projeto, de preferência, sem caracteres especiais, sem espaços, sem underlines e sem letras maiúsculas, pois isto facilita no momento de acessá-lo e de referenciar links internos e externos. No caso deste tutorial, usarei o nome fictício de Z Games para minha fictícia equipe 

Spoiler

Criei uma pasta com o nome simplificado, nomeada como zgames

[close]

E nela vamos criar os diretórios que vamos usar. Os nomes com a cor em azul-ciano são os subdiretórios das respectivas pastas-pai, estas destacadas na corazul-marinho

• 
  lib
  
  
  
  • 
    css
    
  
  
  • 
    img
    
  
  
  • 
    js
    


• 
  core
  


• template

Ficando assim:

[/box2]

[box2 class=titlebg title=Criando os Arquivos]

Bem, agora chegou a hora de criar nosso primeiro arquivo que deve ficar na raíz da pasta de nosso projeto (não confundir com a raíz da pasta do XAMPP), ou seja, dentro da pasta zgames. Então vamos abrir o nosso editor de códigos (no caso teste tutorial, Notepad++) e criar um novo documento apertando CTRL + N ou no menu Arquivo > Novo

Spoiler

[close]

e salve-o apertando CTRL + ALT + S (ou menu Arquivo > Salvar Como...). Selecione o diretório do nosso projeto, no caso, zgames e salve o arquivo com a extensão .php.

Spoiler

[close]

Pronto! Este será o arquivo base que chamará as páginas que vamos criar na pasta templates

[/box2]

[box2 class=titlebg title=Configurando a o arquivo base]

Esta á uma das etapas mais importantes, então não pule nenhuma parte, pois vamos configurar a index.php para que ela chame as páginas de layout que serão criadas e dispostas na pasta template.

Spoiler

Este será o código HTML5 base para nossa página, e em seguida, vamos inserir um pouco de PHP para as funções principais

<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="utf-8">
		<meta name="viewport" content="width=device-width, initial-scale=1">

		<title>Z Games</title>
		<meta name="description" content="Descrição curta do meu projeto">
		<meta name="author" content="Z Games">

		<link rel="stylesheet" href="css/styles.css?v=1.0">

	</head>

	<body>
		<!--LAYOUT-->
	</body>
</html>

Ajuste seu código para que possamos trabalhar nas mesmas linhas e nos comunicarmos melhor. Este, no caso, ocupa inicialmente 18 linhas:

[index.php]

[close]

Vou explicar um pouco sobre algumas linhas:

<head></head>	aqui é onde especificamos atributos importantes e onde fazemos o call das folhas de estilo e em alguns casos, de scripts
<meta name="viewport" content="width=device-width, initial-scale=1">	esta meta-tag é importante para que possamos fazer um site responsivo, ou seja, que se adapta aos mais diferentes tipos de resoluções e telas
<title>Z Games</title>	aqui vai o título da página que vai aparecer na aba do navegador
<body></body>	aqui é onde vamos puxar o layout utilizando PHP

Para acessar sua página, basta ir em seu navegador e digitar:

localhost/zgames

onde zgames é o nome da pasta do seu projeto.

Spoiler

Ao acessar, você vai perceber que ele vai abrir uma página em branco.



Se você digitar qualquer coisa dentro da tag <body></body>...



vai ver que tudo funciona corretamente!

[close]

[/box2]

[box2 class=titlebg title=Considerações Finais]
Bem, por hora é isto! Nosso ambiente está configurado e no próximo tutorial vamos criar alguns scripts e funções em PHP e as páginas da pasta template. Peço que não modifiquem nada até o próximo tutorial para que não haja conflitos de concordância ou dúvidas geradas pelos projetos estarem diferentes 

Espero que meu retorno seja ajudando vocês e que tenham gostado deste primeiro tutorial 

Um abraço do Lobo
[/box2]

[Red]

Vejo que está voltando a todo vapor, Sir Lobo. Uma ótima ideia de programa que pode ser útil para ensinar quem está iniciando é o Visual Studio, pois ele tem a sugestão de complemento de código e é ótimo quando você vai mexer na stylesheet e consegue ver qual é qual cor. Não sei como funciona o PHP em relação ao HTML, mas com o HTML o usuário poderia criar um site também e testar abrindo o arquivo pelo navegador.

Perdão se eu estiver falando besteiras  , mas acredito também que da forma que está ensinando teriamos um poder maior de personalização, correto? Vou deixar seu post nos meus favoritos para poder tentar mais tarde.

Recomendo a todos que irão usufruir deste conhecimento que utilizem a GoDaddy BR pois tem sempre promoções para dominios e hospedagem. No momento tem vários planos de hospedagem em Linux ou Windows que custam menos de 10 reias. Atualmente domínio e hospedagem por 10 anos custaria somente R$ 1.859,13. Fiquei tentado, pena que não tenho dinheiro.

No mais, abraços e boa sorte. 

[Sir Lobo]

Vejo que está voltando a todo vapor, Sir Lobo. Uma ótima ideia de programa que pode ser útil para ensinar quem está iniciando é o Visual Studio, pois ele tem a sugestão de complemento de código e é ótimo quando você vai mexer na stylesheet e consegue ver qual é qual cor. Não sei como funciona o PHP em relação ao HTML, mas com o HTML o usuário poderia criar um site também e testar abrindo o arquivo pelo navegador.

Obrigado, meu querido  e é isto mesmo. Eu vou mostrar como agilizar as coisas com o Google Inspector, pois ele agiliza demais por possibilitar ver alterações visuais em tempo real    Infelizmente nem sempre ele atualiza junto com o Notepad++, mas caso não atualize, basta testar os códigos e depois copiar pro arquivo CSS naclasse específica 

Perdão se eu estiver falando besteiras  , mas acredito também que da forma que está ensinando teriamos um poder maior de personalização, correto? Vou deixar seu post nos meus favoritos para poder tentar mais tarde.

Opam, pode deixar! E sim, vai poder personalizar. Se manjar de CSS, melhor ainda

Recomendo a todos que irão usufruir deste conhecimento que utilizem a GoDaddy BR pois tem sempre promoções para dominios e hospedagem. No momento tem vários planos de hospedagem em Linux ou Windows que custam menos de 10 reias. Atualmente domínio e hospedagem por 10 anos custaria somente R$ 1.859,13. Fiquei tentado, pena que não tenho dinheiro.

No mais, abraços e boa sorte. 

Eu gostaria de citar que a Hostgator também é ótimo e pra mim tem vantagem pelo suporte BR 24h. Um adendo pra pesquisa aí do pessoal 

No mais, obrigado!

[Eliyud]

Caraca, o Lobo é hacker!!!

Muito bom! Esse tipo de tutorial é algo que não vemos por aqui. Eu nunca pensei em criar um site para a equipe, mas sei o quanto isso agrega no quesito networking. Manda bala, Lobão!

[Sir Lobo]

Caraca, o Lobo é hacker!!!

Muito bom! Esse tipo de tutorial é algo que não vemos por aqui. Eu nunca pensei em criar um site para a equipe, mas sei o quanto isso agrega no quesito networking. Manda bala, Lobão!

Obrigado  Espero que seja útil para alguém, pois foram 10 horas ininterruptas pra criar os dois hahaha

[Eliaquim]

caracouwww num to acreditando!!
To enrolando pra montar um site há um tempão, porque sei que preciso estudar primeiro.
Poxa muito bom um tutorial! Vai me dar mais confiança! :)
Obrigadão!!

[Sir Lobo]

caracouwww num to acreditando!!
To enrolando pra montar um site há um tempão, porque sei que preciso estudar primeiro.
Poxa muito bom um tutorial! Vai me dar mais confiança! :)
Obrigadão!!

Fico lisonjeado que tenha gostado  Espero que sirva pra seu propósito. São etapas fáceis. Parece ser longo, mas não demora muito para finalizar algo do tipo não 

Se sentirem dificuldade em alguma quesito do meu tutorial, me falem para que eu corrija isso nos próximos 

Um abraço!