Crie Seu Próprio Site Um guia em quadrinhos para HTML, CSS e WordPress
Nate Cooper com ilustrações de Kim Gee
Copyright © 2014 by Nate Cooper. Title of English-language original: Build Your Own Website, ISBN 978-1-59327-522-8, published by No Starch Press. Portuguese-language edition copyright © 2015 by Novatec Editora Ltda. All rights reserved. Copyright © 2014 por Nate Cooper. Título original em inglês: Build Your Own Website, ISBN 978-1-59327-522-8, publicado pela No Starch Press. Edição em português copyright © 2015 pela Novatec Editora Ltda. Todos os direitos reservados. © Novatec Editora Ltda. [2015]. Todos os direitos reservados e protegidos pela Lei 9.610 de 19/02/1998. É proibida a reprodução desta obra, mesmo parcial, por qualquer processo, sem prévia autorização, por escrito, do autor e da Editora. Editor: Rubens Prates Ilustração: Kim Gee Tradução: Lúcia Kinoshita Revisão gramatical: Marta Almeida de Sá Editoração eletrônica: Carolina Kuwabata Assistente editorial: Priscila A. Yoshimatsu ISBN: 978-85-7522-410-6 Histórico de impressões: Março/2015 Primeira edição Novatec Editora Ltda. Rua Luís Antônio dos Santos 110 02460-000 – São Paulo, SP – Brasil Tel.: +55 11 2959-6529 Email: novatec@novatec.com.br Site: www.novatec.com.br Twitter: twitter.com/novateceditora Facebook: facebook.com/novatec LinkedIn: linkedin.com/in/novatec
A No Starch Press e o seu logo são marcas registradas da No Starch Press, Inc. Outros nomes de produtos ou de empresas mencionados neste livro são marcas de seus respectivos proprietários. Em vez de usar um símbolo de marca registrada em cada ocorrência de um nome de marca registrada, usamos os nomes apenas de maneira editorial e em benefício do proprietário da marca registrada, sem intenção de violação da marca. Este livro não é autorizado ou aprovado pela WordPress Foundation ou Automattic Inc. WordPress é uma marca registrada da WordPress Foundation. A No Starch Press/Novatec Editora não se responsabilizam pelo conteúdo do livro, embora toda precaução tenha sido tomada durante a sua edição. O autor e a No Starch Press, Inc./Novatec Editora não se responsabilizam perante qualquer pessoa ou entidade com respeito a qualquer perda ou dano causados, ou alegadamente causados, direta ou indiretamente pelas informações contidas neste livro. Todos os personagens desta publicação são fictícios ou usados de modo fictício. OG20150224
1 O primeiro dia de aula
Introdução à Web
Agora faça uma saudação ao sol e... respire...
Estou tão empolgada! Minha aula de web começa daqui a apenas algumas horas. Finalmente poderei entender tudo e criar o meu portfólio online.
Introdução à Web 3
Namastê!
4 Capítulo 1 O primeiro dia de aula
Oi, Doug!
Oi... Kim...?
Droga!
Ah, oi, Kim. Como vão as coisas?
Introdução à Web 5
Tudo bem! Acabei de sair da aula de ioga.
6 Capítulo 1 O primeiro dia de aula
Uma turma está indo assistir a este show hoje à noite, se você quiser vir conosco.
Hoje à noite não posso, Doug. Depois que devolver estes livros na biblioteca, precisarei ir à minha aula de Introdução à Web, às sete horas. Finalmente é hora de aprender a criar um site.
Você quer dizer aquele site de portfólio sobre o qual você vem falando?
Sim!
Legal. Bem, me passe o endereço quando o site estiver pronto! Preciso correr!
Introdução à Web 7
Oh-oh! Não quero chegar atrasada.
8 Capítulo 1 O primeiro dia de aula
Consegui!
Estão todos aqui?
Introdução à Web 9
Bem-vindos à aula de Introdução à Web. Meu nome é Nate e venho criando sites desde 1997. Uso o WordPress desde 2005 e agora vou ensiná-los a criar e a colocar seu site para funcionar.
Parece que estou no lugar certo.
10 Capítulo 1 O primeiro dia de aula
O que é necessário Neste livro, você conhecerá os conceitos fundamentais envolvidos na criação de um site. Discutiremos o básico sobre HTML, CSS e WordPress. Ao final da obra, você saberá tudo o que for necessário para o lançamento de seu próprio site. Porém um livro pequeno não pode ensinar tudo sobre o desenvolvimento de sites. Aprender é um processo, e espero que este livro seja um ponto de partida útil em sua jornada para se tornar um guru da web. Cabe a você fazer os exercícios e garantir que adquirirá a prática necessária. Este livro assume a abordagem de “aprender fazendo”. Dois recursos serão necessários em seu computador para acompanhar o livro.
Um navegador web Em primeiro lugar, será necessário ter um navegador web. Um navegador web é o que você utiliza para visualizar páginas web online. Se você estiver usando Windows, recomendo fazer o download do Chrome, do Firefox ou do Safari em vez de usar o Internet Explorer. Muitas versões mais antigas do Internet Explorer não estão preparadas para lidar com as convenções modernas da Web. Embora a maior parte do que faremos neste livro vá funcionar de maneira adequada com o Internet Explorer, se você se aprofundar mais no desenvolvimento web, ficará feliz de ter começado a usar esses outros navegadores. Se estiver em um Mac, você já terá o Safari instalado e poderá permanecer com ele se preferir. O Firefox ou o Chrome também poderão ser obtidos para testar o seu trabalho. Apesar de ser um passo a mais, você poderá chegar à conclusão de que prefere alguns dos recursos desses navegadores. Ter mais de um navegador é uma ótima ideia para que você possa observar as diferenças entre eles, além de ver como será a aparência de seu site para os visitantes que estiverem usando navegadores diferentes.
Um editor de texto Em seguida, você precisará de um editor de texto ou um editor de código de algum tipo. Por que se dar o trabalho de obter um programa somente para escrever velhos textos maçantes? Um bom editor de código foi concebido para ajudar você em algumas partes intrincadas da escrita de HTML e de CSS. Ao abrir um editor de texto, à primeira vista, ele poderá parecer semelhante ao Microsoft Word ou a outros processadores de texto. No entanto, após se aprofundar mais, você verá que ele foi especialmente projetado para exibir código, conforme mostrado na figura 1.1.
Figura 1.1 – Não use o Word nem outro processador de texto para escrever HTML (na parte superior)! Um bom editor de código facilita o seu trabalho (na parte inferior). Ele irá deixar os pares de tags em destaque, usará uma fonte de tamanho fixo e salvará os arquivos da maneira correta.
O que é necessário 11
Se estiver em um PC executando Windows, o NotePad++ é uma ótima opção gratuita (disponível em http://www.notepad-plus-plus.org/). Se estiver em um Mac, você poderá baixar o Text Wrangler gratuitamente (http://www.barebones.com/products/textwrangler). O Sublime Text é um editor de código gratuito e excelente, que funciona tanto nos Macs quanto em PCs (http://www.sublimetext.com/), e eu o recomendo fortemente. Selecione um editor que você goste e aprenda a usá-lo. Um navegador web e um editor de texto são tudo de que você precisa para acompanhar os capítulos sobre HTML e CSS. Se conseguir se familiarizar com um editor de código, no futuro, poderá valer a pena, no caso de você querer conhecer uma linguagem de scripting mais sofisticada como PHP, JavaScript ou Ruby.
O que você deve saber Neste livro, vou supor que você sabe usar um explorador de arquivos (Finder no Mac, Explorer no Windows) para abrir e salvar arquivos e instalar programas, e que, de forma geral, você possa lidar com um computador. Há outros tópicos básicos que você também deverá conhecer.
Como um endereço deve ser lido? Provavelmente você já viu o endereço de um site antes. Ele se parece com http://nytimes.com/, http://en.wikipedia.org/ ou http://nostarch.com/websitecomic. Como nós, geeks, adoramos nomes sofisticados, chamamos esses endereços de URL, que é a abreviatura de Uniform Resource Locator (localizador-padrão de recursos). Por enquanto, porém, nós iremos chamá-los simplesmente de link ou de endereço. À medida que outros locais na Web forem acessados, esse endereço mudará, do mesmo modo que sua localização muda quando você anda pelos quarteirões de uma cidade e vai para outras lojas. Vamos dar uma olhada com mais detalhes para ver o que cada parte de um endereço faz: http://nytimes.com/articletitle
u Inicialmente, há o http://. Ele nos permite saber que estamos usando HTTP, que significa Hypertext Transfer Protocol (protocolo de transferência de hipertexto). É uma maneira elegante de dizer que o navegador web deve esperar receber um documento HTML. Criaremos nosso próprio código HTML no capítulo 2. O HTTP é o protocolo mais comum que você verá na Web. Outro protocolo que vale a pena conhecer é o HTTPS, que significa Secure HyperText Transfer Protocol (protocolo seguro de transferência de hipertexto). Você verá esse protocolo sendo usado em páginas em que são inseridas informações confidenciais, por exemplo, números de cartões de crédito ou senhas. Outros protocolos também poderão ser vistos de vez em quando, por exemplo, ftp:// (abreviatura de File Transfer Protocol, ou protocolo de transferência de arquivos), descrito na seção “Um cliente FTP” na página 14. v Em seguida, temos o nome do domínio. Nesse caso, é nytimes. w O .com a seguir indica que esse é um site comercial. Embora .com continue sendo o tipo mais popular de domínio de mais alto nível, você verá todo tipo de domínio de mais alto nível hoje em dia. x O restante do URL aponta para um artigo, uma postagem de blog ou outro recurso ou outra página em particular. 12 Capítulo 1 O primeiro dia de aula
O que são clientes e servidores? Você já pensou no que está do outro lado quando você acessa um site ou o que faz a web funcionar? É somente um conjunto de computadores falando uns com os outros. Ao acessar a Wikipedia, seu computador conversa com o servidor da Wikipedia. Funciona mais ou menos da seguinte maneira: Quero esta página web.
Sem problemas. Aqui está ela.
Quando pedimos ao navegador web que acesse um artigo da Wikipedia, o servidor da Wikipedia (mostrado na figura 1.2) disponibiliza o artigo para nós, da mesma forma que o garçom em um restaurante traz um cardápio ou um croissant quando você lhe pede.
Figura 1.2 – Um servidor pode ser um simples computador desktop ou podem ser racks de computadores especializados, como os servidores dessa foto, que disponibilizam páginas da Wikipedia. Quanto mais tráfego seu site tiver, maior e melhor deverá ser o seu servidor. (Crédito da foto: Victorgrigas).
Até hoje, é provável que você tenha atuado mais como um cliente, solicitando páginas da web. Bem, agora você passará a disponibilizar essas páginas. Porém você pode estar se perguntando de que modo você obterá o seu próprio servidor.
O que é um host? Para garantir que as páginas web que você criar poderão ser vistas pelo mundo, será preciso ter o seu próprio servidor. Executar um servidor pode ser complicado, de modo que as pessoas, com frequência, compram espaços no servidor de outra pessoa. Uma empresa que vende espaços em um servidor é chamada de web host. Mediante o pagamento de uma taxa, um web host armazena suas páginas web e as mantém ativas e disponíveis durante 24 horas, sete dias por semana, a qualquer pessoa que queira acessá-las. Normalmente, configurar um host envolve dois passos. Em primeiro lugar, você deve registrar um domínio (por exemplo, www.natecooper.co) pagando uma taxa e, em seguida, deverá escolher um host e pagar taxas anuais ou mensais pela hospedagem. Entretanto não é necessário gastar dinheiro para acompanhar tudo o que estiver sendo discutido neste livro. À medida que criarmos as páginas web em HTML e CSS, você as testará em seu computador utilizando o navegador web. Isso significa que você simplesmente verificará a aparência de suas páginas web em seu próprio computador, sem que essas páginas sejam divulgadas na Internet.
O que você deve saber 13
Um cliente FTP Em algum momento, você precisará ter uma maneira de enviar arquivos ao seu host. É assim que você adicionará páginas e editará artigos. Para isso, será necessário ter um programa FTP (File Transfer Protocol, ou protocolo para transferência de arquivo). Um programa FTP gratuito e muito bom, disponível tanto para o Windows quanto para o Mac, é o FileZilla (http://www.filezilla-project.org/). Depois que se inscrever para ter um host, você obterá suas informações de login e poderá conectar-se remotamente a ele por meio de FTP. Ainda não é preciso ter um cliente FTP, porém você poderá precisar de um posteriormente, quando tiver o seu primeiro site.
Figura 1.3 – O FileZilla é uma aplicação FTP gratuita que permite carregar arquivos de seu computador para um servidor remoto.
Ao começarmos a trabalhar com o WordPress no capítulo 4, será preciso ter um host, pois o WordPress utiliza uma tecnologia que exige um servidor para que ele funcione. Para acompanhar, uma conta gratuita do WordPress poderá ser usada em WordPress.com ou, se você se inscrever para ter um host junto a um site de terceiros, por exemplo, no Host Gator, o WordPress poderá ser configurado gratuitamente (veja o capítulo 6). Retomaremos algumas particularidades sobre a aquisição de um host no último capítulo deste livro. Por enquanto, anote essa atividade na lista de tarefas a serem feitas em sua mente. Se você já instalou o seu navegador web e um editor de código, tudo de que você precisará agora é de um espírito de aventura. Prepare-se para aprender!
14 Capítulo 1 O primeiro dia de aula