Um subdomínio é uma parte do seu domínio, ou seja, uma parte do seu site. Na prática, ele representa um prefixo do seu domínio. Um dos portais que mais utiliza esse recurso, de forma bem compreensível, é o site da Globo.com. Exemplos:
ge.globo.com
g1.globo.com
gshow.globo.com
Não necessariamente precisa ter o www na frente, essa é outra questão que explicaremos em outra oportunidade.
Alguns sites podem se beneficiar bastante do subdomínio, como por exemplo:
Site de moda que decidiu ter uma loja para vender seus produtos, pode usar um subdomínio do tipo loja.site.com.br .
Um artista que além de expor seu portifólio, quer ter um blog para escrever matérias, pode ter um domínio separado para seu blog.
Uma loja multimarcas, pode criar um subdomínio para cada marca, para que o cliente encontre facilmente os produtos que deseja.
O subdomínio não precisa ser registrado no Registro.br nem no Register.com e na maioria dos provedores de hospedagem, não é preciso pagar a mais para ter subdomínios. Ele é gratuito (normalmente).
Para se criar um subdomínio na Locaweb, que é o provedor de hospedagem que utilizamos, é um processo muito simples, feito em questão de minutos. No Painel de Controle, acesse a opção Hospedagem > Domínios > Adicionar novo domínio. Selecione o botão Subdomínio:
Nesta tela, bem intuitiva, basta preencher o nome do subdomínio e a pasta para onde será direcionado o subdomínio. O importante é verificar se o subdomínio está dentro do seu site ou se está em local externo. A Locaweb ainda oferece a opção de redirecionar para uma página em construção ou para a raiz do site. No nosso caso, vamos criar um subdomínio para o nosso Blog, assim quando o usuário acessar blog.nishiweb.com.br, será direcionado para nosso Blog Nishiweb.
Pronto! Depois de alguns minutos o subdomínio começará a funcionar! Se quiser testar, clique no recém-criado subdomínio:
blog.nishiweb.com.br
Segurança SSL em Subdomínios
Se por um lado a criação de Subdomínios não tem custos na hospedagem, por outro lado o certificado SSL tem custos. Como explicamos anteriormente no texto sobre Certificado SSL, dependendo da sua contratação, os subdomínios não estarão inclusos, apenas os subdiretórios. Assim, será necessário contratar um novo certificado para cada subdomínio ou procurar um plano abrangente para cobrir todos os eventuais subdomínios que deseja criar.
SEO de Subdomínio ou Subdiretório
Uma dúvida comum em termos de SEO é: qual é mais importante, o subdomínio ou o subdiretório? Na teoria, o algoritmo do Google considera o subdomínio mais importante que o subdiretório, mas é bem verdade que na prática, o mais relevante é mesmo o conteúdo da página. Não basta ter um subdomínio chamado “webdesign” por exemplo, para aparecer de uma hora para outra nas primeiras posições do Google. É necessário trabalhar o seu conteúdo e ter autoridade sobre o assunto, até se atingir um patamar maior, é um trabalho de construção muitas vezes demorado. Mas a organização do seu site em subdomínios pode ajudar!
Sem categoria	AnimeComics, blog, dicas, DNS, hospedagem, Locaweb, SEO, subdomínios	Deixe um comentário
Open Graph: dicas de compartilhamento em Redes Sociais
20 de agosto de 2021 20 de agosto de 2021 Ricardo Nishimori	
Se você é usuário do Facebook e do Twitter, já deve ter percebido que, quando compartilhamos um artigo de um site externo (normalmente site de notícias), muitas vezes aparece uma foto e uma breve descrição do artigo, deixando o post mais atrativo. Veja o exemplo abaixo:
Exemplo de post do Facebook
Isso se deve a uma informação na programação do site chamada Open Graph, representada pela tag <og>. Em HTML é relativamente simples de se fazer, mas hoje vamos ensinar como fazer isso no WordPress de modo ainda mais fácil do que no HTML. Existem diversos plugins que fazem bem esse tipo de tarefa, mas decidimos usar um dos mais populares, chamado Open Graph and Twitter Card Tags. Basta procurar na lista de Plugins, instalar e ativar. Não é necessário mudar nenhuma configuração. Assim que ativado, na página de edição de Posts ou Páginas, aparecerá esse novo formulário:
São dois novos campos, um para inserir a imagem de compartilhamento e outro para o resumo. O tamanho recomendado da imagem é 1200 x 630 pixels, e o texto pode ter até 300 caracteres. Caso fiquem em branco, será usada a primeira imagem do post e parte do conteúdo. Em nosso exemplo, editamos o post sobre Certificado SSL, incluímos uma imagem e um breve resumo.
Depois de Salvar e Publicar o post, experimente compartilhar o link da sua postagem no Facebook. O resultado será semelhante a este:
Assim que colar o digitar a URL do seu post, aparecerá o preview logo abaixo, para poder saber como ficará a postagem antes de publicar.
No Twitter, o resultado será esse:
Uma última dica: após publicar a imagem no Facebook, notamos que o texto no fundo chapado não fica uniforme, perde muita resolução. Então optamos por usar uma imagem de fundo. Por isso a imagem do Twitter ficou com fundo de madeira.
Continue nos acompanhando para mais dicas, na nossa jornada para construir um site completo no WordPress.
WordPress	dicas, Facebook, mídias sociais, Open Graph, plugins, SEO, Twitter, WordPress	Deixe um comentário
Customização do WordPress
13 de agosto de 2021 24 de setembro de 2021 Ricardo Nishimori	
Vamos à segunda parte da nossa demonstração de site WordPress, que é a Customização. Na primeira parte, já havíamos escolhido um tema, o Radiate. Foi escolhido por ser simples, clean, e atendia aos requisitos.
Este é o Blog atualmente. Se vocês estão acompanhando, perceberam que não mudei praticamente nada, apenas incluí um artigo sobre Certificado SSL. E também alterei o favicon que é o ícone que aparece na aba do navegador, mas isso não foi através do WordPress.
Hoje queremos mudar os itens visuais:
• Logotipo,
• Estilo do Menu
• Cores de fundo
• Imagem do Cabeçalho
Logotipo
Acabei de descobrir que o tema escolhido tem uma parte de customização que é paga. Porém pode ser feita de outra forma, através de programação. Pode ser um problema se você não é familiarizado com Temas de WP, pois a alteração requer algum conhecimento de HTML e da estrutura de WordPress.
No Painel de Controle, escolha Aparência > Editor de temas.
Aparecerá um menu de arquivos do Tema na direita. Escolha o Cabeçalho do tema (header.php). Este é um arquivo padrão para todos os temas, sempre existe um header.php
Localize no código a tag <header>. Esta tag é padrão de HTML, todos os sites mais recentes tem essa tag, serve para indicar onde será o cabeçalho do site que inclui Logotipo, Menu e às vezes um banner.
Neste tema, perceba que há uma div com a classe “site-branding”, que indica que o nome do site / logotipo é definido aqui.
Todo esse código dentro da div “site-branding” deve sumir
Vou substituir esse código PHP por uma tag simples:
<a href="/default.asp"><img src="/images/logo.png"></a>
Então é só salvar e ver como ficou:
Parte do logo ficou “invisível” pois a imagem foi projetada para fundo escuro. Então vamos resolver logo esse fundo.
Cores de Fundo e Estilo do Menu
As cores do site são fáceis de se mudar, em Aparência > Personalizar > Cores. Só que, mais uma vez, o tema escolhido não permite customizar tudo na versão free, então vamos ter que editar manualmente o CSS. Após salvar as cores básicas, vamos para Aparência > Editor de Temas e dessa vez vamos escolher o arquivo style.css
Aqui devemos procurar a classe que define a cor de fundo do menu. Uma dica: para achar a classe mais facilmente, utilize o Chrome, clique com o botão direito no menu e selecione “Inspecionar”. Vai abrir o debug daquele elemento, mostrando a classe. No nosso exemplo, a classe a ser alterada é a header-wrap. Voltando ao editor de temas, é só procurar essa classe e alterar a cor de fundo (background-color).
Aproveitando que estamos em estilos, também vamos alterar a cor da fonte do menu, pois como eu vou deixar o fundo preto, a fonte deve ser uma cor clara. Usando o mesmo método de inspecionar, encontrei a classe do botão “Home” e alterei. Depois de salvar, o resultado foi esse:
O Logotipo da Nishiweb ficou bom no contraste com o preto
Imagem do Cabeçalho
A imagem padrão do tema, essa bela foto de NYC, combinou com o nosso site. Porém como prometido, vamos trocar a imagem. Essa troca fica em Aparência > Personalizar > Mídia do cabeçalho.
O tema escolhido permite utilizar mais de uma imagem no cabeçalho, porém nos testes que fizemos não funcionou. Posteriormente vou mostrar como se inclui um banner rotativo no lugar de uma imagem fixa. É recomendado utilizar uma imagem de 1500 x 450 pixels (jpeg ou png), mas para efeitos de teste, usei uma imagem pequena que ficou estourada.
Por ora, o resultado é este:
Adicionalmente, troquei a imagem de fundo da página, para ficar com uma identidade parecida com o site da Nishiweb. Fica em Aparência > Imagem de fundo . Selecionei a opção “preencher toda a tela” para que cubra todo o fundo sem cortes.
Espero que tenha ajudado! Em breve mais customizações de WordPress
WordPress	CSS, desenvolvimento, layout, PHP, temas, webdesign, WordPress	Deixe um comentário
Como incluir o Certificado SSL no seu site
12 de agosto de 2021 20 de agosto de 2021 Ricardo Nishimori	
O SSL (Secure Sockets Layer) é um Certificado Digital que garante segurança nas transações online, entre o usuário e o website. Em termos práticos, significa que, quando um usuário preenche um formulário digital, por exemplo, as informações são criptografadas para que não haja vazamento de informações. Essa criptografia é feita por uma chave única, em posse da empresa certificadora.
A cerca de 15 anos atrás, com a popularização de sites de e-commerce, tornou-se necessário proteger informações sigilosas como cartões de crédito, dados bancários e senhas de e-mail. Fez-se necessário a utilização de criptografia para proteger tais dados, então investiu-se muito na criação de certificados que garantissem a segurança desses dados. Porém, de alguns anos para cá, cada vez mais golpes de internet obrigaram as empresas a adotarem medidas de segurança até nos formulários mais triviais.
E finalmente em julho de 2018, o Google praticamente decretou a necessidade de se possuir um certificado SSL em todos os sites, priorizando em suas buscas os sites que possuem Certificado SSL. O navegador Chrome deixou de exibir certos sites, e em alguns casos mostrando uma tela assustadora de aviso de site não seguro para os sites que não possuem SSL. E em sites com baixo risco de invasão (sites que não possuem formulários, por exemplo), simplesmente mostra um ícone e o aviso “Não seguro” no prefixo da URL, ao contrário do famoso “cadeado”.
Então para garantir segurança para seus usuários e além disso ter uma prioridade na busca do Google, todo site precisa de um certificado SSL.
Como incluir o SSL em meu site?
A maioria dos provedores de internet possuem algum tipo de pacote que inclui o certificado SSL. Na Locaweb, por exemplo, toda hospedagem possui um certificado SSL compartilhado. A maior desvantagem do SSL compartilhado em relação ao SSL próprio, é a necessidade de usar o prefixo por exemplo: https://ssl.websiteseguro.com/seu-domínio Ou seja, a URL fica um tanto longa e não intuitiva.
Vou citar aqui o exemplo de como contratar na Locaweb, que é meu provedor de hospedagem, e acredito que nos grandes provedores o processo seja semelhante. A Locaweb possui um passo a passo bem simples de seguir, e o primeiro passo é solicitar a contratação, gerar o boleto e pagar. Após a confirmação de pagamento, a Locaweb envia por e-mail um link para fazer o cadastro e solicita que se abra um chamado para gerar a chave CSR, uma espécie de senha gigantesca e portanto impossível de ser adivinhada. Essa CSR é gerada pela empresa certificadora, e depois deve ser informada para o provedor de hospedagem.
Como sou Desenvolvedor Locaweb, a própria Locaweb se encarrega de realizar alguns passos de instalação, poupando algum tempo, então o terceiro passo é a configuração de redirecionamento. Assim, se o usuário digitar por exemplo “www.nishiweb.com.br”, ele vai ser redirecionado automaticamente para “https://nishiweb.com.br”, evitando assim que ele veja uma página não segura dentro do seu site.
O redirecionamento é bem fácil de se fazer, bastando acrescentar o código abaixo no arquivo .htaccess do seu site:
RewriteEngine On
RewriteCond %{SERVER_PORT} 80
RewriteRule ^(.*)$ https://www.seudominio.com.br/$1 [R,L]
Caso seu site não tenha o .htaccess, é só criar um usando um bloco de notas e salvar na raiz do seu site.
Pronto, assim a segurança do seu site estará garantida!
Sem categoria	Google, Locaweb, programação, segurança, SSL	Deixe um comentário
Olá, WordPress!
11 de agosto de 2021 24 de setembro de 2021 Ricardo Nishimori	
Começamos aqui um Blog do WordPress, para falar de diversos temas relacionados a nossa área como Webdesign, programação, hospedagem de internet, segurança digital, dicas de Google, e é claro, o próprio WordPress. Se conseguir acompanhar, você verá que o nosso Blog começa no estilo padrão de WordPress com a mensagem de “Olá, Mundo” e sofrerá modificações com o tempo. Vamos fazer postagens a cada grande mudança nele.
Para preparar a instalação do WordPress, é preciso levar em conta os requisitos: Banco de Dados (mySQL ou MS-SQL) e servidor PHP, de preferência 7.1 ou superior. Criamos o nosso banco de dados mySQL e deixamos tudo pronto antes da instalação. Se o site for instalado em diretório, é preciso deixar criado esse diretório e configurar as permissões de Escrita na pasta (chmod 755)
A instalação padrão do WordPress foi simples, apesar de já termos feito isso diversas vezes para clientes distintos. Pode ser feita de modo manual – baixando os arquivos e publicando via FTP, ou de modo automático – através do provedor de hospedagem. Dessa vez, fizemos pelo nosso provedor, a Locaweb, que disponibiliza o WordPress de modo fácil no menu Aplicativos da Central do Cliente. Depois do preenchimento de um breve cadastro, informando dados do Administrador, o caminho onde será instalado e os dados do banco de dados, leva cerca de 5 minutos para concluir a Instalação e estará pronto para uso.
A primeira coisa que costumamos fazer é o login na área administrativa para instalar os plugins básicos. O primeiro plugin foi de backup, para que não se perca nada do site caso ocorra algum erro. Escolhemos o Updraft, mas existem diversas boas opções. O Updraft permite publicar o backup no Dropbox, o que para nós é muito útil. Aqui, nos deparamos com uma mensagem que dependendo da versão do WordPress, é preciso de uma intervenção no código. Havia uma necessidade de informar novamente os dados de FTP para que o plugin fosse instalado. Resolvemos isso com uma linha de código no wp-config.php:
define('FS_METHOD', 'direct');
Depois, buscamos um tema que combinasse com o nosso site. Escolhemos o tema Radiate que nos pareceu simples e elegante.
Editamos o menu para ter um link para nosso site principal, assim quem estiver acessando o Blog, terá oportunidade de voltar (ou conhecer) a página principal da Nishiweb.