6 Aplicações Ricas para Internet

Transcrição

1 6 Aplicações Ricas para Internet DESENVOLVIMENTO WEB II Evolução das aplicações para web O crescente número de pessoas que usufruem da informatização das tarefas cotidianas, viabilizadas na Internet e sua vasta quantidade de serviços, motiva o desenvolvimento de soluções para as reivindicações desses usuários, com suas exigências por interações cada vez mais fáceis, adotando as inovações tecnológicas que surgem a cada dia Modelos para construção de aplicações Existem atualmente no mercado vários modelos para costruções de aplicações WEB (WordPress, Joomla, Drupal, Blogger, etc). Estes modelos podem ser usados para a construção de aplicações WEB robustas, bem estruturadas, úteis e de fácil manutenção. Vamos estudar o WordPress, um sistema de gerenciamento de conteúdo (CMS) para WEB, escrito em PHP com banco de dados MySQL, voltado principalmente para a criação de blogs O WordPress: O WordPress é uma plataforma semântica de vanguarda para publicação pessoal, com foco na estética, nos Padrões WEB e na usabilidade. O WordPress é ao mesmo tempo um software livre e gratuito. Em outras palavras, o WordPress é o que você usa quando você quer trabalhar e não lutar com seu software de publicação de conteúdo, sendo hoje a maior plataforma de Gerenciamento de Conteúdo do mundo, com quase 70% do mercado. O WordPress é um projeto muito especial para mim. Todo desenvolvedor e colaborador acrescenta algo único nessa mistura, e juntos nós criamos algo bonito do qual me orgulho de fazer parte. Milhares de horas foram investidas no WordPress, e nós nos dedicamos para melhorá-lo todos os dias. Obrigado por você torná-lo parte de seu mundo. Matt Mullenweg (Criador do WordPress)

2 Instalando o WordPress: Para iniciar a instalação do WordPress é necessário ter instalado previamente na máquina um Servidor WEB. Vamos utilizar o WAMP5, que já sabemos usar. Para iniciar o WampServer, clique em Iniciar, Programas, WampServer, start WampServer. O ícone do mesmo aparecerá no rodapé do monitor, próximo ao relógio: Ao clicar sobre este ícone você terá acesso ao menu de opções de seu servidor WEB local. Clique em Localhost para abrir a página principal do WampServer. Se a mesma for exibida, é sinal de que o WampServer foi instalado corretamente. Se o menu de opções estiver em inglês, clique com o botão direito do mouse sobre o ícone do WampServer (figura ao lado), escolha a opção Language => portuguese. Vamos começar agora a instalar a versão do WordPress. Esta versão foi lançada em 07/09/2016. Baixe a mesma do Blog: (Nome do Arquivo: wordpress pt_br.zip Tamanho: 8.886KB) e salve o arquivo baixado dentro do diretório: c:/wamp/www/dw2 Utilizando um descompactador (Winrar, por exemplo), clique com o botão direito sobre o arquivo wordpress pt_br.zip e escolha a opção Extrair aqui. Observe que será criado um diretório com o nome wordpress dentro do diretório c:/wamp/www/dw2 Todos os arquivos necessários para a instalação do WordPress estarão neste diretório criado: c:/wamp/www/dw2/wordpress

3 Antes de iniciarmos a instalação do WordPress propriamente dita, precisamos criar o Banco de Dados do mesmo, onde durante o processo de instalação serão criadas de forma dinâmica as tabelas necessárias para o perfeito funcionamento do WordPress. Clique no ícone do WampServer e escolha a opção phpmyadmin: Clique na aba Banco de Dados, digite wordpress, e clique no botão Criar. Abra seu navegador e digite no endereço Será aberta a tela de configuração

4 Leia as instruções e clique em Vamos lá! Como estamos em um servidor local, o usuário é root e a senha deixe em branco (senha default quando instalamos o WampServer). Clique em Enviar e na tela seguinte, clique em Instalar. Defina o Título do Site: WordPress do <SEU NOME>. Ex: WordPress do Marcos Dalamura Vamos deixar como padrão o nome do usuário admin e a senha admin. Confirme o uso de senha fraca, digite o seu endereço de e clique em Instalar WordPress

5 Será apresentada a seguinte tela: Clique em Fazer Login. Aparecerá a seguinte tela: Digite admin para Nome do usuário e admin para a Senha e clique em Fazer Login novamente. Aparecerá a tela de Administração do WordPress:

6 Sempre que precisar entrar na área de login use o link ou clique em Fazer Login no menu META do seu Blog. Se quiser editar o Perfil do usuário admin ou alterar a senha do mesmo, clique no Menu Usuários. Ao passar o mouse em admin vai aparecer o link Editar. Clique no mesmo. Aproveite e atualize o perfil do Usuário admin, digitando seus dados nos campos solicitados. Depois de atualizados, clique em Atualizar perfil Painel WordPress: Temos no painel de controle na esquerda os itens de seu site como Posts, Mídia, Páginas, etc. Temos no Painel Central: Personalize seu Site, Escreva seu primeiro post, Ative ou desative os comentários, etc. Quando existir uma nova versão do WordPress, será exibido na parte superior deste painel Central esta informação. Temos também a quantidade de Posts, Páginas e Comentários existentes em seu projeto e Novidades do WordPress

7 Antes de começarmos a escrever Posts, clique em Configurações => Geral. Digite uma descrição para seu site e em Fuso horário, escolha São Paulo. Em seguida clique em Salvar alterações Escrevendo Posts: O principal recurso do Wordpress é justamente a possibilidade de escrevermos nossos posts. Clique no link Posts. É mostrado a você o post inicial do WordPress e na esquerda a possibilidade de se criar um novo Post, ou trabalhar nas categorias. Clique em Adicionar Novo. Defina um título para seu Post, na janela central você pode colocar seu conteúdo, observe que você também tem uma Guia Texto. Na direita você pode ligar a uma categoria e se for necessário criar uma nova categoria, na parte de baixo a direita podemos adicionar TAGS (palavras chaves), que permitem assim associar o seu post às suas tags

8 Como exemplo, vamos adicionar uma nova notícia. Use uma notícia de tecnologia. Então vou associa-la à categoria Tecnologia. Na direita clique em Adicionar Nova Categoria. Adicione também as suas TAGS para o Post. Ainda na caixa Tags, clique em Adicionar. Insira uma Notícia e na parte superior clique em Salvar como rascunho. Clique em Visualizar para ver como está ficando seu Blog. Para adicionar ao site clique em Publicar

9 Vamos adicionar uma imagem ao nosso Post. Na edição de seu Post, acima dos botões de formatação temos os botões de Adicionar Mídia. Coloque o cursor piscando na parte do texto onde deve ficar a imagem e clique em Adicionar Mídia. Escolha de onde deseja adicionar (Enviar arquivos ou Biblioteca de mídia). Preencha e escolha as informações solicitadas e clique em Inserir no Post. Para alterar propriedades da imagem, dê um clique sobre a mesma e escolha a opção Editar. Você poderá alterar o tamanho da imagem, o alinhamento, além de poder adicionar uma legenda para a mesma. Depois de alterar as informações, clique em Atualizar. Blog. Clique em Atualizar para atualizar o post com a imagem escolhida em seu Caso não queira manter uma notícia tão longa podemos adicionar um link Continue lendo ->. Clique no início do segundo parágrafo e clique no botão Inserir a Tag Leia Mais

10 Clique em Atualizar, para que seu Post seja atualizado em seu Blog. Em seguida veja como ficará: Sobre a barra de formatação de notícias: Temos o botão Negrito, itálico, riscado (tachado), lista com marcadores, lista numerada, citação, linha horizontal, alinhamentos, botão de inserir/editar link, remover link, alternar barra de ferramentas e escrita livre de distração. Em alternar barra de ferramentas, temos formato do Parágrafo, sublinhado, alinhamento justificado, cor do texto, colar como texto, limpar formatação, caracteres especiais, diminuir/aumentar a identação, desfazer/refazer e atalhos do teclado

11 Podemos também definir uma data futura de publicação. Adicione um Novo Post. À direita, na Caixa Publicar, clique em Editar ao lado de Publicar imediatamente e defina a data e horário de publicação do Post. Clique em Salvar como rascunho. Aparecerá Agendado para: data escolhida por você. E botão Publicar muda para Agendar. Se a data de publicação não for escolhida, o sistema pega a data/hora local do servidor web onde o site estiver hospedado, de acordo com o Fuso horário escolhido em Configurações => Geral. Podemos, caso seja necessário, definir uma senha para visualizar o post e desabilitar os comentários do post. Ao posicionar o mouse sobre o título do Post aparece a opção Edição Rápida. Clique sobre esta opção. Aparecerá a seguinte tela: Digite a senha e desabilite/habilite a opção Permitir comentários. Clique em Atualizar para salvar suas escolhas. Visualize seu Blog e veja os efeitos destas alterações. É aconselhável que, ao projetar a criação de um blog sejam definidas previamente as Categorias e se possível as palavras chaves que você utilizará no mesmo

12 Clique em Categorias no Menu Posts. Será mostrado Sem categoria e Tecnologia. Vamos criar mais algumas categorias. Como exemplo vou criar as categorias Mobile, Cursos, Webdesign. Vou ligar estas novas categorias à categoria Tecnologia (Categoria Pai) Mídia: Vimos como adicionar uma imagem ao nosso Post. Mas podemos adicionar diversos conteúdos na nossa Biblioteca de Mídia. Clique em Mídia. Observe que a imagem que usamos em nosso post já está sendo mostrada. Vamos adicionar mais algumas imagens agora pelo menu Mídia. Clique em Adicionar Nova. Selecione o arquivo, clique em Abrir. Ao término do processo você poderá editar as configurações de sua imagem. Basta clicar sobre a imagem e escolher a opção Editar imagem, logo abaixo da mesma

13 Após efetuar as alterações necessárias, clique em Salvar. Você pode adicionar diversos formatos de arquivos até o tamanho de 2MB (valor default). Obs: Este tamanho de arquivo poderá ser alterado. Basta abrir o arquivo de configuração do PHP, o php.ini e editar as opções upload_max_filesize e post_max_size mudando as mesmas para 150 MB, por exemplo (upload_max_filesize = 150M e post_max_size = 150M). Depois de ter alterado e salvo o arquivo php.ini, clique no ícone do WampServer e escolha a opção Reiniciar todos os Serviços para que a alteração seja habilitada. Exercício: Crie 05 (cinco) novos Posts com arquivos de mídia e aplique os conceitos vistos até agora

14 Páginas: Ao clicar em Páginas, são exibidas todas as páginas criadas para o Blog. No nosso exemplo já existirá uma página com o Título Página de Exemplo, criada quando o WorPress foi instalado. Ao colocarmos o mouse sobre o Título da página, temos a opção Editar. Ao clicar sobre esta opção, podemos editar o seu conteúdo. Vamos criar uma nova Página chamada Serviços. Clique em Adicionar Nova. Adicione seu conteúdo e clique em Publicar. Para definir a ordem dos links das páginas no Menu, digite um número no campo ordem em Atributos da Página. O primeiro link deve receber em Ordem sempre o número 0 (zero). Coloque 1 (um) no campo Ordem da página criada com o Título Serviços. Conforme já visto em Posts, podemos também, caso seja necessário, definir uma senha para visualizar a página e no caso das páginas, habilitar a opção de permitir comentários na mesma. Ao posicionar o mouse sobre o título da Página aparece a opção Edição Rápida. Clique sobre esta opção

15 Aparecerá a seguinte tela: Digite uma senha e habilite/desabilite a opção Permitir comentários. Visualize seu Blog e veja como funcionam estas opções. O tema Twenty Sixteen, padrão nesta versão do Wordpress, não exibe um menu padrão. Vamos alterar o tema para Twenty Fourteen. Clique em Aparência, Temas. Posicione o mouse sobre o tema Twenty Fourteen e clique em Ativar. Agora o nosso blog terá um menu padrão. Clique em Visitar Site e veja como ficou o mesmo com o novo Tema. Podemos criar sub-menus com novas páginas. Para isso, crie uma nova página chamada Manutenção. Em Atributos de página escolha como Mãe a página Serviços. Clique em Publicar. E veja como ficou o menu do seu Blog. A página Manutenção aparece como sub-menu da página Serviços. Exercício: Crie novas páginas com imagens / texto e novos sub-menus de acordo com a imagem abaixo e veja como está ficando estruturado seu Blog. Obs: Habilite "Permitir cometários" nas páginas criadas

16 Comentários: Ao clicar em Comentários, são exibidos todos os comentários adicionados nos Posts ou nas Páginas criadas em seu Blog (onde a opção Permitir Comentários esteja habilitada). Efetue logoff da área de administração do Blog e faça vários comentários nos Posts e nas Páginas existentes no Blog. Agora acesse novamente a Área de Administração. Observe que aparecerá o número de comentários pendentes em seu blog. Para moderá-los, clique no Menu Comentários. Os comentários pendentes aparecerão na parte superior da página. Clique sobre o link Pendentes e modere os mesmos

17 Você terá a opção de Aprovar, Responder o comentário, Edição rápida / Editar, definir como Spam ou excluir o mesmo (Lixeira). seu blog. Modere os comentários pendentes e verifique como os mesmos aparecem em Aparência: No menu aparência, vamos personalizar toda a parte visual do nosso Blog Temas Instalação e Configuração: O Wordpress quando instalado vem com um tema padrão. Você pode criar seu próprio tema, ou pode usar temas disponibilizados na Internet para seu blog. Clique em Aparência. Se estiver conectado à Internet clique em Adicionar Novo. Serão mostrados diversos temas. Se desejar filtrar por determinadas características, clique em Filtro de características. Marque os filtros desejados e clique em Aplicar Filtros. Escolha qual tema você quer usar e clique em cima da imagem do tema escolhido

18 Aparecerá uma tela com o nome do Tema, o autor e a versão do mesmo. Clique em Instalar para que o mesmo seja baixado e instalado em seu WordPress. Obs: Não vamos em nosso curso explorar o recurso de criação de temas, por se tratar de um assunto mais complexo. Cada tema pode permitir ou não a edição de elementos de seu site WordPress. Clique em Temas, escolha um Tema de seu interesse, clique em Ativar e veja como ficou seu Blog. Vamos instalar o Tema Twenty Thirteen para darmos sequência ao nosso estudo. Posicione o mouse sobre o tema Twenty Thirteen e escolha a opção Instalar. O próprio WordPress vai na internet e baixa o mesmo, instalando-o

19 Caso exista algum bloqueio em sua internet, baixe o mesmo do meu Blog (twentythirteen.1.7.zip). Clique em Temas, Adicionar novo, Fazer upload do tema. Clique em procurar, escolha o arquivo baixado (twentythirteen.1.7.zip) e clique em Instalar agora. Após instalado, clique em Ativar. Clicando em Personalizar no Tema escolhido, abrirá uma série de atributos que poderão ser alterados em seu tema Widgets: No menu da esquerda, clique em Widgets que são elementos que podemos adicionar ao nosso site. Para adicionar Widgets na Barra Lateral Principal, basta arrasta-los até ela. Embora você já veja alguns elementos, eles são os padrões Menus: Podemos criar menus personalizados em nosso site. Clique em Menus. Em seguida, clique em crie um novo menu. Defina um nome (MeuMenu, por exemplo) e clique em Criar menu

20 Em Links personalizados digite na URL o site da Universo ( com o Texto do link Universo e clique em Adicionar ao menu. Crie também um Link para o Blog ( com o texto do link Blog do Dalamura. Em seguida, clique em Adicionar ao menu. Caso queira adicionar Páginas ou Categorias ao Menu personalizado, marque as mesmas e clique em Adicionar ao menu. Depois de realizadas todas as inclusões desejadas, clique em Salvar Menu. Ao clicar em Aparência => Menus => Gerenciar Posições, aparece a seguinte informação: Observe que o tema escolhido suporta um menu. Você tem a opção de escolher qual menu deseja adiconar ao seu Blog. Se ficar em branco, será exibido o menu padrão do Blog. Caso queira escolher o menu personalizado criado por você, clique em MeuMenu. Em seguida, clique em Salvar Alterações. Obs: Alguns temas (como por exemplo o Twenty Fourteen e Twenty Sixteen) não possuem Menu padrão, necessitando que o usuário crie o seu próprio Menu personalizado. Exercício: Como fazer para abrir os links personalizados em uma nova aba?

21 Cabeçalho: A opção cabeçalho permite mudar a imagem de fundo do mesmo. Caso queira, poderá criar as suas imagens para a substituição. Depois de realizar as alterações necessárias, clique em Salvar alterações. Obs: Para excluir imagens pessoais do cabeçalho, vá ao Menu Mídia e remova as mesmas de lá Editor: A opção Editor permite editar o código fonte de seu Tema. Obs: Muita ATENÇÃO ao editar este código fonte, pois uma única vírgula em local errado, o blog/site poderá ficar inativo Configurações: Geral: Em Configurações Gerais, altere o Título e a Descrição de seu site, ative a opção Qualquer pessoa pode se registrar e defina a Função padrão para novo usuário como Assinante, escolha o Fuso horário São Paulo, o formato de data e de hora desejados e clique em Salvar Alterações

22 Escrita: Em Configurações de Escrita você pode definir parâmetros de postagens, tais como Categoria padrão de post, Formato padrão de post, etc. Neste Menu, existe uma ferramenta bem interessante utilizada para publicar textos via Leitura: Em Configurações de Leitura podemos definir como será configurada a página inicial, se será atualizada com os últimos Posts, ou posso definir uma página estática para ser mostrada. Realize as alterações desejadas e clique em Salvar Alterações Discussão: Em Configurações de Discussão, você poderá definir uma série de elementos relacionados aos comentários publicados em seu Blog Mídia: Em Configurações de Mídia, você poderá definir o tamanho (largura x altura) das imagens, bem como definir a organização dos arquivos enviados em pastas baseadas no mês e ano Links Permanentes: Em Configuração de Links Permanentes, você poderá criar estruturas personalizadas de URL para seus links permanentes e arquivos Usuários: No Menu Usuários você tem a opção de adicionar um novo Usuário ou Editar/Excluir usuários já cadastrados. Basta clicar em Adicionar Novo. O usuário poderá ter uma das cinco funções diferentes:

23 Administradores possuem acesso a todos os recursos de administração. Os Editores podem publicar posts, gerenciar posts assim como gerenciar posts de outras pessoas, etc. Os Autores podem publicar e gerir seus próprios posts, além de enviar arquivos. Colaboradores podem escrever e gerenciar seus próprios posts, mas não podem publicá-los ou fazer upload de arquivos de mídia. Os Assinantes podem ler comentários/comentar/receber newsletters etc, mas não podem criar conteúdo no site. Exercício: Vamos criar agora alguns usuários com funções diferentes e testar suas permissões. Obs: Observe que o Painel de Controle para os usuários com perfil diferente de Administrador possui menos opções Plugins: Vamos aprender agora a utilizar alguns Plugins do Wordpress. Como exemplo, vamos adicionar um formulário de contato com o recurso plugins do WordPress. Vamos adicionar o Plug-in Contact Form 7 ( Baixe o mesmo do meu blog: Após baixá-lo, descompacte o mesmo dentro da pasta Plugins de seu site (C:\wamp\www\dw2\wordpress\wp-content\plugins)

24 Ele vai aparecer automaticamente na sua relação de Plugins. Obs: Caso exista uma nova versão disponível, uma mensagem será exibida conforme a figura abaixo. Para atualizar o plugin, basta clicar em atualizar agora. Clique em Ativar plugin. Ele dará um aviso de Plug-in ativado. Observe que ficará uma barrinha azul ao lado do mesmo, indicando que está ativado. Agora precisamos configurar nosso formulário de contato. Observe que na barra de Menu a esquerda ele cria o item Form Contato. Clique sobre ele. Observe que ele já vem configurado um Formulário de Contato com o nome Formulário de Contato 1. Vamos criar um novo Formulário de Contato. Clique em Adicionar Novo. Observe que você pode utilizar o Idioma Padrão (Português Brasileiro) ou escolher o idioma de interesse. Vamos clicar em Adicionar Novo novamente. Digite um Nome para seu formulário de contato. No nosso exemplo, vamos colocar o nome Fale Conosco

25 Observe que ele cria um formulário padrão com os campos: Seu Nome Seu Assunto Sua Mensagem Logo após o campo Seu , vamos criar um campo chamado Seu Telefone, como obrigatório. Obs: text = Campo texto e o * = Campo obrigatório. Clique em Salvar, para salvar o formulário de contato criado. Aparecerá a seguinte mensagem: Formulário de contato criado

26 Copie o código gerado ([contact-form-7 id="43" title="fale Conosco"]) para ser utilizado na página de Contato a ser criada. Vamos agora adicionar nosso formulário criado a uma página. Clique em Páginas, Adicionar Nova. Em Título da Página digite Fale Conosco. No Corpo da Página digite: Entre em contato conosco! Na linha de baixo, cole o código copiado: Clique em Publicar. Para que a página Fale Conosco apareça no seu Blog, adicione a mesma no menu criado por você (MeuMenu). Vá em Aparência, Menus, adicione a página Fale Conosco ao menu e salve o Menu

27 Teste seu formulário de contato. Veja como ficou seu Blog. Existem vários plugins para o WordPress. Alguns deles podem ser vistos em O processo de instalação de novos plugins é o mesmo do exemplo mostrado. Siga os passos mostrados no início do item 3.10 ou clique no menu Plugins, Adicionar novo. Serão exibidos os Plugins de destaque. Você poderá pesquisar plugins desejados (por exemplo: Print Friendly and PDF). Exercício: Pesquise na WEB e instale dois novos plugins em seu Blog

28 Ferramentas: Neste Menu, temos as ferramentas já disponíveis no blog, como por exemplo a ferramenta Publique isso, e um conversor de categorias em tag (ou vice-versa). Terminamos aqui nosso estudo sobre WordPress. Maiores informações sobre o mesmo podem ser obtidas nos links abaixo: