6 Aplicações Ricas para Internet DESENVOLVIMENTO WEB II - 7136 6.1. 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. 6.2. 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. 6.2.1 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. Ao mesmo tempo é um software livre, gratuito e feito por você. Em outras palavras, o WordPress é o que você usa quando 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) - 93 -
6.2.1.1 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. 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 4.3.1 do WordPress. Esta versão foi lançada em 08/10/2015. Baixe a mesma do Blog: www.dalamura.zip.net (Nome do Arquivo: wordpress-4.3.1-pt_br.zip Tamanho: 7.347KB) 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-4.3.1-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-94 -
Todos os arquivos necessários para a instalação do WordPress estarão neste diretório criado: c:/wamp/www/dw2/wordpress 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 http://localhost/dw2/wordpress/ Será aberta a tela de configuração. - 95 -
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. Clique em Confirme o uso de senha fraca. Digite o seu endereço de e-mail e clique em Instalar WordPress. - 96 -
Será apresentada a seguinte tela: Clique em Login. Aparecerá a seguinte tela: Digite admin para Nome do usuário e admin para a Senha e clique em Login novamente. Aparecerá a tela de Administração do WordPress: - 97 -
Sempre que precisar entrar na área de login use o link http://localhost/dw2/wordpress/wp-admin/ ou clique em Entrar 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ário. 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. 6.2.1.2 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 e Ative ou desative os comentários. Quando existir uma nova versão do WordPress, será exibido na parte superior deste painel Central esta informação. Temos também uma lista de Plugins e notícias sobre o WordPress. - 98 -
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. 6.2.1.3 Escrevendo Posts: O principal recurso do Wordpress é justamente a possibilidade de escrevermos nossos posts. Clique no link Posts. - 99 -
É 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. 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. Clique em Adicionar. - 100 -
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. 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 (Fazer upload dos 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 imagem. 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. - 101 -
Blog. Clique em Publicar 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. Clique em Atualizar, para que seu Post seja atualizado em seu Blog. Em seguida veja como ficará: - 102 -
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 (esquerda, centro, direita), botão de inserir/editar link, remover link, alternar barra de ferramentas e modo de escrita sem distrações. Cliancado 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 indentação, desfazer/refazer e atalhos do teclado. 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. 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. - 103 -
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. 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). - 104 -
6.2.1.4 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 no link Editar. Se você estiver na Biblioteca, posicione o mouse sobre a imagem, e clique no link Editar. Após efetuar as alterações necessárias, clique em Atualizar. 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 e aplique os conceitos vistos até agora. - 105 -