A cada evento que surge, ou notícia semelhante aos acima citados, é gerada uma enorme preocupação tanto em desenvolvedores web, quanto em empresas que tem seus sites padraonizados, mesmo para diversos browsers.
Com o recente lançamento do IE8, esta preocupação voltou a ser um dos tópicos de discussão e conversas no mercado TI, induzindo os desenvolvedores a reavaliar os websites atualmente em desenvolvimento, ou os que já estão disponível na web, para se adequarem a um novo browser.
Porém, uma simples solução pode ser suficiente para resolver possíveis problemas de formatação e compatibilidade com o browser IE8, sendo necessário apenas com a inserção de uma meta tag:
meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7"
É possível que ocorram mesmo com a inclusão desta tag, alguns problemas no site, porém, para a maioria dos casos, esta solução será suficiente para permitir uma noite tranquila de sono.
O .htaccess é um arquivo de configuração distribuído (já que pode ser usado em vários diretórios), sendo seu uso relacionado a webservers em geral, principalmente o Apache. Um arquivo, contendo uma ou mais diretivas de configuração, quando colocado dentro de um diretório, aplica essas diretivas a ele e a todos sub-diretórios, tendo essa nova configuração prioridade sobre a estabelecida para este diretório no httpd.conf.
Lembrando que você pode também mudar o nome do .htaccess para .config, por exemplo, através da diretiva AccessFileName do Apache (necessário permissão para isso).
Entre as várias utilidades desse arquivo de configuração (.htaccess), vamos destacar algumas abaixo, com relação a segurança de páginas ou sites na internet:
AUTENTICAÇÃO
Digamos que você tenha criado um Administrador para seu site e este administrador esteja no endereço www.seudominio.com.br/admin e, além disso, precise proteger seu Administrador de modo fácil, seguro e rápido. Isso poderia ser feito da seguinte maneira:
AuthType Basic AuthName "TITULO DA JANELA" AuthUserFile "/home/usuario/.htpasswds/public_html/admin/passwd" require valid-user
Na configuração acima, é estabelecido um tipo de autenticação no qual aparece uma janela solicitando usuário e senha para acessar determinada área (para trancar ou proteger a pasta admin , basta colocar o arquivo .htaccess com as configurações acima na respectiva pasta). Na linha 2, pode-se colocar um nome ou título para a janela que irá aparecer para o usuário. Na linha 3, está o endereço do arquivo que contém os usuários e senhas dos quais têm acesso permitido à área. Esse arquivo (passwd) não pode ser acessado externamente (quando configurado corretamente) e o seu conteúdo é usuario:6YNFCJWSDGpA2 . Repare que a senha (que vem depois dos dois pontos e é usuario ) está encriptada para maior segurança.
INTRANET
Outra utilidade bastante interessante do .htaccess é quando se tem uma Intranet rodando em um servidor web (que não seja interno a rede da empresa) e precisa-se permitir o acesso de determinados IPs (ou faixas de IPs) a essa Intranet. Pode-se, então, usar o seguinte código em um arquivo .htaccess e colocá-lo no diretório onde está sua Intranet:
<> Order Deny,Allow Deny from all Allow from 192.168.
O código acima faz com que apenas os IPs da rede local, ou seja, os IPs do tipo 192.168.x.x , onde x representa um número de 0 a 255, seja permitido. Dessa forma, todos os outros IPs serão negados e nenhum IP fora da rede será aceito onde possuir o arquivo .htaccess. Na primeira linha, é definida uma página que será exibida àqueles que não possuem permissão para acessar a área (nesse caso a página de erro 403, ou acesso negado, será exibida). PÁGINAS DE ERROS
As páginas de erros que são exibidas, como quando não se acha um arquivo ou página no servidor e exibe uma página de Não Encontrado , podem ser personalizadas através do .htaccess. Essas páginas são importantes e deve-se dar uma atenção especial a elas, já que uma tentativa de ataque ou uma intenção maliciosa podem ser descobertas através de uma monitoração constante de logs ou avisos, gerados com o auxílio de linguagens dinâmicas (PHP, Python, etc). O código abaixo mostra como se pode personalizar ou alterar essas páginas de acordo com suas necessidades ou interesses.
No código acima, foram personalizados os erros mais comuns (note que aos erros são associados números), e existem vários erros, como os erros de número 400, 401, 402 que são associados aos erros de cliente , e os erros acima de 500 que são associados aos erros de servidor . Na primeira linha, é definida uma página para quando o usuário não tem permissão de acesso. Na segunda, quando um usuário tenta acessar um arquivo ou diretório inexistente no servidor, será exibida a página não_encontrado.php . E, por último, será exibido a página erro_interno_servidor.php quando acontecer um erro interno no servidor. Com esse recurso, você pode criar uma página PHP (por exemplo) que envia um e-mail e/ou armazena em algum banco de dados as informações do usuário que acessou tal página e, caso perceba algo suspeito, tomará providências de modo a corrigir uma suposta falha ou problema de segurança.
MOD_REWRITE
O mod_rewrite é um módulo do Apache que permite reescrever regras para tornar as URL s Amigáveis. Assim, pode-se atrair mais visitantes ao seu site (os endereços do seu site irão se tornar mais relevantes nos motores de busca) e ainda tornar seus sites mais seguros. Abaixo, iremos mostrar como:
A primeira linha é a responsável por ativar a regra que altera as URL s (endereços dos sites). A segunda e a terceira fazem com que essa regra não seja aplicada a outros arquivos e diretórios respectivamente. Na última linha, é exibida a regra de reescrita onde qualquer string (.*) após a pasta, onde estiver o .htaccess, será interpretado por index.php passado na variável pagina ; ou melhor, quando se digitar um endereço do tipo www.seusite.com.br/secao/subsecao/ , o Apache entenderá que você digitou www.seusite.com.br/index.php?pagina=secao/subsecao/ . Dessa maneira, você cria os links de seu site para o primeiro endereço citado, escondendo dessa forma a linguagem da página e as variáveis de include, evitando que usuários mal intencionados possam injetar códigos maliciosos (usando, por exemplo, o XSS).
As utilidades do arquivo .htaccess são inúmeras e nesse tutorial foi priorizado o uso para tornar as páginas ou sites mais seguros. Obviamente, para tornar uma página segura, deve-se priorizar uma programação bem feita das páginas e uma configuração correta dos serviços e/ou protocolos do servidor, mas o uso do .htaccess pode servir como uma ferramenta de ajuda e as vezes mais do que isso.
É importante ressaltar que o uso de .htaccess não deve sobrepor ao uso correto (configurações corretas) do arquivo principal httpd.conf do Apache pelas razões aqui citadas de segurança , por razões de segurança e desempenho principalmente.
Neste POST irei sair um pouco da área de desenvolvimento e boas práticas para poder ajudar muitos que talvez possam encontrar o mesmo problema que eu.
Recentemente mudei do Velox para o Virtua, e encontrei um pequeno obstáculo para conseguir utilizar o virtua através do roteador Linksys WRT54G, porém, com seguindo os passos abaixo consegui fazê-lo funcionar sem muita dificuldade.
Passo a Passo para instalar o virtua no WRT54G:
1 - Desligue o modem do virtua (o que a NET instala na sua casa) e o WRT54
G (Modem da Linksys)
2 - Conecte o cabo de rede do modem do virtua (o que a NET instala na sua casa), e a outra ponta na porta WAN do wrt54g conforme figura abaixo:
3 – Conecte outro cabo de rede na porta 1 a 4 do wrt54g e a outra ponta no computador, conforme figura abaixo:
4 - Ligue o roteador WRT54G (não ligue o modem do Virtua ainda. Isto será feito em outro passo próximo ao fim). Quando o computador tiver encontrado a rede, acesse o browser que tiver instalado no seu computador (Se não tiver instale o Firefox, que é muito melhor que o IE), digite na barra de endereços http://192.168.1.1.
5 – Irá aparecer um campo de login e senha. Se você nunca tiver entrado na administração do roteador provavelmente deverá deixar o campo “login” em branco, e na senha coloque "admin" e tecle enter.
6 – Após entrar com o login e senha, na pagina que abriu do Linksys, na aba “Configurar”, deixe a opção "Configuração Automática - DHCP" escolhida, coloque um nome do Rorter diferente do que veio de fabrica (normalmente vem como “WRT54G”). No meu exemplo abaixo eu coloquei como “Roteador”. E no campo “Nome do domínio” ou “Host Name” coloque qualquer coisa diferente do padrão. No meu exemplo abaixo eu coloquei “modem”.
7 – Nesta mesma janela, no fim da página clique em “Save settings” ou “Guardar definições”.
8 – Irá abrir uma janela para confirmar, e basta clicar para ser redirecionado novamente para a página de administração do roteador. Quando voltar a pagina novamente, clique na aba “status” ou “Estado”. Ao clicar, irá abrir uma pagina com dois botões DHCP Release e DHCP Renew, as informaçoes do ip deve estar em todas 0.0.0.0, conforme imagem abaixo:
9 - Ligue o modem e aguarde ele sincronizar com a central.
10 - Depois que a luz “cable” ou “link” (isto pode variar de modem a modem) estiver acessa totalmente, clique no botao DHCP Renew, e depois clique no botão “Refresh” ou “Atualizar” logo abaixo, ate que ele mude o ip de 0.0.0.0 pra 2xx.xxx.xxx.xxx ou 189.xxx.xxx.xxx (depende da região). Pode ser que mesmo clicando em “Atualizar” o IP não seja renovado, assim como aconteceu no meu caso. Então simplesmente eu cliquei em “Libertar DHCP” e depois cliquei em “Renovar DHCP”. Logo depois, quando cliquei em “Atualizar”, pronto.... Funcionou corretamente
Apenas se não funcionar corretamente siga o passo 11 abaixo:
11 - Se nos números IP ele carregar como 192.168.100.xxx e após alguns minutos clicando em ‘DHCP Renew” ou “Renovar DHCP” não mudar pra outro IP, desligue o modem e ligue-o novamente, e na página do Linksys, clique em “DHCP Release” ou “Libertar DHCP” e depois repita o passo 10.
Espero poder ter ajudado a resolver o problema que muitos tiveram, e qualquer dúvida estou a disposição para tentar ajudá-los.
Não deixe de visualizar os demais POSTS desse blog, pois apesar de estar iniciando agora, pretendo colocar alguns POSTS bem interessantes.
Observamos que, a cada site visitado, a cada código analisado, podemos nos convencer que boas práticas e organização no código tem sido uma das menores preocupações. Não me refiro tanto a códigos de programação, já que existem várias convenções sobre formatação destes, mas principalmente quando tratamos de formatação de layout através de CSS.
Podemos acreditar que alguns motivos sejam os principais responsáveis por isso:
1 - A preocupação de finalizar logo o trabalho, achando que posteriormente poderemos rever o código e ajustar de uma melhor forma;
2 - A falta de experiência do desenvolvedor;
3 - A intenção de realmente complicar o máximo possível o código para torná-lo menos entendível para outros desenvolvedores, caso o cliente não continue a utilizar seus serviços.
Vamos analisar cada uma destas questões:
1 - Pode estar certo que isto não acontecerá. Você não irá ajustar posteriormente o código, por vários motivos. Quando você finalizar o projeto e o cliente lhe pagar, é muito improvável que você continue a trabalhar no projeto dele, a não ser que ele continue lhe pagando através de um serviço de manutenção. Também, é muito improvável que você abra mão de um novo projeto que está a sua frente pensando - "Infelizmente não poderei pegar esse projeto de R$ 5.000,00 porque tenho que organizar o código do outro site que finalizei". E também, um outro motivo é que o envolvimento com diversas outras atividades posteriores a finalização da formatação do layuout, lhe trará dificuldade de lembrar-se facilmente de onde se aplicam determinadas partes do código, e isso poderá lhe causar problemas ao tentar reajustar o código.
2 - Muitas vezes a inexperiência elimina a preocupação de tentar deixar o código o mais organizado possível, tanto para sua utilização futura, quanto para outros desenvolvedores. Faltas de comentários no código, referenciando cada área a que se aplica o código; falta de ordenação nos elementos de formatação, dificultando encontrar de forma simples e fácil o que se quer alterar.
3 - Este é um erro fatal, pois se o cliente não deseja fazer algum tipo de manutenção com você, não espere que complicar ao máximo a vida dele caso ele tenha que fazer com outra pessoa uma alteração, vá lhe ajudar muito a conseguir um projeto futuro. Ao contrário, você estará contribuindo fortemente para que o próximo desenvolvedor fale tão mal do seu código que o cliente vai passar a ter uma aversão imensa ao seu trabalho, por melhor profissional que seja, e, as possíveis indicações que poderiam surgir a partir dele, esqueça.
Bem, conforme disse, existem diversas convençõe e boas práticas de desenvolvimento para diversas linguagens de programação, porém, padrões de formatação de códigos CSS dificilmente encontramos. Desta forma, vou apenas demonstrar de que forma costumo desenvolver meu código, quando é necessário que eu desenvolva algo:
Cógido do arquivo formatacao.css:
--- /*************************************************************/ --- /* --- --- --- --- Área de formatação geral --- --- --- */ --- /************************************************************/
--- /***************************************************************/ --- /*--- --- --- --- Área principal do site --- --- --- --- --- */ --- /**************************************************************/
--- --- /*************************************************************/ --- --- /* --- --- --- Área do centro do site --- --- --- --- --- */ --- --- /************************************************************/
Bem, a princípio talvez não consiga ver nada diferente, porém, eu procurei estabelecer meus padões de organização da forma mais clara possível, onde qualquer desenvolvedor diante do código consiga entender sem nenhuma dificuldade. Algumas convenções de organização que procurei seguir foram:
1 - Iniciar cada seção do meu código com um comentário perceptível, onde logo de cara qualquer um consiga visualizar e entender que se trata de um delimitador de área para o código;
2 - Procuro sempre desenvolver meu código de CSS com a mesma estrutura do XHTML do site, sendo inicialmente os elementos comuns, depois as áreas específicas, pois primeiro eu desenvolvo um container, e dentro dele tem um topo, uma área de menu, uma área de sub-menu e um rodapé;
3 - Uma outra coisa a ser observada é a identação das área de formatação. Por exemplo, se você observar o CSS acima, verá que o sub-menu está identado em relação ao menu, da mesma forma que provavelmente estará no código XHTML. Dessa forma, fica mais fácil navegar dentro da estrutura do CSS também;
4 - Tento dar uma ordenação alfabética aos elementos e das classes. Se puder observar, e eu lhe pedir para achar o color do id container, você provavelmente não terá dificuldade para isto; e se eu lhe pedir para achar o tamanho de fonte utilizada no sub-menu, conseguiria sem dificuldades? Se você puder observar, os elementos dentro de cada id ou classe estão em ordem alfabética, então, em qualquer parte do código a estruturação seguirá a mesma, e se por acaso você tiver muitos elementos dentro de um id, não terá dificuldades para encontrá-lo, pois da mesma forma que você sabe que a letra w vem depois da letra c, você saberá que o color estará antes do width.
Com respeito a este último paragráfo, nem sempre é possível fazer isso, então na medida do possível eu procuro deixar apenas os elementos de maior prioridade a frente, e logo após continuo com a minha regra de ordenação normalmente.
Espero que com este post tenha lhe ajudado a ajustar alguns conceitos de formatação de código e fica a minha sugestão de padronização, caso já não tenha achado a sua.
Existe uma grande discussão hoje sobre a importância de códigos válidados nos padrões W3C, porém, apesar de todas estas preocupações é notório o desconhecimento de muitos desenvolvedores de que nem sempre um código válido é um código semântico.
Como podemos entender isto? Vejamos na prática.
Podemos supor inicialmente que o código abaixo descreve uma página com um topo, uma área central e um rodapé. Na área central serão exibidos 3 parágrafos, e no rodapé, alguns links de navegação.
A pergunta que surge é: O código abaixo está correto?
A resposta a pergunta é: Sim, está correto, pois este código poderá ser validado de acordo com os padrões do W3C, porém, o ponto que queremos destacar é: É um código com uma semântica correta?
A resposta a pergunta acima é: Não, não está semântico, pois os elementos do código não estão sendo utilizados da melhor forma para que a "máquina" entenda de forma clara o que se refere esta parte do código. Podemos comparar isto a fornecer um livro em um idioma espanhol para alguém que fala português; é bem possível que se consiga fazer a leitura com algum esforço, mas a probabilidade de que não seja totalmente compreendido é grande.
De que forma poderíamos então exibir este código validado e semanticamente correto? Vejamos uma das formas abaixo:
Não estou dizendo através deste post que esta é a única forma correta de desenvolver este código de uma forma válida e com uma semântica correta, porém, é uma das formas de se fazer isso.
Fica como sugestão sempre fazer esta pergunta ao desenvolver suas aplicações:
