WX MUNDO

Aula HTML 3 - Links

2013-08-12T17:01:00.000-07:00

Olá galera, fiquei um tempo sem postar no WX MUNDO, mais agora voltei e estou postando a continuação da aula de HTML, que nós iniciamos aqui no site, esta é a aula 3, falando sobre links, e como criar, espero que tenham gostado!

Vamos agora tentar o seguinte:
<BODY>
Olá mundo! Chamo-me Seu Nome
</BODY>

Iremos obter novamente o seguinte resultado:

Porquê? Como foi dito, a noção de espaçamento em HTML é um pouco diferente, e os browsers não reconhecem mais que um único espaço entre caracteres. Para contornar isto, utiliza-se uma referência especial -   (Non-Breaking SPace), que convém esclarecer que não é um ‘tag’. Antes de mais explicações, experimentemos isto: <BODY>
Olá mundo!
       
Chamo-me Eduardo.
</BODY>

O resultado será este:

Dica:

Estes caracteres especiais são utilizados para definir caracteres que normalmente não são reconhecidos pelo HTML. Por exemplo, visto que os sinais de maior e menor são utilizados pelo próprio HTML para definir os ‘tags’, se quisermos utilizar estes sinais na nossa página utilizaremos > e< respectivamente.

Uma das bases do HTML é o facto de ser uma linguagem de hiper-texto. Vamos agora tentar introduzir uma ligação a outra página: <BODY>
Olá mundo! Chamo-me Eduardo. 
Visitem a minha <A HREF="outra.htm"> outra página</A>.
</BODY>

iremos então obter uma ligação a uma página, que seria o ficheiro ‘outra.htm’ gravado na mesma pasta que o ficheiro da página que estamos a editar. Seria interessante criar rapidamente essa página para testar a ligação que acabámos de criar.

Este ‘tag’ é um pouco diferente dos que já vimos. Pode parecer confuso, mas não é. O ‘tag’ <A> é aquele destinado à introdução de uma link, mas no entanto necessita de um parâmetro (o HREF) para indicar aonde é feita essa ligação. Tudo aquilo que se segue irá estar ‘linkado’, até o ‘tag’ ser fechado com </A>.
O parâmetro HREF pode conter também o endereço de outro site, como em <A HREF="http://www.site.com"> (neste caso é indispensável o prefixo http://) ou qualquer outro ficheiro sem ser .HTM ou .HTML. Por exemplo, para fazer uma link para download usar-se-ia <A HREF="ficheiro">.

Dica:

IMPORTANTE: Aconselho vivamente que todos os ficheiros referidos numa página, quer links a outras páginas, quer imagens, etc, tenham o seu nome em minúsculas, pois a grande maioria dos servidores Web fazem uma distinção entre maiúsculas e minúsculas. Existe uma forte possibilidade que se tivermos uma link a ‘pagina.htm’, quando o ficheiro se chama ‘Pagina.htm’, este link não funcione.

Aula HTML 2 - Primeira Página

2013-05-12T16:55:00.004-07:00

Para criarmos a nossa primeira página em HTML, basta qualquer simples editor de texto, como o Notepad. Podemos começar por inserir o seguinte:
<HTML><HEAD><TITLE>A minha primeira página</TITLE></HEAD><BODY></BODY>
</HTML>

Dica:

Devemos criar uma pasta nova no nosso disco para conter a página, e devemos gravar o nosso ficheiro de texto como 'index.html'. Porquê? Quando a página está a ser visualizada no nosso navegador, é indiferente, mas nos servidores onde são alojadas as páginas na Internet, a página inicial por defeito chama-se index.html ou index.htm.

Se visualizarmos a página que acabámos de criar num browser (programa que permita navegar na internet, por ex. IExplorer), teremos qualquer coisa como isto:

Que conclusão podemos tirar? O texto que aparece como título da janela é definido pelo ‘tag’ <TITLE>, que surge sempre na área correspondente ao cabeçalho da página (<HEAD>).

Vamos agora fazer a seguinte alteração: <HTML>
<HEAD>
<TITLE>A minha primeira página</TITLE>
</HEAD>
<BODY>
Olá mundo!
</BODY>
</HTML>

Iremos obter o seguinte resultado:

Como já disse antes, a área definida pelo ‘tag’ <BODY> é aquela onde reside quase todo o conteúdo visível de uma página. Vamos concentrar-nos nesta área.
Comecemos por acrescentar uma frase:
<BODY>
Olá mundo!
Chamo-me Eduardo.
</BODY>

Inesperadamente, o resultado obtido será o seguinte:

Convém então esclarecer algo: Em HTML, os espaçamentos e mudanças de linha processam-se de um modo algo diferente. Todo o texto é interpretado continuamente, e na verdade é possível que todo o HTML de uma página esteja numa única linha. Os espaços, tal como neste tutorial, apenas servem para tornar o código mais legível a quem o cria. Vamos introduzir o seguinte ‘tag’: <BODY>
Olá mundo!
 
Chamo-me Eduardo.
</BODY>

Este   (de Break) dá instruções ao browser para fazer uma mudança de linha. Assim, o resultado deverá ser este:

Empresa promete vender carro voador a partir de 2020

2013-05-11T17:08:00.003-07:00

Divulgação

Carro voador é um conceito futurístico demais para você? Pois não é para o pessoal da Terrafugia, uma empresa de Massachussetts, nos Estados Unidos, que pretende colocar um dispositivo desses na casa das pessoas a partir de 2020.

Eles criaram o TF-X, um carro voador feito de carbono e fibra que parece uma mistura de helicóptero e avião de pequeno porte, com características aventadas por entusiastas como o Google.

Com a ajuda de dois rotores fixados um a cada lado da máquina, a decolagem ocorre verticalmente, ou seja, você pode sair da rua, contanto que haja uma clareira de 30,4 metros disponível.

Após a decolagem, as hélices são recolhidas e o TF-X passa a voar como um avião com alcance de 804,6 km. A pilotagem é feita de forma automática, mas a companhia garante que dá para aprender a manejar o aparelho em "não mais do que cinco horas" de curso.

Quanto ao preço, a única previsão da Terrafugia, feita ao Mashable, é que o veículo custará o mesmo que um carro de luxo.

Fonte: Olhar Digital

Como adicionar Gadget e Widget flutuante na barra lateral do Blog

2013-05-11T15:52:00.001-07:00

Um recurso tem tem sido muito usado por diversos sites e blog é o elemento de página (gadget/widget) flutuante na barra lateral (sidebar), especialmente para dar destaque a anúncios e links importantes. Este recurso é bem simples de aplicar tanto em blogs no Blogger (BlogSpot), quanto no WordPress.ORG, funcionando em qualquer navegador. O elemento só se move quando a página é rolada, acompanhando o visitante.

Se você quer ver esse recurso funcionando, basta olhar aqui para nossa barra lateral do Blog e rolar a página. Note que o último widget ficará fixo e sempre visível, até o final da rolagem da tela. Vamos mostrar aqui como aplicar esse recurso em qualquer blog do Blogger ou WordPress.ORG de forma bem simples.

ATENÇÃO: Não é permitido usar este recurso com os anúncios do AdSense! As regras proíbem isso.

Como usar gadget/widget fixo na página do Blog

Primeiro vamos mostrar como funciona no Blogger, pois precisa de algumas linhas de código. Depois o do WordPress.ORG que precisa de um plugin que fará o recurso funcionar para qualquer widget que desejar aplicar.

Para o Blogger

Se você usa o Blogger (BlogSpot) para criar o seu blog, tudo o que precisa fazer é procurar por uma linha no código fonte. Abra o painel do Blogger, clique no menu “Modelo” e depois no botão “Editar HTML”. Em seguida clique no botão “Formatar modelo” para pesquisar pelas linhas. Procure por:

</head>

Se ainda não sabe como encontrar códigos no novo editor do Blogger, então leia nosso tutorial: Como encontrar códigos no novo Editar HTML do Blogger?

Imediatamente ANTES dessa linha cole o seguinte trecho, sem alterar nada nele:

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>

É possível que seu template já tenha esse código inserido nele. Se for o caso, não tem problema manter um ou dois iguais. Não afeta o funcionamento de nada.

Então salve o modelo para aplicar a mudança feita.

O próximo passo já é o último. Este recurso só funciona para os gadgets inseridos com código no “HTML/JavaScript”. Tudo o que precisa fazer é ir até o menu “Layout” no painel do Blogger, escolher qual o gadget que quer fazer flutuar, como algum onde inseriu o código de fãs do Facebook.

Abra o gadget “HTML/JavaScript”, salve o conteúdo dele à parte (copiando as linhas para serem coladas onde for indicado) e cole o seguinte trecho, só modificando o que está indicado:

<script type="text/javascript">
//<![CDATA[
(function($) {
var defaults = {
topSpacing: 0,
bottomSpacing: 0,
className: 'is-sticky',
wrapperClassName: 'sticky-wrapper'
},
$window = $(window),
$document = $(document),
sticked = [],
windowHeight = $window.height(),
scroller = function() {
var scrollTop = $window.scrollTop(),
documentHeight = $document.height(),
dwh = documentHeight - windowHeight,
extra = (scrollTop > dwh) ? dwh - scrollTop : 0;
for (var i = 0; i < sticked.length; i++) {
var s = sticked[i],
elementTop = s.stickyWrapper.offset().top,
etse = elementTop - s.topSpacing - extra;
if (scrollTop <= etse) {
if (s.currentTop !== null) {
s.stickyElement
.css('position', '')
.css('top', '')
.removeClass(s.className);
s.stickyElement.parent().removeClass(s.className);
s.currentTop = null;
}
}
else {
var newTop = documentHeight - s.stickyElement.outerHeight()
- s.topSpacing - s.bottomSpacing - scrollTop - extra;
if (newTop < 0) {
newTop = newTop + s.topSpacing;
} else {
newTop = s.topSpacing;
}
if (s.currentTop != newTop) {
s.stickyElement
.css('position', 'fixed')
.css('top', newTop)
.addClass(s.className);
s.stickyElement.parent().addClass(s.className);
s.currentTop = newTop;
}
}
}
},
resizer = function() {
windowHeight = $window.height();
},
methods = {
init: function(options) {
var o = $.extend(defaults, options);
return this.each(function() {
var stickyElement = $(this);
stickyId = stickyElement.attr('id');
wrapper = $('<div></div>')
.attr('id', stickyId + '-sticky-wrapper')
.addClass(o.wrapperClassName);
stickyElement.wrapAll(wrapper);
var stickyWrapper = stickyElement.parent();
stickyWrapper.css('height', stickyElement.outerHeight());
sticked.push({
topSpacing: o.topSpacing,
bottomSpacing: o.bottomSpacing,
stickyElement: stickyElement,
currentTop: null,
stickyWrapper: stickyWrapper,
className: o.className
});
});
},
update: scroller
};
if (window.addEventListener) {
window.addEventListener('scroll', scroller, false);
window.addEventListener('resize', resizer, false);
} else if (window.attachEvent) {
window.attachEvent('onscroll', scroller);
window.attachEvent('onresize', resizer);
}
$.fn.sticky = function(method) {
if (methods[method]) {
return methods[method].apply(this, Array.prototype.slice.call(arguments, 1));
} else if (typeof method === 'object' || !method ) {
return methods.init.apply( this, arguments );
} else {
$.error('Method ' + method + ' does not exist on jQuery.sticky');
}
};
$(function() {
setTimeout(scroller, 0);
});
})(jQuery);

//]]>
</script>
<script>
$(document).ready(function(){
$("#rbtSocialFloat").sticky({topSpacing:0});
$("#topside_box").sticky({topSpacing:6});
});
</script>
<div class="sticky-wrapper" id="topside_box-sticky-wrapper" style="height: 222px;text-align:center;"><div id="topside_box-sticky-wrapper" class="sticky-wrapper" style="height: 112px;"><div class="" id="topside_box" style="">
Cole AQUI o código do seu Gadget
</div></div></div>

Onde está marcado de vermelho “Cole AQUI o código do seu Gadget“, adicione o código que você reservou (que pode ser qualquer coisa). Salve o gadget modificado, clique no botão “Salvar organização” e veja o resultado em seu Blog.

Observe que é importante que este elemento de página seja o último da barra lateral, pois senão ele ficará sobreposto aos outros já existentes. Também só funciona em um único elemento.

Para o WordPress.ORG

Já quem usa o WordPress.ORG (com domínio e hospedagem próprios) fica fácil aplicar esse recurso de widgets flutuantes com um plugin.

Basta procurar por ele no menu “Plugins” ~> “Adicionar novo” ou fazer o download gratuito aqui –Baixar Q2W3 Fixed Widget.

Depois de instalado ele ira inserir uma opção “Fixed widget” em todos os widgets que você tem na sua barra lateral ou for adicionar, como na imagem de exemplo abaixo:

Todos os elementos de página que tiveram essa opção marcada vão flutuar com a rolagem da página.

Fonte: Ferramentas Blog

Aula HTML 1 - Estrutura e Tags

2013-05-11T13:24:00.001-07:00

O HTML é movido a dezenas de ‘tags’, que são os comandos para que se leia uma ação.

Todos os ‘tags’ são inseridos entre o sinal de menor e maior:

<tag> </tag>

Todos os ‘tags’ obedecem a uma hierarquia, como no seguinte exemplo:

<a> <c> </c> </a>

É indiferente utilizar maiúsculas ou minúsculas nos ‘tags’. Nestes tutoriais irei utilizar maiúsculas apenas por uma questão de leitura.

<tag> é igual a <TAG> e a <Tag>

Todas as páginas em HTML são identificadas pelo ‘tag’ <HTML>, que terá obrigatóriamente que estar no início. Obviamente, qualquer página irá acabar com </HTML>.

<HTML>

</HTML>

Todas as páginas em HTML contêm duas partes: Aquela definida por <HEAD>, e que contém todas as informações do cabeçalho da página; Outra parte definida por <BODY>, contém quase tudo aquilo que iremos ver realmente na nossa página.

<HTML>

<HEAD>

Aqui vai o cabeçalho do site

</HEAD>

<BODY>

Aqui vai o corpo/estrutura do site

</BODY>

</HTML>

Bom, Este tutorial está por fim, a Aula 2 eu vou postar semana que vem, Flw galera!

A configuração ideal para rodar o Windows 8

2013-05-11T12:31:00.002-07:00

Toda vez que a Microsoft estreia uma nova versão do Windows, a maioria dos usuários se pergunta: “será que meu PC terá capacidade para rodá-lo?”. A questão tem um motivo histórico: a cada nova versão, o sistema operacional ficava mais voraz por espaço em disco, memória e processamento de CPU. Mas com o Windows 8, esta regra esta sendo quebrada. O sistema precisa das mesmas configuração do Windows 7 para funcionar, ou seja, um computador equipado com:

- 1 processador de 1 gigahertz (GHz) ou melhor;

- 1 GB de memória RAM para o Windows de 32 bits ( 2 GB na versão de 64 bits)

- HD com pelo menos 16 GB de espaço livre (20GB na versão 64 bits)

- Placa gráfica (offboard ou onboard) compatível com a tecnologia Microsoft DirectX 9

- Monitor com resolução mínima de 1024 x 768 pixels

A notícia é boa para quem tem um PC relativamente novo rodando o Windows 7. E também para aqueles donos de um computador velhinho ou mesmo um netbook, cujas características de hardware são bem limitadas.

Mas aqui cabe um alerta: o usuário que rodar o Windows 8 na configuração básica não terá uma experiência de uso muito boa. O micro será lento para carregar e executar algumas tarefas e, claro, carregar programas, vídeos e mesmo páginas de internet.

A configuração ideal para rodar o novo sistema operacional é:

- Processador de 1,4 GHz de pelo menos dois núcleos

– 4GB de memória RAM

– HD com pelo menos 320GB. Quem quiser uma inicialização mais rápida deve optar por SSD de no mínimo 128 GB

– Monitor com resolução de vídeo de 1366 x 768 para aproveitar o recurso de snap-in (dividir a tela com duas aplicações na nova interface)

– Tela ou touchpad que reconhece múltiplos toques, para aproveitar os gestos da nova interface

Compatibilidade: o Windows 8 não tem suporte a muitos periféricos e aplicativos antigos.

Para ajudar os usuários, a Microsoft criou o serviço Compatible Center. Ele é acessível no endereço http://goo.gl/ApXS3 e funciona como um buscador: basta digitar o nome do periférico e aplicativo no campo busca para saber se a impressora ou o aplicativo antigo vão rodar com o Windows 8.

Fonte: INFO Abril

Aprenda a Ganhar Dinheiro Lendo E-mail

2013-05-11T10:41:00.000-07:00

Olá Galera, Nesta super dica de hoje, eu ensinarei a como ganhar dinheiro lendo e-mail, é muito simples, primeiramente acesse o site:

http://www.e-mai.net/renanzirchen10

OBS: VOCÊ SÓ VAI CONSEGUIR SE CADASTRAR EM UM LINK DE UMA PESSOA... COMO O MEU ALI EM CIMA!!!

Após ter se cadastrado no site, você clica no botão ao lado escrito "SOU AFILIADO"
E faz o login com os seus dados, Após ter logado no site, ou seja, no seu escritório virtual, você vai clicar no botão escrito "CAMPANHAS" e vai ver as campanhas, ou seja, as campanhas que foram enviadas para o seu e-mail, vai está nessa pagina escrito "CAMPANHAS", nesta pagina você encontrará as campanhas que você deve ler no seu e-mail, mais também você pode ler nesta pagina, então provavelmente não terá nenhuma campanha ainda, porque você se cadastrou agora, neste exato momento, portanto, não se assuste se não tiver nenhuma campanha, não se preocupe, no dia seguinte provavelmente já terá campanhas pra você clicar, bom, no dia seguinte quando você for logar no seu escritório virtual e ir em "CAMPANHAS" vai ter uma campanha lá provavelmente, você vai clicar no olho que vai tá ao lado da campanha, clicando nesse olho ele vai te redirecionar para uma nova guia que será o site do anunciante, você terá que clicar em um link do site do anunciante, após ter clicado em um link do site, você clica em "RESUMO" que vai te redirecionar para a página inicial do seu escritório virtual, e, lá você poderá ver os seus ganhos, você ganha 05 centavos por campanha que você clica, então depois de ter clicado na primeira campanha, obviamente vai está 05 centavos no seu escritório virtual, bem simples né, também haverá os planos premium, que você poderá comprar, e, é claro que você vai obter mais ganhos com o E-mai.net, é muito mais vantagem você comprar um plano premium, Bom, essa super dica de hoje fica por aqui, até semana que vem, Flw pessoal!

WX MUNDO

Aula HTML 3 - Links

Aula HTML 2 - Primeira Página

Empresa promete vender carro voador a partir de 2020

Como adicionar Gadget e Widget flutuante na barra lateral do Blog

Como usar gadget/widget fixo na página do Blog

Para o Blogger

Para o WordPress.ORG

Aula HTML 1 - Estrutura e Tags

Tags

O HTML é movido a dezenas de ‘tags’, que são os comandos para que se leia uma ação.

Todos os ‘tags’ são inseridos entre o sinal de menor e maior:

<tag> </tag>

Todos os ‘tags’ obedecem a uma hierarquia, como no seguinte exemplo:

<a> <b> <c> </c> </b> </a>

É indiferente utilizar maiúsculas ou minúsculas nos ‘tags’. Nestes tutoriais irei utilizar maiúsculas apenas por uma questão de leitura.

<tag> é igual a <TAG> e a <Tag>

Todas as páginas em HTML são identificadas pelo ‘tag’ <HTML>, que terá obrigatóriamente que estar no início. Obviamente, qualquer página irá acabar com </HTML>.

<HTML>

</HTML>

Todas as páginas em HTML contêm duas partes: Aquela definida por <HEAD>, e que contém todas as informações do cabeçalho da página; Outra parte definida por <BODY>, contém quase tudo aquilo que iremos ver realmente na nossa página.

<HTML>

<HEAD>

Aqui vai o cabeçalho do site

</HEAD>

<BODY>

Aqui vai o corpo/estrutura do site

</BODY>

</HTML>

A configuração ideal para rodar o Windows 8

Aprenda a Ganhar Dinheiro Lendo E-mail