Microformatos

Microformatos foram criados para adicionar semântica ao documento HTML isso é feito usando atributos específicos como class, rel e ver, os microformatos usam como base os web standarts. Com uso de microformatos fica mais fácil para  determinados programas como por exemplo o outloock de extração de informações como detas horários, e-mail , endereços.  

Microformatos surgiram devido a necessidade de resolver problemas específicos, para serem o mais simples possível, colocando os humanos como prioridade ao invés da maquina,  Reutilizar blocos de código quando necessário utilizados dentro dos padrões para web, e a aplicação em  blocos e trechos especóficos.

Existem dois tipos principais de microformatos o hcard e o hcalendar. O hcard  é uma marcação semântica que serve para publicar informações de contato, seja de pessoas ou de empresas  como por exemplo um cartão de visitas, segue os padrões do Vcard.  O hcalendar também é uma marcação semântica porém como o nome diz serve para publicar informações como datas e horários.Existem diversas ferramentas online que ajudam o usuário a decodificar um microformato.

Exemplo de código hcard

<div class=”street-adress”> rua dos bobos numero 0</div>

  <span class="locality">cidade</span>

  <span class="region">estado</span>

  <span class="postal-code">CEP</span>

Exemplo de codigo hcalendar

<div class=“vevent”>

                <h1 class=“summary”>Evento de anime qualquer</h1>

                <p>o evento vai acontecer nos dias <time datetime="2014-05-30" class="dtstart"> 30 </time> a <time datetime=                 "2013-06-01" class="dtend"> 01 junho  de 2014 </time>              em <span class= "location"> São Paulo </span> e contou  

                (<a class="url" href=“http://www.eventodeanimequalquer.com/”>leia mais</              a>)

</div>

 nesse post o usuário irá aprender como utilizar o hcardcreator disponível no site http://microformats.org/code/hcard/creator

Esta ferramenta possui um designer simples e intuitivo enquanto o usuário digita ele vai automaticamente formando o código e mostra uma prévia de como vai ficar.

A imagem abaixo mostra a parte onde o usuário deve inserir o conteúdo que quer que seu código possua. O botão redefinir limpa todos os campos.E o botão build it  deve ser apertado quando  tudo estiver devidamente digitado nos campos.

A próxima imagem mostra o campo onde o código é definido automaticamente pelo programa, para incorporá-lo ao site do usuário basta apenas copiar o código criado na aba “CODE”,  e incorporá-lo ao código HTML do web site do usuário.

Código gerado pelo site:

<div id="hcard-nome-nome-do-meio-sobrenome" class="vcard">

 <a class="url fn n" href="http://www.site.com">  <span class="given-name">nome</span>

  <span class="additional-name">nome do meio</span>

  <span class="family-name">sobrenome</span>

</a>

 <div class="org">empresa</div>

 <a class="email" href="mailto:emeil@qualqueremail.com">emeil@qualqueremail.com</a>

 <div class="adr">

  <div class="street-address">nome da rua e numero</div>

  <span class="locality">cidade</span>

  <span class="region">estado</span>

  <span class="postal-code">CEP</span>

  <span class="country-name">País</span>

</div>

 <div class="tel">(ddd)000 000</div>

<div><span class="category">alimentos</span></div><p style="font-size:smaller;">This <a href="http://microformats.org/wiki/hcard">hCard</a> created with the <a href="http://microformats.org/code/hcard/creator">hCard creator</a>.</p>

</div>

Este site http://www.microform.at/  serve para descodificar os microformatos para que os usuários possam por exemplo adicionar o contato a sua agenda

A imagem abaixo mostra o layout do site  que ajuda o usuário a adicionar o contato de um determinado site a  sua agenda. No campo verde deve-se inserir o site onde está o contato.

Em Type deve-se selecionar o tipo de microformato utilizado no site, e em outpout pra que tipo de dado o usuário quer converter o código.  

Neste exemplo escolhi um site com hcard e pedi para que os dados de saída fossem HTML(microdata) que serve para a agenda do Windows. Ao clicar em submit um arquivo é gerado e é automaticamente baixado para o seu computador.

Ao abrir o arquivo gerado pela ferramenta microfor.at no Windows 7 a agenda do prorpio Windows já da ao usuário opções de adicioná-lo aos contatos.

Designer Responsivo

Designer responsivo elabora sites que forneçam uma ótima experiência de visualização, fácil leitura e navegação. Para diversos dispositivos. Na pratica é a técnica usada para criar sites que se adaptem a diversos dispositivos (PC, tablet, celular, etc...) .

Um site  responsivo se adapta ao ambiente de visualização usando grades proporcionais e fluídas  imagens flexíveis, e mídia queres   Css3.

Grade fluida basicamente é o conceito que requer que as dimensões dos elementos sejam definidos por unidades relativas como porcentagens.

Media queries permitem que a página use diferentes regras de estilo CSS com base nas características do dispositivo onde o site será exibido.

 Media Types

Eles definem pra que tipo de mídia um  código é destinado, porém não são mais tão utilizados devido a variedade de tipos de media existente hoje, são eles:

·  All: Para todos os dispositivos.

·  Braille: Para dispositivos táteis.

·  Embossed: Para dispositivos que imprimem em braile.

·  Handheld: Para dispositivos portáteis, geralmente com telas pequenas e banda limitada.

·  Print: Para impressão em papel.

·  Projection: Para apresentações como PPS.

·  Screen: Para monitores ou dispositivos com telas coloridas e resolução adequada.

·  Speech: Para sintetizadores de voz. As CSS 2 tem uma especificação de CSS chamada Aural, onde podemos formatar a voz dos sintetizadores.

·  Tty: Para dispositivos que possuem uma grade fixa para exibição de caracteres, tais como: Teletypes, Terminais e também dispositivos portáteis com display limitados.

·  Tv: Para dispositivos como televisores, ou seja, com baixa resolução, quantidade de cores e scroll limitados.

O grande problema com essas definições é que, por exemplo, um Iphone  apesar de ser um dispositivo portátil não é um handheld.

Media Queries

A solução pra esses problemas foi a criação dos media queries,  eles definem condições especificas, que caso aprovadas vão ser renderizadas. Para tanto utilizam operadores lógicos,  or ,para usar diversas mídias com o mesmo código pode ser substituído por “,”  , only, mostra apenas em determinada mídia,  e not, negação, :

Exemplo:

<style  type=”text/css”>

@media all and (not color) {

Body {background-color:gray}

}

 </style>

No código acima foi definido  que pra dispositivos que não possuam cores o plano de fundo será cinza.

Media Features

Media fetures  servem para definir as especificações da exibição do código css. Principais características definidas em media features:

·  width largura.

·  height Altura.

·  device-width largura relativa.

·  device-height altura relativa.

·  orientation varia entre portrait(retrato) e landscape(paisagem).

·  aspect-ratio, razão de aspecto.

·  device-aspect-ratio, razão de aspecto do dispositivo.

·  color descreve o numero de bits por componente de cor de dispositivo de saida.

·  color-index , descreve o numero de entradas na tabela de pesquisa de cores do dispositivo.

·  monochrome, monocromático.

·  resolution resolução em dpi.

·  scan descreve o processo de digitalização de dispositivos de saída de TV aceitando os valores progressive ou interlace.

·  grid usado para consultar se o dispositivo de saída é grid ou bitmap se o dispositivo de saída é baseado em grid o valor será 1 caso contrário o valor será 0.

exemplo para três diferentes tipos de telas

<!DOCTYPE html>

 <html lang="pt-br">

<head>

<style type="text/css">

 body { padding: 15px;

 background:#0099FF;

 font-family:sans-serif }.

 .teste{ border: solid 1px #999; 

 padding: 5px 10px;

 margin: 40px; }

 @media screen and (max-width: 600px) {

 .um { background: white; }

 }

 @media screen and (min-width: 800px) {

 .dois { background: green; }

     }

 @media screen and (min-width: 600px) and (max-width: 800px) {

 .tres { background: red; }

 }

 </style>

 </head>

 <body>

 <h1> teste resolução diferente  </h1>

 <p>Mude o tamanho do seu navegador para ver as mudanças.</p>

  <div class="teste um">esta linha fica branca quando a resolução maxima é 600px</div>

 <div class="teste dois">essa linha fica verde quando a resolução minima é 800px</div>

 <div class="teste tres">Esta linha fica vermelha quando a resolução está ente  600px e 800px</div>

  </body>

</html>

Taquigrafia CSS

Taquigrafia CSS

O  uso de taquigrafia facilita a escrita de um CSS (Cascading Style Sheets) limpo,ou seja menos código, o que facilita a manutenção, e faz com que o carregamento da página fique mais rápido.

Background: essa  propriedade pode ser dividida em cinco conforme o codigo abaixo:

<html>

<head>

<style>

body{Background-color: #ff22ff;

Background-image: url(doc.jpg);

Background-repeat: no-repeat;

Background-position: top left;

Background-attachment: fixed;}

</style>

</head>

<body>

</body>

</html>

Utilizando a noção de taquigrafia é possível escrever isso em uma única linha sem alterar o resultado ex:

<html>

<head>

<style>

body{Background: #ff22ff url(doc.jpg) no-repeat top left fixed;}

</style>

</head>

<body>

</body>

</html>

 Border , pode ser definida quanto a espessura, estilo e cor, conforme  código abaixo :

Border: 1px Black solid;

Se o atributo cor for escrito em hexadecimal , o seu valor pode ser abreviado se os 6 valores hexadecimais forem iguais. EX: a cor branca  #FFFFFF,  pode ser abreviada para #FFF.

A propriedade fonte ( font ) assim como a background também pode ser escrita de maneira simplificada. Ex:

Escrita normal:

<html>

<head>

<style>

p{font-weight: bold;

font-variant:normal;

font-size: 30px;

font-family: serif;

font-style:italic;}

</style>

</head>

<body>

<p> Leny Silva</P>

</body>

</html>

Com o uso de taquigrafia:

<html>

<head>

<style>

p{font: italic bold normal 30px serif;}

</style>

</head>

<body>

<p> Leny Silva</P>

</body>

</html>

Margin e padding

 Essas propriedades dizem respeito a posicionamento da  página  e são definidas por top, right, bottom, left.

E pode ser escrita em uma linha seguindo essa ordem.

Margin: 2px, 3px, 5px, 1px;

Behavioral Targeting

 Behavioral Targeting é uma estratégia que estuda o comportamento das pessoas. Surgiu nos Estados Unidos, onde profissionais de marketing estudavam o comportamento de um subgrupo e montavam estratégias de vendas.

Na internet, as empresas utilizam os rastros deixados pelas pessoas quando visitam os sites. Essas informações são salvas em bancos de dados e são analisadas para criar estratégicas especificas, de vendas ou anuncios.

Uma das estratégias utilizado por sites de vendas é destacar produtos que tenham mais o perfil do visitante. Se ele costuma acessar uma determinada informação, como por exemplo filmes de ficção cientifica , o site destacará produtos com essa temática, melhorando a experiencia do usuário e aumentando sua chance de venda.

Varias empresas tem ferramentas dedicadas nessa área de Behavioral Targeting. entre as brasileiras podemos citar a Navegg e BTBuckets. E entre os sites internacionais encontram-se a Simpli.fi, e LucidMedia.

WikiLeaks e Julian Assange

WikiLeaks é uma organização sem fins lucrativos que libera documentos confidenciais de diversos governos, principalmente do exercito americano em suas operações no Iraque e no Afeganistão. É administrado por The Sunshine Press e sua primeira publicação oficial ocorreu em 2007.
ficou conhecido por publicar materiais confidenciais de governos e empresas. O maior destaque do site, que rendeu sua fama atual foi quando divulgou um vídeo de um ataque de helicóptero americano na ocupação do Iraque, na qual morreram 12 pessoas, entre elas 2 jornalistas da agencia de noticias Reuters. Outra repercussão do site foi a divulgação dos manuais para o tratamento de prisioneiros na prisão militar americana de Guantánamo.


Entre seus fundadores estão, jornalistas, matemáticos, tecnólogos de empresas e  dissidentes chineses.  O site foi montado em vários pacotes de programas, incluindo MediaWiki, Freenet, Tor e PGP, para garantir a confidencialidade das postagens de fontes anônimas. Ele é mantido por doações,de diversas empresas como:  Los Angeles Times e a National Newspaper Publishers Association.

Julian Paul Assange, é um de seus fundadores,  um jornalista, escritor e ciberativista australiano.
 Principal porta-voz do site WikiLeaks. Começou cedo em atividades de crimes digitais, foi declarado culpado por 24 acusações de hacking e foi liberado sob fiança por bom comportamento.

Por causa do site  WikiLeaks,  recebeu diversos prêmios. Amnesty International UK Media Awards de 2009 por divulgar os assassinatos extrajudiciais no Quênia. Index on Censorship do Economist de 2008. Sam Adams Award de 2010. E em 2010 foi votado como das 50 figuras mais influentes  pela New Statesman, ficando em 23º 

Em 2010, após vazar os documentos sobre as operações no Afeganistão, a justiça da Suécia expediu dois mandados de prisão contra Assange, um por estrupo e outro por agressão sexual.  Diversas teorias de conspiração surgiram envolvendo, autoridades suecas e os governos americanos, que processaram o site WikiLeaks por espionagem, ao mesmo tempo  as autoridades inglesas, que anunciou a decisão de extradição de Julian Assange para  a Suécia. Ele encontra-se atualmente na embaixada do Equador, em Londres, após pedir asilo em 2012.

Edward Snowden

Edward Snowden ex-analista de inteligência do serviço secreto dos EUA, ficou conhecido por divulgar vários programas de vigilâncias altamente confidenciais dos governos dos Estados Unidos e Reino Unido. Esses programas  diziam monitorar pessoas suspeitas de participarem de grupos terroristas, porém diversas pessoas foram espionadas inclusive a presidente Dilma.

O Edward Snowden trabalhou na NSA e na CIA, e antes da divulgação dos documentos, trabalhava na Booz Allen Hamilton, e divulgou as informações atravéz dos jornais, The Guardian, The Washington Post e New York Times, Entre outras coisas os documentos divulgados por Snowden revelou os programas de vigilância que o governo dos Estados Unidos para monitorar os meios de comunicações. 

Vale citar o programa que  ficou conhecido como PRISM, que é mantido pela agencia de segurança nacional americana (NSA), que monitorava todos os meios de comunicação em tempo real, coletando dados de cidadãos americanos e de outros países, atrás de possíveis suspeitos de participarem de grupos terroristas. O PRISM surgiu após o ataque de 11 de setembro em 2001, no governo George W. Bush.

Entre outras coisas o PRISM recebeu a colaboração de grandes empresas da Internet, como o Facebook, Yahoo, Apple, Google e Microsoft. A NSA tinha acesso direto aos dados dessas empresas sem necessáriamente  possuir ordem judicial.

Outro escandalo surgiu revelada pelas informações de Snowden foi à descoberta do monitoramento por parte dos agentes da NSA a grandes empresas multinacionais e de chefes de Estados.Atualmente Snowden está em  asilo na Rússia, após acusações feitas pelo governo americano, que acusa o ex-analista de espionagem, por roubar e vazar os dados secretos do governo.

Engenharia Social

Engenharia Social é a técnica usada por criminosos para se apropriar de  informações sigilosas de pessoas e empresas. Mestres na persuasão, eles convencem pessoas e assim cometer seus crimes.

Técnicas de engenharia social podem ser implementadas,  não necessariamente por meios tecnológicos. Um criminoso pode se passar por um funcionário  de uma empresa de proteção de  dados, criar uma identidade falsa para persuadir as vítimas. Outra técnica e vasculhar lixos onde pode conter possíveis informações.

Na web são utilizados sites fakes, redes sociais, e-mails suspeitos entre outros. Os criminosos ficam acompanhando os assuntos do momento, e através de mensagens com links suspeitos, tentam atrair as pessoas para serem redirecionados a sites maliciosos.

A prevenção se dá por meio de políticas de segurança, conscientização de funcionários sobre os perigos e treinamentos constantes.