School of Drama - Olá gente, bem-vindos a mais uma vídeo aula do canal: "Clube do Design", eu sou Liute Cristian. É!!! Não se espantem, sou eu mesmo. Bom... Hoje estamos de volta com mais um vídeo da série: "Como Criar Seu Portfólio em Wordpress". E no último vídeo, mostrei pra vocês como fazer a instalação de um "plug-in", que foi o plug-in "JetPack", na verdade eu mostrei como instalar qualquer tipo de "plug-in", pesquisando através do "Painel Administrativo" do Wordpress e também mostrei como você pode fazer o upload de seus próprios plug-ins, caso você compre de terceiros. No vídeo de hoje, eu vou mostrar pra vocês como configurar o "JetPack", que foi justamente aquele plug-in que nós instalamos no vídeo anterior. Se você perdeu eu vou deixar o link na descrição do vídeo, tá legal?! Bom, então, a gente vai configurar o "JetPack", que na verdade é um plug-in que: Oferece... Na verdade não é bem um plug-in, é um pacote de recursos. É um plug-in que traz consigo vários outros plug-ins, que vão te ajudar a deixar o seu site praticamente pronto! Embora eu use alguns outros plug-ins.... Pra algumas, alguns recursos que estão presentes no "JetPack". Eu vou mostrar pra vocês como usar apenas o "JetPack", pra solucionar aí, os recursos que você precisa pra resolver aí, alguns probleminhas no seu site e adicionar alguns recursos, muito legais, apenas com "JetPack", tá legal?! Então, vamos lá! Então iniciando a partir do seu painel wordpress, lembrando que você deve fazer login utilizando o link, que é o endereço do seu blog/wp-login.php e você pode observar aqui no meu painel que eu tenho duas atualizações pendentes. Sempre que aparecerem novas atualizações, você pode acessar através desse botão aqui na parte de cima, selecionar eles, olha, inclusive é uma atualização pra o próprio "JetPack", desde a última aula que a gente gravou já tem uma atualização disponível. Basta selecionar todos e selecionar a opção: atualizar plug-ins. O wordpress atualiza automaticamente, desativando os plug-ins, colocando o seu site em modo de manutenção, ativando os plug-ins novamente e retirando o site do modo de manutenção. O processo acontece bem rápido, então, não dá nem tempo na verdade, dos seus leitores se depararem com uma tela de manutenção dentro do seu site. E pronto! Depois que a atualização for concluída, você consegue visualizar um pequeno "log", onde ele mostra o status da atualização. E vamos voltar pra o nosso vídeo. Depois que você faz a instalação do "JetPack", você ganha um novo item de menu, no seu painel administrativo, que é justamente o menu "JetPack". Clicando neste menu, você vai ser direcionado pra o painel administrativo, pra área de configurações do próprio "JetPack". É interessante, mencionar que: Apesar de você ganhar um novo item específico do "JetPack", ele também adiciona novas opções em alguns menus de configuração, como por exemplo, o menu compartilhar, dentro do item de configurações. E, também vai mostrar algumas outras opções nativas do plug-in "JetPack", nas opções de escrita, de leitura e discussão. Enfim, ele vai adicionar vários recursos novos em várias partes do seu site. Dentro do painel de "JetPack", aqui é o painel inicial. Ele fala aqui um pouquinho, sobre as novidades do plug-in, alguns recursos novos de algumas funções e tudo mais. Pra você acessar a área de configurações você clica aqui em cima ou clicar aqui do lado em configurações, onde a gente vai conhecer cada um dos recursos agora e entender pra quê, cada um deles serve. Bom, existe alguns recursos novos como esse "Beautiful Math" aqui, que eu não sei o quê que faz, então esse aqui eu não vou comentar.Mas a gente tem aqui, alguns recursos que eu já conheço, que é o recurso de css personalizado, que adiciona uma folha de estilos personalizada, dentro do menu aparência. Então, a partir desse, dessa configuração deste item: css personalizado, que está ativo, você observa que ele, marca de azulzinho clarinho, as opções que estão ativas e de branco as opções que estão desativadas. Tá legal?! Eu vou desativar essa aqui em cima, que eu ainda não sei pra quê que serve, mas eu vou descobrir e quando eu descobrir eu mostro pra vocês, tá legal? Então, basta clicar aqui em desativar, o recurso é desativado. O css personalizado eu uso porque, é muito útil pra você fazer pequenas modificações no seu site. Por exemplo, você quer mudar a cor de um botão, quer mudar o tamanho de uma fonte, você pode utilizar a folha de estilos de css do "JetPack". Isso evita que você faça alterações diretamente nos arquivos do seu tema. Alguns temas apresentação a opção pra edição de css. Vou abrir aqui o "editar css", em uma nova guia, tá?! Então eu vou clicar com o scroll do mouse pra abrir o item aqui na nova guia. Então, vamos ver se o.... O "Workality" oferece alguma configuração de css. Vou clicar aqui no menu, na opção do meu tema né, no painel do meu tema. Aqui ele não mostra nenhuma opção de css. Deixa eu ver aqui embaixo em advanced, também não mostra. Então alguns, alguns temas, mostram um campo de texto, tá? Em algumas das configurações, em uma das configurações disponíveis ele mostra um campo de texto, que permite que você adicione linhas de código css. Que são codificações com folhas de estilo. Pra que você possa fazer alterações na aparência do seu site. Então, olha, abri aqui a opção de css, editar css do "JetPack". Que fica disponível aqui em aparência, editar css. Quando este recurso está habilitado: css personalizado e a partir daqui você pode adicionar folhas, ou comandos, ou mesmo códigos que alterem a configuração, a aparência dos itens do seu site. Pra você entender como é que isso funciona e como eu faço as alterações no meu site, eu não sei muita coisa de webdesign. Não sei muita coisa de css, muito menos ainda de php que, é como o wordpress funciona. Então, quando eu preciso editar alguma coisa em css, eu geralmente localizo esta coisa no meu site, como por exemplo: Eu vou acessar aqui a minha página inicial. Então vamos supor que eu queira alterar a cor desse realce, que fique aqui sobre o meu texto, sob o item de menu selecionado. Então, se eu quiser alterar a cor disso aqui, dificilmente eu consigo descobrir isso se eu não olhar a codificação, a folha, o arquivo de css, de folhas de estilos desse tema. Pra mim, descobrir como eu faço pra alterar isso através de css é muito fácil, utilizando o próprio "Google Chrome". Você pode usar também o "Firefox" que também tem o recurso que a gente vai mostrar agora. Se você clicar com o botão direito, sobre este item de menu e clicar na opção: inspecionar elemento, a gente vai abrir aqui, olha, toda codificação dessa página, o html que está sendo utilzado pra essa página. Então, quando você navega com o mouse, quando você vai apontando com o mouse sobre cada uma dessas "divs" aqui, olha. Você observa que ele vai selecionando e mostrando ali, a que área se refere essa seleção. Então, por exemplo: Se eu colocar o meu mouse aqui neste link da "div", "fullnav", que dá pra entender que seria a minha área de navegação ali em cima, olha a área total dela. Então, quando eu aponto pra cá, ele automaticamente destaca ali: Animação. E você pode observar o seguinte: Que há uma, uma configuração no css, pra o link selecionado. Esse "a" aqui, nesse caso seria o link, né? O item ali de menu com a seleção. Então ele mostra aqui que, o "a" selecionado, o link selecionado tem um background-color, que seria uma cor de plano de fundo, cinza. Então, se eu quiser alterar a aparência de qualquer item: "a.selected" que neste caso também está vinculado aqui a esta outra classe, que é o: navibg, que dá pra entender que seria a cor da navegação, a cor do plano de fundo da navegação. Eu posso definir o valor manualmente, clicando aqui e digitando um dado hexadecimal de cor ou eu posso clicar aqui, nesse quadradinho e selecionar a cor muito mais intuitivamente, utilizando um editor, uma tabelazinha cromática ali, que me permite fazer alterações nas nuances de cor e também na gama de cores que eu quiser. Olha que azul legal que fica, olha! Deixa eu clicar aqui de novo, pronto. Então, uma vez que eu identifiquei, fiz as alterações que eu quero neste item. Eu gosto de laranja, vocês devem ter percebido, por causa do Clube do Design. Fiz as modificações de cor que eu quero neste item, olha só que legal! Se eu atualizar a página eu perco essa alteração, tá?! Então, o quê que eu faço? Depois que eu faço essa alteração, eu seleciono estes, estes itens aqui, olha, tá legal? Estes que estão, principalmente estes que estão em negrito, mas eu vou pegar todos eles, pra utilizar, fazer a alteração em todas essas classes, olha só. Então, até mesmo no "a.hover", que seria esse aqui, quando eu coloco o mouse em cima, que seria o hover, ele também faz uma modificação. Então, basta selecionar a partir desse colchete aberto, até aqui em cima no primeiro item que seria esse "naviwithall", copio no "Control + C", venho aqui no meu editor de css do "JetPack" e colo aqui dentro. Pronto! Depois, basta salvar a folha de estilos. É só, gente. Você acabou de fazer uma alteração na aparência do seu site, sem alterar diretamente a aparência, os arquivos do tema. Olha só, deixa eu dar um "F5" aqui, pra atualizar, deixa eu fechar isso aqui. Pronto, atualizei e olha só: Pronto! Modificações inseridas. Agora o meu tema já tem o laranjinha como cor principal aí, nesses itens. Vamos fazer mais um?! Vamos ver aqui em cima, olha, por exemplo: O menu "início". Vou clicar aqui no início, pronto, você observa que ficou uma barrinha ali embaixo, tá legal?! Deixa eu só identificar qual foi a cor que eu usei aqui, copiar ela aqui... #E74600, pronto. Então, aqui eu tenho o menu início e uma barrinha, uma linha embaixo dele. Vou clicar com o botão direito: inspecionar elemento, usando o Google Chrome e olha só que legal. Automaticamente ele destacou aqui, nessa "div" aqui, tá legal? A "div" do menu superior. Ele expandiu aqui, os itens de menu, não é? Onde eu tenho aqui o meu item final, que seria o menu "início". Algumas vezes quando você faz esse procedimento, de clicar com o botão direito e inspecionar elemento, você precisa voltar às vezes algumas casas aqui, algumas classes, vamos dizer assim, pra que você possa localizar o item que compreende aquela modificação. Então aqui eu já consigo identificar: "Opa, tem preto aqui." Então aqui é preto, então pode ser aqui. Eu observo que ele tá definindo a borda de baixo, a borda, "border-bottom" aqui, neste caso, pra 3 pixels. Ah, eu quero uma borda maior, eu quero uma borda de 7 pixels. Olha o tamanhão da borda que eu coloquei ali. Ah, eu quero uma borda de 25 pixels. Aí fica uma borda muito grande né? Vou colocar 3 como estava, pronto. Você pode modificar tudo em tempo real. Agora eu quero essa cor dessa borda, exatamente a cor que eu coloquei ali no meu laranjinha. Como eu já copiei a informação hexadecimal, eu só vou colar aqui, olha só. Pronto! Olha que bacana. Automaticamente eu estou adicionando a cor laranja em outros itens de menu. Se eu quiser que o texto me fique laranja, que seria o color, tá legal? Basta eu clicar nele e adicionar a cor que eu quero novamente. Olha que legal. Mas eu acho que preto fica melhor né? Então, vou colocar aqui o preto. Pronto. Okay?! Então, algumas coisas você acaba tendo que saber, conhecer... Como os valores hexadecimais de cor, mas existem maneiras de descobrir isso, claro, aqui o recurso já mostra aqui o mapinha cromático pra você selecionar automaticamente. Mas, algumas coisas que você precisa fazer modificações diretamente nos atributos do css, você precisa procurar na internet, pra você conseguir entender como é que funciona, tá legal? Então olha só, eu vou copiar novamente esses códigos aqui. Ah! Só ressaltando aqui em cima, ele te mostra o que é que vai ser afetado com essas alterações, tá legal? Isso está diretamente relacionado ao css principal do site, do tema. Então, vou selecionar aqui novamente este código, copiá-lo e colá-lo na minha folha de estilos do "JetPack". Viram como dá pra alterar o site, sem entender muito, sem na verdade, ter um conhecimento muito aprofundado em css ou em recursos de webdesign? Olha só. Então, já adicionei uma característica diferente pra o meu blog. Já adicionei alguns recursos muito legais. Se eu quiser colocar com cantos arredondados esse fundo, dá pra fazer também. Só que você vai precisar aí, de um pouco mais de conhecimento. Então, olha só. Então a gente tem aí, diversos recursos à nossa disposição que, podem ser alterados facilmente, utilizando o inspetor de elementos do Google Chrome e a folhinha de estilos aqui do "JetPack". Então se você quiser fazer também pequenas anotações, pra você identificar o que é que você tá mudando, você pode colocar isso aqui, olha, abrir um comentário, colocar: Modifica a cor dos menus. Pronto. E aí você fecha um comentário desta maneira. Então, este, esta barra e o asterisco, aqui em cima, adiciona, abre o item de comentários. Você escreve o comentário e fecha. Isso aqui é ignorado pelo leitor, pelo navegador, tá legal? Então ele identifica que isso é só uma anotação, não vai considerar. É apenas pra você lembrar do que essa alteração, o que essa alteração vai fazer no seu site. Modifica a cor dos menus, modifica a cor dos menus do menu principal. Então, você, é claro, faz a anotação de maneira que você consiga se lembrar e caso você precise desfazer, é só apagar essa modificação ou modificá-la da maneira que você achar necessário. Deu pra entender? É muito fácil. Muito simples, voltando lá pras configurações do "JetPack" agora. Só lembrando que, pra que isso funcione, a opção css personalizado deve estar habilitada. Aqui embaixo tem a opção de carrossel. Que permite a você, criar galerias de imagem, aqueles carrosséis onde a imagem fica passando assim, como se fosse um slide, dentro do seu post. Eu não gosto de usar, porque não fica muito legal o recurso de carrossel do "JetPack". Não é lá essas coisas assim, muito bonitas. Mas se você quiser utilizar, você pode ativar e configurar como achar necessário. Cartões Gravatar. Pra quem não conhece, o gravatar é um recurso de identidade do wordpress. Quando você cria o seu, isso é importante também, pra você que vai criar o seu site, o seu portfólio, a sua loja, o seu blog em wordpress... Você precisa criar uma conta no "Gravatar". Esta conta vincula o seu e-mail, o e-mail que você utilizou na sua conta do wordpress, a uma imagem e a um perfil de identidade. Ou seja, quando você comenta em um blog, que utilize o wordpress, você já deve ter percebido que, nos comentários, dificilmente fica a foto da pessoa. Deixa eu pegar aqui o meu site, o clubedodesign.com, pra você entender melhor do que eu estou falando. Quando uma pessoa comenta no seu site, utilizando o recurso de “comentários nativo” do wordpress, que é aquele formulário de comentários padrão e isto está presente aqui no blog, deixa eu voltar aqui em cima, acessar aqui o blog do nosso site, do nosso portfólio. Deixa eu entrar aqui, eu acho que aqui neste artigo de demonstração deve ter um comentário. Então, olha só. Quando você usa o formulário padrão do wordpress, que é esse formulário de contato aqui embaixo, ele inclusive, ele já tá mostrando algumas opções do "JetPack", que é isso aqui olha, tá? A opção que o seu usuário tem, de seguir os comentários. Quando você comenta aqui, você observa que não aparece uma foto. O gravatar, além de inserir a foto da pessoa, quando você apontar pra esse avatar aqui, pra essa fotinha, ele mostra um cartão gravatar. Que vai mostrar: Os dados desse contato, você pode visualizar o perfil completo dele no gravatar. Uma coisa semelhante acontece aqui no Clube do Design, eu vou entrar aqui, neste artigo de infográfico pra vocês verem, os comentários agindo. Eu uso o formulário padrão do wordpress tá? Se você quiser, você pode instalar plug-ins de comentários, o próprio "JetPack" tem o recurso de comentário que eu vou mostrar já, já. Neste caso você observa aqui, que o Marcelo Brandt comentou no meu site. Se o Marcelo tiver uma conta, tivesse aliás, uma conta do gravatar associada ao mesmo e-mail que ele usou pra comentar, ia aparecer a fotinha dele, igual está aqui no meu comentário. Então, pra você criar o seu gravatar, basta acessar: gravatar.com, se eu não me engano este é o resultado, este é o endereço. Lá você escolhe o idioma que você quer criar o seu gravatar, aí ele já muda pra português e você pode criar o gravatar tranquilamente, inclusive usando a conta wordpress.com que a gente criou pra instalar o "JetPack". Use a mesma conta, o mesmo serviço, é tudo vinculado ao wordpress. Okay?! Então, é basicamente isso, que esta opção vai oferecer. Ele vai mostrar, na verdade, os cartões gravatar, quando você aponta pra o perfil de uma pessoa, nem sei se eu uso, não, eu não uso aqui. Tá legal? Bom, depois disso nós temos os comentários jetpacks. Você pode observar aqui, que no nosso blog do nosso portfólio, a gente tem um comentário nativo do portfólio, do tema. Então isso aqui é a configuração padrão do tema. Se você quiser ativar os comentários do jetpack, você aumenta as possibilidades das pessoas comentarem utilizando as redes sociais. Então, você pode por exemplo, clicar aqui em ativar, pra que o seu formulário de contato, seja substituído pelo formulário de contato do jetpack. Vou pressionar o "F5" aqui pra atualizar, pra a gente ver o resultado final. Pronto! Olha só, a área já é diferente, tá vendo só? Então, quando você clica já expande aqui, você observa que ele tá pegando aqui o meu nome de usuário, o botão já mudou e ele já integra com as opções, com as opções nativas também do jetpack. Vou acessar aqui, através de um outro navegador onde eu não esteja logado, pode ser o internet explorer ou pode abrir uma nova janelinha anônima ali do Google Chrome. Vamos ao IE aqui, pra a gente ver como funciona. Então olha só. Eu não estou logado, sou um usuário qualquer, que acessei o seu site, o seu portfólio. E aqui embaixo a gente tem o formulário de comentários: Deixe uma resposta. Basta clicar aqui e olha só... Ele me dá a possibilidade de logar com a conta do wordpress, twitter, facebook ou google. Então... E claro, também fazer um comentário diretamente, cadastrando o meu e-mail. Então, é isso que faz o formulário de contato do jetpack, adiciona um recurso de formulário de contato mais robusto do que o padrão do seu tema. Claro, que isso vai depender do tema. Alguns temas já tem um formulário de contato, de comentários, muito mais complexos. Já com recursos de login com as redes sociais. Mas se não tiver é só ativar esse recurso do jetpack e pronto! Seu site vai estar preparado para receber comentários, através de logins de perfis sociais. Não se preocupem, apesar de, você substituir o formulário de contato, o jetpack é totalmente integrado com o wordpress. Então os comentários que forem feitos através do formulário de contatos do jetpack, serão vinculados ao seu site sem problema algum. Ficarão disponíveis também quando você desabilitar também, por exemplo esses comentários. Diferente de alguns plug-ins externos. Há até um tempo atrás, um dos plug-ins mais usados pra contatos, que é o disqus, ele não oferecia suporte pra integração com o wordpress, então você perdia os contatos, os comentários, quando você, por exemplo, deixava de usar o plug-in. Hoje, ele já sincroniza, já importa e tudo mais. Mas a gente não vai usar, porque eu não gostei da experiência, muitos sites utilizam... É muito mais bonitinho, mas eu não gostei da experiência de utilizar o disqus, porque por incrível que pareça, depois que eu retornei o meu site pra o formulário de contatos padrão, eu recebi muito mais comentários do que estava recebendo com o disqus, okay?! Sem falar que ele também demora um pouquinho mais pra carregar. Bom, voltando aqui pra o jetpack. Você pode manter a opção de comentários jetpack habilitada. Eu vou abrir aqui, abrir aqui a opção de configurações em uma outra janela. Você observa que ele vai abrir exatamente a área de configurações de discussão do painel administrativo, então olha só, ele pulou pra cá, olha: configurações, discussão. Então, ele adiciona as configurações de discussão ao painel padrão do wordpress. Aqui você tem algumas opções que você pode dá uma estudada, pode dá uma olhadinha e marcar as que você achar conveniente. O importante é você manter sempre a opção de e-mail habilitada, pra que você colete e-mails dos seus comentadores, tá bom?! E também, tem uma opção aqui que permite, aqui olha: O autor do comentário tem que ter, um comentário aprovado anteriormente. Então, quando a pessoa comenta pela primeira vez no seu site, você precisa moderar esse comentário. Isso é muito útil pra evitar spam e também pra controlar os tipos de comentários que são, que chegam através de seu site. Tem muitos comentários de mau-gosto, que nem vale a pena você publicar, mas, você pode habilitar essa opção, pra que, ao menos um comentário seja aprovado deste leitor. Então, aqui embaixo você tem as opções do formulário de contatos do jetpack, incluindo, as opções de assinatura, tá?! Aqui você pode marcar pra: Ou exibir opção pra seguir o blog ou pra seguir os comentários. Isso quer dizer que se uma pessoa comentar e marcar essa opção aqui olha: Avise-me sobre novos comentários por e-mail, toda vez que alguém responder esse seu artigo, essa pessoa vai ser notificada por e-mail. O que é muito bom, pois gera tráfego pra o seu blog e a pessoa que comentou também, fica sempre atualizada, caso, por exemplo, ela lhe faça uma pergunta sobre um artigo no blog, ou ela lhe questione sobre algum projeto no seu portfólio. Ela marca essa caixinha e assim ela vai ser avisada quando você responder a ela, então é um recurso muito interessante, recomendo que você deixe habilitado. Aqui você pode mudar o título do seu painel, do seu formulário de comentários, aqui tá: Deixe uma resposta, você pode mudar pra: Deixe um comentário, pronto! Pode até colocar uma reticências aqui ou dois pontos. E aqui você escolhe o esquema de cores: Claro, escuro, transparente... Vou deixar claro mesmo e salvar. Isso, altera diretamente o seu formulário de contato, eu vou pressionar aqui o "F5" novamente, o formulário de comentários, pra que você veja... Ainda não salvou, deixa eu dar um "F5" de novo. Okay. Acredito que seja por causa do cache, tá bom?! Então, ainda não mudou aqui: Deixe uma resposta, por causa do cache do meu servidor, que demora um pouquinho pra atualizar, justamente pra evitar, com esse meu recurso. Então ele vai alterar daqui a pouquinho. Bom, voltando novamente lá pras configurações do jetpack, posso fechar isso aqui. A gente tem o compartilhar. Esse recurso aqui é muito interessante e é importante que você deixe ele habilitado também. Clicando aqui em configurar, abrir aqui uma nova guia, tá bom?! Pra você ver. Esse recurso integra o seu blog, as suas publicações no blog e acredito também que no portfólio do wordpress com as suas redes sociais. Então, uma das vantagens desse recurso, é que o jetpack, possibilita publicar diretamente no google plus, coisa que é muito difícil você encontrar algum plug-in que faça isso. Então, ele, ao conectar com suas contas do facebook, do twitter, do linkedin, do tumblr e do google plus por exemplo, quando você publicar um artigo no seu blog ou no seu portfólio, acredito eu que este tema seja optimizado pra isso, quando você publicar qualquer item, no seu site, automaticamente ele compartilha esse conteúdo nas redes sociais. Então, você pode ficar despreocupado com o compartilhamento do conteúdo. Se você quiser fazer manualmente, colocando um textinho personalizado, não tem problema. Mas se você configurar aqui automaticamente, você já vai estar compartilhando essas publicações, toda vez que você postar elas no seu blog. Isso é uma mão-na-roda. Agiliza o processo e automatiza aí, o compartilhamento. Então, você pode conectar as suas contas tranquilamente... No facebook escolher uma fanpage ou o seu perfil pessoal, enfim, você tem aí várias opções, bastando clicar em conectar. Aqui embaixo, você pode configurar as opções que são exibidas dentro dos seus artigos. Você pode observar aqui no Clube do Design, que eu tenho alguns botões sociais aqui embaixo e aqui em cima, tá legal?! Embora eu use um plug-in externo. Eu uso o.... Não me lembro bem o plug-in que eu uso. Bom, mas eu uso outro plug-in, não é o jetpack, mas o jetpack entrega o resultado exatamente igual. A diferença, é que esse plug-in que eu uso, adiciona também, em cima do artigo, ao invés de só embaixo, como o jetpack faz. Então, o jetpack, adiciona apenas embaixo do seu artigo, tá legal?! São, esses links pra curtir e pra compartilhar. Então... O Social Sharing Toolkit que eu uso. Então, olha só: Pra você exibir, esses links de compartilhamento, você observa aqui embaixo que o meu tema já exibe nativamente, então, não preciso usar esse recurso, do wordpress, do jetpack, tá bom?! Mas, se o meu tema não exibisse esses botões aqui embaixo com o share, eu poderia configurá-los aqui. Pra isso, basta arrastar os itens que eu quero aqui pra baixo, deixa eu puxar mais pra baixo... Pronto! Eu quero compartilhar no facebook, no twitter, no google plus, no linkedin... Eu quero que a pessoa imprima também... Mas eu quero que o "imprima" fique escondido atrás de um menuzinho de up/down, então, é só colocar aqui dentro, mandar por e-mail... Então você pode configurar da maneira que você quiser. Esses itens aqui ficam escondidos através de um menu, então só quando a pessoa clicar que ela vai ver. Vou já mostrar pra vocês. Aqui você pode escolher a aparência dos botões, que pode ser: O ícone e texto, pode ser os botões oficiais que aparecem assim, somente texto, apenas ícone, que aparece redondinho, bonitinho assim, olha aqui o ícone de "+", tá vendo? Ahn, deixa eu ver aqui, pronto. Então assim fica bonitinho, redondinho, ícone e texto cinza pra combinar com o nosso tema, tá legal? Você configura da maneira que achar conveniente. Aqui embaixo, você descreve, você configura o texto que vai aparecer no título do widget, no título das ferramentas. Aqui você pode abrir o link na mesma janela, mas é melhor abrir uma nova janela. E aqui você escolhe onde esses botões vão ser exibidos: Apenas nos posts, você pode colocar na página inicial, página de resultado de pesquisa, mas eu prefiro só nos posts, pronto. Depois, basta clicar em salvar alterações, você pode inclusive colocar uma tagzinha do twitter, "# + nome do seu blog" ou "# + seu nome". Então, olha só, vou atualizar aqui, pra agente ver se a alteração já é refletida automaticamente. Pronto, olha só. Então você observa que a partir de agora eu já tenho, duas fileiras de ferramentas de compartilhamento. Então, observe que, eu tenho aqui o do jetpack e tenho também o nativo do meu tema. Se você puder evitar as configurações do plug-in é melhor, porque ele vai carregar mais um módulo e vai dá mais trabalho. Então, vai, na verdade, demorar mais pra sua página carregar. Então, eu vou desabilitar o do jetpack. Não vou usar, já que o meu tema já oferece, você pode usar a opção nativa do tema, se o seu tema oferecer, tá legal? Você só usa isso se o seu tema não oferecer, que é muito importante, mas claro, não se esqueça de conectar a suas redes sociais. Voltando pras configurações do jetpack. O próximo item seria esse "Custom Content Types" que eu não sei pra quê que serve, não vou nem mexer nele, tá bom?! Vou procurar saber depois, porque eu não uso. Então eu vou deixar desativado aqui. Eu não uso esse recurso. Então, não sei pra quê que serve, depois eu posso descobrir pra você, você também pode descobrir por conta própria. Então, olha só! Aqui embaixo nós temos, a opção pra melhorar a distribuição das suas publicações, tá bom?! Que é esta opção aqui, que já está ativada. Você pode deixar ela ativada, ele utiliza aí algumas otimizações de SEO, pra melhorar a distribuição do seu conteúdo e aqui nós temos também a opção: "Estatísticas do Wordpress.com", que é um recurso muito legal desse plug-in. Que vai oferecer pra você, estatísticas de visitas no seu site, então, se eu acessar aqui, olha, estatísticas do site, quando essa opção está habilitada, ele vai mostrar o histórico de acessos no meu site. Então você observa que eu tive algumas visitas, no dia 3 de novembro eu tive 41 visitas, visualizações de página... Aqui ele mostra quais são as páginas que foram visitadas e quantos views essas páginas tiveram, enfim, você tem as estatísticas gerais do seu blog, onde você pode ver onde as pessoas clicaram também, quais foram os links mais acessados. Então, é um recurso muito legal, pra você controlar as estatísticas dentro do seu site. É importante, você configurar essas estatísticas, porque é comum, deixa eu clicar em configurar aqui, é comum o jetpack adicionar uma caretinha aqui embaixo, deixa eu ver se ele colocou. Uma caretinha, um emoticon dentro do seu blog. Então, pra você se certificar que ele não exiba aqui na parte de baixo, porque geralmente ele mostra um emoticonzinho aqui né? Uma caretinha. Então você pode desabilitar esse recurso, que é um recurso nativo dele, marcando essa opção, olha: Ocultar emoticons das estatísticas. É essa carinha aqui, que acaba ficando chata, lá no seu site, lá embaixo, cria uma linha branca só pra mostrar essa caretinha, então, marca ocultar, pronto. Aqui em cima você pode configurar quais são os usuários que terão as visitas não-contabilizadas. Neste caso aqui, você observa que ele não está contando as minhas visualizações. Então, se você tiver, um sistema de registro de usuários, se você quiser cadastrar usuários no seu site, pra fazer login depois, é importante que você marque aqui, pra que a opção assinante também seja contabilizada. Assim, as pessoas que fizerem login no seu site, elas também serão contadas, elas serão enxergadas aí, pelo seu, pelo seu relatório de estatísticas, okay?! Voltando pras configurações de jetpack novamente. Nós temos estatísticas. Os widgets extras, que são alguns recursos muito legais na área de widgets, aqui em aparência, widgets, tá legal?! Vou abrir aqui. Pra quem não se lembra, os widgets, são a barra lateral do seu site. Alguns blogs, alguns temas oferecem recursos especiais de widgets pra menu superior e algumas outras coisas tá?! Mas basicamente widget é a barra lateral do site. Então, aqui você pode, deixa eu voltar aqui pra o meu blog, você pode ver que, na minha publicação, na minha área de blog, que eu tenho aqui a pesquisa, tópicos recentes... Então isso aqui seria o widgets, que se reflete aqui dentro, olha: Pesquisa, tópicos recentes. Pra você configurar os widgets, que são as barras laterais, basta você acessar no menu aparência: Widgets. Aqui você pode arrastar os itens pra dentro da sua barra lateral do blog, tá bom?! Então, olha, você tem a barra lado blog, tem a barra lateral das páginas estáticas, por exemplo, página de contato, página inicial, caso seja aplicável. Aqui você tem a barra lateral da parte de baixo: 1, 2, 3, 4, ou seja, seria aqui o meu rodapé do site dividido em 4 colunas. Quando eu colocar qualquer widget em um desses itens aqui, por exemplo... Vamos colocar aqui por exemplo, esse meta, que são opções de login. Pronto, vou colocar aqui: Adm, só pra a gente identificar. Vou salvar. E vou atualizar aqui o meu blog, pra vocês verem que ele aparece lá embaixo no rodapé, olha só. Então Adm, já apareceu aqui no rodapé do meu blog. Então se eu adicionar mais 3 né?! Eu vou ter aqui a minha barra inferior completamente preenchida, tá legal?! Então, pra você remover, você pode tanto arrastar pra fora ou clicar aqui no excluir, que ele vai remover. Então, esses widgets extras do jetpack, permitem que você adicionem, por exemplo, uma janelinha de assinatura do blog, pra pessoa assinar as configurações do blog e receber as atualizações por e-mail. Isso aqui é muito útil pra você fidelizar os seus usuários, então, toda vez que você publicar alguma coisa no blog, automaticamente essa pessoa recebe essa atualização, por e-mail, tá bom?! Então, você pode configurar arrastando aqui, por exemplo, pra o blog sidebar, configurar da maneira que você quiser e salvar. E aqui ele vai mostrar esse novo item de widget, na sua barra lateral. Olha só! Então a pessoa pode escrever o e-mail dela aqui, assinar, pronto. Ela passa a receber todas atualizações do seu blog. Só que isso só funciona, claro, se a opção de assinatura estiver habilitada. Se eu não me engano... Deixa eu ver aqui. Aqui, subscriptions, tá vendo?! Não sei porque o meu jetpack está em inglês, mas, é isso aqui, subscriptions seria as assinaturas, tá bom?! Então, aqui você tem por exemplo a caixa de curtir do facebook, que é muito útil pra você também conseguir curtidas, na sua fanpage. Então aqui você coloca: "Curta", vamos dizer assim, no título. A url, coloca a url da fanpage: "fb.com/clubdodesign", vou colocar a do Clube do Design aqui. A largura vai depender da largura total aqui, do seu widget, "ah, mas eu não sei a largura.", lembra como foi que a gente descobriu a largura das imagens? Clica com o botão direito, especionar elemento... E aí você consegue descobrir a largura da sua barra lateral, vamos ver qual é? 260px olha só, então, é 260px a largura da minha barra lateral, a altura não importa, você pode configurar do tamanho que quiser, mostrar rostos, mostrar borda eu desabilito e clico em salvar. Olha só que legal, ao atualizar, você ganha uma caixinha de curtidas do facebook, na sua barra lateral. A minha, a url está errada. Pronto! Então, se você, ainda não curte a fanpage do Clube do Design, acessa aí que você já consegue curtir: fb.com/clubdodesign. Então, olha só, você ganha uma caixinha de curtidas na barra lateral do seu blog, tá legal?! Além de você conseguir inserir essas widgets arrastando, você pode simplesmente clicar em uma que estiver muito longe e escolher em qual barra você vai adicionar, okay?! E aí você pode adicionar, quantos widgets você quiser. É importante que você dê uma vasculhada em cada uma dessas, dessas opções, tá legal?! Pra você entender o que cada uma delas faz. E você pode configurar cada uma das barrinhas de widgets do seu site livremente, da maneira que você achar conveniente. Beleza?! É muito versátil, muito fácil de usar, não tem segredo. Pronto! Voltando aqui pras configurações do jetpack, vamos falar agora mais rapidamente dos recursos, tá bom?! Vamos ver aqui, por exemplo, depois das estatísticas, os widgets extras, você tem formulário de contato, um recurso muito útil pra nossa próxima aula, onde eu vou ensinar a vocês a criar as páginas que faltam no nosso blog. Então, deixem marcada essa opção. Você tem aqui a opção de curtidas, que eu pulei né?! Onde você pode adicionar um recursinho aí, a pessoa pode curtir o post internamente, não tem nada a ver com facebook, tá bom?! Então, é só pra você criar um ranking de posts internos, mas eu prefiro não usar, porque já acaba ficando recursos demais, opções demais dentro do blog, fica chato. Curte no facebook e ainda curte o post do blog, fica muito estranho. Aqui embaixo você tem: Esse JSON API não sei pra quê que serve, vou deixar aqui, porque já está habilitado, vou, vou ainda entender pra quê que serve, tá legal?! O infinite scroll, funciona apenas em alguns temas, que permite que na lista de publicações do seu blog, você expanda, você consiga na verdade, exibir os outros posts, simplesmente rolando a página pra baixo. Por exemplo, aqui no blog do Clube do Design, você tem uma paginação, ou seja, pra você acessar os outros posts, você desce até o final da página, que você precisa clicar no botão pra passar pra próxima página. Com o infinite scroll não, lembrando que só funciona em alguns temas, tá bom?! Com o infinite scroll, quando você chegar aqui embaixo ele automaticamente carrega novos posts e expande a página pra baixo. Você já deve ter visto isso em alguns sites... É como funciona o facebook, por exemplo, quando você vai rolando, ele vai expandindo as opções. Depois do infinite scroll, tem o jetpack login único, que vai vincular os registros do seu site ao wordpress.com, ao twitter, ao facebook, tá bom?! Então, pra pessoa fazer login no seu site usando as credenciais das redes sociais. Aqui tem os links curtos: WP.me, que é muito útil, quando você precisa compartilhar os seus artigos nas redes sociais, você pode pegar o link permanente curto, que ele oferece pra você. Tem o Markdown que é uma linguagem aí de marcação que eu não conheço também. Tem o monitor, isso aqui é muito legal, vou deixar ativado, tá?! O monitor, ele te avisa todas as vezes que o seu site sai do ar. Então, se o seu site ficar fora do ar por algum problema no servidor, ele te manda um e-mail: Olha, o seu site está fora do ar. Aí você pode verificar qual é o problema, com o seu servidor de hospedagem, lembrando que eu uso e recomendo a X2 Network, que vai ficar aqui embaixo na descrição do vídeo o link pra você assinar. Bom, então tem o monitor, as notificações exibem esse pequeno ícone aqui em cima, que vai te mostrar as atividades recentes no seu blog. Então, se uma pessoa comentar, você vai ser notificado aqui em cima. Se uma pessoa responder um comentário seu, fizer algum comentário em alguma postagem, enfim, ele vai sempre te avisar aqui em cima, através das notificações. O Omnisearch, permite que você pesquise recursos dentro do painel do wordpress, que seria isso aqui, tá bom?! Então, você pode pesquisar por configurações diretamente aqui em cima, sem precisar procurá-las diretamente. Você tem aqui ainda a opção, Omnisearch, Ortografia e Gramática que vai corrigir em tempo real o seu texto. O Photon, que é um recurso muito importante, que é fundamental que você ative o photon no seu blog. O quê que o photon faz? Ele pega todas as imagens do seu blog e armazena em cache nos servidores do wordpress, ou seja, a partir de agora, quando a pessoa acessar o meu blog, depois que eu marquei o photon, ele vai carregar essa imagem não mais do meu serviço de hospedagem, mas sim, dos servidores do wordpress. Tanto que se eu abrir essa imagem em uma nova guia, deixa eu abrir aqui... Abrir imagem em uma nova guia, você observa que ele vai me dar um endereço completamente diferente, dessa imagem, olha: "i1.wp.com", então, ele mostra aqui, claro, o endereço real, aqui na frente da imagem do meu servidor, mas, mostra aqui também, olha, que essa imagem já não está vindo mais do meu blog, mas sim dos servidores do wordpress. Por que que isso é útil Liute? Você pergunta... Imagine que você, paga mensalmente um custo, pra ter disponível um serviço de hospedagem. Esse serviço de hospedagem, ele te atende de acordo com a demanda, então, quanto mais tráfego, quanto mais recursos você utilizar, mais caro você vai precisar pagar pra o seu servidor de hospedagem. Não necessariamente dessa maneira. Geralmente, quando o seu site começa a ter um tráfego muito grande, você começa a ter problema de lentidão, muitas pessoas acessando ao mesmo tempo, justamente porque o seu servidor não te oferece recursos pra isso. Você precisa contratar um recurso mais robusto. Então, pra evitar que você precise fazer isso muito rápido, você marcando o photon, você elimina a necessidade do seu servidor fornecer a imagem pra os seus leitores, ou seja, você economiza o consumo de recursos do seu servidor. Assim, você pode usar uma configuração muito mais branda de servidores, que vai atender aí, uma demanda muito maior de acesso ao seu blog. Então, é um recurso muito legal, que te ajuda bastante. Agora tem um problema! Quando você ativa o photon e por exemplo, você carregou uma imagem e essa imagem foi carregada errada por exemplo, se você quiser trocar essa imagem, você só pode fazer isso se você apagar a imagem original, ou não precisa nem apagar, se não quiser se você substituir essa imagem por uma de outro nome. Se você carregar uma imagem exatamente com o mesmo nome, no mesmo artigo, o photon, ele não vai atualizar essa imagem, porque é uma espécie de cache forever (pra sempre). Então, você tem que carregar a imagem com um outro nome, se você quiser atualizar essa imagem dentro do seu blog, tá legal?! Então: "Ah, carreguei a imagem errada, apago ela". Fiz a alteração no photoshop por exemplo e carrego ela com o mesmo nome, não vai adiantar de nada, o photon não vai atualizar, você vai precisar carregá-la com um novo nome. Coloca um "1" aí, um "A", um "B" e um "C" no final, pronto, resolve. Aqui embaixo, vamos pulando aqui, você tem posts relacionados, tá?! Que vai exibir um recurso muito semelhante ao que a gente tem aqui no Clube do Design, que é.... Os artigos relacionados no final, no final do post, tá legal?! Vai aparecer aqui embaixo, olha só, que são esses artigos relacionados. Você pode marcar essa opção pra exibir uma lista de outros posts que a pessoa pode ver. Você tem ainda... Publicar por e-mail, que permite que você publique diretamente do seu e-mail, não necessariamente precisando entrar no seu blog. Você pode escrever um e-mail e mandar pro seu blog, que ele automaticamente já publica no seu site, tá bom? A gente vai falar sobre isso depois. Você pode deixar habilitado. Tem o publicize, que também vai otimizar aí a distribuição do seu conteúdo. O shortcodes de incorporar mídia, você pode deixar habilitado, permite que você adicione mídia como: Textos, imagens, vídeos, de maneira simplificada. Você tem aqui, a verificação do site, que vai verificar a codificação do seu site. Você tem as inscrições, que é aquela a opção que eu te mostrei agora há pouco, que vai permitir que a pessoa se inscreva no seu site através dos comentários, através de e-mail e também receba as publicações do seu blog por e-mail. O tema para móvel, que é inútil pra a gente, já que o nosso tema é responsivo, tá?! Então, esse tema para móvel, vai configurar o seu site adicionando um tema específico pra dispositivos móveis, a gente não precisa disso, o nosso tema é responsivo. VídeoPress, não sei pra quê que serve, acredito que seja pra armazenar vídeos nos servidores do wordpress. A visibilidade de widget, você pode escolher pra quem os widgets ficarão visíveis, recurso que funciona na área de widgets, que eu mostrei pra vocês. O ícone do site, que vai, acredito eu que seja pra definir o favicon, ou o ícone em aplicativos móveis. E tem o VaultPress também, que é um sistema de proteção aqui, dos seus dados, que faz backup e etc. Então, essas são as opções disponíveis do jetpack. São muitas mesmo, como você pôde ver, o nosso vídeo ficou bem grande, infelizmente não vai dar pra comentar cada uma delas aprofundadamente. Mas, a gente vai ver algumas outras já a partir do próximo vídeo, principalmente a parte de formulário de contato, então, na próxima aula eu vou mostrar pra vocês como criar formulário de contatos e como utilizar isso no seu e-mail e como... E também posso ensinar a você a configurar um cliente de e-mail, pra você acessar aí o seu e-mail do seu site a partir do gmail, a partir de um aplicativo local, enfim. Então, se você gostou desse vídeo não esquece de curtir, compartilhar com seus amigos e também de se inscrever no canal, caso você ainda não faça parte do projeto do Clube do Design. Interessante, depois que você se inscrever no canal, aparece uma engrenagenzinha lá do lado. Clica na engrenagem e marca a opção pra você receber as notificações do nosso canal. Assim, toda vez que eu mandar um vídeo você recebe um e-mail, dizendo que eu mandei um vídeo. Beleza? Então, é isso. Um forte abraço pra vocês e até o próximo vídeo. Tchau, tchau!.
Melhores cursos de java online gratis acao de cobranca cheque sustado novo cpc Rondonópolis curso de velas hopi. Uberlândia exame colposcopia santos Monografia, trabalho de portugues vanguardas europeias ABNT, artigos trabalhos prontos Crítica Literária/Filme, fisioterapia dermato funcional governador valadares ABNT. Como se faz anexo em monografia art 197 or melhores cursos de java online gratis Rio Grande do Sul artigos para festa unicornio. Dental exam schedule Relatório de Laboratório Aracaju servico social na contemporaneidade dimensoes historicas teoricas etico politicas, exame de urina i.
Passos:
Lily Orr, Chenango County: Lander Institute, Jerusalem, Israel. Caraguatatuba: Sackler Institute of Graduate Biomedical Sciences; 2005.
Douglas McBride, Livingston County. Vitória da Conquista: Manhattanville College; 2007.
Piper Hahn, 7th Avenue zip 10027. Paço do Lumiar: White Plains campus; 2010.