20 dicas experts de web design

Confira alguns conselhos essenciais em HTML5, CSS, Responsivo e SEO

Um dos grandes desafios em trabalhar com  web é acompanhar as novidades tecnológicas que aparecem e desaparecem, se renovam e superam em uma velocidade impressionante. Há tantas ferramentas e plataformas que se multiplicam todos os dias, que é difícil conhecer todas (talvez humanamente impossível também). Mas estar atento às dicas essenciais já basta para se manter atualizado o suficiente. Confira algumas dicas de web design que se destacam entre a multidão de novidades:

HTML 5

01- Escolha um estilo de código

O HTML5 permite que a marcação seja escrita em maiúsculas, minúsculas ou uma mistura delas. Além disso, ninguém é obrigado a criar todos os atributos em elementos como <img>. Você pode até omitir o atributo type quando usar <style>, <link> ou <script>. O estilo é uma escolha sua, mas se está trabalhando com uma equipe, verifique se todos estão em sintonia. E ainda há um número de elementos e atributos que estão ultrapassados em HTML5, como <big>, <center> e <font>. Melhor deixá-los para lá.

02 – Leia as specs

As especificações são uma parte importante. A versão de HTML5 é mantida tanto pela WHATWG (o principal padrão de especificação e a W3C (HTML5). Se você não tem certeza sobre qual especificação ler, o especialista Oli Studhilme escreveu um pouco sobre o assunto no HTML5 Doctor (leia aqui). Ler as specs é a única maneira de entender, de fato, alguns elementos e APIs. Elas também contribuem para uma leitura rápida sobre os fundamentos para projetar HTML5.

03- Planeje sua marcação

Depois de ler as especificações, você entenderá melhor a estrutura de um documento, com os Document Outlines (saiba mais aqui). Pense neles como o equivalente às visualizações de documentos do Microsoft Word. Usar o conceito de documento outline vai ajudar a criar uma marcação bem estruturada. No processo de criação do design, é possível criar uma lista alinhada à página, o que vai obrigá-lo a pensar os níveis de títulos que devem ser usados e quais elementos serão colocados em cada lugar. Por isso, ter blocos de conteúdo organizados faz toda a diferença.

04- Escolha o elementos certo

Falamos antes sobre elementos que estão ultrapassados na quinta versão do HTML. Mas não se preocupe, ainda há 30 novos elementos que foram adicionados e muitos outros que ainda serão definidos. Por isso, pode ser difícil escolher o elemento certo para cada projeto. Para resolver voltamos à premissa de usar um elemento para descrever o significado do conteúdo, e não a sua aparência. Pense com cuidado sobre o significado disso antes de adicionar elementos. Consulte de novo o HTML5 Doctor para ajudar a escolher os certos.

05- Guerra de codecs

Você já deve ter ouvido falar que o HTML5 vai matar o Flash. Isso tem se espalhado largamente por conta do vídeo e áudio em HTML5. Não ter que depender de plug-ins para executar conteúdo de mídia é um grande passo para uma web aberta, mas ter que lidar com tecnologias competitivas não é. Quando criar conteúdo multimídia para o seu site codifique seus arquivos múltiplas vezes e inclua opções para browser com capacidades inferiores. Um artigo de Kroc Camen chamado ‘Video for Everybody” (Vídeo para todos) é um ótimo começo sobre como lidar com isso (acesse o artigo aqui).

CSS

01- Crie soluções independentes

Desenvolva qualquer efeito de CSS, 3D, rolagens ou transições fora do documento principal. Assim, é possível criar uma solução individual e organizada que poderá até ser usada depois em outros projetos. Fazer experimentos desorganizados dificulta a verificação caso alguma coisa não esteja funcionando como esperado.

02- Ordem relevante

Todo mundo sabe que tentar editar códigos CSS de outra pessoa é complicado. Sempre use múltiplas linhas CSS com as declarações ordenadas por relevância. Dessa forma, seu código poderá ser entendido por você ou qualquer outro envolvido no projeto.

03- Saiba seu papel

Mantenha classes bem focadas nas suas funções. Cada classe deve ter uma única responsabilidade, totalmente contida dentro dela. Deixe todos os atributos envolvidos nessa função em vez de tentar atribuir múltiplas responsabilidades.

04- Nomes

Use hífen nos seletores de nomeação. Por exemplo: isto-eh-bom{}isto_eh_ruim{}, istoEhMuintoRuim{}. Isso ajuda a manter o seletor de nome legível e geralmente mais simples.

05- Prefixos

Os prefixos de fabricantes de navegadores devem desaparecer quando o CSS3 se tornar um padrão e for adotado pelos browsers. Por enquanto, use todos os prefixos onde são aplicáveis. Sempre termine com uma declaração genérica, sem prefixo.

Responsivo

01- Significado

Por definição, um web site responsivo usa layouts flexíveis e media queries para moldar e adaptar-se ao seu ambiente de visualização. É importante notar que o web design responsivo não é nem um nem outro. Você deve encontrar harmonia em ambas as técnicas e quando o fizer, irá criar layouts responsivos da melhor maneira.

02- media queries

Os seus breakpoints de media query devem ser escolhidos de acordo com as necessidades do seu site. Há muitas resoluções de telas e não se deve incluir os breakpoints para todas as variações existentes. Há muitas resoluções de telas na tentativa de realizar isso. Comece com resoluções bem básicas de dimensões e adicione a elas breakpoints de acordo com as necessidades do seu projeto.

03- Mobile-first

Em resumo, mobile first significa desenvolver para telas pequena primeiro e depois para desktops. Isso vai contra a abordagem tradicional no qual web designers precisam ter um site no desktop e depois cortar alguns bits para conseguir um site mobile. As restrições de plataforma fazem com que você trabalhe a hierarquia do conteúdo, então essa abordagem é perfeita para design responsivo.

04- Derrube pixels

Elimine atributos com declarações fixas de pixel em HTML e no seu CSS. Imagens, em particular, precisam carregar e a melhor forma de fazer isso é declarar a porcentagem de tamanho no elemento <img>. Também é sábio criar classes CSS com tamanho em percentual, então você pode simplesmente incluir <img> ou outras tags  HTML.

05- Confie no JavaScript

Às vezes você tem pouco controle sobre a marcação do seu site. Isso só não acontece quando você está construindo um tema para CMS como WordPress, por exemplo. Escrever um script para remover um tamanho fixado ou atributos de estilo de tags HTML é fácil e rápido em um jQuery. Use e abuse. Isso vai garantir que o seu conteúdo será fluído.

SEO

01- Tags únicas

Use tags de títulos únicos e descrições para cada página do seu website, o que é óbvio para muita gente, mas é importante. Tente incluir suas palavras-chave de SEO enquanto cria textos. Mantenha as tags de títulos com no máximo 70 caracteres e as descrições cm pelo meno 155. Não use meta palavras-chave, elas ajudam concorrentes a encontrarem suas palavras.

02- 301 redirecionamentos

Se mudar para um novo websites ou URL use o recurso 301 redirecionamentos para novas páginas. O mesmo vale para quem tem múltiplos domínio: use apenas um como principal e redirecione os outros. Isso vai gerar backlinks e evitar a duplicação. Serviços com o Open Site Explorer ou Majestic SEO podem ajudar.

03 – Link interno

Faça bom uso de links internos. Quando se cria um bom visual para um site, às vezes, esquecemos quais páginas são importantes e como referenciá-las. Garanta que seus links internos irão suportar as páginas mais importantes.

04- Use microdata

Tire vantagem de cada pedaço do Google usando microdados. Já viu estrelas de classificação em uma lista orgânica? Esse é um exemplo ótimo que pode melhorar suas taxas de cliques. Você pode acompanhar estimativas, vídeos, pessoas, produtos e muitas outras coisas. Viste schema.org para saber mais.

05- Pensamento social

Mecanismo de busca estão valorizando sinais sociais, então abuse de redes sociais. Tenha certeza de que sue conteúdo será fácil de compartilhar e promover. Concentre-se em conseguir compartilhamento e retuítes, em vez de apenas conseguir mais seguidores e “curtir”.

Confira outras centenas de dicas na edição 146 da Revista W!

Data: nov. 2013
Fonte: revistaw.com.br

Criando um HotSite com GIMP

Criando um HotSite com GIMPO Gimp, GNU Image Program, é o editor de imagens principal do projeto GNU. Além de uso em design gráfico ele também pode ser uma mão na roda na hora de desenvolver projetos para a Web.

Para demonstrar alguns recursos interessantes deste excelente Software Livre, vamos criar um hotsite, um tipo de página muito comum em ações de propaganda e excelente modelo para página de aterrissagem – aquelas que recebem visitantes que acabaram de clicar em um anúncio. Os hotsites são essencialmente visuais, por isso boas imagens, um editor gráfico profissional e muito talento fazem grande diferença na hora de produzir este tipo de trabalho. Como nosso objetivo é aprender recursos do Gimp, vamos usar um layout bem minimalista.

CLIQUE AQUI para acessar a matéria completa.

Data: nov. 2013
Fonte: sejalivre.org

Auditando Aplicações: Análise Estática de Códigos

Cada vez mais serviços estão sendo direcionados para plataforma web, sendo assim acabamos ficando dependentes ainda mais destas aplicações. Estes sistemas tem que ser cada vez mais onipresentes (quero acessá-los de qualquer lugar – cloud) confiáveis (quero que ele faça o que ele precisa fazer) e ágeis (quero que façam isso rápido!).

Qual a consequência disto? A consequência imediata é: sistemas cada vez mais complexos. Quando digo complexo não me refiro tão somente a complexidade do código fonte ou o seu desenvolvimento, mas também a complexidade inerente ao serviço em si. Cada vez mais APIs, cada vez mais plugins, cada vez mais sistemas interconectados e interdependentes.

Uma vez que a complexidade entrou na equação ela traz o seu efeito colateral: situações inesperadas.  Quando temos um ciclo de vida em nossa aplicação que não contempla o devido cuidado com segurança, temos implicações de diversos níveis. A maior delas é que em geral problemas que a primeira vista são simples e pequenos, acabam se tornando  verdadeiros pesadelos.

Análise Estática do Código consiste basicamente em antever problemas de segurança efetuando uma auditoria no código, sem executá-lo. Isso pode se tornar uma tarefa muito trabalhosa, especialmente quando o desenvolvedor não tem experiência com segurança e se não existe um framework de desenvolvimento seguro em uso no projeto.

As aplicações web são alvos constantes de ataques, quase que 24 horas por dia. Temos estatiscas de que muitas vezes, 60% do tráfego diário que chega a um website é gerado por bots que em sua grande maioria estão procurando por scripts vulneráveis para efetuar ataques, comprometer o servidor e a aplicação e fazê-la parte de sua rede de zumbis. Não seria nada legal ter seu e-Commerce em uma lista de hosts que estão disseminando Malwares para os usuários. Isto pode comprometer gravemente seus negócios.

Para auxiliar desenvolvedores neste árduo processo de análise estática, temos algumas aplicações muito interessantes e que podem realmente trazer a tona, muitas vezes problemas de segurança que não eram imaginados durante o desenvolvimento. Talvez aquele “warning” que seu compilador cuspiu na tela e você pensou “ah mas é apenas um warning, não tem nada de grave ai..” esconda muito mais do que imagina J

RIPS – Analisador Estático de vulnerabilidades em código fonte de Scripts PHP

RIPS é uma ferramenta escrita em PHP para encontrar vulnerabilidades em aplicações PHP utilizando o conceito de análise estática do código. Utilizando tokenização e parseando todos os arquivos de código PHP, ele consegue transformar seu código fonte PHP em program model e detectar sinks sensíveis (pontecialmente funções vulneráveis) que poderiam ser manipuladas por um userinput (influenciada por um usuário malicioso) durante o fluxo do programa. Além disto, baseado  na estrutura de output de uma vulnerabilidade encontrada, RIPS também oferece um framework integrado de code audit  para que você possa fazer uma análise manual.

Entre algumas das features apresentas pelo RIPS temos:

RIPS consegue identificar por padrão diversas vulnerabilidades em sua aplicação, em sua grande maioria as listadas no OWASP Top 10 são identificadas. Segue abaixo uma pequena lista das principais vulnerabilidades identificadas pela aplicação:

  • Code Execution
  • Command Execution
  • Cross-Site Scripting
  • Header Injection
  • File Disclosure
  • File Inclusion
  • File Manipulation
  • LDAP Injection
  • SQL Injection
  • XPath Injection

A interface de auditoria de código do RIPS consiste de algumas funcionalidades muito interessantes, entre elas podemos citar:

  • Estatísticas referentes ao Scans e as vulnerabilidades da aplicação
  • Linhas de código vulneraveis são agrupadas
  • Descrição das Vulnerabilidades com exemplo de código, PoC e patch
  • Engine que permite a criação do Exploit para explorer a vulnerabilidade encontrada
  • Exibição gráfica de arquivos (conectada pelos includes)
  • Exibição gráfica de funções (conectadas pelas calls)
  • userinput list (parámetros da aplicação)
  • visualização do código fonte com destaque em funções e parametros

Entre muitas outras que permitem que você faça o debug da aplicação utilizando inclusive expressões regulares. Efetuando a análise estática do código com RIPs, você consegue rapidez ao executar a análise (executar uma análise estática manualmente pode ser dolorosamente demorado).  Você consegue identificar blind/non-blind SQL exploitation, detectar backdoors em seu código entre outras vantagens.

Aplicação sendo analisada – Temos os resultados Preliminares com o número de funções vulneráveis.

Visualização gráfica dos Arquivos  – Interligação ocorre através dos Includes.

Engine permite criar Exploits para gerar PoC da vulnerabilidade.

Download + Instalação

O Download pode ser feito a partir do site http://rips-scanner.sourceforge.net

Para utilizar o RIPs você precisa primeiramente de um webserver local com suporte a PHP (tendo em vista que você é um desenvolvedor PHP, você já deve ter um J ).

Feito isto basta baixar a ultima versão estável , extrair os arquivos em seu Document Root do servidor web e acessar a interface, disponível em: <http://ip_servidor/rips>, e iniciar as análises.

Data: out. 2013
Fonte: y2h4ck.wordpress.com

Conheça o Andrubis, uma solução para executar Apps Android de forma simples em uma sandbox

Anubis é um projeto on-line, que foi desenvolvido pelo Laboratório de Sistemas de Segurança Internacional, e se concentra na análise de binários para os mais diversos tipos de sistemas operacionais. A área de segurança on-line, foi primeiro fornecendo capacidades de análise executáveis ​​do Windows PE, mas a partir de meados de 2012, começou a apoiar os apps Android também.

O módulo Android, que vem sob o codinome Andrubis, oferece a seus usuários uma maneira simples de executar aplicativos Android em uma sandbox em pleno funcionamento, que faz vários testes e gera um relatório detalhado para o arquivo APK carregado. Cada relatório é dividido nas seguintes categorias:

1. Informações gerais; 2.Static Analysis Report

Atividades:

  • Serviços
  • Receptores de radiodifusão
  • Permissões necessárias
  • Permissões utilizadas
  • Características
  • URLs.

3. Dynamic Analysis Report: os relatórios estão disponíveis em ambos os formatos HTML e XML. Captura de dados PCAP também são fornecidos para download.

Com informações de Net-Security e Under-Linux.

Data: out. 2013
Fonte: revista.espiritolivre.org

A importância da linguagem Python para profissionais de segurança

07-06-2013_python-logo-master-300x282

De acordo com algumas observações elementares e outras mais relevantes feitas por Adrian Birsan, pesquisador de segurança do InfoSec Institute, a linguaguem Python é bastante valorosa e agrega um conhecimento muito grande a todos os que se destinam a estudá-la, e posteriormente, colocar em prática esse conhecimento que passaram a adquirir.

Como muitos de nós somos sabedores, Python é uma linguagem de programação orientada a objeto interativo. Ela é muito fácil de aprender e é uma linguagem de alto nível, além de ser extremamente poderosa. Python pode ser executada em Windows, Linux, UNIX, Mac OS X e está livre para usar (mesmo para fins comerciais), uma vez que é baseada em uma licença open source. Ela pode ser usada para escrever ferramentas e scripts personalizados para fins especiais, ao realizar a avaliação de um aplicativo de segurança.

Programação e Disponibilidade de Scanners

Existem scanners de vulnerabilidade comerciais disponíveis no mercado, que podem ser utilizados para a descoberta de vulnerabilidade. No entanto, tais scanners de vulnerabilidade têm suas próprias limitações e até mesmo os scanners mais avançados, por certas vezes, não são capazes de fornecer uma cobertura completa. Isso faz com que o trabalho de um testador de penetração torne-se um pouco mais difícil. Este é o momento onde os scripts / ferramentas personalizadas surgem. Eles ajudam a preencher as lacunas criadas pelo scanner, já que eles são personalizados para atender a aplicação de destino.

Deve-se notar aqui, que todas as ferramentas personalizadas escritas para finalidade específica usando linguagens como Python, não devem ser um substituto para scanners de vulnerabilidade, e, idealmente, devem ser utilizadas para além desses scanners, com a intenção de obter os melhores resultados.

Importância das Funcionalidades de Python para os Pentesters

O objetivo deste artigo é apresentar aos testadores de penetração de aplicações Web com Python e explicar ao mesmos como Python pode ser usado para fazer solicitações HTTP personalizadas – que por sua vez, podem ser expandidas para o desenvolvimento de scripts / ferramentas personalizadas que podem ser desenvolvidas para condições especiais, onde os scanners falharem. Os leitores serão introduzidos em bibliotecas, que podem ajudar um testador de penetração a fazer solicitações HTTP personalizadas, contando com a utilização do Python.

Configurando o Ambiente

Neste artigo, Birsan não irá entrar em detalhes sobre a configuração do ambiente. Se você é um usuário de Linux ou Mac, as chances são altas de que você não precisará instalar Python, uma vez que normalmente ele vem pré-instalado. Para verificar se o Python está instalado em seu sistema, inicie o prompt de comando e digite “python”; se Python vier realmente pré-instalado, o interpreter vai mostrar imediatamente.

Os usuários do Windows podem fazer o download do instalador do URL acima mencionado, e instalar o Python. Para tornar ainda mais fácil o uso de Python, os usuários do Windows podem adicionar Python para o path do sistema, editando uma variável de ambiente. Uma vez feito isso, os usuários podem simplesmente sair do prompt de comando – independentemente do diretório de trabalho atual e ainda serem capazes de invocar o interpreter Python.

Módulos Python para Solicitações HTTP

Python tem vários módulos que podem ser usados ​​para gerar solicitações HTTP personalizados. Nós vamos cobrir dois desses módulos que podem ser usados ​​para o desenvolvimento de scripts personalizados , e pode disparar as nossas cargas , juntamente com a realização das mesmas ações que um testador de penetração realiza manualmente – a única diferença sendo , isso é feito por um script em vez de um manual tentativa .

httplib

Este módulo foi renomeado para httplib.client no Python 3; no entanto uma vez que neste artigo está sendo usada a versão 2.7 como exemplo, o módulo será mantido mesmo como httplib. Normalmente, este módulo não é usado diretamente, mas ao invés do módulo urllib, ele é usado internamente para fazer solicitações HTTP. No entanto, os usuários interessados ​​podem sempre usá-lo.

Para podermos enviar pedidos personalizados, é necessário seguir os seguintes passos:

1. Importar a biblioteca – Antes de utilizar uma biblioteca, é preciso importá-la. Uma vez que neste caso, vai ser utilizada a biblioteca httplib para enviar solicitações HTTP e receber as respostas de volta, é preciso importá-la.

2. Criar uma conexão – Uma vez importada, é possível começar a usá-la imediatamente. Dessa forma, é necessário criar um objeto de conexão em primeiro lugar. Isto pode ser conseguido usando o método httpConnection().

3. Enviar um pedido HTTP – até agora, nenhum pedido HTTP foi enviado. Para fazer isso, é preciso usar o método request (). Isto é, quando o pacote HTTP que foi criado for enviado pela rede para o servidor web de destino, utilizando o método passado como um argumento (no nosso caso GET) .

4. Obter uma resposta HTTP – Agora que já foi enviado o pedido, podemos usar getresponse () para obter a resposta do servidor. Este método irá retornar um objeto de resposta HTTP de volta, e a partir do momento em que ler, vai enviar a saída gerada pelo servidor.

urllib2

urllib2 é um pouco diferente da biblioteca httplib quando se trata de criar e enviar solicitações HTTP. Nesse caso, não há a necessidade de abrir uma conexão e, ao invés de importar, nós podemos fazer um pedido diretamente. Isto é muito mais simples quando comparado com httplib. Sendo assim, sugere-se que os usuários façam uso de urllib2 como é recomendado até mesmo pela própria comunidade Python.

Ressaltando que os leitores devem passar a documentação do Python, para entender quais as funções são suportadas pelo módulo urllib2 no sentido de explorar todo o potencial desta biblioteca, e utilizá-lo durante a criação de suas próprias ferramentas ou scripts. Na sequência, vem uma ferramenta de injeção SQL de amostra que foi criada apenas para fins de demonstração. Ela atinge a página de login do site e injeta um “simple payload”:

1. import urllib

2. import urllib2

3. location = “http://test_target.site/login.aspx”

4. values = {“username”:”‘”,”password”:”password”,”btnSubmit”:”Login”}

5. data = urllib.urlencode(values)

6. req = urllib2.Request (location,data)

7. response = urllib2.urlopen (req)

8. page_data = response.read()

9. print page_data

Facilidade na Projeção de Ferramentas Personalizadas

O script acima é apenas para mostrar a facilidade com que é possível criar ferramentas personalizadas. Além disso, esse script está longe de ser perfeito e vai precisar de muita modificação antes de ser utilizado na prática. Ele só aciona um pedido, enquanto que na vida real a ferramenta deve disparar várias solicitações por iteração sobre a “payload list”. Dessa forma, ele fica como uma espécie de “exercício” para os leitores a percorrer bibliotecas e as funções que ele suporta, para entender como eles podem criar suas próprias ferramentas.

Trabalhando com Cookies e Headers HTTP

A ferramenta da vida real também terá que cuidar do processo de gerenciamento de sessão e, portanto, precisa também lidar com os cookies e outros headers HTTP como referências, tipos de conteúdo, dentre outros elementos. Birsan disse ainda que também precisará iterar sobre a lista de URLs repetidamente, até que todas as nossas cargas sejam disparadas, uma por uma, para cada parâmetro, a fim de assegurar a cobertura.

Considerações Executivas

Python é uma linguagem fácil de aprender, que pode ser muito útil para os testadores de penetração criarem suas ferramentas personalizadas. Assim, os usuários podem criar códigos reutilizáveis ​​usando orientação a objetos do Python, que pode ajudá-los a criar classes que podem ser tanto herdadas quanto estendidas. Python não só pode ser usado para scripting rápido para alcançar pequenas tarefas de automação, mas também para criar vulnerabilidades de classe empresarial, nos processos de digitalização do cotidiano.

Com informações de Net-Security e Under-Linux.

Data: out. 2013
Fonta: revista.espiritolivre.org