12 de setembro de 2016 / falando sobre Web Design / por Talita Korb

E aí galera, beleza? Algumas pessoas da área de desenvolvimento já me perguntaram sobre cursos que poderiam ser feitos para aprimorar os conhecimentos na área. Eu, particularmente, sou muito mais a favor de fazer cursos de curto prazo e direcionados a um assunto específico do que cursos longos que abrangem muita coisa de forma básica.

Por isso, decidi trazer aqui alguns cursos online que já ouvi falar muito bem. Não fiz nenhum deles com exceção do Curso em Vídeo e Codecademy, mas já tive boas recomendações. Vamos lá?

 

1. Curso em Vídeo

curso-em-video

O Curso em Vídeo contém vídeo aulas maravilhosas e totalmente gratuitas. As aulas são ministradas pelo Gustavo Guanabara (vide foto acima =P) e há cursos de HTML5, Photoshop, Algoritmos, PHP, entre outros. Vale a pena se inscrever e aprender. Achei bastante didático quando precisei reforçar meus conhecimentos e a qualidade dos vídeos é muito boa =)

 

2. Alura

alura

Eu devo confessar pra vocês que desde que descobri a Alura eu sonho em me matricular, e só estou esperando o momento certo pra isso. Todas as pessoas que conheço que fizeram os cursos deles gostaram muito e dizem que são direto ao ponto. E além de ter MUITOS cursos, a grade curricular deles é muito boa e bastante completa. Tem curso de programação, mobile, front-end, design e por aí vai. Vale super a pena conferir! =)

 

3. Origamid

origamid

A Origamid possui cursos bastante completos, tanto de Web Design como de WordPress, Tipografia e UX. Achei os preços bastante acessíveis e os reviews do facebook deles são de 5 estrelas!

 

4. Codecademy

code-cademy

O famoso Codecademy, porta de entrada para muitos na área de programação e desenvolvimento, e o melhor que é gratuito! Eu achei ótimo principalmente porque o curso alinha a teoria com a prática. Os cursos são em inglês, mas já te adianto: é muito importante saber inglês pra quem quer entrar na área de TI! Quem sabe fazendo esse curso você já não consegue praticar as duas coisas? 😉

 

5. Udacity

udacity

A Udacity nasceu dentro da universidade de Standford com o objetivo de trazer conhecimento online. Os cursos são ministrados com parceria de grandes empresas como a Google, Facebook e GitHub e possuem certificado. Achei a grade bastante poderosa e ainda quero fazer o curso de front-end deles futuramente =)

 

6. MX Cursos

mx-cursos

A MX Cursos presta cursos de muita coisa! Web design, programação, marketing digital, SEO, entre outros. Achei os preços acessíveis também. Vale a pena conferir =)

 

Espero muito que esse post tenha sido útil pra você que quer investir em conhecimento na área. Deixa aqui nos comentários a sua opinião sobre o post e, se você já fez algum desses cursos, conta pra gente a experiência que você teve 😉 beijos!

08 de setembro de 2016 / falando sobre Tutoriais / por Talita Korb

E aí galera, beleza? Sim, eu sei. Meses sem aparecer por aqui. Muitas mudanças e acontecimentos na minha vida, muita coisa pra fazer. Mas, como pedido de desculpas, venho trazer pra vocês um tutorial que algumas pessoas já me pediram para fazer: como colocar slideshow no WordPress. Sem plugin, of course! 😉

Eu sempre gosto de utilizar o bxslider porque acho ele simples e prático, além de ser responsivo. Vamos ao tutorial?

Slideshow WordPress sem plugin

Passo 1 – Download

Baixe o arquivo .zip do site do bxslider e procure pelos arquivos jquery.bxslider.js e jquery.bxslider.css.

 

Passo 2 – Pasta

Dentro da pasta do seu tema do WordPress, crie (caso ainda não exista) uma pasta chamada “js“. Coloque dentro dessa pasta o arquivo jquery.bxslider.js. Posteriormente você pode usar essa mesma pasta para colocar outros arquivos javascript =)

Faça o mesmo com o CSS. Crie uma pasta chamada “css” e insira dentro o arquivo jquery.bxslider.css.

 

Passo 3 – Chamada

Agora que o arquivo .js está dentro da pasta, você precisa chamá-lo para dentro do seu tema. Há formas diferentes de chamar esse arquivo, mas a forma como eu faço (e creio ser a mais correta) é adicionando esse código abaixo no functions.php:

function gsf_load_scripts(){
/** Faz a chamada do Jquery (sem ele, o slider não funcionará) **/
wp_register_script( 'jquery-last', get_template_directory_uri() . '/js/jquery.js', '1' );
wp_enqueue_script( 'jquery-last' );

wp_register_script( 'slider-bx', get_template_directory_uri() . '/js/jquery.bxslider.js' );
wp_enqueue_script( 'slider-bx' );
}
add_action( 'wp_enqueue_scripts', 'gsf_load_scripts', 1 );

 

E adicione também este código no footer.php, entre as tags:

$(document).ready(function(){
 $('.bxslider').bxSlider({
 auto: true, /** O slide rodará automaticamente **/
 mode: 'fade', /** Modo de transição - efeito fade **/
 captions: true, /** Descrição aparecerá **/
 pager: false, /** Não aparece paginação **/
 nextSelector: '#slider-next', /** Define ID da seta Next **/
 prevSelector: '#slider-prev', /** Define ID da seta Anterior **/
 nextText: '<img src="http://imagem-anterior.png" alt="" />', /** Imagem seta Next **/
 prevText: '<img src="http://imagem-proximo.png" alt="" />' /** Imagem seta Anterior **/
});
}); 

 

Quanto ao CSS, adicione logo no início do arquivo style.css este código:

@import url("css/jquery.bxslider.css");

Todos os ajustes do slider você poderá fazer através deste arquivo.

 

Passo 4: HTML

<ul class="bxslider">
    <?php $postslist = get_posts('numberposts=4&order=DESC'); foreach ($postslist as $post) : setup_postdata($post); ?>
        <li>
            <img src="<?php the_post_thumbnail(); ?>" />

            <div class="bx-caption">
                <?php the_title(); ?>
            </div>             
        </li>       
    <?php endforeach; ?>
</ul>

<div class="outside">
    <span id="slider-prev"></span>
    <span id="slider-next"></span>
</div> 

Na linha 2 onde diz “numberposts=4” é onde você diz quantos posts aparecerão no slideshow. Onde diz “order=DESC“, é a ordem como os posts aparecerão (nesse caso, decrescente). E prontinho: seu slideshow já está (ou deveria estar =P) funcionando! =)

 

Não esqueça que isso é apenas um exemplo de como você pode usar o bxslider. No site deles há mais exemplos de implementação que você pode utilizar =)

 

Diz aí nos comentários se você achou esse post útil e qualquer dúvida é só perguntar! Mas não esqueça: o importante é que, de início, o slide “funcione”. Se ele funcionar mas alguns elementos estiverem fora do lugar, é só ajustar no CSS =)

Beijos <3

12 de maio de 2016 / falando sobre Tutoriais / por Talita Korb

E aí galera, beleza? Algumas pessoas chegam até a mim de vez em quando com dúvidas ou dificuldades sobre o código do APP ID dos comentários do Facebook. Esse código é importante porque é com ele que os comentários do seu blog através do facebook funcionarão de forma exclusiva, onde somente você poderá moderá-los.

Neste tutorial não estarei ensinando como implementar os comentários do facebook, mas sim, apenas fazer a criação do APP ID, beleza? E vamos ao tutorial =)

 

1. Adicionar um APP ou clicar no já existente

Vá até a página do Facebook Developers e verifique se já foi criado um APP ID dos comentários do seu blog, caso você já tenha o sistema de comentários do Facebook implantado. Caso não tenha, clique em “Adicionar um Novo Aplicativo“.

app-id-1

Se você já tem um aplicativo criado, perfeito! O código do seu ID é o que mostrará na tela conforme o print abaixo. Pra você o tutorial acaba aqui mesmo, pois você já tem o código que precisa =)

app-id-2

 

2. Cliquei para adicionar um aplicativo. E agora?

É só clicar na opção “site”.

app-id-3

Depois de clicar na opção “site” conforme print acima, você escolhe o nome do seu aplicativo e clique em “Criar Novo Número de Identificação de Aplicativo do Facebook“.

app-id-4

Na próxima tela aparece este box, onde você deve colocar o seu e-mail e escolher a categoria “Aplicativos para Páginas“. Depois, clique em “Crie um número de identificação do aplicativo“.

app-id-5

Na tela que aparecer, clique em “Skip Quick Start“.

app-id-6

Depois, clique na coluna à esquerda em “Revisão do Aplicativo” e, em “Tornar (nome do APP) público?” você clica para mudar para “Sim”.

app-id-7

Agora é só clicar na coluna esquerda em “Painel” e copiar o código do seu APP ID gerado. E está pronto! =)

app-id-2

Espero que vocês tenham gostado e, qualquer dúvida, é só me perguntar! Beijos :*

Páginas123456