![Page 1: Programação WEB ensino-aprendizagem de WordPress no O ......2018/05/08 · Criei um website em WordPress. Nada melhor do que viver uma situação/problema real para aprender. “Saber](https://reader034.vdocuments.com.br/reader034/viewer/2022051918/600af58e62e4c86b7244d9c6/html5/thumbnails/1.jpg)
O potencial didático do WordPress no ensino-aprendizagem de Programação WEB
WordCamp Porto Alegre - 2018
![Page 2: Programação WEB ensino-aprendizagem de WordPress no O ......2018/05/08 · Criei um website em WordPress. Nada melhor do que viver uma situação/problema real para aprender. “Saber](https://reader034.vdocuments.com.br/reader034/viewer/2022051918/600af58e62e4c86b7244d9c6/html5/thumbnails/2.jpg)
Vitor Hugo Cardoso
1. Professor, 2. Historiador, 3. Desenvolvedor WEB,4. Fotógrafo amador,5. Nadador de final de semana,6. Pai da Gabriela.
Quem sou eu?
WordCamp Porto Alegre - 2018
![Page 3: Programação WEB ensino-aprendizagem de WordPress no O ......2018/05/08 · Criei um website em WordPress. Nada melhor do que viver uma situação/problema real para aprender. “Saber](https://reader034.vdocuments.com.br/reader034/viewer/2022051918/600af58e62e4c86b7244d9c6/html5/thumbnails/3.jpg)
Ambiente Virtual de Aprendizagem com WordPress?!
WordCamp Floripa - 2018
Não! Não sobre como criar um EAD no WordPress o tema da nossa palestra!
WordCamp Porto Alegre - 2018
![Page 4: Programação WEB ensino-aprendizagem de WordPress no O ......2018/05/08 · Criei um website em WordPress. Nada melhor do que viver uma situação/problema real para aprender. “Saber](https://reader034.vdocuments.com.br/reader034/viewer/2022051918/600af58e62e4c86b7244d9c6/html5/thumbnails/4.jpg)
WordPress como objeto virtual de aprendizagem. Olhar para o próprio sistema como um EAD.
WordCamp Floripa - 2018WordCamp Porto Alegre - 2018
![Page 5: Programação WEB ensino-aprendizagem de WordPress no O ......2018/05/08 · Criei um website em WordPress. Nada melhor do que viver uma situação/problema real para aprender. “Saber](https://reader034.vdocuments.com.br/reader034/viewer/2022051918/600af58e62e4c86b7244d9c6/html5/thumbnails/5.jpg)
Se o WordPress ajuda hoje a centenas de milhares (milhões) de pessoas a produzirem conteúdo para internet de maneira facilitada, por que não ajudá-los a ir um pouco mais além?
WordCamp Floripa - 2018WordCamp Porto Alegre - 2018
![Page 6: Programação WEB ensino-aprendizagem de WordPress no O ......2018/05/08 · Criei um website em WordPress. Nada melhor do que viver uma situação/problema real para aprender. “Saber](https://reader034.vdocuments.com.br/reader034/viewer/2022051918/600af58e62e4c86b7244d9c6/html5/thumbnails/6.jpg)
Ciências Humanas X
Ciências da Computação
WordCamp Floripa - 2018WordCamp Porto Alegre - 2018
![Page 7: Programação WEB ensino-aprendizagem de WordPress no O ......2018/05/08 · Criei um website em WordPress. Nada melhor do que viver uma situação/problema real para aprender. “Saber](https://reader034.vdocuments.com.br/reader034/viewer/2022051918/600af58e62e4c86b7244d9c6/html5/thumbnails/7.jpg)
Se as pessoas souberem um pouquinho a mais sobre o funcionamento da internet e as suas linguagens de programação elas poderiam contribuir ainda mais na construção/evolução dessa rede, você não acha?
WordCamp Floripa - 2018WordCamp Porto Alegre - 2018
![Page 8: Programação WEB ensino-aprendizagem de WordPress no O ......2018/05/08 · Criei um website em WordPress. Nada melhor do que viver uma situação/problema real para aprender. “Saber](https://reader034.vdocuments.com.br/reader034/viewer/2022051918/600af58e62e4c86b7244d9c6/html5/thumbnails/8.jpg)
E por que programação WEB é tão importante?
WordCamp Floripa - 2018WordCamp Porto Alegre - 2018
![Page 9: Programação WEB ensino-aprendizagem de WordPress no O ......2018/05/08 · Criei um website em WordPress. Nada melhor do que viver uma situação/problema real para aprender. “Saber](https://reader034.vdocuments.com.br/reader034/viewer/2022051918/600af58e62e4c86b7244d9c6/html5/thumbnails/9.jpg)
As tecnologias web estão cada vez mais presentes no dia a dia das pessoas.
O Brasil fechou o ano de 2017 com 116 milhões de pessoas conectadas à internet, o equivalente a 64,7% da população com idade acima de 10 anos.
WordCamp Floripa - 2018WordCamp Porto Alegre - 2018
![Page 10: Programação WEB ensino-aprendizagem de WordPress no O ......2018/05/08 · Criei um website em WordPress. Nada melhor do que viver uma situação/problema real para aprender. “Saber](https://reader034.vdocuments.com.br/reader034/viewer/2022051918/600af58e62e4c86b7244d9c6/html5/thumbnails/10.jpg)
O iraniano Ali Partovi da ONG Code.org diz que ”saber programar vai se transformar no novo ler e escrever. Quem não souber código terá mais dificuldade para entender o mundo”.
Educação - Compreensão do Mundo!
WordCamp Floripa - 2018WordCamp Porto Alegre - 2018
![Page 11: Programação WEB ensino-aprendizagem de WordPress no O ......2018/05/08 · Criei um website em WordPress. Nada melhor do que viver uma situação/problema real para aprender. “Saber](https://reader034.vdocuments.com.br/reader034/viewer/2022051918/600af58e62e4c86b7244d9c6/html5/thumbnails/11.jpg)
E como posso aprender a programar com o WordPress, Vitor?!
Vamos lá!
WordCamp Floripa - 2018WordCamp Porto Alegre - 2018
![Page 12: Programação WEB ensino-aprendizagem de WordPress no O ......2018/05/08 · Criei um website em WordPress. Nada melhor do que viver uma situação/problema real para aprender. “Saber](https://reader034.vdocuments.com.br/reader034/viewer/2022051918/600af58e62e4c86b7244d9c6/html5/thumbnails/12.jpg)
1) Lição de casa:
Criei um website em WordPress.Nada melhor do que viver uma situação/problema real para aprender.
“Saber ensinar não é transferir conhecimento, mas criar as possibilidades para a sua própria produção ou a sua construção.” - Paulo Freire
WordCamp Floripa - 2018WordCamp Porto Alegre - 2018
![Page 13: Programação WEB ensino-aprendizagem de WordPress no O ......2018/05/08 · Criei um website em WordPress. Nada melhor do que viver uma situação/problema real para aprender. “Saber](https://reader034.vdocuments.com.br/reader034/viewer/2022051918/600af58e62e4c86b7244d9c6/html5/thumbnails/13.jpg)
Há centenas de tutoriais, vídeos na internet sobre como fazer isso. Alguns serviços de hospedagem até entregam o ambiente pronto para você.
O que eu vou aprender com isso?
Arquitetura cliente/servidor, DNS (domínios) e protocolo HTTP.
WordCamp Floripa - 2018WordCamp Porto Alegre - 2018
![Page 14: Programação WEB ensino-aprendizagem de WordPress no O ......2018/05/08 · Criei um website em WordPress. Nada melhor do que viver uma situação/problema real para aprender. “Saber](https://reader034.vdocuments.com.br/reader034/viewer/2022051918/600af58e62e4c86b7244d9c6/html5/thumbnails/14.jpg)
Vamos mexer nesse tal de WordPress! E sem
medo de quebrar!
WordCamp Floripa - 2018WordCamp Porto Alegre - 2018
![Page 15: Programação WEB ensino-aprendizagem de WordPress no O ......2018/05/08 · Criei um website em WordPress. Nada melhor do que viver uma situação/problema real para aprender. “Saber](https://reader034.vdocuments.com.br/reader034/viewer/2022051918/600af58e62e4c86b7244d9c6/html5/thumbnails/15.jpg)
WordCamp Floripa - 2018WordCamp Porto Alegre - 2018
![Page 16: Programação WEB ensino-aprendizagem de WordPress no O ......2018/05/08 · Criei um website em WordPress. Nada melhor do que viver uma situação/problema real para aprender. “Saber](https://reader034.vdocuments.com.br/reader034/viewer/2022051918/600af58e62e4c86b7244d9c6/html5/thumbnails/16.jpg)
2) Lição de casa:
Criei suas páginas, seus posts, uma página de blog, adicione um formulário de contato e customize o seu template.
Agora perceba que tudo que você faz no painel administrativo do WordPress altera o comportamento do seu site pelo usuário.
WordCamp Floripa - 2018WordCamp Porto Alegre - 2018
![Page 17: Programação WEB ensino-aprendizagem de WordPress no O ......2018/05/08 · Criei um website em WordPress. Nada melhor do que viver uma situação/problema real para aprender. “Saber](https://reader034.vdocuments.com.br/reader034/viewer/2022051918/600af58e62e4c86b7244d9c6/html5/thumbnails/17.jpg)
Grosso modo, o admin do seu site é o backend (a parte do servidor) e a versão do usuário é o frontend (a parte do cliente).
Tenho certeza que ao você completar essa tarefa você terá já uma boa noção sobre URL, página estáticas e páginas dinâmicas.
WordCamp Floripa - 2018WordCamp Porto Alegre - 2018
![Page 18: Programação WEB ensino-aprendizagem de WordPress no O ......2018/05/08 · Criei um website em WordPress. Nada melhor do que viver uma situação/problema real para aprender. “Saber](https://reader034.vdocuments.com.br/reader034/viewer/2022051918/600af58e62e4c86b7244d9c6/html5/thumbnails/18.jpg)
Tá, mas e a programação Vitor. Calma, vamos
chegar lá!
WordCamp Floripa - 2018WordCamp Porto Alegre - 2018
![Page 19: Programação WEB ensino-aprendizagem de WordPress no O ......2018/05/08 · Criei um website em WordPress. Nada melhor do que viver uma situação/problema real para aprender. “Saber](https://reader034.vdocuments.com.br/reader034/viewer/2022051918/600af58e62e4c86b7244d9c6/html5/thumbnails/19.jpg)
Comece a mexer no visual do nosso site. O tal do HTML e CSS.
Não sabe o que é? Corre lá no W3Schools e no site do Maujor e estude um pouquinho.
WordCamp Floripa - 2018WordCamp Porto Alegre - 2018
![Page 20: Programação WEB ensino-aprendizagem de WordPress no O ......2018/05/08 · Criei um website em WordPress. Nada melhor do que viver uma situação/problema real para aprender. “Saber](https://reader034.vdocuments.com.br/reader034/viewer/2022051918/600af58e62e4c86b7244d9c6/html5/thumbnails/20.jpg)
Aparência > Personalizar
WordCamp Floripa - 2018
USE e ABUSE do estilo do seu site!
WordCamp Porto Alegre - 2018
![Page 21: Programação WEB ensino-aprendizagem de WordPress no O ......2018/05/08 · Criei um website em WordPress. Nada melhor do que viver uma situação/problema real para aprender. “Saber](https://reader034.vdocuments.com.br/reader034/viewer/2022051918/600af58e62e4c86b7244d9c6/html5/thumbnails/21.jpg)
Chega de estilo, você precisa ter mais atitude!
WordCamp Floripa - 2018WordCamp Porto Alegre - 2018
![Page 22: Programação WEB ensino-aprendizagem de WordPress no O ......2018/05/08 · Criei um website em WordPress. Nada melhor do que viver uma situação/problema real para aprender. “Saber](https://reader034.vdocuments.com.br/reader034/viewer/2022051918/600af58e62e4c86b7244d9c6/html5/thumbnails/22.jpg)
Vamos mexer no código! Descubra onde fica os arquivos do seu template e comece a alterá-los.
Não tenha medo!
Mas faça uma cópia antes, ou não. Dizem por aí que backups salva todo programador de bem.
WP-CONTENT > THEMES
WordCamp Floripa - 2018WordCamp Porto Alegre - 2018
![Page 23: Programação WEB ensino-aprendizagem de WordPress no O ......2018/05/08 · Criei um website em WordPress. Nada melhor do que viver uma situação/problema real para aprender. “Saber](https://reader034.vdocuments.com.br/reader034/viewer/2022051918/600af58e62e4c86b7244d9c6/html5/thumbnails/23.jpg)
Esqueça qualquer coisa que não seja HTML.
WordCamp Floripa - 2018
<h1> <p> <div> <a> <img>
WordCamp Porto Alegre - 2018
![Page 24: Programação WEB ensino-aprendizagem de WordPress no O ......2018/05/08 · Criei um website em WordPress. Nada melhor do que viver uma situação/problema real para aprender. “Saber](https://reader034.vdocuments.com.br/reader034/viewer/2022051918/600af58e62e4c86b7244d9c6/html5/thumbnails/24.jpg)
Até aqui você já está dominando as noções básicas de frontend (HTML/CSS)
Importante!!! Estude a hierarquia de templates do WordPress. page.php, single.php, home.php, etc
WordCamp Floripa - 2018WordCamp Porto Alegre - 2018
![Page 25: Programação WEB ensino-aprendizagem de WordPress no O ......2018/05/08 · Criei um website em WordPress. Nada melhor do que viver uma situação/problema real para aprender. “Saber](https://reader034.vdocuments.com.br/reader034/viewer/2022051918/600af58e62e4c86b7244d9c6/html5/thumbnails/25.jpg)
Mas e aquelas perguntas com respostas estranhas no código?!
<?php ?>
WordCamp Floripa - 2018WordCamp Porto Alegre - 2018
![Page 26: Programação WEB ensino-aprendizagem de WordPress no O ......2018/05/08 · Criei um website em WordPress. Nada melhor do que viver uma situação/problema real para aprender. “Saber](https://reader034.vdocuments.com.br/reader034/viewer/2022051918/600af58e62e4c86b7244d9c6/html5/thumbnails/26.jpg)
Esse é o tal do PHP. A linguagem de programação do WordPress.
A dinâmica e as funcionalidades do seu site depende disso.
Vai lá no W3Schools e dá uma olhada sobre PHP.
WordCamp Floripa - 2018WordCamp Porto Alegre - 2018
![Page 27: Programação WEB ensino-aprendizagem de WordPress no O ......2018/05/08 · Criei um website em WordPress. Nada melhor do que viver uma situação/problema real para aprender. “Saber](https://reader034.vdocuments.com.br/reader034/viewer/2022051918/600af58e62e4c86b7244d9c6/html5/thumbnails/27.jpg)
Estruturas de controle com WordPress.
Provavelmente as páginas internas são diferentes da página principal do seu site. Ou ainda, os posts tem um layout diferente das páginas.
Conditional tags! Qual é a condição?Eu quero mudar o comportamento das minhas páginas, como faço?
WordCamp Floripa - 2018WordCamp Porto Alegre - 2018
![Page 28: Programação WEB ensino-aprendizagem de WordPress no O ......2018/05/08 · Criei um website em WordPress. Nada melhor do que viver uma situação/problema real para aprender. “Saber](https://reader034.vdocuments.com.br/reader034/viewer/2022051918/600af58e62e4c86b7244d9c6/html5/thumbnails/28.jpg)
<?php if(condição) { ?>
<h2>Meu código aqui!</h2>
<?php } ?>
condição = conditional tags
is_home(), is_page(), is_single(), etc
WordCamp Floripa - 2018WordCamp Porto Alegre - 2018
![Page 29: Programação WEB ensino-aprendizagem de WordPress no O ......2018/05/08 · Criei um website em WordPress. Nada melhor do que viver uma situação/problema real para aprender. “Saber](https://reader034.vdocuments.com.br/reader034/viewer/2022051918/600af58e62e4c86b7244d9c6/html5/thumbnails/29.jpg)
WordCamp Floripa - 2018WordCamp Porto Alegre - 2018
![Page 30: Programação WEB ensino-aprendizagem de WordPress no O ......2018/05/08 · Criei um website em WordPress. Nada melhor do que viver uma situação/problema real para aprender. “Saber](https://reader034.vdocuments.com.br/reader034/viewer/2022051918/600af58e62e4c86b7244d9c6/html5/thumbnails/30.jpg)
Tamo aqui na Função do WordPress!
O que acabamos de ver com a conditional tags é nada mais nada menos que o uso do conceito de função em programação.
WordCamp Floripa - 2018WordCamp Porto Alegre - 2018
![Page 31: Programação WEB ensino-aprendizagem de WordPress no O ......2018/05/08 · Criei um website em WordPress. Nada melhor do que viver uma situação/problema real para aprender. “Saber](https://reader034.vdocuments.com.br/reader034/viewer/2022051918/600af58e62e4c86b7244d9c6/html5/thumbnails/31.jpg)
Programadores de bem usam bastante função em seus códigos!
E com o WordPress não é diferente.
WordCamp Floripa - 2018WordCamp Porto Alegre - 2018
![Page 32: Programação WEB ensino-aprendizagem de WordPress no O ......2018/05/08 · Criei um website em WordPress. Nada melhor do que viver uma situação/problema real para aprender. “Saber](https://reader034.vdocuments.com.br/reader034/viewer/2022051918/600af58e62e4c86b7244d9c6/html5/thumbnails/32.jpg)
Amor ao primeiro loop.
WordCamp Floripa - 2018WordCamp Porto Alegre - 2018
![Page 33: Programação WEB ensino-aprendizagem de WordPress no O ......2018/05/08 · Criei um website em WordPress. Nada melhor do que viver uma situação/problema real para aprender. “Saber](https://reader034.vdocuments.com.br/reader034/viewer/2022051918/600af58e62e4c86b7244d9c6/html5/thumbnails/33.jpg)
BLOG - Meu blog é um loop!
WordCamp Floripa - 2018WordCamp Porto Alegre - 2018
![Page 34: Programação WEB ensino-aprendizagem de WordPress no O ......2018/05/08 · Criei um website em WordPress. Nada melhor do que viver uma situação/problema real para aprender. “Saber](https://reader034.vdocuments.com.br/reader034/viewer/2022051918/600af58e62e4c86b7244d9c6/html5/thumbnails/34.jpg)
Esse é o cara!
<?php if ( have_posts() ) {
while ( have_posts() ) {the_post(); //// Meu conteúdo aqui!//
} // end while} // end if
?>
WordCamp Floripa - 2018WordCamp Porto Alegre - 2018
![Page 35: Programação WEB ensino-aprendizagem de WordPress no O ......2018/05/08 · Criei um website em WordPress. Nada melhor do que viver uma situação/problema real para aprender. “Saber](https://reader034.vdocuments.com.br/reader034/viewer/2022051918/600af58e62e4c86b7244d9c6/html5/thumbnails/35.jpg)
Podemos aprender muito mais com o WordPress…
Banco de Dados, SQL - WP Query, class wpbd, etcCódigos Javascript com WordPressAjax com WordPress, não, acho melhor não! Ajax com Ajax mesmo!Orientação a ObjetosAPI RESTE por aí vai!
WordCamp Floripa - 2018WordCamp Porto Alegre - 2018
![Page 36: Programação WEB ensino-aprendizagem de WordPress no O ......2018/05/08 · Criei um website em WordPress. Nada melhor do que viver uma situação/problema real para aprender. “Saber](https://reader034.vdocuments.com.br/reader034/viewer/2022051918/600af58e62e4c86b7244d9c6/html5/thumbnails/36.jpg)
O WordPress o maior EAD do mundo!
WordCamp Floripa - 2018WordCamp Porto Alegre - 2018
![Page 37: Programação WEB ensino-aprendizagem de WordPress no O ......2018/05/08 · Criei um website em WordPress. Nada melhor do que viver uma situação/problema real para aprender. “Saber](https://reader034.vdocuments.com.br/reader034/viewer/2022051918/600af58e62e4c86b7244d9c6/html5/thumbnails/37.jpg)
Comunidade de prática - Étienne Charles Wenger
Uma comunidade de prática é caracterizada por "um domínio compartilhado de interesses", onde "os membros interagem e aprendem juntos" e "desenvolvem um repertório compartilhado de recursos."
WordCamp Floripa - 2018WordCamp Porto Alegre - 2018
![Page 38: Programação WEB ensino-aprendizagem de WordPress no O ......2018/05/08 · Criei um website em WordPress. Nada melhor do que viver uma situação/problema real para aprender. “Saber](https://reader034.vdocuments.com.br/reader034/viewer/2022051918/600af58e62e4c86b7244d9c6/html5/thumbnails/38.jpg)
Ensinar e aprender é a mesma coisa!
“Ninguém educa ninguém, ninguém se educa a si mesmo, os homens se educam entre si, mediatizados pelo mundo.”
Paulo Freire.
WordCamp Floripa - 2018WordCamp Porto Alegre - 2018
![Page 39: Programação WEB ensino-aprendizagem de WordPress no O ......2018/05/08 · Criei um website em WordPress. Nada melhor do que viver uma situação/problema real para aprender. “Saber](https://reader034.vdocuments.com.br/reader034/viewer/2022051918/600af58e62e4c86b7244d9c6/html5/thumbnails/39.jpg)
FIM!
WordCamp Floripa - 2018WordCamp Porto Alegre - 2018