Arquivo da categoria: Desenvolvimento

agregador de conteudo

Qual o melhor CMS do mercado ?

O Que é Um CMS ?

Primeiramente temos que entender o que é um CMS, para depois analisar qual é o mais apropriado e sobre quais circunstâncias. Content Management System ou em português sistema de gerenciamento de conteúdo, é um gestor de sites a grosso modo. O CMS é responsável por gerenciar, criar, editar e excluir conteúdo de um site por meio de um interface de fácil manuseio, muito parecido com um editor de texto, mas suas funções variam de CMS para CMS, alguns contendo a possibilidade de um gerenciamento mais completo sobre o site/blog, indo além do simples gerenciamento de conteúdo.

Blogger e WordPress - Qual é o melhor CMS ?

 

Quantos CMS Existem ?

A quantidade de CMSs no mercado são grandes, mesmo assim torna-se uma tarefa árdua escolher um que se adeque em “todos” os aspectos, de certa forma uma tarefa quase impossível se levar em consideração que sempre terá algum ponto negativo, mas haverá um ou outro que com certeza se adequa a sua necessidade. Os principais ou pelo menos os mais populares, estão: Blogger, WordPress.org, Drupal, Joomla.

 

Blogger

É talvez, um dos mais utilizado ao redor do mundo, muito popular por sua facilidade de uso e por ser totalmente gratuito. Suas características são baseadas na facilidade de uso, sempre levando em consideração o publico mais leigo, claro que essas característica gera um ponto negativo, modificações mais complexas podem se tornar improváveis ou até dificultosas.

Blogger

Pontos positivos:

  • Facilidade de uso, qualquer pessoa que tenha até mesmo pouca habilidade com algum editor de texto pode escrever e publicar facilmente.
  • Existem diversos templates na internet disponíveis gratuitamente.
  • Modificações no visual do blog, como cor de Links ou ordem do gadgets, tamanho das colunas, podem ser feitas facilmente pelo menu do próprio blogger (contanto que template permita)
  • É gratuito, não necessita de um hospedagem paga visto que o blog esta alocado nos servidores do próprio Google.
  • Aceita um domínio próprio, apesar do blogger contar com um subdomínio .blogspot.com (exe: meublog.blogspot.com) nada impede que se contrate um domínio próprio e use no blogger.
  • Permite a criação de paginas estáticas (fora de uma linha cronológica como ocorrem com as postagens tradicionais)

 

Pontos Negativos:

  • Apesar da facilidade de uso ele possui limitações, não se pode upar arquivos externos no Blogger (como arquivos.css ou script.js, arquivo.swf, etc…). O Blogger só permite que seja upado o arquivo XML do template (ou arquivos de mídia nos posts), outros arquivos necessitariam de um servidor ou serviço de hospedagem fora do Blogger.
  • A personalização do  blog mais a fundo, como mudanças no modo como ele funciona se torna dificultosa, visto que só permite a edição do código do template.
  • A quantidade plugins para o Blogger são pequenas(apenas as disponíveis no próprio Blogger), apesar de permitir a inserção de códigos HTML, JAVASCRIPT dentro do template, bem como no widgets e nos post, a falta de um linguagem de programação de apoio torna o desenvolvimento algo mais complexo, difícil e algumas vezes inviável.
  • Otimização para SEO devem ser feitas quase todas manualmente, pois quase não existem funções que automatizem essa tarefa.

 

WordPress.org

O WordPress é um CMS notável, é fácil de usar(até certo ponto), permite a adição de mídias no servidor(como fotos, musicas, vídeos, etc…), possui um editor de postagens completo e simples, muito parecido com o do Blogger, pode ser gerenciado por vários usuários, além de muitas outras características. Apesar de ser um excelente CMS para blogs, nada impede que seja usado em sites maiores ou até mesmo portais, pelo contrario ele tem até um desempenho bom com alta quantidade de acessos, um exemplo disso seria o seu uso em diversos sites grandes como por exemplo o site da cultura (http://www.cultura.gov.br/site/).

CMS WordPress - menu administrativo

 

Pontos Positivos:

  • Uma grande quantidade de plugins disponíveis no sites do desenvolvedor, além da possibilidade de se upar plugins de terceiros. Alias os plugins disponíveis para o WordPress é um dos seus  grandes diferenciais.
  • Nada impede que você desenvolva e use o seus próprios plugins, bastando apenas força de vontade e dedicação.
  • Possui uma vasta documentação, caso precise fazer alguma alteração mais complexa ou até mesmo para entender como ele funciona.
  • Permite alterações complexas, e com o uso do plugin correto pode se fazer um transformação total não só no visual do blog como no seu gerenciador, criando, modificando ou até retirando funcionalidades conforme necessitar.
  • Pode ser facilmente otimizado para os buscadores (SEO), alias ele possui diversos plugins que automatizam essa otimização.
  • Pode se criar não somente blogs, como sites, e-commerce, portais e até mesmo fóruns, mesmo que esse não seja o seu objetivo principal, ele possui plugins que automatizam quase todo trabalho, mas modificações próprias podem ser feitas caso necessite.
  • Permite a criação de paginas estáticas (fora de uma linha cronológica como ocorrem com as postagens tradicionais)
  • Permite a importação posts do Blogger ou outros serviços (por meio de um plugin nativo)

 

Pontos Negativos:

  • Pode gerar alguma dificuldade no uso por pessoas mais leigas, como por exemplo na edição de um template.
  • Necessita de uma hospedagem PHP/MySQL, diferente do Blogger o WordPress.org não fica em uma hospedagem gratuita, na verdade a hospedagem(local onde o blog ficara armazenado na internet) fica por conta do dono do blog, mas atualmente existem hospedagem básicas por menos de 15 R$ ao mês, mas caso encontre alguma hospedagem gratuita que atenda sua necessidade (muito dificilmente) que possua suporte a PHP e MySQL, nada o impede.
  • Necessita de um domínio próprio, diferente do Blogger ele não vem com um subdomínio, já um domínio .com ou .com.br custam poucos R$ ao ano (dependendo de onde for registrado). Em alguns casos as hospedagens gratuitas disponibilizam subdomínios gratuitos, mas que no final não compensam pela má reputação .

 

Drupal

Segundo a Wikipédia o Drupal esta mais para um Framework modular e é comumente relacionado com um CMF (Content Management Framework), pois possibilita a criação de um CMS personalizado de forma mais fácil que os demais CMS. É uma plataforma open source, com uma comunidade grande, com diversos módulos disponíveis, além da possibilidade de um desenvolvimento de uma aplicação web mais complexa em cima desse CMS.

CMS Drupal - menu administrativo!

 

Pontos Positivos:

  • Possibilidade de desenvolvimento de uma aplicações mais complexas (com o devido estudo e aprendizado).
  • Grande quantidade de módulos disponíveis.
  • Há uma maior facilidade na criação de um CMS  modificado do que em outros, por isso como ja dito antes é comumente chamado de CMF(apesar de ser um CMS, também possui características de um Framework).
  • Comunidade grande, e documentação sobre o sistema para desenvolvimento.
  • É Open Source.
  • Pode-se usar módulos que expandam as suas funcionalidades.
  • Existem uma quantidade razoável de comunidades (foruns, sites, blogs, etc…) com material auxiliar, que ajudara na sua utilização.

 

Pontos Negativos:

  • Necessita de um maior esforço para o aprendizado, logo não se torna tão indicado para pessoas mais leigas. Mas para resolver esse problema, basta se esforçar junto com um pouco de estudo (muito estudo :p )
  • Necessita de um domínio próprio (igual ao WordPress.org e vários outros)
  • Necessita de uma hospedagem PHP/MySQL (igualmente ao WordPress.org e outros) própria.

 

Joomla

Joomla é um CMS robusto e fácil de usar, sua aplicabilidade vai muito além de um simples gestor para sites, muito usado em projeto grandes com sites institucionais, portais, e-commerce,  agregadores de conteúdos e até mesmo fóruns, dentre muitas outras; obviamente nada impede que seja usado para a criação de um simples blog, pelo contrario é comumente usado com esta finalidade, a qual se sai muito bem.

CMS Joomla - menu administrativo!

 

Pontos positivos:

  • Facilidade de uso. Atualmente o Joomla simplificou o menu de administração, facilitando o seu uso para o usuários mais leigos.
  • É muito usado em projetos grandes, e se sai muito bem nesse quesito.
  • Possui um ótimo desempenho.
  • Possui uma comunidade grande, como blogs, fóruns, sites, wikis, dentre outros com uma vasta documentação e tutoriais.
  • Possui diversos módulos de expansão disponíveis(extensões e/ou plugins).
  • Possui diversos templates disponíveis na internet (além da possibilidade e a facilidade de criação)
  • Pode se criar tanto blogs, como sites, portais, e-commerce, dentre outros.

 

Pontos Negativos:

  •  Assim como os anteriores ele também necessita de uma hospedagem PHP/MySQL
  • Também necessita de um domínio próprio.
  • Apesar de seu menu administrativo ter sido simplificado, ainda gera alguma dificuldade para usuários mais leigos em operações como alteração do template e/ou modificações.

 

Qual é o melhor CMS ?

Infelizmente não há uma resposta conclusiva, cada um possui suas próprias características como desempenho, versatilidade, facilidade de uso e propósitos diferentes, por isso não se pode afirmar com certeza absoluta qual é o melhor. O que se pode fazer é levar em consideração as características de cada um e averiguar qual deles mais se encaixa na proposta do projeto; e apesar da preferência de alguns CMS mais do que outros (no meu caso WordPress.org) , não se pode deixar que isso influencie tanto na escolha de um deles para um projeto, o ideal seria conhecer ao máximo possível dessas ferramentas, para que assim se abra uma quantidade maior de possibilidades.

 

Como instalar o Drupal 7.28

Como já dito aqui varias e varias vezes, a globalização é um fator inevitável, até mesmo para as empresas menores e com isso a cada dia surgem mais e mais sites/blogs, tanto comerciais como pessoais, que se tornou um onda crescente, e a procura por formas de criação de blog/sites também vem crescendo, com isso há um aumento na demanda, hoje já existem diversos CMSs(gestores de conteúdo para sites/blogs)bons, gratuitos e a cada dia surgem mais. O Drupal é um excelente CMS, além de ser muito popular, ele também está entre os mais conhecidos e usados da atualidade.

 

Como instalar e criar um Site/Blog com Drupal ?

Nesse tutorial foi usado o Drupal versão 7.28 que foi instalado no Xampp, mas nada impede que seja instalado no Wamp, Easy Php, dentre outros ou até mesmo em um hospedagem. Obs.: a pasta para arquivos e paginas do xampp é C:/xampp/htdocs caso esteja usando o Wamp seria C:/wamp/www, em alguns outros casos(e algumas hospedagens) o nome da pasta também é www.

 

Primeiramente baixe o arquivo compactado drupal-7.28.tar, abra o arquivo e copie a pasta drupal-7.28.

Winrar-Drupal

Após ter copiado, vá na pasta C:/xampp/htdocs e cole a pasta drupal-7.28 (o endereço no navegador para acessar ficará 127.0.0.1/drupal-7.28/) ou copie os arquivos contido dentro da pasta drupal-7.28 e cole na raiz da pasta C:/xampp/htdocs para ser acessado somente pelo endereço 127.0.0.1/
No caso de uma hospedagem, pode se copiar o conteúdo para um pasta ou para a raiz da hospedagem, e o site/blog será acessado pelo endereço do domínio(ou subdomínio) associado a pasta ou raiz da hospedagem.

Drupal-pasta

 

Agora abra o navegador e digite localhost/phpmyadmin e de enter. Depois vá na aba Base de Dados e no campo Create Database digite o nome que será o banco de dados do Drupal, nesse caso será blog_drupal , e clique em Criar.

CriandoBD-drupal

 

Com a pasta drupal-7.28 extraída dentro do C:/xampp/htdocs, agora vá no navegador e digite 127.0.0.1/drupal-7.28 e de enter. Logo irá aparecer um tela igual a de baixo, clique em “Save and continue”.

Drupal passo 1

 

 

 

Escolha o idioma desejado, nesse caso nenhum pacote de idiomas está disponível, por isso ficará selecionado o idioma padrão (English).

Caso queira instalar algum pacote de idioma (Pt-Br por exemplo) vá no endereço ” http://ftp.drupal.org/files/translations/7.x/drupal/ “baixe o arquivo drupal-7.0-alpha3.pt-br.po(pacote Pt-Br) e cole dentro da pasta “profiles\standard\translations”  que se encontra dentro da pasta drupal-7.28; feito esse passo, entre novamente em 127.0.0.1/drupal-7.28 e selecione o novo idioma (após fazer isso até o menu de instalação ficará em português Br).
Não se preocupe caso instale em inglês e mais tarde se arrependa, você ainda poderá instalar o pacote de idiomas mesmo após a instalação do Drupal.

Feito os passo anteriores clique em “Save and Continue”.

 

Drupal passo 2

 

 

  • Selecione a opção “MySQL, MariaDB, ou equivalent”.
  • No campo Database name digite o nome da base de dados criada anteriormente, que nesse caso especifico será blog_drupal
  • No campo Database username, digite o nome do usuário do banco de dados, por padrão o xampp, wamp e vários outros, usam “root” , em algumas hospedagem o nome do banco de dados geralmente varia, entre em contato para descobrir.
  • Em Database password deixe em branco, por padrão o wamp, xampp e derivados não possuem senha no banco de dados, o que não é o caso das hospedagens pagas(para descobrir a senha da hospedagem entre contato com ela)

Depois de preenchido os campos clique em “Save and continue”.

Drupal passo 3

 

 

Aguarde o processo de instalação, pode levar até alguns minutos, então paciência.

Drupal passo 4

 

 

Agora preencha os dados do site.

  • No campo Site name preencha com o nome do site.
  • No campo Site e-mail address preencha com e-mail que será usado para o site.
  • No campo User name preencha com o nome de usuário que ira acessar o menu administrativo do Drupal (crie um nome seguro, mas que tenha certeza de lembrar depois)
  • No campo E-mail adress preencha com o e-mail que será usado para acessar o menu administrativo do Drupal ( o seu e-mail)
  • No campo Password, digite a senha que será usada para acessar o painel administrativo (use uma senha segura, mas não esqueça).
  • No campo  Confirm password, redigite a senha.
  • Modifique as demais configurações como achar necessário (ou simplesmente deixe do modo que está).

Clique em “Save and continue“.

 

Drupal passo 5Drupal passo 5.1

 

Pronto a instalação está completa. Clique em “Visit you new site” para ver o seu site em funcionamento.

Drupal passo 6

 

Você acaba de instalar o Drupal, para acessar o menu administrativo basta digitar admin na frente do endereço do site (exe: 127.0.0.0.1/drupal-7.28/admin) e entrar com o login e senha criados anteriormente.

status de instalação joomla - CMS

Como instalar o Joomla 3.3

Hoje ter um site ou blog quase se torna regra no mundo globalizado, tanto no âmbito pessoal como no empresarial, essa forma de pensar leva a busca por ferramentas e métodos de construção simples e fácil de um site com o intuito não somente de diminuir os custos, como também de aprendizado.
Para aqueles que não conhecem, o Joomla é um CMS (gestor de conteúdo para sites) notável, com quase tudo que se necessitaria em um gerenciador de sites, além de ser gratuito, fácil e com um comunidade que vem crescendo a cada dia.

logo joomla - Como instalar joomla

 

Como Instalar o Joomla 3 ?

Nesse tutorial foi utilizado o Joomla 3.3, apesar de ter muita inovações comparado ao seu antecessor, sua instalação segue quase a mesma linha de raciocínio e de certa forma ficando até mais simples.

Baixe o arquivo “Joomla_3.3.0-Stable-Full_Package.zip” e extraia para Joomla_3.3.0-Stable-Full_Package, igual a imagem abaixo.

Arquivo de instalação joomla - CMS (como instalar joomla)

 

Será criado uma pasta chamada Joomla_3.3.0-Stable-Full_Package, onde se encontra os arquivos de instalação do Joomla

joomlapastainstalação

Renomeie a pasta Joomla_3.3.0-Stable-Full_Package para Joomla (ou outro nome que ache conveniente) para facilitar o processo de instalação.

Pasta Joomla - CMS

 

Agora abra o Xampp (ou Wamp, Easy Php ou derivado) e clique em start Apache e start MySQL, logo após clique em Admin do MySQL (logo o navegador abrirá) ou abra o navegador e digite localhost/phpmyadmin

xampp

 

Uma tela parecida com a de baixo ira aparecer clique na aba Base de Dados, no campo Create Database digite o nome da base de dados que será criada, nesse caso seria blog_joomla. Logo após preencher o campo clique em criar.

PhpMyAdmin

 

Instalando o Joomla 3.3

Após ter criado a base de dados, agora entre novamente no navegador e digite 127.0.0.1/joomla. Uma tela igual a de baixo ira aparecer

Em Select Language, selecione o idioma de instalação.

em Main configuration preencha conforme as informações pertinentes a seu site.

  • Site Name : preencha com o nome do site
  • Description: breve descrição sobre o site
  • Admin E-mail: nesse campo preencha com o e-mail de quem irá ser o administrador do site, esse e-mail será muito importante para o site, é por meio dele que poderá pedir uma nova senha para o administrador por exemplo, caso esqueça a senha
  • Admin Username: esse campo deve ser preenchido com o nome de usuário que ira acessar o painel administrativo (crie um nome de usuário que tenha certeza de lembrar mais tarde, porém leve em consideração a segurança do site, então não crie um user muito óbvio)
  • Admin Password: crie um senha que tenha certeza de lembra, porém não tão fácil que possa ser descoberta facilmente.
  • Confim Admin Password: repita a senha criada

 

Agora clique em ” -> Next

CMS instalação joomla

 

 

Nessa nova tela será configurado a conexão com o banco de dados.

  • Em Database Type: escolha MySQL ou MySQLi nesse caso foi escolhido MySQL
  • No campo Host Name: será preenchido localhost (já vem por padrão)
  • Em Username: por padrão do xampp, wamp e outros o nome de usuario do banco de dados é root, em caso de hospedagens esse nome pode variar, então nesse caso entre em contato com a hospedagem.
  • Password: por padrão do xampp, wamp e outros não possuem senha, ja em hospedagens a historia é outra, nesse caso entre em contato novamente com a hospedagem para descobrir a senha.
  • Em Database Name: digite o nome do banco de dados criados anteriormente, que no caso é blog_joomla
  • Em Table Prefix: deixe como está caso essa seja a única instalação do Joomla nesse banco de dados.
  • Em Old Data Base Process: selecione Remove para apagar  todos os dados antigos da base de dados ou em Back-Up para salvar os arquivos antigos da base de dados. Nesse caso selecionemos em Remove por que queremos uma instalação limpa e sem vestígio de instalações anteriores naquela base de dados (cuidado com essa opção, na duvida selecione backup)

Após preenchido clique em -> Next

Base de dados

 

 

Nessa tela deixe o padrão e clique em -> Install

Instalação do joomla

Nessa tela irá aparecer o status do processo de instalação, pode levar até alguns minutos.

Como instalar o Joomla 3.3 - status de instalação joomla CMS

Bug

Em alguns casos em que a versão do php é a 5.5 o processo de instalação pode não prosseguir e congelar na tela de progresso de instalação, especificamente em Creating database tables, caso isso ocorra não se preocupe.

Caso esteja usando o Xammp, Wamp ou outro e que tenha deparado com esse pequeno empecilho da tela “creating database tables” não prosseguir a instalação, você pode alterar o valor da linha “max_execution_time=30” do arquivo php.ini para 300 ou maior, salvar e depois tentar a instalação do Joomla 3 novamente.

 

Proceda da seguinte da seguinte forma

  • No caso do Xampp abra a pasta C:\xampp\php e encontre o arquivo php.ini e abra com o bloco de notas
  • Encontre a linha max_execution_time=30
  • Aumente o valor de 30 para 300 ou maior.
  • ficando por exemplo: max_execution_time=300
  • salve o arquivo e reinicie o Xampp(wamp ou derivados). Recomece o processo de instalação do Joomla desde o começo (como já foi criado um base de dados chamada blog_joomla, não necessita criar outra, pode-se usar essa tranquilamente novamente)

como instalar o joomla 3.3 no xampp - php.ini

Feito o processo acima provavelmente voltara a passar pela tela de status de progresso, levara alguns minutos até que a instalação se complete, só que diferente de antes dessa vez provavelmente a instalação será concluída.

como instalar o joomla 3.3 - status de instalação joomla - CMS

Após a tela acima o processo de instalação terá sido concluída, clique em Remove installation folder, e logo após clique em Administrator para ir ao menu administrativo do Joomla.como instalar o joomla 3.3.

 

Para acessar o menu administrativo novamente mais tarde digite administrator na frente do endereço do blog, por exemplo 127.0.0.1/joomla/administrator/

Entre com login e senha criados anteriormente.

 

 

Como criar um blog no Blogger

O Blogger é uma ferramenta sensacional, simples, fácil e versátil, ótimo para aqueles que desejam começar a blogar, mas não querem ter gastos com isso. Tanto um blog pessoal como algo um pouco mais além, o blogger com certeza atende a uma boa parcela das necessidades de um blogueiro.

 Como criar um blog (Blogger)?

O que é preciso para criar um blog no  Blogger ?

Basicamente só é preciso ter um conta google e caso não tenha, basta cria-la.

 

Entre no endereço: https://www.blogger.com/

Veja na imagem a baixo existem duas possibilidades

  1. Caso você já tenha um conta google, entre com seu Login (e-mail), senha e clique em Fazer Login e passe para o passo “criando um blog
  2. Ou caso você não tenha uma conta, clique em criar uma conta e prossiga com os passos seguintes.

Conta google-blogger

Criando uma Conta Google

Preencha conforme os dados do seu blog, e clique em Próxima etapa

segundo passo - blogger

 

 

Clique em Voltar para Blogger

3

 

Clique em Criar um perfil limitado no Blogger

4

Clique em Continuar para o Blogger

5

Criando um Blog

Caso tenha seguido os passos anteriores ou até mesmo tenha entrado com sua conta Google, em ambos os casos ira leva-lo para esse painel. Clique em Novo Blog

6

Preencha o Titulo do blog e em Endereço o endereço do blog(exemplo: meublog, ficará com endereço meublog.blogspot.com), selecione o modelo e clique em Criar um Blog

8

Seu novo blog já estará criado e pronto para usar!

Logo wordpress - como instalar o wordpress

Como instalar o WordPress.org

Com o avanço da internet, vem a facilidade com que os usuários tem acesso e a possibilidade de criação de sites e blogs. Hoje qualquer um pode ter um web site, blog ou e-comercie na internet, desde blogs gratuitos(blogger por exemplo) até mesmo com hospedagens pagas (algumas bem acessíveis, por bem menos de 20 R$ ao mês). Mas a hospedagem só não basta, deve possuir um sistema(CMS) para gerir os blog, caso contrario seria apenas uma pagina em branco. Atualmente existem diverso CMS  bons, dentre eles o WordPress, Drupal, Joomla, etc, e é eles que irão gerenciar o seu blog, cada qual com suas característica, mas descreve-los por completo não é o nosso objetivo, o nosso objetivo é “como instalar o WordPress”, bem como configura-lo.

Logo wordpress - criar blog no wordpress

Algumas hospedagens possuem recursos de auto instalação de diversos CMS, muitas vezes até mesmo para o WordPress, facilitando a instalação. Mas esse tutorial será focado em uma instalação limpa, sem interferência de um sistema de auto instalação de qualquer hospedagem.

 

Instalando WordPress ?

Para esse tutorial foi usado o Xampp para criar o servidor Apache e o SGBD MySQL, mas caso esteja usando um hospedagem de verdade o procedimento diverge um pouco de hospedagem para hospedagem assim como para o xampp, mas na teoria o procedimento é muito parecido.

 

Supondo que já tenha o Xampp instalado, e que já esteja rodando o MySQL e o Apache ou que tenha uma hospedagem, então passemos para os passos seguintes. Baixe o WordPress.org e abra o arquivo.

criar blog no wordpress

 

Após abrir o arquivo, entre dentro da pasta WordPress e copie todos os arquivos (como na imagem abaixo)

inst-wordpress2

Após ter copiado, vá na pasta C:/xampp/htdocs(ou na sua pasta da sua hospedagem por ftp). No caso do xampp vem com alguns arquivos, apague os arquivos menos as pastas.

inst-wordress3

Depois de apagado, caso queira crie uma pasta com o nome “blog” ou “site” (o domínio ficara assim: meudominio.com.br/blog) e cole os arquivos do WordPress anteriormente copiados dentro dela ou cole direto sem criar a pasta, para que possa ser acessado diretamente pelo domínio (meudominio.com.br); ficando por sua escolha.
No caso dessa postagem foi criado uma pasta chamada “blog” e copiado os arquivos do WordPress dentro dela, igual abaixo.

inst-wordress4inst-wordpress5

 

Abra o Xampp e de Start no Apache e no MySQL, logo após clique em Admin da linha do MySQL ou simplesmente copie  localhost/phpmyadmin/ e cole no navegador. Já no caso de um hospedagem, provavelmente haverá um menu em que poderá acessar a pagina phpmyadmin.instalando o wordpress (xampp)

 

Logo após irá abrir uma page igual a de baixo, clique em “new” (ou vá na aba Base de Dados).

inst-wordpress7

Depois escreva o nome da base de dados que nesse caso será “blog”, e logo após clique em criar.

instalação do wordpress passo 8

Criado a base de dados agora vamos começar a instalação do WordPress.

Abra o navegador e digite 127.0.0.1/blog (ou domínio que esta associado a sua hospedagem, exe: meudominio.com/blog ou meudominio.com) ou digite apenas 127.0.0.1/ caso tenha colado os arquivos do WordPress na raiz sem criar a pasta “blog”.

Logo depois irá aparecer uma tela igual a de baixo, clique em “Criar um Arquivo de Configuração“.

instalação do wordpress passo9

 

Como descrito na próxima pagina, tenha em mãos as informações como:

  • Nome do banco de dados( o B.D. criado anteriormente, nesse caso será “blog”)
  • Nome de Usuário do Banco de Dados( pode ser obtido com sua hospedagem, no caso do Xampp o padrão é “root”)
  • Senha do Banco de Dados (também pode ser obtido com sua hospedagem, no caso do xampp não possui senha)
  • Prefixo da tabela

Depois clique em “Vamos lá!

instalação do wordpress passo 10

 

Preencha os dados:

  • Nome do Banco de Dados = blog ( ou o nome da base de dados que você criou)
  • Nome do Usuário = root ( as vezes o nome de usuário do Banco de Dados é outro, verifique com a hospedagem)
  • Senha = Nesse caso não possui senha, em outros casos pode haver, verifique com a hospedagem.
  • Servidor = localhost (na maioria dos casos até mesmo nas hospedagens o servidor ainda é localhost, no xampp também)
  • Prefixo da Tabela = wp_ (mantenha esse prefixo, caso essa seja a primeira instalação do WordPress nessa base de dados)

Após preenchido como abaixo clique em “Enviar“.

instalação do wordpress 11

 

Agora clique em “Instalar“.

instalação do wordpress 12

 

Após isso preencha os próximos campos,  com o nome que será o seu blog, e-mail, o nome de usuário e a senha que usará para acessar o painel de controle do WordPress. A senha bem com o nome de usuário é você quem deverá criar, então crie um nome e senha levando em consideração a segurança, mas que tenha certeza que lembrará depois.
Logo após preencher clique em “Instalar o WordPress

 

instalação do wordpress passo 13instalação do wordpress passo 14

 

A pagina será redirecionada para a pagina de conclusão. Clique em login e será redirecionado novamente, só que desta vez para a pagina de Login

tela de sucesso WordPress

 

Na pagina de Login, digite o nome de usuário (criado anteriormente, nesse caso será adm), senha (também criada anteriormente) e clique em “Login“.

entre com o login e senha

 

Pronto! acabou de instalar o WordPress.org  e já esta funcionando, agora só basta explorar seus menus e funções disponíveis.

Wordpress

HTML básico parte 2 – Tabelas

Continuação do post:

Como acredito que já saibam o que é HTML e quais são as principais tags usadas, então pretendo abordar o conceito tabela nesse post, sem a necessidade de explicar o que é tag, parâmetros, valores e demais conceitos básicos.  Caso ainda não entenda muito bem sobre os conceitos como: parâmetros valores e tags, recomendo que leia atentamento o post anterior (“HTML Báscio Parte 1 “).

 

O que é uma Tabela em HTML?

Segundo a Wikipédia tabela é uma representação matricial, isto é, em linhas e colunas, que tem a finalidade de demostrar informações por meio delas. Uma tabela em HTML é a criação de tabelas em um documento por meio de tags HTML, que vão representar linha x coluna.

Muitos utilizam de tabelas para formar o layout de sites inteiros, apesar dessa pratica não ser recomendada mais, o uso de tabelas em layout ainda é bem comum, hoje para formar o design de site e blogs existem linguagens de estilo como CSS, o que faz o uso de tabelas para esse proposito desnecessário.

tabela html

Como Criar Tabelas Em HTML?

 

Inicio

<table></table> Essa é a principal tag, é ela que define onde começa e termina a tabela, as tags de linha e coluna devem estar entre <table></table>

<table>

</table>

Nessa tag pode-se usar parâmetros como: border=”valor numerico” para criar borda, bgcolor=”valor exadecimal ou nome da cor de fundo em inglês” para acrescentar cor de fundo.

 

Linha

<tr></tr> (Table row) cria a linha da tabela.

 

Coluna

<td></td> (table data)cria a coluna da tabela ou melhor divide a linha em partes (dados), ela é usada sempre dentro de um linha ou seja primeiro se cria a linha depois divide em colunas, veja o exemplo abaixo em que temos duas colunas dentro de uma linha.

<table border="2">
  <tr><td>1ª linha, 1ª coluna</td><td>1ª linha, 2ª coluna</td></tr>
</table>
1ª linha, 1ª coluna 1ª linha, 2ª coluna

No exemplo acima foi criado um tabela com uma linha de duas colunas usando também a parametro border=”valor” (que cria uma borda em volta da tabela).

<table border="2">
  <tr><td>1ª linha, 1ª coluna</td><td>1ª linha, 2ª coluna</td></tr>

<tr><td>2ª linha, 1ª coluna</td><td>2ª linha, 2ª coluna</td></tr>
</table>

Já essa tabela possui 2 linhas com duas colunas.

1ª linha, 1ª coluna 1ª linha, 2ª coluna
2ª linha, 1ª coluna 2ª linha, 2ª coluna

 

Mesclando Linhas e Colunas

Para mesclar linhas e colunas é usado os parâmetros rowspan e colspan  na tag table data com os valores correpondentes a quantidade de casa a serem mescladas.

 

 Mesclando Linhas

Acrescente o parâmetro rowspan dentro da tag table data para mesclar duas linhas ou mais, veja:

<table border="1">

<tr><td rowspan="2">1ª e 2ª l. mescladas, 1ª coluna</td><td>1ª linha, 2ª coluna</td></tr>
<tr><td>2ª linha, 2ª coluna</td></tr>
</table>

No parâmetro rowspan, o valor indica quantas serão as linhas mescladas.

1ª e 2ª linha mesclada, 1ª coluna 1ª linha, 2ª coluna
2ª linha, 2ª coluna

 

Mesclando Colunas

Use o parâmetro colspan dentro da tag table data para mesclar duas ou mais colunas, veja:

<table border="1">

<tr><td colspan="2">1ª linha 1ª e 2 ª coluna mescladas</td></tr>
<tr><td>2ª linha, 1ª coluna</td><td>2ª linha, 2ª coluna</td></tr>
</table>

No parâmetro colspan o valor indica a quantidade de colunas a serem mescladas.

1ª linha 1ª e 2 ª coluna mescladas
2ª linha, 1ª coluna 2ª linha, 2ª coluna

CSS básico parte 1

Cascading Style Sheets (ou simplesmente CSS) é uma linguagem de estilo utilizada para definir a apresentação de documentos escritos em uma linguagem de marcação, como HTML ou XML, ou seja é uma linguagem que define os estilos a serem aplicados principalmente aos documentos HTML, resumindo da forma mais clara possível, seria uma linguagem usada para dar forma ao documento, como por exemplo na criação de Layouts, etc… Seu principal benefício é prover a separação entre o formato e o conteúdo de um documento.

 

linguagem css

Não tem como aprender CSS sem antes saber o mínimo sobre HTML ou outra linguagem de marcação, por isso recomendo a leitura do artigo:

 

Sintax

CSS é utiliza uma sintax simples, compostas por regras construídas em cima de palavras em inglês, o que torna fácil de compreender.

Cada regra consiste em: um ou mais Seletores e suas Declarações, que ficam entre {   }.

Cada declaração é dividida em: propriedade, dois pontos(:), valor ou valores e finalizando-a com ponto e virgula(;),  vejas os exemplos abaixo.

p { color:blue;  }

Divisão de uma regra (CSS)
css

Em CSS pode haver também mais de uma declaração ou até mesmo mais de um seletor em uma mesma regra.

No exemplo abaixo foi usado o seletor p com duas declarações, uma com a propriedade color e valor red; outra com a propriedade font-size e valor 20px.

p {
color:red;
font-size:20px;
}

 

Já nesse outro exemplo foi usado mais de um seletor (seletor b e .cont) .

b .cont {
color:blue;
}

Então o uso de vários seletores e declarações torna-se necessarios conforme aquilo que se propõe a fazer.

 

Seletor

Os seletores podem ser em três tipos: Classes, IDs ou Tags, e é o seletor que como o próprio nome diz, vai selecionar o item à aplicar os estilos (CSS).

 

ID

Um ID pode ser escrito da seguinte forma, # seguido do nome da ID ( #nomedaid {} ), a ID só pode ser chamado uma vez dentro de um documento HTML, por ser única, no exemplo abaixo foi criado uma regra CSS simples e o modo que pode ser chamado dentro do documento.

/* Regra CSS */

#caixa {
width:150px;
height:150px;
background:green;
float:left;
}

 

Tudo que estiver entre a tag

e

recebera as características do respectivas regras em CSS.(“caixa” é um valor escolhido como exemplo e pode ser qualquer um, contanto que seja idêntico o da regra que deseja aplicar.)

Conteudo da caixa

 

Class

As classes são muito parecidas com os IDs com uma pequena diferença, elas podem se repetir dentro do documento HTML quantas vezes necessárias, o seletor no formato ID pode ser escrito com ponto(.) seguido do nome que desejar ( .nomedaclasse {} ). Veja o exemplo abaixo para compreender.

.caixa {
width:150px;
height:150px;
background:green;
float:left;
}

Tudo que estiver entre a tag

e

recebera as características do respectivas regras em CSS.(“caixa” é um valor escolhido como exemplo e pode ser qualquer um, contanto que seja idêntico o da regra que deseja aplicar.)

No exemplo que segue abaixo a class=”caixa” foi chamada 3 vezes dentro do documento HTML, algo que não é indicado com IDs, por serem únicas.

Conteudo 1
Conteudo 2
Conteudo 3

 

Tag

Uma das principais características do CSS é o fato de que se pode atribuir estilo as tags em html, simplesmente usando-as como seletores, para usa-las como seletor não necessita do sinal de menor (<) e maior (>), somente o nome da tag como nos exemplos abaixo.

p {
font-size:15px;
}

h1 h2 h3 h4 h5 {
color:red;
}

a {
color:green;
}

 

Nos exemplos acima temos as tags <p>, <h1> até <h5> em uma mesma regra e <a>

 

Declaração

Declaração é a parte da regra que define as características da mesma, é dividida em: propriedade e valor, além de que dentro de uma regra pode haver mais de uma declaração, o que normalmente ocorre. Veja o exemplo abaixo (declaração destacada em vermelho).

body {bakground:red;}

Propriedade

Propriedade é a parte da declaração responsável por definir qual característica do seletor sera alterada.

 

Valor

Valor define como aquela propriedade sera alterada.

 

Lista de propriedades mais usadas

Obs.: 1º Tudo que estiver entre /* e */ em CSS é considerado um comentario, 2º O valor citado é apenas um exemplo  e deve ser substituído pelo valor adequado (citado no comentário a frente da propriedade), pois cada propriedade tem uma variação de valores diferentes.

position:relative;  /* define como sera organizada a posição do elemento, 
sendo divida em relative, absolute, fixed e */

width:150px;  /* define a largura do elemento, o valor pode ser em px ou % 
(em relação ao tamanho da tela) */

height:100px;  /* define o comprimento de um elemento, o valor pode ser do mesmo modo
 que o citado em width (px e %) */

margin:10px 5px 10px 5px;  /* essa propriedade faz com que se crie uma margem invisível
 entre esse elemento e o resto, o valor pode ser escrito em px ou %, além de que a 
margem pode ser criada nos quatro cantos do elemento, por isso quatro valores. 
A ordem do valores corresponde a ordem das margens, topo, direita, baixo e esquerda */

float:left; /* float é uma propriedade de flutuação para direita e esquerda, 
por isso os valores podem ser: right e left */

left:50px;  /* indica qual a distancia um elemento fica do canto esquerdo, 
os valores podem ser em px e % */

top:10px;  /* indica qual a distancia um elemento fica do topo, 
os valores podem ser em px e % */

background:url(); /* propriedade para definir o fundo, os valores são em: 
fixed, scroll, url(), valores em #exadecimal e rgb() */

color:#fff;  /* altera a cor da fonte, os valores podem ser escritos em inglês
(exe: red, blue), exadecimal (exe: #000, #fff) ou em rgb ( exe: rgb(0,0,0), 
rgb(255,255,255) ) */

font-size:valor; /* altera o tamanho da fonte, os valores podem ser esritos em: px, pt, %, em e cm */

 

Em breve criarei continuação deste post, até la!!

HTML básico parte 1

HTML é a abreviação para HyperText Markup Language (Linguagem de Marcação de Hipertexto), e segundo a Wikipédia é a linguagem de marcação utilizada para desenvolver páginas Web. Em geral um documento HTML pode ser interpretado pelos navegadores, como: Mozilla Firefox, Opera, Chrome, Safari,  talvez Internet Explorer (brincadeira, o IE também) dentre muitos outros.

Os navegadores abrem os documentos HTML e interpretam o conteúdo formando a página, na verdade eles organizam os elementos da página e os formatam conforme os códigos (tags), por isso pode ser considerado uma linguagem não compilada, muitos não consideram HTML uma linguagem de programação e sim, apenas uma linguagem de marcação, apesar disso, esse conceito é muito controverso.

Tutorial de HTML

Tags HTML

Tags são são elementos que definem e criam funções dentro de um documento, cada tag tem sua finalidade e parâmetros, veja o exemplo:

To Be Geek   a tag (bold) define que o conteúdo entre elas fiquem em negrito igual abaixo

To Be Geek

Em geral as tags precisam ser abertas e fechadas ( com / ):

(abrindo tag)

(fechando a tag)

 

Parâmetros

Dentro das tags podem conter parâmetros (elementos), que por sua vez aumentam as funcionalidades e características daquela tag.

Veja abaixo:

<p align=”center“>Essa tag “p”cria um novo parágrafo e o parâmetro align=”center” diz respeito ao alinhamento, que nesse caso, sera centralizado.

 

Quando a tag é fechada, ela perde sua finalidade ou seja tudo depois de onde ela foi fechada não sofrerá seus efeitos, tanto da tag como de seus parâmetros. Veja mais um exemplo:

O nome To Be Geek ficará em negrito mas o resto da frase não.

somente o conteúdo entre <b></b> sofre seus efeitos, nada antes dela ser aberta, nada depois dela ser fechada.

Exemplo de como ficará:

O nome To Be Geek ficará em negrito mas o resto da frase não.

 

Tags HTML Essenciais em Um documento

Existem 3 tags consideradas essenciais e que devem estar presente em qualquer documento HTML, no caso são, , e

<html></html> Todo documento deve conter essa tag no começo e sendo fechada no final, pois é ela quem indica onde começa e termina um documento html.

<head></head> Tag responsável pelo cabeçalho do doc., geralmente o conteúdo entre elas não é visível aos usuários.

<body></body> Essa tag define onde começa e termina o corpo da página, todo conteúdo (visível) deve estar entre elas.

Veja o exemplo:

Estrutura básica de um documento HTML

Titulo que irá aparecer na aba do navegador. 
   
     
conteúdo da pagina, desde links, fotos, vídeos, musicas, textos, 
barra laterais, menus etc...
     

 

– HTML

Todas as demais tags e o conteúdo da página devem estar entre

 

<head></head> – Cabeçalho

A tag <head>tem a importantíssima função de criar o cabeçalho do documento, é no cabeçalho onde são colocados as principais informações sobre a página, como: título, descrição, linkagem de arquivos externos (como CSS). Geralmente as informações contidas no cabeçalho não são visíveis ao usuário final, somente para os navegadores, motores de buscas, etc…

Dentro do cabeçalho, ou seja entre<head></head> pode conter outras tags, como:

<title></title> – Título

Tudo escrito entre <title></title> ficará como título da página, aparecendo na aba do navegador.

<link /> – Link

É usado para chamar arquivos externos ao documento, geralmente utilizando algum parâmetro como complemento. essa tag pode ser fechada como no exemplo abaixo, antes do sinal de “>”

rel="stylesheet" type="text/css" href="style.css" />

Nesse caso foi usado a tag junto com o parâmetros rel=””, type=”” e href=””, cada um deles com uma função específica.

  • rel=”valor   esse parâmetro indica características da tag, que seriam atribuída pelo valores (em azul), no caso acima o valor seria stylesheet que indica que é um arquivo contendo códigos em CSS.
  • type=”text/css   indica o tipo do arquivo, nesse caso o valor esta como text/css, sendo do tipo Texto/Css
  • href=”style.css   esse parâmetro é usado para fazer referencia a um endereço de um documento, arquivo ou pagina (href significa hypertext reference, referencia de hyper texto), nesse caso, ele faz referencia a um arquivo(style.css)

 

<body></body> – Corpo

Tudo que fica depois que essa tag é aberta e antes dela ser fechada, será o conteúdo da página, a parte visível, como: textos, links, imagens, vídeos, além disso pode conter outras tags, que vão dar forma a página.

Veja o exemplo:

Tópico 1

   align="center">To be Geek um blog para Geeks
=) 
   

Dentro da tag Body pode conter também alguns parâmetros como:

  • bgcolor=”valor atribui uma cor de fundo à pagina
 bgcolor="red">conteúdo
  • background=”valor atribui uma imagem de fundo à pagina
background="imagen.jpg">conteúdo

 

Mais Tags

– Anchor

Anchor é uma ancora que pode levar a uma outra página, documento ou na navegação no próprio documento, em geral é usada junto com alguns parâmetros.

  • href=”endereço”   usada para fazer referência à um endereço, dessa forma quando usado como parâmetro, faz a ligação com o endereço que esta entre ” “. Logo abaixo o código esta fazendo da frase To Be Geek um link para http://www.2be-geek.com
 href="http://www.2be-geek.com">To Be Geek

To Be Geek

  • name=”valor esse parâmetro cria um ponto ao qual pode ser usado para navegar até la, suponhamos que o site tenha um conteudo muito extenso e que seja necessário uma navegação mais rápidas entre os tópicos, então pode-se marcar os tópicos e criar links em locais estratégicos que levem até o ponto marcado.
name="ponto1">Anchor

Depois de marcado o ponto só é preciso criar links em locais específicos como o de abaixo

href="#ponto1">Vá para o tópico 1

Vá para o tópico 1

 

<p></p> – Parágrafo

Tag usada para criar um parágrafo, pode-se acrescenter parâmetros para aumentar suas funcionalidades, como:

  • align=”valor parametro responsavel pelo alinhamento, podendo ser left (esquerda), right (direito), center (centro) e justify (justificado)
align="right">Texto alinhado a direita

texto alinhado a direita

  • style=”valor”  tag usada para acrescentar CSS em linha.
style="background-color:yellow;"> To Be Geek

To Be Geek

 

<b></b> – Bold

a tag é usada para deixar o texto em negrito.

<b>texto em negrito </b> ou <strong>texto em negrito</strong> (sendo essa ultima a mais recomendada).

 texto em negrito

 

<i></i> – Itálico

Usada para formatar o texto em itálico.

<i>texto em itálico</i>

 texto em itálico

 

<sub></sub> – Subscrito

Subscreve o texto.

Veja como fica o<sub> texto subscrito</sub>

Veja como fica o texto subscrito

 

<sup></sup> – Sobrescrito

Sobrescreve o texto.

Veja como fica o <sup> texto sobrescrito </sup>

Veja como fica o texto sobrescrito

 

<u></u> – Sublinhado

Sublinha o texto.

<u>texto sublinhado</u>

Texto sublinhado

 

<font></font> – Fonte

A tag é usada junto com alguns parâmetros para estilizar textos.

  • size=”valor  responsável pelo tamanho da fonte, variando de 1 a 7.
<font size="6">To Be Geek</font>

To Be Geek

  • face=”valor responsável por selecionar o tipo de fonte do texto.
<font face="arial">To Be Geek</font>

To Be Geek

  • color=”valor indica a cor do texto, podendo ser, em hexadecimal ou pelo nome (exemplo: red, blue, green etc..).
< font color="red" > To Be Geek </font>

To Be Geek

Como ja citado, em uma mesma tag pode-se usar vários complementos juntos, como no exemplo abaixo.

<font size="5" face="arial" color="green">To Be Geek</font>

To Be Geek

 

<big></big> – Big

Usada para aumentar o tamanho da fonte, neste caso, foi usada varias vezes para que ocorra um aumento gradativo da fonte e foi fechada nessa mesma ordem para que ocorra a volta pro estado anterior, até o tamanho normal da fonte.

<big>a<big>a<big>a<big>a</big>a</big>a</big>a</big>a

aaaaaaa

 

<small></small> – Small

Tem um funcionalidade parecida com a tag Big, só que ao contrario, ao invés de aumentar a fonte, ela diminui.

<small>b<small>b<small>b<small>b</small>b</small>b</small>b</small>

bbbbbbb

 

Continuação: