Como alterar a cor da imagem apenas com CSS

Neste post, vou mostrar como mudar (parte da) cor da imagem com CSS puro. Isso é muito útil se você deseja criar um seletor de cores de produto em seu site. Vamos dar uma olhada? 

CSS em Links: Colocar e tirar sublinhado, mudar cor, colocar plano de fundo e bordas

 Aprenderemos como retirar sublinhado, inserir, mudar cor do link, inserir uma cor de plano de fundo, bordas etc. Você verá como essas opções do CSS nos permitirão estilizar nossos links das mais diversas maneiras, ao gosto do desenvolvedor.

Lembrando que links também podem ser vistos como textos, textos com características especiais, mas são textos. Ou seja, também podemos aplicar as propriedades do CSS que aplicamos nos textos.

E é basicamente isso que faremos neste tutorial.
Usar diversas propriedades do CSS nos links, e veremos as inúmeras possibilidades que temos de estilizar os hiperlinks.

Sublinhado em Links: CSS text-decoration

Por padrão, os links que criamos tem um sublinhado. É tanto que, em nosso curso de HTML, todos os links textuais que criamos possuíam o sublinhado.
Obviamente, com o CSS as coisas mudam: podemos fazer o que quiser.

E faremos isso através da propriedade CSS text-decoration.

Assim, para que seus links fiquem sem sublinhado, use o código:

a {
 text-decoration: none;
}

Porém, não é bacana que os links fiquem sem estilo algum, pois irão se parecer simplesmente como o restante do texto.

Assim, um estilo CSS bastante utilizado é aquele de aparecer o sublinhado (underline) no link quando passamos o mouse em cima.
Isso é feito em CSS da seguinte maneira:

a:link {
 text-decoration: none;
}

a:hover {
 text-decoration: underline;
}

Mudando a cor de Links com CSS: color

Outra maneira bem comum que vemos de se estilizar links usando CSS, é fazendo eles mudarem de cor quando passamos o mouse por cima.

Por exemplo, para que seu link seja normalmente azul e vire vermelho que você passar o mouse por cima, utilize o seguinte código CSS:

a:link {
 color: #00F;
}

a:hover {
 color: #F00;
}

Note que estamos utilizando as propriedades do CSS que usamos em textos.
Essa flexibilidade é bem comum no CSS, o que nos permite estilizar muitas coisas, de maneiras totalmente diferentes. Tudo depende de sua criatividade.

Plano de Fundo em Links usando CSS: background-color

Uma outra maneira interessante de estilizar links com CSS, é através da propriedade background-color, que muda a cor do plano de fundo de qualquer elemento HTML.

No caso, vamos mudar a cor de fundo somente do link.
No seguinte código de CSS, o plano de fundo é amarelo naturalmente.
Depois, ao passar o mouse em cima do link, ele se torna preto:

a:link {
 color: #00F;
 background-color: yellow;
}

a:hover {
 color: #F00;
 background-color: black;
}

Bordas em Links com CSS: border

Um maneira bem simples de estilizar links, através de coisas que já estudamos em nossos tutoriais de CSS, é o uso das bordas.

Com bordas, você pode fazer efeitos e de uma maneira simples, que destacam bem seus links.
No exemplo a seguir, a borda aparece ao redor do link, caso você passe o mouse por cima:

a:link {
 text-decoration: none;
}

a:hover {
 text-decoration: none;
 border: solid;
}

Lembrando, que no tutorial sobre bordas, você vai ver que existem diversos tipos de bordas, pode definir sua espessura, cor, se aparecem em todos os cantos, etc.

Criando botões usando CSS em Links

É possível criar botões usando simplesmente estilizando links com propriedades CSS.
O grande segredo daqui são as bordas.

Se lembrar bem, os botões, embora sejam em duas dimensões, passam a sensação de ser algo com profundidade. Isso pode ser conseguir colocando bordas com cores diferentes.

Para fazer o botão que mostramos no início deste tutorial de CSS, colocamos a borda inferior do link com uma cor mais escura. A borda superior mais clara, e as laterais entre uma e outra.
Essa diferença na cor dará o efeito de profundidade.

Quando passarmos o mouse por cima do "botão" (link estilizado), tudo fica da mesma cor, dando a impressão de botão pressionado, veja como fica o código CSS:

a:link {
 background: #B1B1B1;
 color: #FFF;
 text-decoration: none;
 font-weight: bold;
 border-width: 4px;
 border-style: solid;
 border-top-color: #DFDFDF;
 border-right-color: #666;
 border-bottom-color: #333;
 border-left-color: #858585;

}

a:hover {
 background: #B1B1B1;
 color: #FFF;
 font-weight: bold;
 border-color: #B1B1B1;
}

Para entender como simular botões e profundidade, imagine que existe uma luz acima do botão.
Assim, a borda de cima é mais clara, e a borda inferior é escura, pois está na sombra.
As bordas laterais tem uma cor entre sombra e iluminada.

Isso é bem simples de se fazer e entender atualmente, porém, antes do CSS, isso dava uma trabalheira só.
Se usava imagens para simular botões, se colocava animação e efeitos através do JavaScript e outras técnicas mais complexas.

Boa sorte!

HTML5 - Visão geral do HTML5

De acordo com o W3C a Web é baseada em 3 pilares:

• Um esquema de nomes para localização de fontes de informação na Web, esse esquema chama-se URI.
• Um Protocolo de acesso para acessar estas fontes, hoje o HTTP.
• Uma linguagem de Hypertexto, para a fácil navegação entre as fontes de informação: o HTML.

Vamos nos focar no terceiro pilar, o HTML.

 

Hypertexto

HTML é uma abreviação de Hypertext Markup Language - Linguagem de Marcação de Hypertexto. Resumindo em uma frase: o HTML é uma linguagem para publicação de conteúdo (texto, imagem, vídeo, áudio e etc) na Web.

 

O HTML é baseado no conceito de Hipertexto. Hipertexto são conjuntos de elementos – ou nós – ligados por conexões. Estes elementos podem ser palavras, imagens, vídeos, áudio, documentos etc. Estes elementos conectados formam uma grande rede de informação. Eles não estão conectados linearmente como se fossem textos de um livro, onde um assunto é ligado ao outro seguidamente. A conexão feita em um hipertexto é algo imprevisto que permite a comunicação de dados, organizando conhecimentos e guardando informações relacionadas.

 

Para distribuir informação de uma maneira global, é necessário haver uma linguagem que seja entendida universalmente por diversos meios de acesso. O HTML se propõe a ser esta linguagem.

 

Desenvolvido originalmente por Tim Berners-Lee o HTML ganhou popularidade quando o Mosaic - browser desenvolvido por Marc Andreessen na década de 1990 - ganhou força. A partir daí, desenvolvedores e fabricantes de browsers utilizaram o HTML como base, compartilhando as mesmas convenções.

 

O começo e a interoperabilidade

Entre 1993 e 1995, o HTML ganhou as versões HTML+, HTML2.0 e HTML3.0, onde foram propostas diversas mudanças para enriquecer as possibilidades da linguagem. Contudo, até aqui o HTML ainda não era tratado como um padrão. Apenas em 1997, o grupo de trabalho do W3C responsável por manter o padrão do código, trabalhou na versão 3.2 da linguagem, fazendo com que ela fosse tratada como prática comum. Você pode ver:

http://www.w3.org/TR/html401/appendix/changes.html

Desde o começo o HTML foi criado para ser uma linguagem independente de plataformas, browsers e outros meios de acesso. Interoperabilidade significa menos custo. Você cria apenas um código HTML e este código pode ser lido por diversos meios, ao invés de versões diferentes para diversos dispositivos. Dessa forma, evitou-se que a Web fosse desenvolvida em uma base proprietária, com formatos incompatíveis e limitada.

 

Por isso o HTML foi desenvolvido para que essa barreira fosse ultrapassada, fazendo com que a informação publicada por meio deste código fosse acessível por dispositivos e outros meios com características diferentes, não importando o tamanho da tela, resolução, variação de cor. Dispositivos próprios para deficientes visuais e auditivos ou dispositivos móveis e portáteis. O HTML deve ser entendido universalmente, dando a possibilidade para a reutilização dessa informação de acordo com as limitações de cada meio de acesso.

 

WHAT Working Group

Enquanto o W3C focava suas atenções para a criação da segunda versão do XHTML, um grupo chamado Web Hypertext Application Technology Working Group ou WHATWG trabalhava em uma versão do HTML que trazia mais flexibilidade para a produção de websites e sistemas baseados na web.

 

O WHATWG (http://www.whatwg.org/) foi fundado por desenvolvedores de empresas como Mozilla, Apple e Opera em 2004. Eles não estavam felizes com o caminho que a Web tomava e nem com o rumo dado ao XHTML. Por isso, estas organizações se juntaram para escrever o que seria chamado hoje de HTML5.

 

Entre outros assuntos que o WHATWG se focava era Web Forms 2.0 que foi incluído no HTML5 e o Web Controls 1.0 que foi abandonado por enquanto.

 

A participação no grupo é livre e você pode se inscrever na lista de email para contribuir.

Por volta de 2006, o trabalho do WHATWG passou ser conhecido pelo mundo e principalmente pelo W3C - que até então trabalhavam separadamente - que reconheceu todo o trabalho do grupo. Em Outubro de 2006, Tim Berners-Lee anunciou que trabalharia juntamente com o WHATWG na produção do HTML5 em detrimento do XHTML 2. Contudo o XHTML continuaria sendo mantido paralelamente de acordo comas mudanças causadas no HTML. O grupo que estava cuidando especificamente do XHTML 2 foi descontinuado em 2009.

 

O HTML5 e suas mudanças

Quando o HTML4 foi lançado, o W3C alertou os desenvolvedores sobre algumas boas práticas que deveriam ser seguidas ao produzir códigos client-side. Desde este tempo, assuntos como a separação da estrutura do código com a formatação e princípios de acessibilidade foram trazidos para discussões e à atenção dos fabricantes e desenvolvedores.

 

Contudo, o HTML4 ainda não trazia diferencial real para a semântica do código. o HTML4 também não facilitava a manipulação dos elementos via Javascript ou CSS. Se você quisesse criar um sistema com a possibilidade de Drag'n Drop de elementos, era necessário criar um grande script, com bugs e que muitas vezes não funcionavam de acordo em todos os browsers.

 

O que é o HTML5?

O HTML5 é a nova versão do HTML4. Enquanto o WHATWG define as regras de marcação que usaremos no HTML5 e no XHTML, eles também definem APIs que formarão a base da arquitetura web. Essas APIs são conhecidas como DOM Level 0.

Um dos principais objetivos do HTML5 é facilitar a manipulação do elemento possibilitando o desenvolvedor a modificar as características dos objetos de forma não intrusiva e de maneira que seja transparente para o usuário final.

 

Ao contrário das versões anteriores, o HTML5 fornece ferramentas para a CSS e o Javascript fazerem seu trabalho da melhor maneira possível. O HTML5 permite por meio de suas APIs a manipulação das características destes elementos, de forma que o website ou a aplicação continue leve e funcional.

 

O HTML5 também cria novas tags e modifica a função de outras. As versões antigas do HTML não continham um padrão universal para a criação de seções comuns e específicas como rodapé, cabeçalho, sidebar, menus e etc. Não havia um padrão de nomenclatura de IDs, Classes ou tags. Não havia um método de capturar de maneira automática as informações localizadas nos rodapés dos websites.

 

Há outros elementos e atributos que sua função e significado foram modificados e que agora podem ser reutilizados de forma mais eficaz. Por exemplo, elementos como B ou I que foram descontinuados em versões anteriores do HTML agora assumem funções diferentes e entregam mais significado para os usuários.

O HTML5 modifica a forma de como escrevemos código e organizamos a informação na página. Seria mais semântica com menos código. Seria mais interatividade sem a necessidade de instalação de plugins e perda de performance. É a criação de código interoperável, pronto para futuros dispositivos e que facilita a reutilização da informação de diversas formas.

 

O WHATWG tem mantido o foco para manter a retrocompatibilidade. Nenhum site deverá ter de ser refeito totalmente para se adequar aos novos conceitos e regras. O HTML5 está sendo criado para que seja compatível com os browsers recentes, possibilitando a utilização das novas características imediatamente.

fonte: www.microsoftvirtualacademy.com

PHOTOSHOP

VAMOS TRADUZIR NOSSO PHOTOSHOP CS3?: Hoje irei mostrar como fazer a tradução do photoshop CS3 do inglês para o português, não que isso seja um problema para usuários mais experi...

Software - JavaScript

JavaScript fica ainda mais rápido no Internet Explorer 10

O Internet Explorer não é um navegador tão querido pelos desenvolvedores web. A Microsoft está tentando mudar essa história e trabalhou em inúmeras otimizações, inclusive na velocidade de renderização das páginas: a versão 10 ganhou um motor JavaScript ainda mais rápido.

A nona versão do Internet Explorer já não é mais tão problemática quanto as anteriores. No blog de desenvolvedores do Internet Explorer, a Microsoft explicou as várias mudanças que realizou no motor Chakra, responsável por processar códigos em JavaScript. As otimizações são essenciais porque, além de o motor Chakra processar páginas da web, ele é responsável por processar os elementos gráficos dos aplicativos Metro.

Internet Explorer 10 roda bem mesmo aplicativos mais pesados. Pelo menos é o que a Microsoft diz.

O objetivo foi deixar o navegador mais rápido em sites mais modernos (coisa que a concorrência já faz). Enquanto há uma década eram muito comuns páginas simples, sem muitos recursos, hoje temos várias aplicações que fazem uso intenso de AJAX e HTML5. Angry Birds e Cut The Rope, por exemplo, rodam direto do navegador e se beneficiam de aceleração por hardware para exibir animações fluidas sem depender de plugins de terceiros.

Existem duas características principais no Chakra. A primeira é tentar “adiar” tarefas de renderização de páginas. Assim, é possível processar o resto da página quando o computador do usuário estiver menos ocupado, melhorando a responsividade do navegador e evitando travamentos indesejados. A segunda é aproveitar ao máximo o hardware do usuário, utilizando todos os núcleos do processador e instruções específicas. No exemplo, eles citam as extensões SSE2, que foram introduzidas no Pentium 4 em 2000. Se determinadas instruções não estiverem disponíveis, o trabalho é feito via software, mas de maneira mais lenta.

Funcionamento do motor Chakra

A Microsoft também fez melhorias no garbage collector (ou coletor de lixo), responsável por limpar periodicamente elementos da página que não estão sendo mais utilizados, reduzindo o consumo de memória RAM. Isso é necessário porque os programas em JavaScript não removem explicitamente os elementos antigos. Se o garbage collector não existisse, os navegadores consumiriam ainda mais memória. E se o garbage collector for lento demais, você perceberá vários engasgos nas animações das páginas.

O Tecnoblog fez alguns testes com o benchmark SunSpider 0.9.1, que executa vários códigos JavaScript no navegador, e os resultados foram bem satisfatórios. Em uma máquina com Windows 8 Release Preview e processador Intel Core i3-390M, o Chrome 21 demorou 251,7 ms para processar tudo. O Firefox 15 fez o trabalho em 258,8 ms e o Internet Explorer 10 foi o melhor, com apenas 192,4 ms (desktop) e 205,7 ms (Metro).

Por Paulo Higa

DUVIDAS PARA UTILIZAR O PHP?

O que você precisa?
Se o seu servidor suporta PHP você não precisa fazer nada.

Basta criar alguns arquivos. Php no seu diretório web eo servidor irá analisá-los para você. Porque é livre, a maioria dos hospedeiros web oferecem suporte PHP.

No entanto, se o servidor não suporta PHP, você deve instalar o PHP.

Aqui está um link para um tutorial bom do PHP.net sobre como instalar o PHP5: http://www.php.net/manual/en/install.php

download PHPBaixar PHP gratuitamente aqui: http://www.php.net/downloads.php

Baixar Banco de Dados MySQLBaixar MySQL gratuitamente aqui: http://www.mysql.com/downloads/

Baixar Apache ServerBaixar Apache gratuitamente aqui: http://httpd.apache.org/download.cgi

CURSO PHP: Instalar Apache+PHP+MySQL no Windows 7/Vista/XP

O Apache é o servidor mais popular da web, foi criado em Abril de 1996 com o intuito de ser um servidor HTTP gratuito para sistemas UNIX e Windows. O objetivo do projeto é de fornecer um servidor seguro, eficiente e extensível que forneça serviços de HTTP em sincronia com os padrões HTTP.

O intuito desse post é de tonar você capacitado a instalar o Apache, o PHP, o MySQL, e o phpMyAdmin no Windows 7, Vista ou XP sem a utilização desses sistemas prontos, como o WampServer, XAMPP, PHP Triad. A vantagem de instalar tudo separado é que você não fica sujeito as configurações que os programas já impõem, ou muitas vezes podem até não funcionar corretamente como deveriam.

Pré-requisitos

• Apache HTTP Server (2.2.14) – Download Apache
• PHP 5.3.1 – Download PHP 5
• MySQL 5.1.43 Download MySQL 5
• phpMyAdmin 3.2.5 Download phpMyAdmin

Passo 1: Instalação do Apache 2.2

Eu resolvi instalar o Apache em uma pasta chamada Webserver, mas você pode instalá-lo onde quiser, se quiser seguir a minha lógica basta criar uma pasta chamada Webserver na raiz do seu HD, ficando da seguinte forma: C:\Webserver. Após incie o instalador do Apache, a primeira tela de instalação é semelhante a essa:

Basta seguir os passos, e você irá chegar a seguinte tela de configuração. Aqui é onde iremos efetuar algumas configurações do servidor, basta preencher o primeiro campo com o valor localdomain, o segundo campo com localhost e o terceiro um e-mail que desejar. É recomendável que você deixe o Apache rodando na porta 80, não que isso seja obrigatório, você pode alterar caso queira. Basta após clicar em Next:

Chegamos no passo onde iremos escolher o tipo de instalação, eu selecionei Custom pois quero personalizar a pasta de instalação do Apache:

Por padrão, o Apache será instalado na pasta Arquivos de Programas > Apache Software Foundation > Apache 2.2, mas vou instalá-lo dentro da minha pasta Webserver, ficando da seguinte forma:

Basta agora clicar em Install e a instalação será iniciada:

Após o término da instalação, você verá que apareceu na sua System Tray (aqueles ícones que ficam ao lado do relógio do Windows) um novo ícone, o Apache Monitor:

Através dele temos acesso ao status do Apache, onde podemos obter informações se ele está rodando, podemos também parar o sevidor, reiniciá-lo e iniciá-lo. Basta clicar com o botão direito no ícone e escolher Open Apache Monitor:

Já que o Apache está rodando corretamente, vamos testá-lo na prática, abra o seu browser e digite o seguinte na barra de endereços: http://localhost/. Você verá uma mensagem semelhante a abaixo:

As versões mais antigas do Apache exibiam outras informações, mas a 2.2.XX mostra só isso. As páginas ficam por padrão dentro da pasta “htdocs”, no diretório onde o Apache foi instalado. No meu caso ela fica na seguinte pasta: C:\Webserver\Apache2.2\htdocs. Caso você queira agora pode substituir o arquivo “index.html” pelo arquivo do seu site e também pode adicionar alí pastas e subpastas representando outros diretórios de seu site. Por exemplo, se existir uma pasta chamada wordpress dentro do diretório htdocs: C:\Webserver\Apache2.2\htdocs\wordpress, ela deve ser acessada dessa forma: http://localhost/wordpress/.

Se você ao acessar localhost em seu browser e ele ficar buscando o servidor, abrir uma página de busca, ou até mesmo retornar Servidor não encontrado, atente-se se o Apache está rodando corretamente e o mesmo foi iniciado. Se você efetuou esses passos e mesmo assim ele não está funcionando, instale-o novamente seguindo os passos acima que o problema pode ser resolvido.

Até agora nosso servidor lê somente HTML puro. Porém, é diferente a forma de acesso do endereço “http://localhost/index.html” de “C:\Webserver\Apache2.2\htdocs\index.html”. No primeiro caso, o navegador solicita a página ao servidor “localhost” (que é o seu computador), recebe a página do servidor, armazena a mesma no cache, e só depois então a exibe. Ele trata como se fosse um site que estivesse realmente hospedado em algum servidor da Internet. Como o servidor do site está no seu próprio PC, trata-se então de uma Intranet. No segundo caso, você está acessando o arquivo diretamente do seu HD. O navegador pode até armazenar algum dado no cache, mas não há nenhuma comunicação com qualquer servidor. Ele lê o arquivo como qualquer programa leria qualquer arquivo.

Configurações extras para o Apache

Após a instalação do Apache, vamos efetuar algumas configurações adicionais simples, para isso, vamos alterar o arquivo httpd.conf que está localizado dentro da pasta conf no diretório de instalação do Apache. Cuidado ao editar esse arquivo, pois qualquer erro e seu servidor pode parar de funcionar. Para habilitar o uso de URL’s amigáveis no servidor, você deve habilitar o módulo de mod_rewrite, bastando localizar a linha:

view sourceprint?

1.#LoadModule rewrite_module modules/mod_rewrite.so

E substituir a mesma por:

view sourceprint?

1.LoadModule rewrite_module modules/mod_rewrite.so

Vamos definir agora também quais arquivos o Apache irá servir quando um diretório for requisitado. Procure a seguinte linha:

view sourceprint?

1.DirectoryIndex index.html

E substituir a mesma por:

view sourceprint?

1.DirectoryIndex index.html index.php

Passo 2: Instalação e Configuração do PHP 5.3.1

A partir de agora vamos proporcionar mais interatividade ao nosso servidor com a instalação do PHP, a versão que vamos utilizar aqui é a 5.3.1. O PHP é um módulo para o Apache. Ao processar uma página PHP, o Apache envia a página ao módulo PHP, que a processa e devolve o resultado ao Apache, que por sua vez, envia ao browser que fez a solicitação. Para isso, a instalação do PHP consiste basicamente em colocar os arquivos numa pasta, e configurar o Apache para que “enxergue” os módulos PHP e chame-os sempre que encontrar um arquivo .php.

As telas de instalação poderão ser diferentes em outras versões, mas as idéias serão basicamente as mesmas:

Basta agora você ir seguindo os passos até chegar a tela onde você escolherá a pasta de instalação do PHP. Como já fiz anteriormente com o Apache, também vou personalizar a pasta do instalação do PHP, que será a seguinte: C:\Webserver\PHP5:

Nesse passo, ele irá pedir o tipo de servidor você está utilizando, basta escolher o Apache 2.2.XX:

Nesse próximo passo, ele irá solicitar o local dos arquivos de configuração do Apache. Localize a pasta “conf”, dentro da pasta onde foi instalado o Apache, senão a configuração não será automatizada e você terá que efetuar a mesma manualmente:

O próximo passo é onde você escolhe quais extensões quer instalar junto com o PHP, escolha as que julgar necessário ou simplesmente deixe como está:

Ao final do processo, caso esteja tudo OK, basta agora clicar no botão install:

Se tudo ocorreu bem até aí, nenhuma mensagem de erro será exibida. Basta agora você reiniciar o Apache e as páginas .php serão processadas e entregues corretamente ao browser. Ainda não foi configurado um servidor de banco de dados, então apenas os recursos diretos do PHP funcionarão (e os dos outros módulos pré-instalados do Apache). Um ótimo meio de testar o PHP e ver diversas informações do servidor é criar uma página PHP, com o seguinte conteúdo:

view sourceprint?

1.< ?php phpinfo(); ?>

Salve a mesma dentro da pasta htdocs com o nome info.php e então acesse a página pela seguinte URL: http://localhost/info.php.

Você terá acesso agora a uma página com todas as informações do PHP e os componentes instalados:

Configuração do PHP

A configuração do PHP envolve a edição do arquivo php.ini, na pasta onde o PHP for instalado, portanto, mãos a obra. Uma configuração útil é a ativar o uso de delimitadores < ? ... ?>, muito usados por serem mais simples. No arquivo php.ini, localize a linha que começa com short_open_tag e troque seu valor Off para On (Fique atento as letras maiúsculas e minúsculas). Ela deve ficar dessa forma:

view sourceprint?

1.short_open_tag = On

Caso você deixe Off, scripts PHP que iniciem com

Permitir estilo ASP

view sourceprint?

1.asp_tags = On

Ative este item apenas se você gostar de usar as tags no estilo ASP, como em , caso contrário, pode deixar desativado.

Habilitar a exibição de erros

view sourceprint?

1.display_errors = On

Por questões de segurança esse item vem com valor Off. Sua função é a de imprimir erros de sintaxe ou funcionamento do PHP na página. Por questões de segurança, é bom deixá-lo em Off, pois entre as mensagens de erros muitas vezes vêm nomes de arquivos, caminhos locais, e até a senha do banco de dados, se tiver algum erro de sintaxe justamente na declaração da mesma. Mas em contrapartida, para aprender PHP, é recomedável deixá-lo em On.

Passo 3: Instalação e Configuração do MySQL 5.1

O MySQL é um famoso gerenciador de Banco de Dados. Nesse tutorial iremos utilizar a versão 5.1.43 essential. Existe um outro pacote maior que vem com algumas coisas a mais, como documentação, mas para nosso tutorial resolvi optar pela versão mais leve.

A interface de instalação é semelhante a do Apache e a do PHP, não existe muito segredo, basta ir seguindo os passos que serão mostrados abaixo. Ao executar o instalador, você terá acesso a uma tela semelhante a essa:

O próximo passo é onde iremos selecionar o tipo de instalação: Típica, Completa ou Customizada. Eu optei pela instalação customizada pois quero personalizar a pasta de instalação do MySQL:

Localização da pasta de instalação do MySQL:

Estando tudo Ok, basta clicar em Install:

Após o final da instalação, vamos efetuar as configurações do MySQL, basta seguir os passos que serão mostrados aqui:

A seguir escolha configuração detalhada:

Escolha Developer Machine:

Escolha Multifunctional Database:

No passo ao que se refere a instalação do InnoDB, deixe como o caminho Installation Patch:

Deixe selecionado Decision Support (DSS)/OLAP:

Nesse passo, não se esqueça de deixar selecionado a caixa “Adicionar excessão ao Firewall”:

Selecione Best Support for Multilingualism:

A próxima opção é de incluir o caminho do MySQL na variável de ambiente “Path” do Windows. Deixe-a selecionada pois assim você pode chamar os executáveis do MySQL a partir de qualquer prompt, em qualquer pasta:

No próximo passo deve-se definir a senha de root, ele é o administrador do MySQL. Caso você já programe em PHP já sabe que para acessar um banco de dados é necessário fornecer um nome de usuário e senha válidos para aquele banco. Você poderá usar o “root” e a senha definida aqui, ou outra conta. Mas tenha em mente que para criar outras contas você precisará do root, e para alterar as configurações ou criar novos bancos de dados, também. Por isso é importante ter essa senha guardada em um local seguro:

No próximo passo basta você clicar em execute para que o MySQL dê início ao processo de configuração:

Caso tudo tenha corrido OK, você verá uma tela como essa, caso tenha algum problema, efetue as configurações novamente:

Caso queira checar se o serviço do MySQL está rodando corretamente no Windows, basta fazer o seguinte. Abra um prompt de comando, e digite: mysql -u root – p, ele irá pedir a senha de root que você havia configurado anteriormente, basta então digitar a mesma:

Após digite status e pronto, você terá informações sobre o MySQL:

Problemas de conexão dos scripts PHP com o MySQL

Alguns usuários de Windows 7, inclusive eu, andaram passando por problemas de conexão dos scripts PHP com o banco de dados. Se por um acaso você verificar que o serviço de MySQL está rodando corretamente, seu script PHP também está OK e mesmo assim ele não consegue conectar no banco de dados, aqui vai a solução. Verifique o arquivo hosts do Windows, ele fica localizado em: C:\Windows\System32\drivers\etc, abra o aquivo hosts e descomente a linha que contém o seguinte conteúdo:

view sourceprint?

1.127.0.0.1 localhost

Bastando somente você remover o sinal de #. Observe na screenshot abaixo como ele deve ficar:

Esse problema ocorre devido ao conector nativo do PHP. A partir da versão php5.3 é utilizado o cliente mysql nativo mysqlnd, não se usa mais o libmysql.dll. Esse novo conector não reconhece named pipe, por isso, deve-se especificar no arquivo hosts do Windows.

Passo 4: Instalação do PhpMyAdmin

Após efetuar o download do PhpMyAdmin, descompacte o mesmo e renomeie a pasta para phpmyadmin. Após, coloque a pasta dentro do diretório htdocs da pasta de instalação do Apache. Para acessar agora o PhpMyAdmin basta você digitar o seguinte: http://localhost/phpmyadmin/, entre com o usuário root e senha que você configurou para o mesmo na instalação do MySQL e pronto, você já tem acesso ao PhpMyAdmin.

Se você quiser pular esse passo de toda vez ao acessar o PhpMyAdmin ter de se logar, basta fazer o seguinte. Na pasta do mesmo abra o arquivo config.sample.inc.php e o renomeie para config.inc.php. Agora basta substituir a linha $cfg['Servers'][$i]['auth_type'] = ‘cookie’; por:

view sourceprint?

1.$cfg['Servers'][$i]['user'] = 'root';

2.$cfg['Servers'][$i]['password'] = ' '; // Digite aqui a senha de root

3.$cfg['Servers'][$i]['auth_type'] = 'config';

Pronto, agora toda vez ao acessar o PhpMyAdmin ele irá pular a tela de autenticação pois o usuário e senha já estão cadastrados no arquivo de configuração.

fonte:http://www.pinceladasdaweb.com.br