Entendendo o desenvolvimento Web: um guia para iniciantes na Web

1. Introdução ao “Entendendo o desenvolvimento Web”: Olá e bem-vindo à minha primeira aula de Skillshare, compreendendo o desenvolvimento web. Eu sou Chris. Sou um desenvolvedor web autodidata e criador de conteúdo que trabalha para startups e pequenas empresas como freelancer desde 2015. Trabalhando remotamente, consegui usar essa habilidade para trabalhar em locais de todo o mundo e para uma variedade de clientes. Eu sou um grande crente no poder de aprender a codificar e estou animado para compartilhar com vocês o que eu acredito as principais coisas que você precisa saber para entender como a web funciona e como você pode desenvolver para ela. Nesta aula, vamos discutir alguns dos principais conceitos por trás do desenvolvimento para a web, incluindo: Um para você ficar a par de como a web funciona, dois aprendendo a diferença entre desenvolvimento front-end e back-end, e três mostrando você como implantar seu próprio site na Internet. Também vamos rever algumas das ferramentas e linguagens necessárias para o desenvolvimento web, incluindo HTML, CSS e JavaScript, PHP e MySQL, e frameworks como Bootstrap e Jquery. Meu objetivo para esta aula é que até o final, você terá uma ampla compreensão de desenvolvimento web e se tornar claro de como você quer usar essa importante habilidade de desenvolvimento web em sua carreira profissional ou para uso pessoal. Então, se você está pronto para começar, clique no próximo vídeo e eu vou vê-lo por dentro. 2. O que esperar do curso: Então, nesta classe, eu vou fornecer uma visão geral do desenvolvimento web e dar-lhe um gostinho do desenvolvimento de HTML, CSS, JavaScript, PHP e MySQL, além de ajudá-lo a implantar seu site na Internet. No final da classe, você deve ser capaz de entender a diferença entre front-end e back-end, o propósito de HTML, CSS e JavaScript, o que é um framework e por que você deve usar um, o propósito de PHP e MySQL a diferença entre um nome de domínio e hospedagem e, finalmente, como publicar seu site na Internet. É minha crença que o desenvolvimento web é melhor aprendido fazendo, e assim esta aula vai ser muito prática em vez de puramente teórica. Você aprenderá o que HTML, CSS, JavaScript e PHP são, na verdade, usando-os. O objetivo no final desta aula é que você tenha uma boa compreensão da web e do processo de desenvolvimento web, após o qual, você estará em uma posição melhor para escolher qual área de desenvolvimento web você gostaria de aprender mais sobre. Então, sem mais delongas, vamos começar a primeira lição de entender o desenvolvimento web. 3. Como você pode editar qualquer página na web: Para começar este curso, quero mostrar-lhe algo legal que você pode não ter percebido. Isso ajudará a demonstrar a diferença entre front-end e backend em uma configuração da vida real antes de entrarmos na teoria. Para esta demonstração, estou usando um navegador chamado Google Chrome. É o que eu uso como consumidor e regularmente como desenvolvedor web também. Mas você pode usar o Firefox, que eu tenho aberto aqui também, e Safari. Você pode fazer coisas semelhantes, praticamente a mesma coisa, apenas com ferramentas ligeiramente diferentes em qualquer um desses navegadores. Vou te mostrar como fazer isso em um segundo. Mas vamos voltar para o Chrome e ir para o Google.com. Agora você pode fazer esse pequeno experimento em qualquer site. Mas eu só pensei em ir se um site que todos nós conhecemos, e que é Google.com. Agora, um segredo pouco conhecido que você pode ainda não saber é que você pode editar praticamente qualquer página da Web diretamente no seu navegador. Tudo o que você precisa fazer no Chrome é clicar com o botão direito do mouse em qualquer elemento. Vou clicar com o botão direito neste botão e clicar em Inspecionar. Fiz isso um pouco rápido. Clique com o botão direito, clique em Inspecionar O que isso abre no lado aqui são as Ferramentas do desenvolvedor do Google Chrome. Se entrarmos no Firefox e fizermos a mesma coisa, Google Chrome. Eu só Google.com. Acesse o Google no Safari também. No Firefox, podemos fazer exatamente a mesma coisa. Nós podemos inspecionar elemento, e ele traz um console semelhante aqui em baixo. No Safari, você precisa acessar Preferências e ativar Ferramentas do desenvolvedor. Você vai para baixo para clicar em Avançado, vá para baixo para Mostrar menu Desenvolver na barra de menus. Então daqui, não tenho certeza no que você clica. Eu acho que mostrar Web Inspector e você pode ver coisas semelhantes. É uma coisa semelhante em todos os navegadores web ou os principais navegadores web. Mas como eu disse antes, eu gosto de usar o Chrome. O que você pode fazer aqui é que este é todo o HTML e este é todo o CSS. Se entrarmos no console, podemos interagir diretamente com a página usando JavaScript. Mas não vamos te sobrecarregar agora se você está apenas começando. Tudo o que quero mostrar é que isso é completamente editável. Você pode ver aqui este valor. Eu vou clicar fora dele e então eu vou clicar em novamente. Se eu clicar duas vezes nesse valor, agora posso editar esse valor. Você vê aqui que diz pesquisa no Google aqui, ele diz pesquisa no Google lá. Posso mudar isso para o que eu quiser. Talvez eu diga minha busca, e Wallah, você pode mudar o texto sobre isso. Se você quiser mudar o estilo, que é feito com CSS, eu posso ir até aqui com o estilo Element, e eu posso digitar em cores, e eu posso percorrer todas essas cores diferentes. Eu posso literalmente colorir o que eu quiser. Vamos usar chocolate. Só porque parece divertido. Posso até apagar elementos. Vou clicar nisso e pressionar a tecla Delete. Boom, ele se foi. Mas antes que você fique realmente animado e pense: “Uau, estou mudando a página inicial do Google”, como isso afetará todos os outros que usam o Google? Clique no botão Recarregar e você verá que o Google sai exatamente como estava antes. Isso é porque estamos apenas editando o front-end. Quando você pressiona recarregar ou voltar para o Google, ele envia outra solicitação para o servidor e atinge o back-end. Google usa qualquer lógica complexa que eles têm no back-end para determinar o que aparece aqui. Qualquer coisa que você mudar aqui está apenas em seu navegador e não na verdade no Google. Mas isso, como você verá no final do curso, é super poderoso. Para trabalhar em seus próprios sites, você pode entrar e verificar qualquer coisa no front-end, modificá-lo ao vivo basicamente, e então você pode descobrir como fazer isso em seu editor de código ou qualquer outra coisa. A razão pela qual eu queria mostrar a vocês que diretamente para cima é porque eu acho que esta é uma maneira prática de demonstrar fisicamente a forma como a Web funciona ou melhor, como o frontend funciona porque você pode interagir com, eu apenas pressionada opção Comando I no Mac. Se você estiver executando o Mac e estiver usando o Chrome para abrir as Ferramentas do Desenvolvedor, você poderá interagir com qualquer página da Web na Internet, todos os ativos do front-end, o HTML, o CSS , o JavaScript, o que veremos mais tarde. Infelizmente, ele não mostra o backend porque isso é tudo privado, mas vamos entender por que o backend é privado e como trabalhamos com o backend neste curso também. O que eu vou fazer no próximo vídeo é mergulhar na teoria, o que é um pouco pesado, é por isso que eu queria fazer este vídeo primeiro. Então vamos entrar em algum código real. Espero que tenha sido uma demonstração legal, e vamos falar de teoria na próxima lição. 4. Front-end e back-end: Provavelmente o conceito mais importante para entender o desenvolvimento web, é a idéia entre front-end e back-end. Para explicar isso, quero usar um diagrama de Felix Thea. Eu vou para Felixthea.com/frontend-vs- backend. Na parte inferior deste artigo, você pode encontrar o diagrama. O que vimos no primeiro vídeo, foi eu interagindo com o que é chamado de frontend. Como você pode ver, o código frontend é sempre escrito em HTML, CSS e JavaScript. O código de frontend é basicamente o que vem a dar ao seu navegador para criar o que você vê e interagir com o seu navegador. A razão pela qual o código no frontend é sempre HTML, CSS e JavaScript, é porque todos nós usamos navegadores semelhantes como Chrome, Safari e Firefox. padrões internacionais tinham que ser desenvolvidos para que os desenvolvedores todos concordassem em quais tecnologias constituiriam os sites que vemos e com os quais interagimos. O frontend, no entanto, é apenas a ponta do iceberg, pois o backend pode ser infinitamente mais complexo. O papel do backend é simplesmente gerar o frontend, mas de uma forma muito mais inteligente. Vamos voltar ao nosso exemplo no primeiro vídeo. O que acontece quando clicamos em “Recarregar” depois de editar a página? As mudanças desaparecem, certo? Bem, claro, isso faz sentido. O Google não vai nos deixar mudar seu site, mas o que está acontecendo quando clicamos no botão de recarga? A resposta é que estamos criando uma nova solicitação para o servidor. Quando fazemos essa solicitação, o backend executa qualquer número de cálculos simples ou complexos e, em seguida, envia para o navegador HTML, CSS e JavaScript. Esses três scripts são então interpretados pelo seu navegador para gerar o site que você vê e com o qual interage. No exemplo do Google, a infraestrutura pode calcular o Número 1, qual país você está acessando o site. Número 2, se você está logado ou desconectado. Quaisquer cálculos que o Google pode realizar no backend, é completamente privado. O código de back-end nunca chega ao seu navegador e, portanto, não há como visualizá-lo. Ao contrário do frontend, o backend de um site pode ser gerado ou criado usando quaisquer linguagens de programação ou tecnologias. Seu navegador sempre requer HTML, CSS e JavaScript, mas realmente não se importa como ele chega lá. Só se importa que o código no frontend seja legível. Dito isto, existem algumas escolhas populares que alimentam a maior parte da web. Estes são PHP, Ruby, Python, Java, C# e C++. Vamos voltar ao diagrama. Nós falamos sobre o frontend e o backend, mas há um outro ponto de interação aqui, que é o banco de dados. O banco de dados é onde os dados são armazenados. Usando este exemplo no diagrama, um usuário pode clicar em um botão para acessar uma galeria de fotos. A solicitação é então enviada para o back-end, que então consulta o banco de dados e, em seguida, o banco de dados retornará as informações da foto para o back-end. Em seguida, o backend determinará o que enviar para o navegador. Se tudo faz sentido agora, ótimo, mas se não, tenha em mente que você vai começar a entender melhor uma vez que você começar a trabalhar diretamente com o backend e frontend, e uma vez que entrar em algum código, mas para terminar esta seção, eu só queria compartilhar um último exemplo que é bastante comum no desenvolvimento web, e é um processo chamado autenticação. Agora, a autenticação é algo que você provavelmente se depara com o tempo todo. É apenas uma palavra chique para fazer login em alguém e sair de alguém de um site ou aplicativo. Se um usuário é autenticado, isso significa apenas que ele foi capaz de se identificar e fazer login no site. autenticação sempre envolve ou sempre deve envolver o backend, pois as informações do usuário devem ser sempre salvas forma privada e devem interagir com o banco de dados. Lembre-se, tudo no back-end, incluindo o banco de dados, não é visível para o usuário. Somente o que é entregue ao frontend pode ser visualizado e interagido. No caso de autenticação, o usuário Número 1, digita seu nome de usuário e senha e, em seguida, clica em “Enter”. Número 2, as informações são enviadas para o back-end, que consulta o banco de dados para ver se um, o nome de usuário existe em um banco de dados e dois, se a senha corresponde ao que é armazenado para esse usuário. Número 3, se ambas as condições corresponderem, o backend decide que o usuário deve ter acesso e, em colaboração com o frontend, declara o usuário como conectado. Você vê agora como o frontend e o backend interagem? Vamos encarar, eu poderia jogar muito mais teoria em você, mas desenvolvimento web é melhor aprendido fazendo. Vamos entrar em algum código no próximo vídeo. Novamente, lembre-se que você não precisa ter tudo super claro para saltar para a próxima seção. Isto é tudo teoria que vai fazer muito mais sentido quando realmente entrarmos em algum código. Basta assistir novamente este vídeo se você precisar, mas saiba que, uma vez que passamos por este curso, os conceitos sobre os quais falamos nesta lição se tornarão mais claros. Vamos entrar em algum HTML no próximo vídeo. 5. HTML: Vamos mergulhar em algum HTML. Para isso, vamos precisar de um editor de código. Se você estiver usando o Windows, basta abrir o Bloco de Notas e usar realisticamente o Bloco de Notas. No Mac, eu não recomendaria necessariamente usar a edição de texto, então eu recomendaria baixar um editor de código gratuito. O que estou usando chama-se Atom. Você pode encontrá-lo apenas indo para atom.io e baixá-lo. É realmente, como você pode ver, muito magra e agradável para trabalhar. Tenho o meu navegador aberto, claro. Vamos precisar de um navegador para ver nosso projeto real. O que você vai precisar, também, é de uma pasta de projeto que eu montei bem aqui. O que você vai fazer primeiro, é ir a esta página para nos dar um pouco de um modelo, um ponto de partida para um projeto básico. Você pode digitar isso no Google, tenho certeza que ele vai aparecer ou eu posso inserir o link em algum lugar. Basta rolar aqui para baixo e você pode copiar colar isso. Eu vou copiar isso, ir para este arquivo e colá-lo. A razão pela qual não temos a bela coloração, como tem aqui para as diferentes partes, é porque o nosso editor de código aqui, Atom não sabe que tipo de arquivo é este. qualquer forma, é sempre uma boa ideia salvar o nosso projeto imediatamente. Vamos para Arquivo, clique em “Salvar como”, e dentro de nosso diretório de projeto, vamos nomeá-lo. Você pode nomeá-lo o que quiser, desde que has.HTML no final. Você poderia nomeá-lo com uma extensão diferente como TXT, mas então seu navegador e seu editor de código não saberão que é HTML. Para uma página inicial de um site, geralmente é index.php e isso é por algumas razões que podemos entrar mais tarde. Mas por enquanto, vamos chamá-lo de index.html. Só vou fechar isso. De repente, você tem coloração porque Atom sabe que é HTML, e de repente você tem seu projeto aqui também. Uma vez que adicionamos mais arquivos, isso se torna importante porque podemos entrar nos outros arquivos, clicar neles e editá-los. Apenas navegação geral. O que vamos fazer agora que temos um arquivo HTML, é visualizá-lo. Há algumas maneiras de fazer isso. A maneira mais simples é apenas clicar com o botão direito do mouse sobre ele e clicar em abrir com. Chrome é o aplicativo padrão no meu computador para abrir HTML, então eu posso apenas clicar nele e bam, ele aparece. Agora, você pode estar pensando, bem, nós só temos uma tela branca. Como você sabe que está chegando com sucesso Chris? Como eu sei, na verdade, é aqui em cima. Aqui em cima diz o HTML5 Herald, que é o que temos nesta tag título aqui, o HTML5 Herald. Se mudarmos isso, vamos mudar isso para o meu projeto HTML e clicar em “Salvar”. Estou usando o Command S em um Mac, mas você pode salvar assim, ou qualquer atalho que seja. Em seguida, clicamos sobre o nosso navegador, clicamos em “Recarregar” ou Command R, e podemos ver que o título da página agora está alterado. Poderíamos fazer uma série de duas horas sobre HTML neste curso, mas eu só quero dar a vocês uma visão geral. Há muita informação aqui, mas o principal que você precisa saber, é cabeça e corpo. Na seção da cabeça, você não pode necessariamente ver na página o que acontece na cabeça, mas tem algumas tags importantes que entram aqui. Você pode vincular a arquivos externos aqui. Este ainda não existe, está apenas no modelo. Há meta-informação aqui que é importante para SEO. Há o título com o qual já interagimos, e há outras coisas que você pode colocar aqui também. Mas a tag body é onde você colocará coisas que aparecerão no corpo real do seu documento HTML da sua página web. Alguns elementos básicos que podemos colocar em nosso corpo para começar é um div. O que é basicamente apenas um bloco, e nos dá uma maneira de organizar nosso código. Você pode colocar dois divs. A propósito, a convenção permanece sempre a mesma com HTML. Você faz um sinal de menos que e, em seguida, o nome do elemento sem espaço, em seguida, um sinal maior que, e então você coloca o conteúdo dentro dele, e no final você faz exatamente a mesma coisa, exceto que você coloca uma barra na frente do nome do elemento. Como podem ver, temos dois divs aqui. Mas se eu clicar em salvar, nós não vamos ver nada porque essas divs são apenas para estruturar basicamente. Não veremos nada a menos que definamos estilos nessas divs ou colocamos algum conteúdo neles. O que eu vou fazer é colocar dentro, o que eu devo fazer? Uma etiqueta de cabeçalho. A maioria das páginas da web começa com uma tag de título, e há algumas tags de cabeçalho que podemos fazer. Ele varia de H1, H2, H3, H4, todo o caminho até H6, talvez até mais. Acho que o H6 pode ser o mais longo. Mas H1 é um cabeçalho que é suposto ser o cabeçalho de nível superior. Normalmente, você só tem um H1 em uma página da Web e vamos chamar esse título de página. Então, para fechar a etiqueta, como mencionamos, mesma coisa que fizemos para abri-la, colocamos uma barra na frente disso. Vou clicar em “Salvar”, fazer o mesmo processo, vir aqui, recarregar a página e boom, você tem um título de página. O que vamos fazer aqui, nesta div, é colocar uma tag p, e tag p significa apenas parágrafo. É quando você coloca um pouco de texto. Vou colocar, isso é muito ruim, mas, blá, blá, blá, pressione “Salvar”. Temos blá, blá, blá. Não há nada realmente especial sobre tags p até que você os coloque juntos, e então ele lhe dá divisão de parágrafos. Esta é uma coisa básica que você pode fazer para ter um título, parágrafos, talvez outro cabeçalho lá para uma subseção onde você faz H2, H2, e dizer subseção. Voilá. Só para dirigir para casa a diferença, porque agora esses divs realmente não fazem nada, é que eu vou aplicar um estilo. Estamos entrando um pouco no CSS agora, mas não seja avisado, não tenha medo. O que vamos fazer aqui é dar ao nosso elemento um atributo. Como fazemos isso é encontrar o último caractere do nome do elemento, espaço de imprensa, e o atributo que vamos dar é estilo. Nós vamos digitar em estilo, é igual a aspas duplas abertas e fechar aspas duplas. Meu editor de código me dá as aspas duplas de fechamento já porque ele sabe o que estou tentando fazer. Vamos dar a isso uma borda, então eu vou digitar na fronteira, um px, preto sólido. Coloque um ponto-e-vírgula para dizer que é o fim da regra, clique em “Salvar”, e você verá que a caixa agora tem uma borda que a torna realmente visível. O que podemos fazer aqui, é copiar esta etiqueta de estilo, colocá-lo aqui, pressione “Salvar”, e então você pode ver a segunda div. Divs são importantes para aninhamento, podemos fazer essas divs menores, podemos colocá-las lado a lado, e isso nos permite afetar a estrutura da nossa página. Como eu disse, poderíamos gastar horas em HTML, e há muitos outros elementos que você poderia aprender, mas este é um curso de visão geral. Acabei de te dar um pouco de um teaser. Você pode mergulhar profundamente em HTML através de outro curso, ou talvez eu possa criar um para você, se quiser. Mas isso deve lhe dar alguma indicação sobre o que HTML faz por você. É basicamente o conteúdo da sua página web e como ela é estruturada. No próximo vídeo, vamos rever CSS, que fizemos um pouco de estilo aqui. Mas já é hora de alguns CSS, então vamos construir sobre o que fizemos aqui com algum estilo. 6. CSS: Tudo bem, então nesta lição sobre CSS, eu vou começar de onde paramos no último vídeo. O que temos aqui é o nosso arquivo HTML, e temos o resultado do nosso arquivo HTML em nosso navegador. Agora, uma coisa que eu quero chamar a sua atenção aqui é este link para uma folha de estilo externa. Na verdade, esta é uma tag que não tem uma tag de fechamento porque ela não tem nenhum conteúdo. Ele só tem atributos. O que quero dizer com isso é que você não precisa ir assim para fechá-lo porque não há nada no meio, é apenas um link para uma folha de estilo externa. O primeiro atributo aqui é rel igual a folha de estilo. Isso apenas diz que estamos vinculando a uma folha de estilo basicamente, e href é apenas a localização da folha de estilo. Primeiro, é tudo antes que o styles.css é um caminho de pasta, então vamos precisar criar uma pasta chamada CSS neste diretório. Então vamos precisar criar um arquivo chamado styles.css. Este é apenas um parâmetro de consulta extra que fala sobre a versão. Na verdade, nunca precisei usar isso antes, então vamos nos livrar dele por simplicidade. Certo, como eu disse, precisamos ir para o diretório do projeto, precisamos criar uma nova pasta chamada CSS. Como você pode ver, tudo está vindo aqui para que ele possa ser facilmente navegado em nosso editor de código. Vou entrar naquela pasta. Na verdade, eu não crio o novo arquivo aqui. Volto ao editor de código e o que posso fazer é criar um novo arquivo no editor de código. Antes de escrever qualquer CSS, vou salvá-lo com a extensão adequada que nosso editor de código e nosso navegador saibam exatamente que tipo de arquivo é esse. Como definimos em nossa tag link lá, eu acho que era styles.css, então você tem que chamá-lo de um ponto CSS. Podemos sempre mudar isto para o que quisermos. Não temos que ser estilos. Nós só temos que atualizar o link no documento HTML, mas ele sempre tem que terminar em ponto CSS. Então agora temos o nosso arquivo CSS dot. Sim, como podemos ver, isso agora deve ser vinculado a este arquivo HTML porque nós temos essa tag link e esse endereço é CSS. Então ele vai para a pasta CSS. Na verdade, eu o nomeei com maiúsculas quando talvez não devesse. Agora ele vai para CSS, em seguida, ele vai para styles.css, que nós temos lá. Agora, eu já posso ver uma oportunidade para criar uma classe CSS em nosso documento. Onde essa oportunidade vem é bem aqui. Tenho dois divs e estou copiando e colando código. Esta é uma boa lição a aprender para qualquer pessoa que faz desenvolvimento web. Sempre que você estiver copiando e colando código muito, provavelmente há uma maneira muito melhor de fazê-lo. Neste caso, em vez de definir estilos específicos em cada uma dessas divs, podemos definir um nome de classe para ambas as divs e, em seguida, definir os estilos que são atribuídos a esses nomes de classe em CSS. Agora, assim como em HTML, há tanta coisa que podemos fazer com CSS e pode ser um curso de duas horas por conta própria. Então eu vou dar a vocês apenas um pouco de CSS neste vídeo. Mas o que eu vejo aqui é a grande oportunidade para usarmos CSS para criar uma classe. Agora, para criar uma classe, o que temos que fazer é começar com um ponto. Basta entrar no seu arquivo CSS e pressionar ponto. Então podemos nomear uma classe. Eu só vou chamá-lo de caixa. Nome muito simples, mas não precisamos de mais nada. Agora que define nossa classe basicamente, mas precisamos dar estilos, caso contrário, não vai fazer nada. Abrimos um colchete encaracolado [inaudível] e M já é gerado um colchete de fechamento para mim. Então eu vou pressionar Enter. O que podemos fazer é voltar para aqui onde temos esse estilo definido. Pegue isso, coloque aqui. Agora, qualquer div ou qualquer elemento para essa matéria onde possa ter uma borda, sempre que colocarmos essa classe nela, terá uma borda com um pixel de largura, sólida e preta. Vamos fazer isso agora. Vamos remover esta coisa toda e em vez de estilo, vamos ter aula. Lembre-se quando colocamos na classe, a mesma convenção de antes, com um sinal de igual e duas aspas duplas, mas na verdade não colocamos o ponto. Nós definimos classe aqui. Em CSS, definiríamos o ponto para garantir que todos saibam que é uma classe. Mas aqui nós apenas digitamos a caixa. O que podemos fazer é copiar isso e substituir por caixa. Agora você pode pensar, nós não salvamos tantos personagens. Mas uma vez que você começa a gerar montes de estilos, como talvez você queira colocar um min-height aqui e todas essas coisas. Nós não queremos ter que copiar e colar nenhuma dessas mudanças, é apenas um sistema muito melhor organizado para ter aulas. Todos estes herdam os mesmos estilos que definimos aqui. Se eu der a este um realmente óbvio como 500 será super óbvio. Agora você verá todas as divs com a caixa de nome da classe, que poderíamos chamar de caixas, vai ser uma altura mínima de 500. Eu vou recarregar e bam, agora tudo com uma caixa de classe vai ser 500. Há algumas outras maneiras de segmentar elementos nisso também. Se você quiser segmentar cada elemento, basta digitar o nome do elemento p. Isto irá criar um estilo em cada elemento p. Eu só vou colorir. Estas regras de estilo, você não vai conhecê-las todas imediatamente, você apenas aprende-as ao longo do tempo. Não gosto, oh, como você muda a cor do texto? Como você muda isso? Literalmente, apenas no Google. É só um jogo de memória para muitas dessas coisas. Coloque um espaço lá, e vamos fazer a cor azul. Agora você pode ver cada tag de parágrafo agora vai ter esta cor azul. O que poderíamos ter feito aqui é apenas ir div e cada div teria tido isso, então isso vai ter como alvo cada div. Mas se quisermos ter alguns divs que não têm os estilos e alguns divs que não têm. É melhor ser específico e colocar um nome de classe. Agora o outro que temos é um ID e isso é definido com um hash. Um ID deve ser dado apenas a um elemento. Teremos um nome muito específico como box1. O que devemos fazer aqui? Vamos dar-lhe uma cor de fundo de preto. Vamos apenas tentar. Não vai ser o site mais bonito, mas você entendeu a mensagem. Agora, o que temos que fazer aqui é dar uma dessas caixas, a identificação. Isso é apenas uma simples questão de ID é igual a box1. Isso é certo. Box1 sem o hash porque já lhe demos seu nome de atributo. Entra aqui e como preto. Agora, obviamente temos outro problema agora, que é que a cor do texto é preto também, então você não pode vê-lo. Se vamos ter um fundo preto, evidente que vamos precisar de algum contraste no texto para que possamos mudar de cor para branco. Agora, correndo o risco de entrar em algo que é um pouco mais complicado, mais capacidade de resposta móvel é muito importante no dia e era de desenvolvimento web de hoje. A maneira como você pode definir estilos com base no tamanho da tela é usando tags de mídia. Agora eu estou pulando alguns passos à frente aqui porque nós quase nem sequer apenas arranhou a superfície com CSS, mas eu só queria dar-lhe para quando você chegar a essa seção de, como eu faço meu site responsivo? É através de etiquetas de mídia. Você pode ter, na tela de mídia. Então você define. Novamente, não vou gastar muito tempo nisto. Só estou mostrando um exemplo, largura máxima, 500 pixels. Então vamos abrir os colchetes e então precisamos colocar outra coisa aqui. A outra coisa com CSS é que quanto mais específica for a regra, mais ela anulará outra regra. Digamos, por exemplo, que temos aqui em cima, não fomos muito específicos aqui, estamos apenas dizendo que todos os p são azuis. Se eu estiver sendo mais específico e dizendo que a largura máxima 500 da tela, eu posso colocar em outra regra. Quando a tela estiver abaixo de 500 pixels de largura, essa regra anulará essa regra aqui em cima. Vou torná-lo vermelho em vez disso. Vou recarregar a página e você não pode ver nada diferente. Mas se eu for redimensionar a janela, olhe para isso. De repente, aos 500, o texto muda para vermelho. Isso não é tão prático de um aplicativo, mas você pode entender o conceito, pelo menos que consultas de mídia permitem que você altere o estilo de sua página web com base em quão grande é a tela. Tudo bem, então espero que isso explique CSS um pouco. Novamente, um monte de profundidade que você pode entrar em CSS. Não temos muito tempo para cobrir todas as coisas diferentes que você pode fazer com CSS. Espero que tenha sido uma boa visão geral. No próximo vídeo, vamos falar sobre o script diferente final ou um pedaço de código que você quer ter em seu front-end, e isso é JavaScript. Estou ansioso para vê-lo no próximo vídeo. 7. Javascript: Tudo bem, então neste vídeo vamos falar sobre JavaScript. Vamos pular de onde paramos, como fizemos no último vídeo. O que o nosso documento HTML tem aqui que tinha antes para CSS, aqui ele tinha uma tag link para CSS que definiu onde colocar nosso arquivo CSS. Aqui podemos ver uma tag de script em nossa seção body que nos dá um caminho para colocar nosso JavaScript. Eu vou seguir o que o modelo diz aqui e eu vou para o meu diretório de projeto que está aqui. Vou fazer uma nova pasta, chamá-la de js, que a propósito, esta é uma convenção padrão para colocar seus arquivos HTML na raiz. Isso é chamado de raiz do diretório. Em seguida, coloque seus arquivos CSS em uma pasta CSS e coloque seus arquivos JavaScript em uma pasta JavaScript. Vou voltar para aqui para gerar um novo arquivo. Clique em Novo arquivo. Estou indo um pouco mais rápido desta vez porque já passamos por isso, então espero que esteja tudo bem para vocês. O que eu vou fazer aqui é, Salvar como e eu vou entrar em JavaScript. Esqueci-me do que lhe chamavam. Chamavam-lhe scripts dot js. Eu vou voltar aqui, Salvar como, ir para JS, copiar através disso. Não faz, copiar e colar, então eu tenho que digitar. Era apenas scripts dot js. Legal. Agora todo mundo sabe, o navegador sabe, o Editor de Código sabe disso, que é um arquivo JavaScript. Arquivos JavaScript terminam em ponto js. Só para ficar claro, não temos que seguir esses caminhos, eu poderia mudar nada disso, mas ele só tem que coincidir com o local onde o arquivo está armazenado. É apenas um link para o arquivo onde quer que ele esteja. Eu só estou seguindo a convenção aqui porque é uma convenção padrão bastante estoque. Agora, antes de realmente escrevermos algum JavaScript, é importante saber o que o JavaScript realmente é. JavaScript é uma linguagem de programação. JavaScript é a linguagem de programação de front-end interativa. O que quero dizer com isso é que é entregue com o front-end. Sempre que você interage com uma página, você clica em algo e algo se abre. Isso é JavaScript trabalhando para você, menos que, é claro, ele recarrega a página, caso em que provavelmente está enviando uma solicitação para o servidor que está cuspindo o HTML, CSS e JavaScript novamente. Só estou tentando pensar no que é uma coisa pesada em JavaScript que poderíamos olhar. O Planilhas Google, por exemplo, e o Gmail e tudo isso, são aplicativos em tempo real. Toda a interação feita aqui é JavaScript porque, como você pode ver, é tudo em tempo real. Se eu clicar sobre isso e isso, e clicar sobre isso e isso se esconde e isso mostra. Eu clico nisso, isso abre. Ele define como você interage com uma página web. Como você pode ver, como eu estou fazendo tudo isso, a página web não está recarregando, é tudo JavaScript. O que isso significa para o nosso projeto? Significa que podemos manipular algumas dessas coisas aqui ou desencadear outras funções. Um dos mais básicos que podemos fazer é um registro de console. Um log de console é ótimo para cuspir variáveis ou qualquer outra coisa que você precisa verificar quando estiver fazendo desenvolvimento de JavaScript. Só vou colocar um registro de pontos do console e dizer “Olá mundo”. Você provavelmente não entenderá a finalidade por trás do log do console agora, mas quando se trata de depuração mais tarde, é realmente importante. Vou colocar meu navegador ali, abrir ferramentas de desenvolvedor e o que eu vou fazer é porque nós temos isso, eu vou apenas colocá-lo no fundo para que possamos ver tudo. O que você pode fazer é passar por cima do console aqui e recarregar. Ele aparece com o Hello World. Mas sei que isso não é prático. Mas digamos, por exemplo, que você queria verificar se uma função estava disparando ou algo assim, você poderia colocar hello console log lá. Então você pode começar a fazer coisas de programação como definir uma variável. Você diria var x, chamada x, Olá mundo. Em seguida, em vez de registrar explicitamente Hello world, você poderia registrar x e você obter exatamente a mesma coisa. Quando eu estou depurando, eu gosto de dizer, por exemplo, se eu estava tentando encontrar o valor de x, eu digitaria algo como, x como uma string. Se eu colocar essas aspas em ambos os lados, isso significa que eu estou apenas colocando para fora o que eu escrevi lá. Em seguida, uma vírgula permite que você coloque outra variável ou pedaço de corda lá. Uma string é apenas texto como você vai descobrir. Então eu posso ver x é Olá mundo. Agora, outra coisa que você pode fazer, que podemos realmente ver acontecendo em nosso navegador é um alerta. Esta é uma das coisas mais básicas que você pode fazer em JavaScript também. Vou recarregar a página e você recebe um alerta dizendo: “Olá mundo”. Toda vez que você recarregar a página, ela aparecerá novamente. Agora, vamos realmente usá-lo para interagir com esta página porque honestamente o que estamos fazendo aqui, apenas definindo uma variável e, em seguida, colocá-la para fora, não está realmente interagindo com nossa página web. O que poderíamos fazer é, e eu encorajo você a fazer isso também, basta ir ao Google e perguntar ao Google como fazer as coisas. Esta é realmente uma habilidade muito importante como desenvolvedor. Desenvolvedores não se lembram de como fazer tudo e muitas vezes esquecem, às vezes eu tinha que fazer algo. Há muita documentação online e outras coisas. Não é suposto lembrares-te de tudo. Se você esquecer como fazer algo ou só quer aprender a fazer algo imediatamente. Se você digitar uma boa pergunta no Google, você receberá uma boa resposta e saberá como fazê-lo. Vamos apenas dizer, como ocultar e elemento com JavaScript. Você pode digitar js com certeza. Vou carregar a página. JavaScript, mostrar elemento ocultar. Vamos dar uma olhada neste. Este site é um site Stack Overflow. Se alguma vez tiveres um problema, podes ir ver quais foram os problemas das outras pessoas e ver como eles resolveram isso. Se você tem um problema semelhante, ele lhe dá idéias sobre como resolver seu problema específico. O que podemos fazer aqui é, vou copiar esta parte aqui. Na verdade, vou copiar isto. Eu vou voltar para o nosso projeto aqui. Vou entrar em nossos roteiros e vamos explicar o que temos aqui. Mas antes de mais nada, na verdade, antes de explicarmos, vou modificar isto. Eu vou salvar isso e eu vou pressionar Recarregar. Agora, o que aconteceu aqui? JavaScript é o que é chamado de linguagem orientada a objetos. O que isso significa é que podemos segmentar elementos aninhados colocando em pontos entre eles. Novamente, não fique sobrecarregado com isso, só estou tentando explicar o que está acontecendo aqui. É basicamente, começamos com o documento, que é a nossa página web bem aqui. Temos um ponto e este método é obter elemento por ID, que apenas encontra o nosso elemento com base em um ID. Lembre-se que criamos uma identificação aqui para este div, caixa de identificação um. O que precisamos fazer é colocar em uma string, que se lembre, uma string é apenas texto aqui e nós apontamos para a caixa um. Agora estamos neste elemento e dentro deste elemento podemos segmentar estilo. Estamos em grande estilo agora, então precisamos de outra coisa e isto é, dentro do estilo podemos segmentar um atributo chamado display. Então podemos configurá-lo para nenhum usando um sinal de igual. Outra coisa importante a saber na programação, eu sei que estou jogando um monte de coisas aqui como eu estou pensando nisso, que é um único igual é atribuição. Se você estivesse fazendo uma comparação, por exemplo, se digamos x, eu sei que ainda não temos essa configuração de variável, mas se x for igual a um, você faria dois iguais. Isto é mais parecido com o que você pensaria com iguais. Igual em linguagens de programação como JavaScript é atribuições. Estamos apenas a dizer, atribua esta parte a esta parte. Como você pode ver, ele é definido a propriedade style do que tem o ID da caixa um para nenhum. O que podemos fazer é colocar isso para bloquear, o que é outro valor possível e ele aparece novamente. Isso nos dá a oportunidade de editar coisas com base na lógica. Agora só está escondendo, o que realmente não precisa. Mas o que poderíamos fazer é colocar em um condicional, que seria, digamos, por exemplo, se algo fosse o caso, esconder a caixa. Sem entrar em muitos detalhes aqui, vamos apenas colocar em uma declaração que definitivamente não é verdade. Se um for maior que dois, não exiba nenhum. Obviamente um não é maior que dois, então não vai fazer isso. Um é a menos de dois? Sim, é. Não exiba isso. Agora eu sei que este é um exemplo primitivo, mas não podemos entrar em um resumo completo do JavaScript neste vídeo. Mas o importante a saber aqui é que temos nosso documento HTML aqui. Ele está ligado a uma folha de estilo, que é onde nosso CSS está, que define nossos estilos. Ele também está ligado ao nosso JavaScript onde podemos definir o comportamento de front-end programático. Poderíamos ter, por exemplo, se alguém clicar nisso, isso acontece. Se uma caixa tem um certo tamanho, esta outra caixa não deve aparecer. Coisas assim. Qualquer coisa que você realmente pode pensar em termos do que aparece no front-end ou com o que o usuário está interagindo ou o que você viu em outros sites. Apenas faça o que fizemos no Google. Eu sei que usei parte da minha experiência para descobrir que parte da página web copiar. Se você fez um pouco mais de escavação e isso é algo que você vai aprender ao longo do tempo, é como usar o Google como desenvolvedor. Você pode ver aqui que eles estão fazendo isso também. Documento, obter elemento por ID, atribuindo isso a uma variável e, em seguida, alternando isso. Mas sim. Basicamente, você pode fazer uma quantidade infinita de coisas com JavaScript. Para ser honesto, usar um framework como jQuery, que vamos entrar no próximo vídeo, é realmente poderoso e ajuda você a realmente simplificar o que você faz com JavaScript em termos de manipulação de HTML. No próximo vídeo, quero mostrar-lhe jQuery, que é um framework JavaScript popular. Eu também quero mostrar Bootstrap, que é uma estrutura CSS popular. Uma vez que colocamos essas estruturas, que vão fazer muito trabalho pesado para nós e tornar as coisas muito mais fáceis, você vai começar a ver que podemos desenvolver mais rápido e mais fácil e muitos desenvolvedores realmente se desenvolvem dessa maneira. É importante que você saiba que essas estruturas existem e como começar a usá-las. Estou ansioso para vê-lo no próximo vídeo sobre frameworks. 8. Estruturas: Bem-vindo de volta. Neste vídeo, vamos falar sobre frameworks, quais frameworks e como eles nos ajudam a desenvolver para a web. Upwork tem um bom artigo sobre frameworks. Tenho certeza que se você procurar por isso no Google, você provavelmente vai encontrá-lo, caso contrário, aqui está o URL direto. O que eu gosto sobre este artigo é que ele compartilha os principais recursos de um framework de aplicação web e também compartilha alguns exemplos comuns de frameworks que os desenvolvedores web reais realmente usando os principais recursos de um framework de aplicação web, bibliotecas, APIs, andaimes, Ajax, cache, segurança e compiladores. Dependendo de onde você está em sua jornada de aprender a codificar, alguns deles podem não fazer qualquer sentido, talvez todos eles não façam qualquer sentido e tudo bem. A melhor maneira de pensar em um quadro é que ele realmente é um quadro. É um monte de código que já está configurado para você desenvolver. Ele cuida do trabalho pesado em certas áreas para que você possa se concentrar nas partes totalmente personalizáveis do seu código. Tecnicamente, tudo é personalizável, mas a estrutura é configurada para que você não precise fazer coisas de funcionalidade comuns uma e outra vez. Falamos sobre autenticação, por exemplo, em um vídeo anterior. Isso é algo que é bastante comum em muitas aplicações web e sites diferentes. Faz sentido que, que se torna parte do quadro e, em seguida, outras coisas que irão ajudá-lo a desenvolver mais rápido. Há uma curva de aprendizagem extra com a aprendizagem de uma estrutura porque você tem que aprender a desenvolver nesse quadro. Mas geralmente economiza muito tempo e muitas dores de cabeça e especialmente no front-end, usando um framework CSS e um framework JavaScript, eu acho que é uma idéia muito boa. Estou prestes a mostrar-vos dois frameworks que eu uso e que são muito populares. Mas antes de mergulharmos nessas estruturas front-end, eu queria falar sobre essas estruturas de back-end. Se você já fez algum estudo em Python, você provavelmente já ouviu falar do Django, que é, eu acho que o framework mais popular para Python, é definitivamente um muito popular. Se você já olhou para Ruby para desenvolvimento web, provavelmente já ouviu falar de Ruby on Rails, mas há outros frameworks que você pode usar como Sinatra e para PHP, há um monte de frameworks também. Código inflamado que usei antes, e sei que Ravel é muito popular. O que eu quero fazer é mostrar dois frameworks que eu uso com mais frequência. Nós vamos baixá-los em nosso projeto e vamos começar a usá-los imediatamente porque, como de costume, a melhor maneira de aprender um conceito é entrar e fazê-lo. O primeiro que quero mostrar chama-se Bootstrap. Se digitarmos Bootstrap CSS no Google, vamos chegar a Bootstrap, que é uma estrutura CSS. Bootstrap é realmente poderoso para criar sites responsivos. Mas também fornece um monte de estilos já lá para criar componentes. Primeiro de tudo, o material responsivo, como você pode ver aqui, nós temos div e nós trabalhamos com div na lição sobre HTML e CSS. Mas em vez de construir nossas próprias classes, podemos apenas anexar uma classe imediatamente da coluna média 1. Como Bootstrap funciona é que como um sistema de 12 colunas. Se eu colocasse seis lá, isso significaria que é metade da largura da página e se eu colocasse três lá, isso vai ser um quarto da largura da página. Você pode começar a, aqui alguns outros exemplos. Isto vai ocupar oito colunas, esta divisão, e esta vai ocupar quatro colunas. Isso ajuda você a construir esses contêineres responsivos fluidos e fazendo isso em uma maneira de coluna. Mas também o que Bootstrap faz é que lhe dá componentes, você pode vir aqui e ver qualquer número de componentes diferentes que ele tem. Se você queria fazer uma barra de progresso exatamente como esta, você pode fazê-lo com Bootstrap, você só precisa baixar Bootstrap, vinculá-lo ao seu projeto, e então você pode construir uma estrutura como esta com alguns classes para dizer HTML qual classe ir atrás no Bootstrap e, em seguida, boom, você tem uma barra de progresso que se parece com isso. Como eu sempre digo, você começará a entender mais sobre como isso funciona enquanto nós realmente o usamos. Mas há um outro framework que eu quero introduzir antes de ficarmos presos em nosso projeto, e isso é jQuery. jQuery é um framework JavaScript. Não sei, faz com que fazer JavaScript seja muito mais fácil e intuitivo, pelo menos para mim faz. O que podemos fazer com jQuery é que podemos manipular o DOM usando jQuery. Para aqueles de vocês não sabem o que é o DOM, seu significa Document Object Model. Significa apenas sua estrutura de sua página que você definiu aqui com HTML. Podemos usar as classes que usamos em CSS. Você viu antes como definimos um ID com um hash e definimos uma classe por um ponto. Você pode usar esses seletores em jQuery para encontrar um elemento alvo e, em seguida, alterar um atributo sobre ele como, é HTML. Isso é muito poderoso e você verá em apenas um segundo, como vamos usá-lo. No próximo vídeo, porque este ficou um pouco longo, vou mostrar-vos estas estruturas. No próximo vídeo, vou mostrar a vocês uma demonstração ao vivo do uso desses frameworks. Eu acho que você vai começar a entender como eles realmente nos poupam tempo e muito mais intuitivo de usar. Este vídeo está ficando um pouco longo, então eu vou dividi-lo no próximo vídeo. Vamos continuar com a demo. 9. Bootstrap: No último vídeo, falamos sobre frameworks e eu introduzi dois frameworks que eu uso comumente, que eram Bootstrap e jQuery. Neste vídeo, eu quero falar sobre Bootstrap especificamente. Vamos baixar Bootstrap e vamos começar a brincar com ele. Se você for para a página inicial do Bootstrap, que eu acredito é getbootstrap.com, você pode clicar no botão “Download Bootstrap”, e podemos apenas baixar Bootstrap clicando neste botão aqui. Vou encontrar o diretório do meu projeto e vou clicar em “Salvar”. Voltando para a janela do meu localizador, eu vou abrir isso porque este é um arquivo zip. Vou clicar duas vezes sobre ele, ele vai extrair. Posso jogar fora o arquivo zip. Se olharmos dentro da pasta, podemos ver uma estrutura semelhante à que já temos. Nós não temos necessariamente fundos, mas eles organizaram seus CSS e JavaScript exatamente da mesma maneira que nós temos. A coisa que eu não mencionei necessariamente foi que Bootstrap também tem JavaScript, mas por enquanto só queremos usar seu arquivo CSS. Vá para CSS, e aqui, bootstrap.css é o arquivo que estamos procurando. Eu só vou clicar em arrastar isso para movê-lo para a pasta CSS. Não sei por que está aparecendo assim. Mas se voltarmos para trás, agora podemos excluir o resto dos arquivos Bootstrap. Se entrarmos em nosso editor de código, agora temos Bootstrap neles. Podemos realmente clicar nele e olhar para ele. É um arquivo longo e é preenchido com um monte de estilos diferentes, um monte de regras diferentes e é isso que faz Bootstrap funcionar. Mas a boa notícia é que você não precisa saber tudo isso. Você só precisa saber como usá-lo. Vou fechar isso. Há outro passo que precisamos fazer antes de começarmos a usá-lo em nosso projeto, que é vincular a essa folha de estilo. Lembra-se de como nos ligamos aqui ao nosso styles.css? Bem, precisamos fazer isso de novo. O que eu vou fazer é eu vou copiar isso pressionando Comando C, nova linha Command V, ou o equivalente em um computador Windows e todos os detalhes serão os mesmos que definir o nome do arquivo é diferente, então eu vou colocar aqui bootstrap.css Eu quero que você olhar de perto como nós atualizar a página, porque vai haver algumas mudanças imediatamente. Se eu recarregar, você pode ver que o estilo da nossa página já mudou. Neste caso, sabemos que o Bootstrap está funcionando agora. Como usamos o Bootstrap? Bem, aqui está a documentação. Documentação é apenas o termo técnico para que você possa pensar nisso como um manual ou apenas todas as informações que você precisa saber para ser capaz de usar um framework ou um pedaço de software. Aqui podemos definir as colunas como mencionamos anteriormente, mas o que podemos fazer aqui, que eu acho que será um pouco mais divertido, é copiar através de algum componente. Você pode ver a rapidez com que podemos obter um site estilizado aparecendo em nossa tela. Eu vou expandir a janela para que eu possa ver a barra de menu aqui e eu vou descer para o cabeçalho da página. Vou desmoronar isto outra vez. Onde é que está? Aqui está. Vou apagar todas as nossas divs que temos até agora, então selecionando tudo isso e excluindo. Temos basicamente um documento em branco. O que eu quero fazer é começar a construir nosso documento novamente, mas usando elementos Bootstrap. Para obter este cabeçalho, podemos copiar isso e colocá-lo diretamente. Agora, copiar e colar às vezes não funciona, então você deve seguir seu conteúdo para torná-lo tão bonito quanto aqui. Se eu recarregar a página, temos um cabeçalho e podemos adicionar qualquer número de componentes aqui. Eu posso ir a essa coisa que eles chamam de jumbotron. Parece bem legal. Eu vou copiar esse código e, em seguida, eu vou colocá-lo após a nossa página cabeçalho div. Vou clicar em “Salvar”, e então ele aparece. Agora o preenchimento está um pouco fora e isso é porque não usamos outro recurso do bootstrap, que é um contêiner. O que eu preciso fazer é embrulhar tudo isso que acabamos de criar em um recipiente. Isso é tudo, é claro, uma escolha pessoal. Cabe a você como você estiliza seu site. Mas tudo o que precisamos fazer é pegar um div e dar-lhe uma classe de contêiner. Eu vou recuar isso para que seja óbvio que está dentro desta div pai, e então eu vou fechar a div, tag de fechamento. Agora eu quero que você assista de perto. Vou abrir a página e assistir enquanto atualizamos a página. Nós agora colocamos em um recipiente, que olhando para ele em uma tela grande, ele apenas dá mais preenchimento nas laterais, e então quando olhamos para ele em uma tela menor, o preenchimento encolhe, e então se nós fôssemos movê-lo assim, ele é responsivo, que dependendo de como você escreve seu código, é uma grande economia de tempo. Agora temos este adorável contentor. Nós temos este cabeçalho de página adorável que podemos editar qualquer um disso a propósito, podemos voltar aqui e nesta tag H1, podemos dizer, “Nosso site incrível.” Qual seria o subtexto para nosso site incrível, “O melhor site de sempre.” Então diga, em vez de dizer olá mundo, “Olá e bem-vindo.” Em seguida, em nossa tag p, “Este é o melhor site que você já viu.” Reclamação negrito sobre. Você mudou tudo isso agora. Você pode mudar o texto no botão, bem indo para aqui, eu vou expandir para fora e entre as tags a, que é apenas uma maneira de definir um link, você pode colocar o texto que quiser aqui. Em vez de aprender mais, podemos dizer, “Comece ”, em vez disso, salve isso. Mova isso para o lado, atualize e de repente você pode ver como Bootstrap está trabalhando para nós. Agora, se fôssemos codificar isso nós mesmos, seria muito mais longo porque nós mesmos teremos que definir todos esses estilos. Só para demonstrar o que Bootstrap está fazendo por nós, se fôssemos tirar essas aulas, como seria o nosso site? Vou me livrar dessa aula e atualizar a página. Sim, ainda parece bom, mas não há fronteira lá, não há estofamento. Para um efeito mais dramático, eu poderia me livrar desta aula aqui no jumbotron. Voltando, não há grande estofamento, não há cor de fundo. Bootstrap está adicionando tudo isso. Espero que você possa começar a ver como o bootstrap está tornando esse processo de desenvolvimento de sites responsivos que parecem muito legais. Eu acho que este é um design muito bom, e eles tornam muito mais fácil. Eu encorajo você a baixar Bootstrap e apenas começar a jogar com ele. Copie e cole alguns desses diferentes pedaços de código e se você alguma vez gosta, digamos, por exemplo, queria construir um formulário e ter uma boa aparência, você poderia procurar formulário e então você pode vir para baixo para formulários, e você pode colocar em tem essas guias diferentes, todos os tipos de coisas, e você obtém todos esses componentes estilizados diretamente fora da caixa com Bootstrap. Eu acho que eu deixei meu ponto claro agora de apenas o quanto um framework como Bootstrap lhe dá tanto e economiza muito tempo se você quiser criar um aplicativo e estilizá-lo. No próximo vídeo, vamos falar sobre o outro framework que eu realmente amo, e que é jQuery. 10. JQuery: No último vídeo, usamos um framework CSS popular chamado Bootstrap para agilizar a forma como criamos nossas páginas web e fomos capazes criar componentes como este com uma pequena quantidade de código e é tudo sobre como estruturamos nosso documento e também colocar diferentes classes em nossos elementos para herdar alguns desses estilos diretamente do Bootstrap. Neste vídeo, vamos rever jQuery muito brevemente a propósito. Há muito que você pode fazer com jQuery. Mas jQuery, se vamos para o seu site que é JQuery.com é uma biblioteca JavaScript, tecnicamente não é um framework. É uma biblioteca onde você pode escrever menos código e fazer muito com ele. Se rolarmos para baixo na página inicial, podemos dar uma breve olhada nas três características principais do jQuery. Um deles sendo DOM Traversal e Manipulação. Isso soa extravagante, mas basicamente o que DOM representa é modelo de objeto de documento e essencialmente o que um modelo de objeto de documento é exatamente o que temos aqui. Temos elementos diferentes e está estruturado de uma certa forma. Este DIV, por exemplo, está aninhado dentro deste DIV e temos esta tag de cabeçalho dentro do DIV. Basicamente você pode pensar em nossa estrutura HTML como nosso modelo de objeto de documento. O que jQuery nos permite fazer é manipular nossos elementos. Podemos visar um determinado elemento usando um seletor jQuery e, em seguida, podemos chamar um método para mudar algo. Neste caso, vamos olhar para este botão com a classe continuar e, em seguida, mudaria o HTML para o próximo passo, ponto-ponto. A segunda característica que jQuery é realmente bom para é a manipulação de eventos. Manipulação de eventos, basicamente um evento é qualquer coisa onde algo acontece na página para que eu possa clicar neste botão. Isso é um evento, mesmo eu mover o mouse ao redor pode ser um evento, me clicar com o botão direito do mouse, me rolando para uma determinada posição na página, estes são todos eu interagindo com a página web e que é considerado um evento. Sempre que um evento acontece, o que podemos fazer é programar com jQuery para que algo mais aconteça. Neste exemplo que nós estamos indo para criar um exemplo semelhante em nosso projeto é se algo é clicado em, assim, neste caso, um botão dentro recipiente botão. Se ele for clicado, então essa caixa oculta será exibida. A terceira coisa que podemos fazer com jQuery é Ajax. Ajax é um pouco mais de um conceito avançado, mas é uma maneira que podemos chamar um script local no servidor. Podemos basicamente acessar o backend e pegar dados sem ter que recarregar a página e usar código back-end. Não se preocupe muito com o Ajax ainda, mas é muito poderoso uma vez que você começa a entrar mais em jQuery. No site do jQuery, eu quero que você clique no “botão Download”, e na página de download, vamos encontrar um link para a produção compactada jQuery. Primeiro de tudo, vamos apenas clicar nele. Parece bobagem porque tem sido o que é chamado de minified para torná-lo um arquivo menor. Mas se quisermos ver como ele realmente parece, podemos clicar no próximo arquivo e então podemos ver um monte de JavaScript com comentários lá descrevendo o que está acontecendo. Não é esperado que você entenda nada disso, a propósito. Opa, eu preciso voltar a isso. Podemos voltar aqui e podemos baixar este aqui e não se preocupe com o número da versão nunca, isso vai subir constantemente todas as vezes. Basta clicar com o botão direito do mouse sobre ele e clicar em “Salvar link como”. Este será um arquivo JavaScript e você só precisa ir para seu diretório do projeto e ir para o seu diretório JavaScript que é onde você armazena todo o seu JavaScript para o seu projeto e clique em “Salvar”. Você pode vê-lo aqui já aparecendo. Você pode olhar para ele em seu editor de código, mas não vai fazer qualquer sentido porque é minificado, o que, aliás, é demonstrado por este ponto min ponto JS. Se baixarmos este, por exemplo, se eu abrir este em uma nova guia, ele não tem aquele ponto min nele. Você pode ver todo o arquivo descompactado. Mas, para os nossos propósitos, não precisamos olhar para o código para que possamos apenas tê-lo em miniatura. Agora, assim como fizemos com CSS, há mais uma coisa que precisamos fazer para incluí-lo em nosso projeto e que é referenciá-lo com essa tag de script. Assim como fizemos de antemão, vou copiar isso. Eu vou colocá-lo acima porque eu quero que meu jQuery para carregar antes de eu usá-lo usando meus próprios scripts e eu vou apenas clicar com o botão direito do mouse aqui e renomear isso para que eu possa copiar e colar o nome, me economizar um pouco de tempo. Vou fechar isso e voltar aqui e está na mesma foto, só precisamos mudar o nome do arquivo. Agora, isso vai ser incluído e se nós recarregar a página, nós não vamos notar nada ainda porque nós realmente não usamos qualquer jQuery. O que eu vou fazer é entrar em scripts, excluir isso porque esse elemento caixa 1, nós nem temos mais em nosso projeto então isso praticamente não faz nada. Eu vou para backspace isso e o que eu vou fazer é começar com algo que é realmente comum em jQuery e não se preocupe, eu vou explicar o que isso é em apenas um momento. Mas eu vou digitar em cifrão documento ponto pronto. Abrir a função de colchetes, abrir e fechar colchetes, espaço. Colchetes, vá para o fim, coloque um ponto-e-vírgula e dentro aqui, eu vou colocar o console dot log jQuery carregado e, em seguida, terminar isso com um ponto-e-vírgula. Vamos atualizar a página deste lado depois de clicar em “Salvar”. Como sabemos se está funcionando? Porque basicamente acabamos de fazer um registro de console. Na verdade, não está mudando nada na página. Mas se você se lembrar das ferramentas de desenvolvedor com as quais trabalhamos logo no início do nosso vídeo, podemos abri-las. Estou em um Mac, então pressiono a opção Comando I no Chrome e agora podemos ver o console aberto. Provavelmente eu tinha meu console aberto antes. Ele provavelmente vai aparecer com isso e, em seguida, você clicar em “Console” e você pode começar a ver seu console JavaScript. Agora temos um erro e o erro é cifrão não está definido. O que fizemos de errado aqui? Deixe-me voltar. Eu mencionei que deveríamos ter colocado isso em primeiro lugar, mas não colocamos. Então eu vou cortar e colar isso e colocá-lo onde é suposto ir para cima. Este é um conceito importante em vez de entender é a ordem de seus arquivos. Se eu começar a usar o sinal de dólar que essa coisa toda é um seletor jQuery e um método jQuery, se eu começar a usar isso antes mesmo de ter carregado jQuery, assim como era antes onde estava por baixo. Onde estava por baixo. Isso está carregando antes mesmo do jQuery está carregando, então é claro que ele tem um erro. Então, certifique-se de que está acima. Recarregar a página, e ele diz jQuery carregado. Agora sabemos que jQuery está funcionando, mas o que é isso? Basicamente, a primeira parte disso é o seletor, e a segunda parte é o método. No modelo de objeto de documento, somos capazes de direcionar todo o documento usando uma variável chamada documento. A convenção com seletores jQuery sempre vai, $, colchetes abertos, e, em seguida, o que quer que seja que você deseja selecionar. Então você fecharia seus colchetes, colocaria um ponto para definir seu método. Neste caso, temos um método pronto, que basicamente, faz com que essa função seja acionada sempre que isso estiver pronto. Então nós selecionamos o documento, e então quando ele estiver pronto, vamos iniciar esta função. Novamente, provavelmente estou te jogando embaixo do ônibus aqui, mas veremos em um segundo como isso é poderoso. Nós não queremos apenas fazer um log out console, que apenas nos ajuda a determinar se jQuery está funcionando ou não. O que podemos fazer, é em vez de fazer o log do console, realmente começar a lidar com um evento na página e realmente fazer algo que faz um pouco mais de sentido. O que eu vou fazer é selecionar um de nossos objetos em nossa página usando um seletor jQuery, e o que é ótimo sobre os seletores jQuery, é que podemos segmentar elementos da mesma maneira que teríamos como alvo com styles.css, com CSS, desculpe, em geral. Então, podemos segmentar elementos de um determinado ID usando hash, e podemos segmentar elementos de uma determinada classe usando o ponto. Então o que eu vou fazer, nós realmente não temos mais esses, então é muito inútil, eu poderia muito bem simplesmente deletá-los. Não os temos mais, mas o que temos são esses elementos diferentes. O que posso fazer aqui é atingir esta div em particular pela sua classe. Como eu mostrei antes, podemos fazer ponto para dizer que é uma classe, e então podemos dizer cabeçalho da página. Acho que foi isso. Cabeçalho da página, sim, isso está correto. Agora nós selecionamos todos os elementos com o cabeçalho da página de classe. Neste caso, há apenas um, então podemos entrar aqui, e podemos manipular o HTML assim como o exemplo que vimos no site do jQuery. Sempre que estamos digitando apenas texto cru, precisamos ter aspas simples ou aspas duplas, então o que eu vou fazer aqui é apenas colocar em Olá, e colocar um ponto-e-vírgula no final para terminar essa função, e de repente, o todo o cabeçalho da minha página foi substituído por Olá, o que não é tão bom. Eu acho que provavelmente uma idéia melhor para deixá-lo. Mas isso só vai mostrar como o número 1, eu vou colocar isso de novo. Como número 1, podemos selecionar um elemento e, em seguida, podemos manipulá-lo. Isto é muito poderoso. Podemos colocar todos os tipos de lógica aqui, como faríamos usando JavaScript. Mas onde jQuery realmente ajuda é por ter esses seletores e esses métodos para manipular facilmente. Agora, eu posso estar falando sobre você agora, mas eu só quero mostrar exatamente para que jQuery é ótimo. O que eu quero fazer é um identificador comum, um evento comum, que é um clique. Então o que eu vou fazer para tornar isso um pouco mais fácil, é que eu vou descer para este botão, que é a tag A aqui, e o que eu vou fazer é dado um ID, possamos direcioná-lo muito especificamente. Vou chamá-lo de “Botão Começar”. Então isso tem uma aula agora. Agora o que eu vou fazer, é eu vou configurar um manipulador de eventos, e como você faz isso é você primeiro alvo o elemento. Então eu vou, na verdade, há algumas maneiras de fazer isso, mas eu vou te mostrar dessa maneira. Vou pegar o botão “Começar”. Coloquei um hash porque é uma identificação. Vou selecionar o botão Começar. Eu vou fazer o método on, e então a primeira coisa que eu vou dizer é Click, porque esse é o evento que queremos lidar. Então a segunda parte será a função. Então, o que vai acontecer quando o clique for acionado? No final eu vou colocar um ponto-e-vírgula porque estamos usando JavaScript. Bem aqui, eu posso fazer qualquer número de coisas que eu quiser, mas vamos apenas fazer algo tolo apenas por causa disso, e esconder o cabeçalho da página. Podemos pegar essa classe, e então podemos usar outro seletor jQuery para put.page-header.hide. Ocultar é um método que você pode usar. É um método jQuery, e é muito fácil. Eu só seleciono, e então eu posso colocar.hide e então eu vou escondê-lo. Vamos ver se funciona. Vou atualizar nosso projeto, clicar no botão Começar e ocultar o cabeçalho da página. Agora, eu sei que isso não é realmente muito prático, então o que eu vou fazer é dar um exemplo melhor. Ou seja, eu vou colocar algum texto escondido aqui abaixo. Vamos começar com uma tag p, apontando o p, e vamos colocar escondido. Bem, digamos que esta é a resposta para o seu problema. Agora, se guardarmos isso, e atualizarmos a página, ela aparecerá. Ele vai aparecer por padrão, que é o que você provavelmente esperava. Mas se quisermos que ele seja escondido no início, o que vamos fazer é adicionar um atributo a esta tag p, estilo igual, aspas duplas, e dentro podemos fazer um display none. Salve isso, atualize a página, e não há nenhum parágrafo lá. Outra coisa que eu quero fazer é dar uma identificação para que eu possa direcioná-lo especificamente, e eu vou chamar este texto oculto. Agora ele tem um ID, e ele tem um estilo que está dizendo a ele para não exibir quando a página é carregada pela primeira vez. O que posso fazer é direcioná-lo aqui, usando seu ID, que é texto oculto. É uma identificação, então vou usar haxixe. Agora eu selecionei o texto oculto, e o que eu vou fazer é usar um método, um método muito simples no jQuery, que é.show. Então salve essa página, atualize. Você não veria nada ainda, mas o que acontece quando clicamos no botão? Os textos ocultos que definimos para exibir como nenhum em nosso HTML agora foram manipulados usando jQuery. Este é um exemplo muito básico do que podemos fazer com jQuery. Há tantas coisas que podemos fazer com jQuery. Eu só quero que você pense em todas as maneiras diferentes de manipular uma página web ou lidar com eventos. Então poderíamos fazer algo que se eu clicar neste cabeçalho, algo acontece ou se eu rolar algo acontece. Ou poderíamos descobrir, poderíamos fazer problemas matemáticos e todos os tipos de coisas aqui e podemos basicamente fazer um número infinito de coisas usando jQuery para segmentar elementos e depois manipulá-los. Então também podemos combinar isso com manipuladores de eventos como fizemos aqui, e podemos basicamente manipular o DOM, manipular nosso documento com base em como a pessoa interage com a página da web. Agora, é claro, você pode fazer isso apenas com JavaScript, você não precisa jQuery. Mas esses seletores e esses métodos tornam isso muito mais fácil ao ponto em que eu posso entrar aqui com confiança e segmentar outro elemento se nós apenas dermos a isso um ID de jumbotron, e nós podemos apenas fazer #jumbotron .htmlblah. Vamos checar duas vezes, está tudo correto, jumbotron, blá. De repente, ele se transforma em blá. Se eu tivesse que fazer isso em JavaScript, talvez eu estivesse procurando, mas com jQuery, isso só torna tão fácil e intuitivo, e isso me poupa muitas dores de cabeça e eu realmente gosto de trabalhar com ele. Dada a sua popularidade, eu diria que muitas pessoas gostam de trabalhar com ele também. No próximo vídeo, vamos seguir em frente do front-end e começar a olhar para o back-end. Espero que não estejamos esmagando você até agora. Sinta-se livre para fazer perguntas e eu vou ajudá-lo o melhor que puder, e espero que estejamos aprendendo algumas coisas boas até agora. Vejo você no próximo vídeo. 11. Configurando um servidor básico: Agora temos nosso site básico que construímos com HTML, CSS e JavaScript. Mas o desenvolvimento web front-end pode ser apenas a ponta do iceberg quando se trata do processo geral de desenvolvimento web, e o back-end, como discutimos anteriormente, pode ser construído em qualquer número de linguagens de programação com qualquer número de configurações de servidor, ele pode ficar infinitamente mais complexo. Mas no vídeo de hoje, e nos próximos vídeos, quero falar sobre o back-end da maneira mais simples. Também com o back-end, pode ser uma coisa difícil de entender sem realmente vê-lo, realmente interagir com ele, e realmente implementar em seu projeto. Isso é o que vamos fazer imediatamente. Nós vamos primeiro de tudo obter um servidor então nós vamos começar a escrever algum código PHP. PHP é uma linguagem de programação back-end muito comum para a web. É o que muitos sites usam, e isso vai tornar mais fácil para nós implantar nosso site mais tarde, bem como, tendo PHP como base de código. O que você precisa para desenvolvimento web back-end, se você olhar para o nosso site que acabamos de construir no front-end aqui. Nós só tínhamos que ter uma pasta, e nós podemos literalmente apenas abrir o arquivo como fizemos antes da mão e apenas lê-lo diretamente do sistema de arquivos em nosso navegador. Veja aqui nós podemos ver que ele está apenas lendo o arquivo. A diferença entre este e o desenvolvimento de back-end é que não podemos simplesmente lê-lo fora do sistema de arquivos final. Quando estamos fazendo programação back-end, precisamos do que é chamado de servidor. Agora, para PHP, uma pilha comum, como eles chamam, é a pilha de lâmpadas, que nós digitamos, pilha de lâmpadas é Linux. Linux que é o sistema operacional, Apache, que é o servidor HTTP, MySQL e outras alternativas, e PHP e outras alternativas. Para nós, vamos apenas usar MySQL e PHP. Não importa que estejamos usando o Apache. Você realmente não precisa saber por que isso é. Mas não estamos necessariamente usando Linux. Eu tenho um computador, meu computador é Mac OS X. Você pode estar desenvolvendo no Windows, dependendo se você está desenvolvendo no Windows ou você está desenvolvendo no Mac ou mesmo Linux, você precisa de um servidor. Para Mac, eu só vou expandir isso. Há um servidor chamado MAMP que você pode instalar e MAMP é apenas lâmpada com o L substituído por M para Mac. Se você é um usuário do Windows, você pode digitar WAMP, eu realmente nunca usei WAMP porque eu sempre uso MAMP. Mas é basicamente o equivalente a MAMP, mas para Windows. Indo para o MAMP, vou baixar o MAMP aqui. Vou encontrar a versão mais recente. Faça o download. Vou colocar isso no meu diretório de downloads. Tudo bem, depois que eu esperar muito MAMP agora é baixado e nós só precisamos instalá-lo. Vou apenas clicar nos prompts. Concordo, vai levar um giga de espaço, eu não sabia que era tão grande. Digitando sua senha para instalar o software. Tudo bem, nossa instalação foi bem sucedida, não há campos especiais lá qualquer coisa que temos saber como fazer quando estamos instalando isso, nós apenas clicar em continuar basicamente em tudo, nós fechamos esses sites Agora. Uma vez instalado o MAMP, podemos abri-lo, e ele aparece assim. Antes que possamos iniciar o servidor, porém, temos que alterar algumas configurações. Vá para o servidor web aqui. O que eu quero que você faça é clicar neste ícone para entrar no nosso projeto e clicar nele. Agora eu o defini para o meu diretório de projeto e eu vou clicar em OK. Agora o que eu vou fazer é clicar em Iniciar serviço. Você pode ver agora que o, desculpe ele se moveu. Mas você pode ver agora que o servidor MySQL agora está verde, que significa que ele está ativado, e o servidor Apache é verde, que significa que ele está agora ligado. Vai abrir a página inicial do MAMP. O que você pode fazer para acessar seu site é clicar no meu site. Temos nosso site de novo. Podemos acessá-lo através do sistema de arquivos assim, ou podemos acessá-lo através do nosso novo servidor, que é localhost dois-pontos 8888. Por que isso é importante, por que precisamos ter um servidor é porque logo estaremos transformando nosso código em código back-end. Outra coisa que podemos fazer dentro da página inicial do MAMP é ir para ferramentas e clique em PHP my admin. Agora que estamos no PHP meu admin, podemos ver quais bancos de dados temos instalados. PHP my admin é basicamente um painel de controle para trabalhar com bancos de dados. Então, há um aqui chamado MySQL. Mas vamos criar um novo banco de dados muito em breve. Eu acho que eu vou deixá-lo lá para este vídeo porque o próximo nós vamos estar fazendo algum PHP. Mas agora que você tem seu servidor, você está pronto para começar a fazer alguma programação back-end. Vejo-te no próximo vídeo. 12. PHP: No último vídeo, configuramos o MAMP porque estou em um computador Mac. Se você estiver em um Windows, você teria configurado WAMP esperançosamente, e se você estiver no Linux, você pode configurar um equivalente Linux, e agora temos um servidor. A razão pela qual isso surge quando vamos para localhost 8888 é porque direcionamos, se você se lembra, em nossas Preferências, em nossa raiz de documento, definimos nosso projeto para raiz de documento. Podemos configurar um novo projeto e direcionar o servidor para lá e ele aparecerá lá, mas pensei que seria mais fácil começar com o que já criamos. Agora a primeira coisa que podemos fazer para começar a usar PHP e transformar nosso projeto puramente front-end em algo que usa o back-end, é que podemos entrar aqui e em vez disso being.html, podemos chamar it.php. Como é que eu faço isso? Eu vou fechar isso, e eu vou aqui, e eu vou clicar com o botão direito Renomear index.PHP e isso vai dizer ao servidor que é um arquivo PHP. Vou recarregar a página e nada muda. Então você é como Chris, por que fizemos isso? Bem, alguma coisa mudou e se abrirmos isto ou tentarmos abrir isto apenas a partir do sistema de ficheiros, só irá mostrar o conteúdo da página. Ele não exibirá HTML porque você só pode puxar arquivos HTML aqui. O que você precisa é de um servidor e por que precisamos do.PHP é porque vamos começar a colocar algum código PHP aqui. Em vez de h1, o que eu quero fazer é, em vez disso, escrever algum código PHP. Agora a coisa boa sobre o PHP é que você pode simplesmente inseri-lo em qualquer lugar em um documento PHP que de outra forma se parece com HTML. Agora temos HTML puro, mesmo que seja got.PHP lá. O que podemos fazer para inserir algum PHP é abrir colchetes, interrogação PHP e então eu vou fechá-lo imediatamente para que não esqueçamos, você tem um ponto de interrogação novamente e uma tag de fechamento. Agora o que eu posso fazer aqui, o que não vai ser tão incrível, é usar a impressão de função para dizer, “Olá Mundo”. Precisa de um fechamento. Então, se eu mover isso de volta aqui, você verá que esta primeira parte da tag h1 agora é “Hello World” porque eu coloquei em alguma programação PHP. Não há nenhuma maneira que seu navegador pode descobrir isso a menos que fosse para executar um servidor, porque se eu apenas digitar isso, ele aparecerá diretamente como nós digitamos. Ele só o vê como texto. Então é por isso que precisamos de um servidor que possa interpretar o PHP e processar esse back-end. Isso não é realmente relevante, poderíamos ter apenas digitado “Olá Mundo” aqui e obter os mesmos resultados. O que podemos fazer com o PHP? Bem, podemos usá-lo como uma linguagem de programação. O que posso fazer aqui é definir algumas variáveis. Eu vou apenas obter algumas tags de abertura e fechamento do PHP e eu vou dizer, no PHP pela maneira como você define variáveis com um sinal $ e, em seguida, o nome das variáveis. Vamos chamar este título, e eu vou chamar isso, eu chamei o site antes? Deixe-me voltar um passo, “Nosso site incrível”. Vou colocar tudo de volta e, em seguida, o título vai agora ser ponto-e-vírgula para terminar “Meu site incrível”. Então aqui em baixo, em vez de colocar para fora uma string, que é apenas o texto explícito, podemos fazer cabeçalho de impressão. “ Meu site incrível”. Então você vê aqui nós definimos uma variável e agora estamos colocando-a aqui. Por que isso é importante? Bem, vamos agora fazer programação back-end para que possamos digitar coisas como uma declaração if. Se eu não sei, nós realmente não configuramos muitas variáveis aqui, mas se uma é menos de duas, vamos mudar o título para “Meu site não tão incrível”. Um é menos de dois. Assim, o cabeçalho muda, se foi definido como, se um for maior que dois, o cabeçalho não mudaria. Espero que isso demonstre como podemos colocar alguma lógica e começar a fazer alguma programação real e uma coisa que eu quero deixar claro é bem este código back-end é todo lado do servidor. O que isso significa é que acontece antes de chegar ao seu navegador. Se realmente olharmos para a fonte da página aqui, não veremos nenhuma lógica, vamos literalmente ver a saída. Em “Meu site não tão incrível”, nós não veríamos esse código aqui, porque o que acontece no lado back-end é que isso tudo é descoberto, tudo isso é descoberto e então ele envia através de apenas um straight up HTML para o front-end. Nós só vemos os resultados em nosso navegador do que aconteceu no back-end, nós não vemos o código back-end real. Enquanto que se estivéssemos escrevendo em JavaScript, poderíamos ir para baixo para nossas ferramentas de desenvolvedor, olhar em Sources podemos ver todos os scripts aqui. Eu posso olhar para isso, eu posso olhar aqui, eu posso ver os scripts, eu posso ver toda a programação acontecendo aqui, e se eu fosse mudar algo com JavaScript, digamos, por exemplo, lembre-se que nós podemos inspecionar diferentes elementos da página. Se pudéssemos encontrar isto, lá vamos nós, podemos encontrar este elemento, que é mostrar nenhum. Se clicarmos em Get Started, de repente que muda ao vivo na nossa frente e podemos ver esse código aqui em nossa foto scripts. É tudo front-end, é o ponto que estou fazendo. Mas qualquer coisa de programação sábia que fazemos no PHP, é uma linguagem back-end, então não vai passar para o front-end. Tudo é é calculado lado do servidor, então neste servidor, e, em seguida, a única coisa que faz isso para o seu navegador é o HTML, CSS, e JavaScript. Esperemos que eu realmente colocar algum código em nossos projetos tenha feito isso um pouco mais claro para você e no próximo vídeo, vamos ver como desenvolver um PHP é realmente útil além apenas criar uma variável de cabeçalho e, em seguida, colocá-lo em uma tag de cabeçalho. Vejo-te no próximo. 13. MySQL: No último vídeo, começamos com PHP, mas não fizemos nada tão incrível ou nada que realmente não poderíamos ter feito usando o que podemos fazer no front-end. O que podemos usar o back-end para, e é o que é realmente importante usar o back-end, é a interação com um banco de dados. Antes de escrever mais algum código PHP, eu quero falar um pouco sobre bancos de dados e realmente criar um banco de dados com algumas tabelas. Vou fazer esta largura total. O que eu vou fazer é abrir o administrador do PHP. Podemos fazer isso indo para sua página inicial do MAMP ou página inicial do WAMP. Vá para Ferramentas e, em seguida, vá para phpMyAdmin. Se você estiver usando um servidor diferente do MAMP, talvez seja necessário procurar como acessar o phpMyAdmin, mas ele deve estar lá. Agora, no phpMyAdmin, o que podemos fazer é fazer qualquer número de funções de banco de dados como administrador. Podemos clicar em “Novo” aqui e criar um novo banco de dados. Eu só vou chamar este banco de dados test_db. Eu vou criar, e de repente nós temos um banco de dados. Agora, um banco de dados é um lugar onde você armazena seus dados, e pode ser complexo, como você os estrutura. A coisa mais difícil com bancos de dados é como projetá-lo e como obter tudo projetado perfeitamente para que as tabelas se relacionem entre si da maneira mais eficiente possível. Mas nós estamos apenas cobrindo o básico aqui, e então o que você pode pensar de bancos de dados como são apenas seleções ou grupos de tabelas. Um tipo de objeto comum em aplicativos e sites é um usuário. Vou começar por aí e criar uma tabela para os usuários. Vou ligar para esses usuários. Indo para ir com o número padrão de colunas. O primeiro campo deve ser um identificador exclusivo, então eu vou chamá-lo de ID. Eu só vou mantê-lo no INT, o que significa inteiro. Vou clicar nisto para não assinar, que significa que não será negativo. Vou torná-lo o índice primário, e clicar em “Ok” nisto. Vou clicar aqui, os incrementos automáticos, então em vez de definir o ID cada vez, cada novo, cada novo registro que criarmos, haverá um novo ID automaticamente. Eu só vou colocar em alguns campos básicos, nome de usuário, e então nós escolhemos o tipo de texto. Digamos senha, TEXTO e e-mail, TEXT. Você também pode colocar em algumas regras sobre quanto tempo você deseja aceitar esses campos. Nós realmente não precisamos disso agora, então nós podemos apenas clicar em “Salvar” ou podemos clicar em “Visualizar SQL”. Por que eu queria mencionar pré-visualização SQL é, este aqui é o código SQL que o PHP, meu administrador gerou para nós. Se quiséssemos escrever isso nós mesmos, poderíamos simplesmente copiar isso, ir para a guia SQL, escrever isso nós mesmos e clicar em “Executar”. Teríamos o mesmo resultado. Mas isso obviamente agiliza para nós, torna isso um pouco mais fácil com ser interativo e tal, e você não precisa de nenhum conhecimento de SQL. Para olhar para esta consulta apenas rapidamente para que você possa reconhecer SQL quando vê-lo. Temos algumas palavras-chave aqui, CREATE TABLE. Então definimos o banco de dados que estamos direcionando. Ponta a mesa que estamos mirando. O ID que é um número inteiro sem sinal, não é nulo, o que significa que não está vazio e vai ordenar incremento. Em seguida, o nome de usuário, que não é texto nulo, e a senha, o texto não nulo, e-mail, o texto não nulo. A chave primária sendo ID e o mecanismo sendo InnoDB. Vou clicar em “Fechar” e clicar em “Salvar”. Você pode ver agora que temos uma tabela que aparece em nosso banco de dados. Podemos ver os diferentes campos aqui. O que podemos fazer com esta tabela é que podemos inserir. Vou colocar um nome de usuário. Digamos que Chris, para senha, vou digitar a senha do Chris. Aqui embaixo, vou digitar chris@christhefreelancer.com. Clique em “Ir, e temos uma nova linha. Aqui está o código que poderíamos ter feito para inserir uma linha na nossa tabela. Se voltarmos a procurar, podemos ver que esta é a nossa mesa. Temos ID de 1, nome de usuário de Chris, senha da senha de Chris e e-mail de chris@christhefreelancer.com. Agora, como eu disse, nós podemos executar SQL nós mesmos, então eu vou copiar novamente no SQL que nós geramos antes. Posso mudar esses detalhes. Talvez seja Denise e temos a senha da Denise, e quero compartilhar a senha dela com todos, então vou digitar denise@gmail.com. Se eu clicar em “Ir”, isso deve funcionar. Diz: “Marque uma linha inserida.” Se voltarmos, temos dois usuários em nosso banco de dados agora e escrevi mal Denise, que significa que posso entrar aqui e clicar em “Editar”. O nome dela não é Dennis, é Denise. Esse e-mail pode levar a algum lugar, mas não leva a nenhuma Denise que eu conheço. O que podemos fazer agora é adicionar outra tabela. Este é um lead para bancos de dados relacionais. O que eu vou fazer é criar o ID novamente, e eu vou fazer um índice primário não assinado que auto incrementa como antes. O que vou fazer aqui é colocar o ID do proprietário. O que podemos fazer com o ID do proprietário é ter que, como relacionado a um ID em usuários, possamos associar este animal de estimação em nossa tabela, animais de estimação a um determinado usuário. Vou colocar o nome aqui, fazer disso um campo de texto. Então eu vou criar um tipo, digamos tipo. Pode ser cão, gato, qualquer coisa, e vamos clicar em “Salvar”. Agora temos esta mesa de animais. Vamos inserir um nome de animal de estimação, identificação do proprietário. Vamos atribuí-lo a mim. Eu era um, então atribua para mim. Vou chamar-lhe Boris, e é um cão. Então temos isso aí. Agora estes não estão realmente vinculados ainda, e há certas maneiras de fazer isso dentro do phpMyAdmin, mas não vamos aprofundar muito os bancos de dados neste curso. Mas o que queremos fazer agora é realmente usar este banco de dados, interagir com este banco de dados usando um código PHP. Nós já temos nosso projeto agora, ele já tem PHP nele. O próximo passo para nós é conectar-se a este banco de dados e, em seguida, começar a produzir coisas do banco de dados. Quando fizermos isso, você será capaz de ver a coisa toda se aproximando. O banco de dados trabalhando com o back-end para produzir o front-end, e, em seguida, o contrário onde podemos usar o front-end para enviar uma solicitação de servidor para o back-end para manipular o banco de dados. Isso, em essência, é todo o ciclo de desenvolvimento web. Estou animado para mostrar o próximo vídeo, que é onde vamos estar conectando ao banco de dados e criando nosso aplicativo web muito básico, mas espero muito revelador. Vejo você no próximo vídeo. 14. Conectando-se a um banco de dados: No último vídeo, criamos um banco de dados. Inserimos algumas tabelas nesse banco de dados e, em seguida, inserimos alguns registros nessas tabelas de banco de dados. Agora neste vídeo, vamos finalmente trazer esses registros para nossos projetos usando PHP. A maneira de fazer isso é estabelecer uma conexão com o banco de dados e, em seguida, acessar esses registros diferentes através de SQL e, em seguida, implementar com PHP. Uma das maneiras que podemos começar a conexão é que eu tenho alguns documentos aqui do MAMP. Eles nos deram algum código para trabalhar aqui. Vou copiar tudo, exceto as etiquetas, porque já as temos em nosso projeto. Vou falar com o meu editor de código. Eu posso me livrar disso porque é bobagem de qualquer maneira. Então eu posso colar neste código de exemplo. Agora o que vamos ter que fazer é mudar isso para uma circunstância específica. Não estamos olhando para um banco de dados chamado Performance Schema. Estamos agora olhando para um banco de dados chamado teste DB. Agora, se fizemos tudo corretamente, isso deve se conectar com sucesso e devemos ver uma mensagem de sucesso. Diz “conectado com sucesso”. A razão é porque colocamos aqui eco. Echo é outra forma de imprimir texto em uma tela usando PHP. Se houvesse uma era, a página teria morrido e, em seguida, o que teria cuspido o erro. Mas como ele se conectou com sucesso, recebemos esse feedback. Agora que sabemos que temos uma conexão, agora é sobre trazer os dados que temos e colocá-los para fora em nosso aplicativo. Para isso, eu tenho um outro artigo aqui de escolas W3. Eles têm este pequeno exemplo aqui. O que já fizemos é que criamos nossa conexão, então não precisamos fazer isso de novo. Mas o que precisamos fazer é criar uma consulta SQL e, em seguida, pegar o resultado e fazer um loop aqui sobre todos os resultados. Em seguida, enviá-lo na página para que você possa realmente vê-lo. Vou copiar isso. Vou ao meu editor de código aqui. Eu vou maximizar a tela e onde eu quero saída é aqui em baixo. Vou criar outra div. Vou dar a fila da turma. Lembre-se que estamos trabalhando com bootstrap aqui, então linha é uma classe bootstrap que podemos usar. Então eu vou inserir nosso PHP. Vou precisar das etiquetas de abertura e fecho. Menos de sinal ponto de interrogação, PHP, ponto de interrogação, tag de fechamento. Então, entre aqui, todo o código entra. Na verdade, temos as etiquetas de encerramento. Preciso me livrar disso e empurrar isso. Mova isso, whoops, mova isso para trás. O que temos aqui é criar uma consulta SQL na web e atribuí-la a esta variável. Este é um exemplo. O que vamos precisar fazer é ajustá-lo para nós e nós realmente não precisamos do ID per se. Mas se entrarmos em nossa mesa aqui, temos nome de usuário e senha. Este exemplo, não vamos mostrar como usa senha na tela. Podemos digitar nome de usuário e e-mail. O que estamos dizendo aqui, queremos selecionar o nome de usuário da coluna e o e-mail da coluna. Isto tem que coincidir com estas colunas aqui de e, em seguida, este é o nome da tabela, então não são meus convidados, seus usuários. Outra coisa que teremos que mudar aqui é o objeto que define nossa conexão. Então, neste exemplo aqui, eles usaram conn como a conexão. Você pode ver aqui, conn é igual ao novo MySQL. É atribuída a conexão a esta variável. Mas em nosso exemplo, se rolarmos para cima, atribuímos a conexão a essa variável. Vou clicar nisso e depois substituir a menção de comando aqui. O que estamos atribuindo ao resultado aqui é que estamos realmente tomando a conexão onde usando um método chamado query, estamos colocando no SQL que acabamos de construir aqui neste método de consulta. Ele vai retornar para nós um certo resultado e então nós vamos armazená-lo nesta variável. Então aqui em baixo, o que vamos perguntar é se o número de linhas que saem dos resultados é maior que zero, vamos produzir algo. Caso contrário, vamos produzir apenas resultados zero, os resultados do texto zero. Então, no final disso, vamos fechar nossa conexão com o banco de dados. O que vamos precisar fazer aqui é mudar esses campos novamente, então não estamos mostrando ID. Ele pode fazer é se livrar disso. Estamos mostrando o nome de usuário. Em vez de nome, eu vou colocar nome de usuário. Em seguida, em vez de primeiro nome aqui, vai colocar em um nome de usuário e ir para o que mais há lá? Temos um e-mail aqui, que tiramos daqui. Podemos enviar e-mail com dois pontos. Em seguida, podemos alterar o que estamos direcionando aqui para e-mail. Em seguida, uma etiqueta BR no final. BR só significa que é uma tag break em HTML e significa apenas ir para a próxima linha. Se tivermos sorte, escrevemos um código corretamente e isso realmente funcionará. Vou atualizar a página e algo aconteceu. Eu vou inspecionar isso porque parece que está cortado aqui. Por que isso não está funcionando? Bem, temos mais um erro de digitação em nosso código. Isto é, nós não mudamos o nome da nossa conexão aqui em baixo, e também nós já fechamos nossa conexão aqui em cima. O que eu vou fazer aqui é substituir con pelo MySQL e me livrar deste perto porque nós vamos fechá-lo aqui em baixo. Vou clicar em “Salvar”. Vou atualizar a página. Estamos agora recebendo campos do banco de dados. Com certeza eles parecem muito terríveis agora, mas podemos sempre animá-los com nosso conhecimento de código de front-end. Em vez disso, o que vou fazer é criar uma div. Podemos inserir o HTML que quisermos aqui. Div aqui, fechando div. Vou chamar isso de dar a isso uma classe de DB, linha. Clique em “Salvar”, atualize a página. Não mudou muito porque não aplicamos nenhum estilo. Uma coisa que quero fazer primeiro é que esta linha não está dentro do recipiente, então essa é a primeira coisa que eu consertaria. Eu iria para dentro e colocaria isso aninhado dentro do recipiente div. Está agora no contentor. O que podemos fazer é aplicar mais alguns estilos para torná-lo um pouco mais agradável. Isso depende de você como você quer fazer. Mas vamos fazer um ponto porque temos uma classe, linha DB, colchetes abertos para definir nossos estilos e vamos apenas dar que mais margem para o fundo para que nós vamos obter 10 px. Recarregar a página é um pouco mais margem lá. Talvez queiramos a primeira parte, ousada. Podemos fazer isso sem CSS. Podemos usar HTML para criar uma tag forte. Qualquer coisa dentro de uma tag forte será a luz da fonte será pedra. Normalmente, podemos usá-lo para outros fins. Posso colocar forte. Então agora você pode ver o rótulo é negrito e o resultado não é negrito. Estabelecemos uma ligação à nossa base de dados. Recuperamos itens do nosso banco de dados. Você pode começar a ver agora o back-end trabalhando para nós. O bom do banco de dados é que é permanente. Se fizermos uma mudança aqui, deixamos o banco de dados lá. Sempre que chegarmos ao site, se fizermos uma mudança, ele aparecerá. Para demonstrar isso, vou fazer uma mudança no banco de dados agora mesmo. Vou inserir outro usuário, chamar este usuário Marco é positivo, vai ser Marco polo, e vai ser Marco @gmail. No entanto, alteramos o banco de dados, onde ler diretamente a partir do banco de dados para esta página web. Deve aparecer, não importa como mudemos este banco de dados e acontece. Este é essencialmente o back-end trabalhando para nós. Novamente, se inspecionássemos isso, não veríamos nenhum código de back-end. Nós literalmente apenas ver um monte de DB subiu com o código HTML de saída. Isto é bom para a segurança. Não sabemos o que está acontecendo no back-end. Embora isso seja realmente importante é por várias razões, mas uma que eu posso mostrar a vocês agora, e que é que nós temos todas essas informações aqui com um nome de usuário e senha. Nós definitivamente não queremos que ninguém acessando nosso site do outro lado seja capaz de ver isso. Se fosse como, por exemplo, código JavaScript, se colocarmos isso em um arquivo JavaScript, novamente, podemos abrir nossas ferramentas de desenvolvedor, ir para a rede, desculpe, fontes, não rede. Podemos entrar e ver quais são os roteiros. Mas no back-end, não há como ver esses dados de configuração. Essa é uma razão pela qual se você estiver fazendo uma conexão com o banco de dados, se estiver trabalhando com informações do usuário. Se você está segregando informações com base em se alguém está conectado e você só deseja mostrar informações que esse usuário está autorizado a ver, então tudo precisa estar seguro. É por isso que é muito importante que tenhamos o back-end para se conectar ao banco de dados e também ser muito privado. Esperamos que você possa entender o papel do back-end agora e como somos capazes de se conectar a um banco de dados. vez, muito simples explicação ou demonstração aqui de como o back-end funciona usando um banco de dados. Poderíamos fazer um curso completo sobre PHP com MySQL e passar por como poderíamos criar, atualizar e excluir esses registros. Mas esta é uma visão geral do desenvolvimento web. Não temos tempo para entrar em 12 horas enormes. Pode ser curso de 12 horas para ser honesto sobre isso. Se você quer ficar até o fim e você realmente quer fazer um projeto PHP MySQL. Terei algumas recomendações no final. Mas no próximo vídeo, vamos entrar em como realmente o que é chamado de implantar este site, que significa colocá-lo em um servidor que pode ser acessado de qualquer lugar e basicamente criar um site funcional ao vivo. Estou animado para mostrar a você como implantar seu novo aplicativo básico. Vejo você no próximo vídeo. 15. Implantação parte 1 1: domínio: Nos próximos vídeos, vamos implantar nosso site, e implantar é apenas um termo de desenvolvedor, o que significa que estamos colocando nosso site em outro servidor, e vamos implantar nosso site na web, que significa que vamos apenas colocá-lo em outro servidor para que possamos acessar nosso site de qualquer lugar do mundo. Essencialmente, estamos colocando nosso site na Internet. Agora, ele está apenas armazenado em nosso computador local, e nós estamos executando um servidor localmente, mas precisamos colocar nosso site em um servidor que esteja conectado à Internet e rodando 24 horas por dia, as pessoas possam acessar nosso site ao redor o relógio de qualquer lugar. Os dois conceitos que temos que entender para fazer este domínio e hospedagem, e muitas pessoas pensam que domínios e hospedagem são a mesma coisa, mas eles definitivamente não são. Então o que eu vou fazer, basta fazer uma pesquisa no Google pela diferença entre domínio e hospedagem, e começar sua pesquisa lá para descobrir qual é a diferença se você precisa fazer leitura extra, mas eu vou clique no primeiro artigo e dê uma olhada nesta analogia casa. Essencialmente, seu domínio é um endereço. Quando você compra, vamos apenas dizer skillsharecourse.com, ou algo assim você está apenas recebendo o endereço. Você só está recebendo o nome de domínio. Você não tem um lugar para realmente começar a construir seu site. Você pode pensar no nome de domínio como apenas um endereço, e esse endereço irá apontar para a localização do seu site que está hospedado em algum lugar. Esses arquivos têm que ficar em algum lugar em uma plataforma de hospedagem em outro servidor web, e é isso que servirá seu site. Você pode pensar, nesta analogia de casa, o nome de domínio é apenas o seu endereço, e a própria casa está hospedando nesta analogia. O primeiro passo será obter o seu domínio, e essencialmente o que acontece quando você registra um domínio, é que ele vai para um sistema centralizado chamado DNS. Eu só vou digitar, “Onde os domínios do site estão armazenados?” Em howstuffworks.com, você pode ler tudo sobre onde seu domínio está armazenado. Basicamente, o que você está fazendo quando você registra um domínio no GoDaddy, ou Namecheap, ou qualquer um desses sites de compra de domínio, é que você está basicamente recebendo uma listagem em todo este sistema DNS. Como obtemos um domínio? Bem, você deve ter visto isso antes. Podemos ir para qualquer número de provedores de domínio. GoDaddy é popular, e eles também são anfitriões. Eu tenho certeza que se você for para hospedagem, você pode comprar uma conta de hospedagem que vem com um domínio, mas se nós apenas clicar em “Domínios” e encontrar um domínio, nós apenas obter o domínio e seu site. GoDaddy não é necessariamente o mais barato. Há outro chamado Namecheap, e parece que estou apenas registrando um domínio que eu realmente não vou usar, mas apenas mostrar como um exemplo. Eu vou usar Namecheap e eu vou digitar em skillsharecourse, e agora ele vai carregar todas as idéias, todos os domínios disponíveis que poderíamos ter. SkillShareCourse.com tem certeza de que isso não está disponível, mas podemos obter todos esses obscuros como skillsharecourse.xyz e skillsharecourse.space. Eu só vou escolher um dos mais baratos porque este é apenas um exemplo, então eu vou para o carrinho. Vai me custar um dólar australiano. Não precisamos de nenhum dos extras, então vou confirmar. Faça login na minha conta porque eu já tenho uma conta com Namecheap, e verifique meus dados, pague agora. Começará a processar o seu pedido, e voilá. Acabei de comprar o skillsharecourse.space, e o que posso fazer agora é clicar em “Gerenciar” e isso deve ser semelhante em todos os provedores de domínio. Aqui está uma lista de outros domínios que tenho. Posso ir até skillsharecourse.space, clicar em “Gerenciar” e por que clicamos em “Gerenciar” imediatamente é ir até nossos servidores de nomes. Aqui, temos servidores de domínio que precisamos configurar. Este é basicamente o lugar onde vamos apontar nosso domínio para onde nosso site está armazenado. Então, essencialmente, onde está a nossa hospedagem. Agora, porque Namecheap, bem, eles fazem, fazem hospedagem, mas se nós estivéssemos, por exemplo, indo para hospedar nosso site no Namecheap, nós já compramos um domínio, então poderíamos deixar isso como Namecheap DNS básico. Só para reiterar que, se você hospedasse seu site no mesmo lugar que comprou seu domínio, provavelmente não precisará alterar suas configurações de DNS. Eles já estão configurados para direcionar para o site em que você comprou, mas se você estiver hospedando seu site em outro host que é diferente de onde você comprou seu domínio, você terá que configurar aqui usando DNS personalizado, para onde você deseja que esse domínio seja direcionado. Agora, a escolha de onde você hospeda seu site depende de você. Eu hospedo usando minha conta de revendedor em um host chamado Netorigin na Austrália. Eu não recomendaria necessariamente isso para você se você estiver nos Estados Unidos, ou no Reino Unido, ou onde quer que você esteja no mundo, mas para mim na Austrália, esse é o host que eu uso, mas independentemente de você usar esse host ou não, ou qualquer host que você usa, a coisa que você precisa fazer para vincular seu domínio à sua hospedagem, é encontrar os servidores de nome desse host específico. Para mim, é Netorigin, e é assim que eu faço. Eu vou apenas digitar em servidores DNS Netorigin, e se você estiver indo com GoDaddy, você pode digitar em servidores Godaddy.DNS, e aqui há um artigo da base de conhecimento da Netorigin, que é a empresa que eu uso, e aqui estão alguns servidores de nome de domínio. Eu posso pegar o primeiro, colocá-lo lá, o segundo colocá-lo lá, e você provavelmente não precisa de todos os quatro, mas eu acho que estes são apenas para backup. Coloque-o lá, e então eu vou clicar em “Tick” ou o que quer que seja, em sua coisa de domínio particular que você usa para registrar. Como diz aqui, pode levar 48 horas para entrar em vigor, mas muitas vezes é muito mais curto do que isso, mas em breve teremos nosso provedor de domínio vinculado ao nosso provedor de hospedagem, e o que acontecerá é quando você atingir esse domínio irá procurar sites neste servidor de nomes de domínio, e o seu anfitrião, qualquer que seja o seu Netorigin, ou GoDaddy, ou quem quer que seja, vai encontrar o seu site e servi-lo até você. E se você já não tiver um anfitrião como eu? Bem, como eu disse, você pode ir para algum lugar como GoDaddy. Continuo a soletrar mal o GoDaddy. Não sabia que havia um site chamado GoDay. Você pode ir para GoDaddy, clicar para “Hospedagem” e comprar alguma hospedagem na web. Você pode comprar economia, são apenas cinco dólares por mês, e então o que você faz quando você se registra para hospedagem é, quando eles pedem seu nome de domínio, você pode colocar isso em. No entanto, com GoDaddy, eles oferecem um domínio gratuito. Provavelmente é mais rentável para você apenas obter o seu domínio junto com a sua hospedagem, e você nem precisa vincular estes juntos, mas para mim, eu tenho a minha hospedagem em Netorigin, e eu só queria comprar um domínio barato em Namecheap. Então este link é necessário, e também ele vai apenas para mostrar a diferença entre domínios e hospedagem. Se eu fui para GoDaddy e obter a hospedagem web com o domínio livre, eu posso não entender completamente a diferença entre domínios e hospedagem web, porque eles tornam tão fácil para colocar os dois juntos. Então eu acho que mesmo se você decidir ir com um host que lhe dará um domínio livre, e vinculá-lo para você automaticamente, é bom saber a diferença entre domínios e hospedagem, e ser capaz de vinculá-lo no futuro se você precisar para. 16. Implantação parte 2: arquivos: Tudo bem, então agora você deve ter o seu domínio, que você registrou através de um registro de domínio como Name Cheap e você deve ter sua hospedagem que você pode ter registrado no mesmo lugar ou em algum lugar diferente, se eles estão em algum lugar diferente, você deve tê-los vinculado, colocando em seus servidores de nomes de domínio personalizados. Então, o próximo passo será acessar seu painel de controle e se você se lembrar antes, no último vídeo, ele disse que levaria até 48 horas para vincular nosso domínio à nossa hospedagem. Mas muitas vezes leva muito menos tempo e eu deixei cerca de 5-10 minutos e já está ligado. Então, o que eu vou fazer é antes de tudo verificar se podemos acessar nosso painel de controle e também mudar algumas coisas em nosso Painel de controle e começar a implantar nosso site. Vou digitar o endereço do nosso site, que foi SkillShareCourse.space/CPanel. Vou pressionar “Enter” e cPanel é apenas um painel de controle padronizado que você pode usar para fazer um monte de funções em seu site. É muito melhor ver e interagir com ele do que descrevê-lo à distância. Então o que eu vou fazer é entrar e mostrar imediatamente. Então eu vou usar um nome que nós configuramos na plataforma de hospedagem. Eu fiz isso em particular, mas para você, você pode ter feito isso no GoDaddy ou qualquer outro número de host e, em seguida, colocar em nossa senha e nós entrar. Este é cPanel e dá-lhe um gerenciador de arquivos, você pode entrar e mudar seus arquivos, há phpMyAdmin, para que possamos fazer nosso material de banco de dados lá. Podemos instalar aplicativos como WordPress ou Joomla press para comprar com um clique basicamente, basta clicar em lá e, em seguida, clicar em “Instalar”. Isso é muito útil. Podemos criar subdomínios, podemos criar contas de e-mail. Há muitas coisas diferentes que podemos fazer, muitas das quais eu nunca fiz antes. O que eu quero que você faça agora é que eu quero que você vá ao seu gerente de arquivos e eu quero que você apenas olhe aqui dentro. Tudo bem, então olhando para esta estrutura, podemos ver que temos nosso diretório home e temos essas pastas diferentes, ETC, logs, e-mail, FTP público, HTML, SSL, TMP. Você não precisa saber o que tudo isso faz, mas se você tem uma pasta chamada HTML público, definitivamente clique nisso porque é aí que você vai colocar seu site porque quando você acertar seu domínio, ele vai servir o a partir deste local. Agora temos esta foto aleatória da caixa CGI que está completamente vazia, então não há risco no que quer que você faça com isso agora porque está completamente vazia. Então o próximo passo seria fazer upload do nosso site para este gerenciador de arquivos. Então o que eu vou fazer para isso é eu vou para o meu curso Skillshare minha pasta de projeto. Eu vou voltar, eu vou encontrá-lo aqui, e então eu vou fechá-lo para que possamos fazer o upload como um arquivo. Então, no Mac, eu pressiono “Comprimir” e eu recebo um arquivo zip. Então eu vou para aqui, eu vou clicar em “Upload”. Eu vou pegar aquele arquivo zip que está bem aqui, ele vai carregar. Eu vou voltar e, em seguida, de dentro do nosso gerenciador de arquivos, eu posso clicar nele e clicar em “Extrair”, eu acho que é a palavra no painel C. Então agora nós temos isso porque eu compactei em um Mac, nós temos essa pasta MacOSX, em vez disso, nós podemos excluir isso e, em seguida, aqui está nosso site. Vamos precisar pegar tudo isso e levar um de volta. Então, ao invés dessa foto, vamos nos livrar disso e movê-la para HTML público. Volte para HTML público, esta pasta agora está vazia, para que possamos excluí-la. Wallah, temos nosso site lá em cima. Só um segundo. Acho que vamos excluir esse arquivo zip também, mas sim, temos nossos ativos de front-end lá, e vamos ver o que acontece quando digitamos nosso domínio agora. SkillShareCourse.space. Nós vamos ter um erro de conexão de banco de dados e isso não me surpreende nada porque nós esquecemos um passo importante agora, e que é que nós não configuramos nosso banco de dados. Então colocar em todos os arquivos é tudo bem e bom, mas nós temos definido aqui, se você clicar no arquivo e, em seguida, clicar em “Editar”, você pode editar o arquivo diretamente do seu gerenciador de arquivos. Temos toda essa informação. Temos todos esses servidores e banco de dados para se conectar e o banco de dados realmente é uma entidade separada, então apenas colocar nossos arquivos aqui não é suficiente. Também precisamos configurar nosso banco de dados e copiar isso também para que seja o que vamos fazer no próximo vídeo. 17. Implantação parte 3: banco de dados: No último vídeo, enviamos os arquivos do nosso site para o nosso novo host, mas há uma coisa faltando, que é o nosso banco de dados. Daí por que quando vamos a um site, ele diz erro de conexão. Esse é um bom sinal no sentido de que sabemos que nosso site está carregando o código que criamos, mas não configuramos o banco de dados neste servidor remoto. É claro que vamos receber um erro de conexão. Agora só para ficar claro, se não tivéssemos uma conexão com o banco de dados, talvez estivéssemos carregando um aplicativo que não tivesse um back-end, não teríamos um problema. Só quero demonstrar isso rapidamente. Você não tem que seguir adiante. Mas se cavarmos, reverter isso de volta para o que era antes que era odiava HTML, e eu clico em Editar, e eu acabei de me livrar de todo o PHP, que não faria sentido em um documento HTML de qualquer maneira. Lembre-se que temos este arquivo salvo localmente para que você não precise se preocupar em perder seu progresso. Podemos agarrá-lo desde que o tenhamos guardado no nosso computador. Vou clicar em Salvar. Vou checar duas vezes. Não há PHP. Vou voltar ao meu site, atualizar a página e você pode ver que agora temos o melhor site de sempre. Acabei de perceber que temos algum PHP aqui. Tínhamos o título, então posso colocar o melhor site de todos os tempos. Acho que não era esse o nome, mas tudo bem, mas podemos voltar. Você pode ver que temos um site ao vivo na Internet. Mas queremos implantar um site conectado a um back-end, com um banco de dados. Eu só vou excluir esse arquivo e depois fazer o upload do nosso arquivo PHP novamente. Vou voltar para o meu curso de partilha da escola, colocar isto de volta. Está carregado. Posso voltar aqui e teremos o erro de conexão novamente, porque precisamos configurar o banco de dados. O que podemos fazer é usar o phpMyAdmin. O mesmo programa que usamos em nosso servidor de mapa local, podemos usar em um host também. O que eu vou fazer é encontrar o nosso phpMyAdmin. Você pode acessá-lo por aqui, mas se você não tem esta página, você também pode pegar seu nome de host e, em seguida, inserir /phpMyAdmin. O que vamos fazer aqui é clicar no banco de dados de teste, e vamos exportar tudo aqui para que possamos importá-lo rapidamente em seu host e, em seguida, começar a criar uma conexão com ele. Vou fazer uma exportação rápida. Este é o código SQL que irá criar tudo. Só precisamos copiar tudo isso. Então vamos voltar para o nosso cPanel, e a partir daqui vamos usar phpMyAdmin que está bem aqui em apenas um segundo. Mas antes de tudo, precisamos criar esse banco de dados que fizemos em nosso site local, o banco de dados de teste porque ele ainda não existe em nosso host. Vou clicar em bancos de dados MySQL, e vou criar um novo banco de dados. Vou chamar-lhe “teste”. Ele é criado e você pode descer aqui e ver que tem skillsharecourse_test. Isso nos força a namespace usando este que é o nome do nosso site. O que precisamos fazer agora é criar um usuário para acessar esse banco de dados. Vou apenas ligar para este administrador de usuário, e vou digitar para a senha. Você pode digitar o que quiser. Vou gerar uma senha aleatoriamente aqui em cima no meu gerenciador de senhas. Há uma palavras-passe muito forte. Certifique-se de copiar isso. Eu vou criar um novo documento só para que eu possa armazenar esse caminho. Você não quer perdê-lo. Essa é a senha que selecionei e, em seguida, criar usuário. Agora você criou com sucesso um usuário de banco de dados. Agora, a última coisa que você deseja fazer é adicionar o usuário ao banco de dados. O usuário vai ser skillsharecourse/admin, e o banco de dados é skillsharecourse_test. Clique em Adicionar e conceda a ele todos os privilégios. Clique em Fazer alterações e as alterações foram feitas. Agora podemos ir para phpMyAdmin, o que podemos fazer clicando aqui. Vá para phpMyAdmin, e a partir daqui você pode ver que temos o nosso skillsharecourse_test. Agora, a primeira coisa que você deve notar é que é diferente em seu nome para o nosso banco de dados de teste que é o banco de dados de teste. Vamos precisar fazer algumas mudanças lá também. Mas podemos entrar aqui, nosso SQL e copiar através de nossa consulta. Nós temos senha agora, então eu vou ter que voltar para aqui, copiar através desta consulta que colocamos lá antes, colá-la aqui. Em vez de banco de dados de teste, eu vou mudar isso para skillsharecourse_test que é um novo nome de banco de dados. Agora, procure quaisquer outras referências de test_db. Isso deve ser o seu não faz mais. Se clicar em Ir agora, ele deve selecionar esse banco de dados e, em seguida, importar todas as nossas tabelas. Com sorte, vamos ver se funciona. Diz que nenhum banco de dados foi selecionado. O que vamos fazer é ir para o banco de dados e, em seguida, colocar o SQL a partir do contexto desse banco de dados. Vou voltar aqui, colocar o nome do banco de dados novamente, clique em Ir. Animais de estimação de mesa já existe. Parece que a nossa importação já funcionou. Agora podemos entrar e ver que temos nossa mesa para nossos usuários e agora tabela para os animais de estimação. Agora, é um caso de usar toda a informação. O nome do banco de dados, o novo usuário que criamos, e agora alteramos isso em nosso código para que possamos obter uma conexão com o banco de dados. e essa será a fase final de fazer com que o nosso site apareça. Vamos fazer isso agora mesmo. Temos agora a nossa base de dados dentro do nosso novo website. O que precisamos fazer é atualizar nosso arquivo index.php porque o nome do banco de dados é alterado e também o usuário que estamos usando para acessar este banco de dados mudou. Se formos até aqui e entrarmos em nosso índice php, podemos editá-lo. Se você clicar duas vezes, ele será baixado. Você só vai querer clicar nele uma vez e, em seguida, clicar em Editar e você pode editá-lo diretamente no seu navegador. Quando você está fazendo pequenas mudanças como esta, tudo bem. Mas se você está fazendo grandes mudanças no site, você provavelmente gostaria de ir com o FTP, que você pode acessar aqui em baixo. Isso é um pouco mais de onde você pode acessá-lo, que você pode acessar a partir daqui. Mas isso é mais um conceito avançado. Por enquanto, o que estamos fazendo, é totalmente bom usar o Gerenciador de Arquivos. O que vamos fazer é atualizar esses campos aqui, que nome de usuário, senha, host e banco de dados. O mais fácil que sabemos é que o banco de dados não é mais banco de dados de teste, é skillsharecourse_test. Vou colocar isso aí. Eu pressionei intuitivamente Command S para salvar, mas você não faz isso quando estiver usando o Gerenciador de arquivos. Voltando para aqui, se não nos lembrarmos de nosso nome de usuário, podemos simplesmente ir para bancos de dados MySQL e verificar os usos atuais. Nosso nome de usuário era skillsharecourse_admin. Podemos voltar aqui, colocar isso como nome de usuário. Lembre-se que criei um documento para salvar nossa senha. Eu vou entrar, copiar isso e colocar a senha. Agora, para DB HOST, podemos deixá-lo como localhost. Clique em Salvar. Vá ao nosso projeto, atualize a página e vejamos o que acontece. Conexão bem sucedida e temos nosso site aqui e todas as nossas referências ao banco de dados ainda funcionam. A única coisa que realmente mudou foi o nome do nosso banco de dados, mas tudo dentro é o mesmo. Também o usuário que se conecta ao banco de dados, que é apenas ter um usuário para fazer login no banco de dados. Tudo depois de entrarmos no banco de dados é o mesmo. A tabela onde os nomes eram os mesmos, os campos eram os mesmos, e é por isso que de repente temos um site aqui. No próximo vídeo, vou mostrar como você editaria seu site ao vivo, usando FTP. Porque se você está para fazer alterações uma e outra vez, você realmente não quer fazer isso no Gerenciador de arquivos. provável que você queira fazê-lo localmente primeiro se estiver fazendo um monte de desenvolvimento, então edite aqui e, em seguida, portado através. Há muitas maneiras de implantar um sábio mais avançado para implantar. Mas eu só queria mostrar rapidamente FTP porque é importante saber como um desenvolvedor web. Vejo-te no próximo vídeo. 18. Usando o FTP: No último vídeo, atualizamos nosso index.php usando o editor embutido em nosso gerenciador de arquivos cpanel. Mas neste vídeo, vamos falar sobre FTP, que significa File Transfer Protocol. O que é realmente benéfico sobre o FTP em nossa situação é dizer, por exemplo, que não queremos editar esses arquivos dentro desta interface de nuvem. Talvez queiramos editá-los usando nosso editor de código Adam, porque pelo menos para mim é muito mais agradável de usar e podemos ter todos os nossos arquivos aqui rapidamente editáveis. Só torna as coisas mais fáceis. Podemos usar nossas ferramentas locais para fazer alterações ao vivo em nosso site. Agora, um aviso de isenção de responsabilidade, dependendo do tamanho do seu site ou quais as mudanças que você está fazendo, você pode não querer fazer alterações ao vivo, então você provavelmente deve construir tudo localmente, desenvolver tudo em seu host local aqui, verifique se ele funciona e, em seguida, comece a migrá-lo. Há maneiras mais sofisticadas do que copiar os arquivos como fizemos. Você também pode fazer isso através de FTP, mas digamos, por exemplo, houve uma pequena mudança ou qualquer coisa que você acha não vai causar um grande problema e você queria editar isso usando seu próprio editor de código, nós podemos usar o que chamado FTP. Eu pensei que isso seria importante incluir FTP porque é algo que eu uso o tempo todo com meus projetos. Nós vamos voltar para o cpanel aqui, e nós vamos voltar para a página inicial. O que podemos fazer para criar uma conta FTP é clicar em contas FTP. Aqui eu não vou ser muito criativo, Eu só vou chamá-lo conta FTP. Vou para uma senha para gerar uma senha aleatória para usar. O que é importante aqui é o diretório, então você quer se livrar de tudo isso porque, por padrão, ele tem uma seção da quantidade de informações que esta conta FTP pode reunir. Se você estava executando um grande site e você só queria dar a um usuário específico acesso a uma pequena parte do seu site. você talvez criaria um diretório diferente para eles, mas queremos editar todo o site, então vamos nos livrar disso. Nós realmente não precisamos de um codificador porque estamos usando ele, então vamos criar a conta FTP. Agora, podemos vê-lo aqui. Agora, a outra coisa que você vai precisar para usar FTP localmente, em seu próprio computador é um cliente FTP e o cliente FTP que eu uso é chamado Cyberduck, há também um chamado FileZilla. Mas basicamente é um pequeno programa que permite que você se conecte via FTP. Eles permitem que você conecte outros servidores também. Eu já tenho o Cyberduck instalado, tudo o que você precisa fazer é baixá-lo e instalá-lo, não há muita configuração que precisa acontecer a esse respeito. O que eu gosto sobre cpanel é que eu posso apenas clicar sobre isso e você pode baixar os arquivos de configuração. Se você quer tornar sua vida mais fácil em seu Windows, use FileZilla ou CoreFTP e se você está no Mac, você pode usar Cyberduck como eu e você pode baixar o arquivo de configuração que terá todas as informações salvas para você já. Se você quiser fazer isso manualmente, esses são os campos que você precisa colocar em seu cliente. O que eu vou fazer é baixar o arquivo de configuração FTP para Cyberduck. Apenas guardando em downloads. Tudo o que eu preciso fazer agora é apenas clicar nele e de repente Cyberduck abre e ele vai abrir, ou ele vai começar a abrir uma conexão com o nosso site. Tem aqui, o nome de usuário pré-preenchido e podemos acessá-lo. Nós só precisamos digitar nossa senha novamente porque ele não está salvando a senha por razões de segurança para que possamos colar essa senha lá, clique em login. Ele vai dizer conexão não segura na maioria das vezes, basta clicar em continuar. Assim que você estiver conectado, você poderá ver todo o seu site. Em seguida, você pode clicar em HTML público e lá está o seu php índice. A coisa legal sobre usar FTP é que eu posso clicar com o botão direito sobre isso. Eu não quero clicar em editar com edição de texto para que eu possa mudar minhas preferências e ir ao editor e dizer que eu quero editar com Atom e sempre usar este aplicativo. Acho que talvez você precise se refrescar. Agora eu posso clicar no botão de edição e de repente nós o temos em nosso editor de código. Agora, algo que você precisa estar ciente é a diferença entre o seu índice php em seu servidor web remoto e o índice php que você tem localmente. Se você abri-los ao mesmo tempo, eu vou apenas expandir isso, Atom vai deixar você saber qual é qual. O que está nas pastas var privadas é aquele que você está editando temporariamente para seguida, re-upload para o seu site e este está em seu diretório de projeto do curso Skillshare ou o que quer que seja chamado, meu é apenas chamado de curso Skillshare. Podemos fazer coisas como entrar aqui e eu vou até aqui onde podemos ver nosso site ao vivo, colocá-lo ao lado, e vamos mudar algumas coisas. Vamos dizer “Olá e bem-vindo a este site ", e então pressionamos salvar. O que vai acontecer é que vai carregar com Cyberduck. Ele diz upload completo, uma vez que diz upload concluído, devemos ser capazes de atualizar a página e ele diz “Olá e bem-vindo a este site.” Agora podemos editar nosso site ao vivo usando um sistema que é muito mais familiar para nós quando desenvolvemos o que é chamado localmente, significando localmente em nosso próprio computador, podemos usar nosso próprio editor de código, podemos navegar até arquivos diferentes. Digamos, por exemplo, que se eu quisesse editar outro arquivo também, digamos, por exemplo, que eu queria ter os estilos abertos ao mesmo tempo, eu posso editá-los também e assim eu posso voltar entre index.php e styles.css no servidor remoto e clique em Salvar. Assim que o upload for feito, essas alterações estarão ativas em nosso site, então esse é o benefício de usar o FTP. Há outros benefícios, mas para mim, como desenvolvedor, uso o FTP desta forma com mais frequência, sendo capaz de editar um site em um servidor remoto, que às vezes nem é um site ao vivo, pode estar no que é chamado de preparação servidor. Um servidor de teste é um site ativo, mas não está no endereço do site final. Isso é um pouco sobre FTP, Cyberduck é um programa leve e legal para uso no Mac, para vocês no Windows, você pode gostar do FileZilla. Mas agora que cobrimos o FTP, agora sabemos como construir um site, colocá-lo na Internet, e agora editá-lo usando FTP e isso é essencialmente a maior parte do curso. Tenho mais alguns vídeos chegando para nos embrulhar. Sim, espero que você possa começar a entender agora como desenvolvimento web funciona e as diferentes partes que se juntam para obter um site na Internet. Se você tiver alguma dúvida, é claro, deixe-as na seção de perguntas, e eu o verei no próximo vídeo. 19. Bônus: Wordpress: Tudo bem. Neste vídeo, eu quero compartilhar com vocês um pouco de um bônus e esse bônus é WordPress. Agora, neste curso, nós basicamente construímos tudo do zero. Sim, nós usamos alguns frameworks no caso de jQuery e Bootstrap e nós usamos um pouco de um template para começar em nossa página inicial, mas você vai notar que todo o PHP que tivemos que fazer nós mesmos e se você fosse construir um aplicativo web personalizável, você teria que programar a si mesmo e usar bibliotecas e talvez desenvolver um desses frameworks back-end que abordamos na lição sobre frameworks, mas para muitas pessoas, não precisamos reinventar a roda, só precisamos um site de conteúdo simples e uma das melhores plataformas para desenvolver que é um sistema chamado WordPress. Agora, se entrarmos em, digite WordPress no Google, o que eu não estou falando é wordpress.com, que é um site que permitirá que você crie um site WordPress em sua própria hospedagem e eles controlam tudo, mas o que estamos falando é do software de código aberto. WordPress é um monte de código que você pode simplesmente baixar e editar completamente ou usar como ele é dado a você imediatamente fora da caixa. Só para demonstrar que, se fôssemos baixar o WordPress, é apenas cerca de um arquivo de nove megabytes, então eu posso entrar em downloads, vou descompactar o WordPress e, em seguida, este é essencialmente o back-end de um site WordPress. Então você tem um monte de arquivos PHP aqui, você tem plugins e temas e coisas diferentes que vamos chegar a em apenas um segundo, mas eu só queria fazer o ponto de você obter um monte de arquivos PHP quando você baixar WordPress mas juntos, eles criam um site logo fora da caixa. Para demonstrar isso, o que eu vou fazer é, eu vou voltar para o nosso projeto aqui e eu nunca fui muito ligado a este site para começar. O que eu vou fazer é simplesmente excluir o que temos aqui, se você colocou muito esforço em seu site, talvez você não queira excluir isso e talvez você devesse fazer isso em um site diferente, mas eu não estou muito ligado a isso, então eu vou usar exatamente o mesmo host para fazer isso exatamente no mesmo domínio. Então eu vou para cPanel e o que é ótimo sobre cPanel é que você pode instalar alguns aplicativos com, basicamente, eles chamam de uma instalação de um clique, mas há apenas alguns cliques para fazer. Instalar WordPress em seu próprio computador leva um pouco de tempo, você precisa configurar bancos de dados como fizemos, mas usando cPanel, podemos apenas obter um site WordPress muito facilmente. Então temos o WordPress aqui, podemos clicar em “Instalar aplicativo” e ele vai nos fazer algumas perguntas. Queremos instalá-lo direito em nosso domínio, porque eu acabei de excluir os arquivos, eu não me importo que este vai se tornar o meu site WordPress agora. Você pode ficar com as configurações padrão, o que eu vou fazer é mudar meu nome de usuário de Administrador apenas para Admin e eu vou colocar em outra senha. Eu sei que nós criamos um monte de senhas neste curso, mas nós realmente devemos criar uma senha separada para WordPress bem e então o que eu vou fazer é como sempre, eu vou para a minha senha e apenas gerar uma nova senha e Certifique-se de guardar isso em algum lugar. Eu tenho senha FTP aqui, WordPress, senha. Está bem. Este está vazio. Seu e-mail de administrador é o e-mail para o qual ele vai enviar informações com base no que está acontecendo, no WordPress. Eu vou mudar isso para chris@christhefreelancer.com e você pode nomear seu site, qualquer que seja. Eu só vou deixá-lo como meu blog, apenas outro site WordPress e você pode deixar tudo o resto o mesmo e clique em “Instalar”. Você verá aqui com que rapidez você pode obter um aplicativo de instalação do WordPress. Vou fechar estes e espero poder mostrar-lhe isto em tempo real. Então, muito rápido, espero que ele não fique preso em 99 e a instalação está completa, quão rápido foi isso? Agora, quando vamos para o nosso domínio, temos um site WordPress. Não parece muito agora, mas há algumas coisas acontecendo aqui e o que podemos fazer é acessar o administrador. A coisa importante a saber é que muitas pessoas se confundem sobre, eu já tenho meus detalhes de login para cPanel, por que eu preciso fazer login no WordPress e entrar em um painel diferente. Bem, cPanel é uma camada mais profunda, é apenas um lugar para gerenciar seu site e você pode realmente acessar o código, então se voltarmos para o nosso gerenciador de arquivos, podemos ver agora que em HTML público, essa estrutura que vimos antes quando baixamos WordPress está agora aqui. Como eu disse antes, WordPress é apenas um monte de arquivos de código que juntos fazem de você um site. No cPanel, este é o lugar onde você faria todas as coisas que já fizemos, como acessar seus arquivos, você iria olhar para o seu banco de dados manualmente, fazer todos esses endereços de e-mail, subdomínios, todas essas coisas que você faria do seu cPanel , mas em termos de seu novo site WordPress, este é o back-end. Este é o seu painel e, portanto, você precisa de um login diferente para isso. Como WordPress funciona e a magia dele é realmente começou como uma plataforma de blogs, é que eu posso criar posts. Eu posso clicar aqui e em vez de Hello World, eu vou deixar Hello World lá por um segundo e eu vou dizer post do blog número dois e, em seguida, podemos apenas digitar conteúdo do blog e podemos dar-lhe uma categoria também. Vamos apenas dizer que são artigos de viagem, eu amo viajar. Eu sei que isso não está relacionado com viagens, mas apenas como um exemplo, podemos clicar em “Publicar” e então podemos visualizá-lo. Agora temos um post de blog com conteúdo de blog e , em seguida, qualquer lugar que referencie todos os posts do blog, vamos ver. Então, por padrão, quando acessarmos nosso site, ele nos mostrará todas as postagens do blog. Agora você pode ver Hello World e você também pode ver postagens de blog também. Agora estamos logados no momento, então temos essa barra como administrador, mas se a abrirmos em uma janela anônima, que possamos vê-la como o usuário veria, eles a verão exatamente da mesma forma, exceto sem essa barra e também não é capaz de editar coisas aqui. Se você notar de antes, há algumas coisas extras que aparecem como editar, o usuário não terá isso no final. É completamente seguro, a menos que você dê a eles um login e eles podem realmente mudar essas coisas. A primeira coisa com ter um site WordPress que você vai querer personalizar é um tema e o que você está vendo aqui, quando você vai para o site real é um tema básico pelo próprio WordPress chamado 2017. Todos os anos eles criam um novo baseado no ano e por isso é o que 2015 parecia, é assim que 2016 parece. Estou assumindo que o novo vai sair em breve e então haverá outro no ano seguinte. Mas eu gosto de usar um tema chamado Divi e você pode encontrar Divi, basta digitar o tema Divi, é fornecido por temas elegantes. Você definitivamente não tem que usar este, mas ele não paga para investir em um bom tema WordPress que tem um construtor de página. Porque essencialmente, se quiséssemos, tenho muitas coisas ao mesmo tempo. Se quiséssemos personalizar e criar uma página neste tema atual, podemos ir para “Adicionar nova página” e basicamente obter a mesma interface que nossos posts e podemos adicionar imagens. Vamos colocar uma imagem do meu rosto lá dentro, não é porque eu me amo, é só porque ele veio primeiro e talvez isso não seja sobre página para mim, então eu posso alinhar isso à esquerda e depois colocar, “Oi, eu sou Chris” e eu clique no link lá, então isso está tentando vincular a algum lugar, mas eu posso apenas editar isso e você pode ver que nós não tivemos que cavar em código ainda em tudo, é tudo apenas usando este editor. Ainda não consigo me livrar disso. Essencialmente, para se livrar disso, podemos realmente cavar no HTML e isso é feito clicando nesta guia de texto. Eu posso ver aqui agora que nós temos um link tag, então você pode se livrar disso em ambos os lados e isso nos permite clicar de volta aqui e ver a representação visual. Mas quando você está usando um tema que não tem um construtor de páginas, esta é toda a personalização que você obtém. Você pode alinhar, você pode colocar em uma citação, você pode colocar em links, títulos diferentes. Então eu vou colocar no título um. Então podemos publicar isso como uma página ou talvez não. Eu provavelmente deveria dar-lhe um título primeiro, Sobre. Então podemos ter a nossa página Sobre. Isso vai aparecer baseado no nosso tema. Mas o benefício de usar algo como Divi é que você tem um construtor de páginas. Como Divi é um tema premium, você não pode procurá-lo aqui, você terá que carregá-lo depois de baixá-lo. Novamente, não estamos fazendo um curso completo sobre Divi ou WordPress desenvolvimento. Eu só queria dar-lhe um pouco de uma demonstração sobre como você pode criar um site com código mínimo e também tê-lo totalmente personalizável. Isso está apenas carregando agora, é um tema muito grande, vamos avançar com isso e eu vou vê-lo em apenas um segundo. Divi fez upload para o nosso site WordPress agora. Eles vão instalá-lo agora para nós. Como você pode ver aqui diz, Tema instalado com sucesso. O último passo, será ativá-lo se estivermos confiantes de que definitivamente queremos mudar para este tema. Ainda não temos nada em nosso site, então isso não é um problema. Você pode ver que já adicionou algumas coisas à nossa lista aqui. Há outro tipo de post em Divi chamado Projects e isso é bom para portfólios. Se você estiver usando um tema premium como o Divi, ele geralmente lhe dará outro menu e opções de tema para que você possa editar recursos diretamente no tema. Se voltarmos ao nosso site, podemos subir aqui e clicar em Visitar Site. De repente, nosso site parece completamente diferente. Ainda temos as duas postagens do blog, mas temos uma estrutura totalmente nova, eu acho que uma nova pele, você pode dizer, e este é realmente o novo tema, Divi. Mas a coisa poderosa sobre Divi e alguns outros temas premium também, é que você pode criar uma nova página e você pode estruturá-la usando seu construtor de páginas. Agora que temos Divi, você pode ver essas coisas roxas extras chegando. Temos as configurações aqui, e então temos um botão aqui para usar o Divi Builder. O que eu vou fazer é, eu vou nomear esta página Divi Page e eu vou clicar em Usar Divi Builder. Você pode realmente usar o Visual Builder. Eu vou te mostrar isso. Este é um visual especial What You See Is What You Get construtor em Divi, e então você pode realmente interagir com a página bem na sua frente. É ótimo para designers que querem ver suas mudanças acontecendo imediatamente. Aqui, eu posso colocar uma mensagem, Olá, Olá e você pode ver isso imediatamente. Então podemos mudar outros aspectos de design, como alinhamento, dimensionamento, há um monte de opções aqui e vai demorar um pouco para se familiarizar com, e vai depender de qual tema você está usando, eu estou apenas usando Divi. Se clicarmos em Salvar, vou mostrar-lhe, Vou publicar, porque é uma nova página. Agora que foi salvo e publicado, vou sair do Visual Builder e mostrar-lhe a outra maneira que podemos editar. Temos Divi e isso é através deste Construtor Divi e podemos construir seções. Onde é a nossa fileira aqui? Temos a nossa fileira no módulo. Podemos adicionar outra linha e podemos configurá-la como quisermos, como quatro colunas de mesmo tamanho, ou podemos tê-lo assim com um sendo dois terços de tamanho e um sendo um terço de tamanho, podemos dividi-lo em dois. Vamos apenas fazer isso. Então temos esses espaços para clicar e colocar um módulo. Você pode procurar os diferentes em Divi se estiver interessado, mas poderíamos colocar como uma imagem, por exemplo, e então poderíamos colocar na imagem que tínhamos antes, aperte Salvar. Se você não quiser realmente publicar as alterações, digamos que, se estiver usando isso em um site ativo, você pode simplesmente visualizar para ver como seria antes de salvar. Eu não coloquei nenhuma restrição na imagem real, então ele aparece como a largura total. Mas se quiséssemos mudar a largura para 12%, poderíamos atualizá-la. Em seguida, na outra parte, poderíamos movê-lo para baixo para aqui, excluir esta linha, colocar em um campo de texto. Só estou brincando para ser honesto, só estou mostrando o que podemos fazer em Divi. Vou colocar texto de teste, salvar, atualizar, ver página. Você pode ver que temos uma coluna aqui e uma coluna ali. Agora, obviamente, não é o site mais bonito. Ainda há trabalho que precisa ser feito. Mas eu queria demonstrar a vocês WordPress e como podemos fazer um monte de trabalho pesado direto fora da caixa com WordPress, é um software de código aberto muito poderoso. A razão pela qual ele é chamado de código aberto é porque podemos editar o código diretamente. Na verdade, podemos ir direto para a aparência, editor, e ele está dizendo, ter muito cuidado com a edição de código back-end. Estou dizendo que sim, e podemos editar qualquer um dos arquivos de temas de qualquer um dos nossos temas. De dentro do WordPress, podemos editar qualquer coisa dentro desta foto em particular. Este é apenas um exemplo, mas neste site veríamos outra pasta para Divi, e poderíamos editar todos esses arquivos. Então, se formos um passo mais fundo, como fizemos com nosso Gerenciador de Arquivos, podemos ir direto para nossa estrutura de arquivos e editar qualquer um deles. Agora, você não gostaria de editar nenhum destes porque estes são os que fazem WordPress funcionar. Mas, novamente, apenas para demonstrar que este é open source, este é apenas um monte de arquivos que você pode editar, mas é insanamente poderoso e você pode personalizar tanto quanto você quiser com WordPress. Ele fornece o bom equilíbrio de fazer um monte de trabalho pesado, preparando algumas das coisas que você não gostaria de codificar a partir do zero, e, em seguida, também permitindo que você ainda totalmente editá-lo e personalizar o site tanto quanto você precisa. Eu só quero deixar você com WordPress porque para um monte de meus sites de clientes que vêm para mim e eles apenas dizem, Eu quero um site, eu recomendo WordPress, e Divi é o tema que eu usei recentemente, mas há outros temas que eu recomendaria também. Um que usei em um projeto de cliente foi Fortuna, que vem com seu próprio construtor de página. Eu totalmente faria sua própria pesquisa para encontrar um tema com um bom construtor de página, e você pode ter sites funcionando assim. Por exemplo, meu próprio site, Chris, o desenvolvedor, Eu construí muito rapidamente usando WordPress e Divi. É bem fácil. Com o WordPress você define seus menus, você pode definir tudo dinâmico, você pode criar páginas como fizemos, você pode ver postagens de blog, e você pode carregar suas fotos e logotipos e coisas diferentes. Espero que tenha sido uma boa introdução ao WordPress. Se você não quer construir tudo do zero e você só precisa de um site de conteúdo básico e nem mesmo um site de conteúdo básico, mas um blog ou algo que não, como um aplicativo autônomo inteiro que tem que fazer algo especial. WordPress é muitas vezes uma boa escolha. Se você está fazendo um site de e-commerce, há algumas plataformas diferentes também, mas eu faço principalmente sites de conteúdo e WordPress é um muito popular o que é chamado de Content Management System, aka CMS, para fazer conteúdo sites. Espero que tenha sido uma boa introdução ao WordPress. Nos próximos vídeos, vamos encerrar e começar seu próprio projeto de aula. Vejo você no próximo vídeo. 20. Conclusão e projeto do curso: É hora de encerrar este curso e começar seu projeto de aula. Até agora você deve entender a diferença entre o front-end e o backend, o propósito de HTML, CSS e JavaScript, o que é um framework e por que você deve usar um, o propósito do PHP e do MySQL, a diferença entre um nome de domínio e hospedagem e como publicar seu site na internet. Em nosso projeto de classe, é hora de reunir todo esse novo conhecimento para publicar seu primeiro site na internet ou segundo ou terceiro, talvez você já tenha feito isso antes. Independentemente disso, vou te dar algumas opções. Número 1, você pode construir seu site do zero como fizemos na maioria desta classe ou duas, como fizemos no final, começar com se inscrever para hospedagem e começar a construir seu site no WordPress. Cabe a você de qualquer maneira como você quer fazer isso. Lembre-se que sempre que não souber fazer algo, comece a pesquisar. Estou falando sério aqui e não estou exagerando quando digo que pesquisa constante é algo que você precisará fazer ao longo de sua carreira como desenvolvedor. Mesmo se você veio apenas para aprender mais sobre a web, aprender a pesquisar como um desenvolvedor web é uma habilidade que podemos definitivamente beneficiar. Os desenvolvedores, afinal, são apenas solucionadores de problemas e a própria Internet é um vasto recurso para aprender qualquer coisa, assim como fizemos neste curso. Se precisarem de ajuda extra, deixem-me um comentário na caixa de discussão e também me avisem se quiserem que eu crie outra aula para vocês, entrando em detalhes sobre tudo o que falamos na aula de hoje. Isso conclui o curso. Agradeço muito a vocês por assistirem e estou ansioso para ver seus projetos de aula. Boa sorte, e vejo vocês na seção de discussão.