O Estilo de Navegação do Maemo!

Reeves · 07 de Dezembro , 2007, 05:41:41 AM

Como alguns já conhecem, usilizei como um dos exemplos de site em Introdução ao Ajax o Meamo
Por ter gostado muito de seu estilo de Navegação, estudei seu site e venho aqui lhes Mostrar como isso funciona !

Primeiro vamos entender como funciona a estrutura da pagina Meamo

o Ajax utilizado no site é fácil, de pouco código e constituído pelos seguintes arquivos:
index.html, browser_info_scroll.js, browser.css, browser_operan800.css, browser_bigger.css

index.html

utilizando a linguagem de layout html, a index importa o browser_info_scroll.js e as folhas de estilo CSS
a divisão da pagina é feita pelas TAG's

, que poderiam encarrar quase como que "tabelas" ...
e é justamente as tag's div as responsáveis por conter o id, que indica ao arquivo javascript importado o tipo de conteúdo que nelas contem.
irei explicar os mais importantes.

marca o inicio do conteúdo principal

marca o conteudo do menu esquerdo

inicia o conteudo central

inicia o conteudo central que será a navegação diferenciada apresentada em Ajax.

demarca ao .js que partir daqui, o código é de conteúdo a ser usado na navegação Ajax

usando como exemplo o segundo link da pagina, que é o chamado Ajax
vamo entender como trabalha este link.

browser_info_scroll.js

Código Selecionar

var operan800 = false;

if (navigator.appName == "Microsoft Internet Explorer" && window.innerHeight < 500) {   //n800 opera
	operan800 = true;
	document.write ("<link rel='stylesheet' type='text/css' href='browser_operan800.css' />");	
}
else if (window.innerHeight < 500) {   // n800 maemo
	document.write ("<link rel='stylesheet' type='text/css' href='browser.css' />");
}
else {   //desktop
	document.write ("<link rel='stylesheet' type='text/css' href='browser_bigger.css' />");
}




var currentSection = "mozilla-pane";
var scroll = {	timeScrolled:0,
		startPosition:0,
		amount:0.0,
		duration:0.0,
		element:null,
		timer:null};

function scrollTo(destination) {

	if (currentSection == destination) {
		return;
	}

	var offset = "mozilla-pane";

	var position = getElementY(document.getElementById(destination));
	var offsetPos = getElementY(document.getElementById(offset));
	position = position - offsetPos;
	
	var scroller = document.getElementById("scroller");
	
	scroll.timeScrolled = 0;
	scroll.startPosition = scroller.scrollTop;
	scroll.amount = position - scroller.scrollTop;
	scroll.duration = 25;
	scroll.element = scroller;

	scroll.timer = setInterval("scrollABit();", 7);

	var lastSection = currentSection;
	currentSection = destination;

	document.getElementById(currentSection.split("-")[0]+"-tab").className = "active";
	if (lastSection) {
		document.getElementById(lastSection.split("-")[0]+"-tab").className = "inactive";
	}
}

function scrollABit() {
	if (scroll.timeScrolled > scroll.duration) {
		clearInterval(scroll.timer);
		scroll.timer = null;
	}
	else {
		scroll.element.scrollTop = ease(scroll.timeScrolled, scroll.startPosition, scroll.amount, scroll.duration);
		scroll.timeScrolled++;
	}
}

function ease(time, start, change , duration) {
	return -change/2 * (Math.cos(Math.PI*time/duration) - 1) + start;
}

function getElementY(element){
	var y = 0;
	do {
		y += element.offsetTop;
	} while ( element = element.offsetParent )
	return y;
}

browser.css

Código Selecionar

/* N800 normal browser view 650x360*/

* { margin: 0px; padding: 0px;  }

body
{
background: url(pics/yellow_gradient.png);
background-repeat: repeat-x;
background-attachment: fixed;
background-color: #000000;
font-family: verdana, trebuchet, arial, sans-serif;
font-size: 13px;
color: #000000;
overflow: hidden;
}

h2
{
margin: 10px 15px 10px 0px;
text-align: center;
}

#whole
{
overflow: hidden;
width: 650px;
margin-left: auto;
margin-right: auto;
/* height: 450px; */
}

#left
{
width: 205px;
margin-right: 0px;
float: left;
height: 360px;
background: url(pics/shadowleft.png);
background-repeat: repeat-y;
background-position: 192px 0;

}

#right {
width: 443px;
height: 359px;
float: left;
background: url(pics/yellow_gradient_light.png);
background-repeat: repeat-x;
border-left: thin solid black;
border-right: thin solid black;
overflow: hidden;
/* height: 360px; */
}

#logo
{
width: 164px;
margin: 0px 25px 0px auto;
}

#newfeatures
{
float: right;
margin-left: auto;
margin-right: -5px;
margin-top: -5px;
}

#newfeatures img
{
height: 160px;
}

#gotonews
{
float: right;
margin: 0px 10px 0px 10px;
text-align: center;
}


#gotonews a
{
color: #DAC449;
font-weight: bold;
}

/* The toolbar for the content box */

ul#toolbar {
	text-align: right;
	list-style: none;
	width: 150px;
	float: right;
	margin-top: 0px;
}

#toolbar li {
	font-size: 12px;
	height: 29px;
	margin-top: 1px;
}

#toolbar li img
{
margin: 1px 7px 0px 0px;
}

#toolbar li.active img
{
margin: 1px 7px 0px -20px;
}

#toolbar li a {
	text-decoration: none;
	color: black;
	border: none;
}

#toolbar li.active {
	background: url(pics/tab_down.png);
	margin-left: 12px;
	border: none;
}

#toolbar li.inactive {
	background: url(pics/tab_up.png);
}

#toolbar li a:hover {
}

#toolbar br
{
line-height: 12px;
}

#scroller, #content, .section
{
height: 340px;
}


#scroller {
	margin: 0px;
	padding: 10px 10px 10px 10px;
	overflow: hidden;
}

#content
{
width: 100%;
}

.section
{
margin-bottom: 40px;
}

em
{
color: #eeeeee;
font-size: 12px;
}

img
{
border:none;
margin: 0;
padding: 0;
}

a{ color: #bb4444; border:0 }
a:active{}
a:visited{}
a:hover{color: #FF0000;}



.thumbs
{
margin-top: 15px;
width: 95%;
}


.thumbs td
{
vertical-align: top;
text-align: center;
margin: 0 auto;
}

.screenshot
{
}

.screenshot img
{
width: 120px;
padding: 2px 7px 8px 3px;
background: url(pics/screenshotshadow.png);
}

.caption
{
margin: 0 auto;
text-align: center;
font-size: 11px;
width: 138px;
}

p.hilight
{
background: url(pics/quotes.png);
background-repeat: no-repeat;
margin-top: 15px;
margin-left: 20px;
padding-top: 5px;
padding-left: 25px;
min-height: 20px;
}

.small_list
{

margin-left: 45px;
margin-top: 0px;
font-size: 10px;
}

.small_list li
{
margin-bottom: 0px;
}

.small_list

browser_operan800.css

Código Selecionar

/* N800 normal browser view 650x360*/

* { margin: 0px; padding: 0px;  }

body
{
background: url(pics/yellow_gradient.png);
background-repeat: repeat-x;
background-attachment: fixed;
background-color: #000000;
font-family: verdana, trebuchet, arial, sans-serif;
font-size: 13px;
color: #000000;
}

h2
{
margin: 10px 15px 20px 0px;
text-align: center;
}

#whole
{
width: 650px;
margin-left: auto;
margin-right: auto;
/* height: 450px; */
}

#left
{
width: 205px;
margin-right: 0px;
float: left;
height: 360px;
background: url(pics/shadowleft.png);
background-repeat: repeat-y;
background-position: 192px 0;
position: fixed;
}

#right {
width: 443px;
height: 2860px;
position: absolute;
left: 205px;
background: url(pics/yellow_gradient_light.png);
background-repeat: repeat-x;
background-attachment: fixed;
border-left: thin solid black;
border-right: thin solid black;
margin: 0px;
padding: 0px;
}

#logo
{
width: 164px;
margin: 0px 25px 0px auto;
}

#newfeatures
{
float: right;
margin-left: auto;
margin-right: -5px;
margin-top: 0px;
}

/* The toolbar for the content box */

ul#toolbar {
	text-align: right;
	list-style: none;
	width: 150px;
	float: right;
	margin-top: 0px;
}

#toolbar li {
	font-size: 12px;
	height: 33px;
	margin-top: 3px;
}

#toolbar li img
{
margin: 1px 7px 0px 0px;
}

#toolbar li.active img
{
margin: 1px 7px 0px -20px;
}

#toolbar li a {
	text-decoration: none;
	color: black;
	border: none;
}

#toolbar li.active {
	background: url(pics/tab_up.png);
}

#toolbar li.inactive {
	background: url(pics/tab_up.png);
}

#toolbar li a:hover {
}

#toolbar br
{
line-height: 12px;
}

#scroller, #content, .section
{
height: 340px;
}


#scroller {
	margin: 0px;
	padding: 10px 10px 10px 10px;
}

#content
{
width: 100%;
}

.section
{
margin-bottom:40px;
}

em
{
color: #eeeeee;
font-size: 12px;
}

img
{
border:none;
margin: 0;
padding: 0;
}

a{ color: #bb4444; border:0 }
a:active{}
a:visited{}
a:hover{color: #FF0000;}



.thumbs
{
margin-top: 15px;
width: 95%;
}


.thumbs td
{
vertical-align: top;
text-align: center;
margin: 0 auto;
}

.screenshot
{
}

.screenshot img
{
width: 120px;
padding: 2px 7px 8px 3px;
background: url(pics/screenshotshadow.png);
}

.caption
{
margin: 0 auto;
text-align: center;
font-size: 11px;
width: 138px;
}

p.hilight
{
background: url(pics/quotes.png);
background-repeat: no-repeat;
margin-top: 15px;
margin-left: 20px;
padding-top: 5px;
padding-left: 25px;
min-height: 20px;
}

.small_list
{
margin-left: 45px;
margin-top: 15px;
}

.small_list li
{
margin-bottom: 8px;
}

browser_bigger.css

Código Selecionar

/* N800 normal browser view 672x360*/

* { margin: 0px; padding: 0px;  }

body
{
background: url(pics/yellow_gradient.png);
background-repeat: repeat-x;
/* background-attachment: fixed; */
background-color: #000000;
font-family: helvetica, verdana, trebuchet, arial, sans-serif;
font-size: 13px;
color: #000000;
overflow: hidden;
}

h2
{
margin: 0px 15px 30px 0px;
text-align: center;
}
/*#wrong-os h3 {
	padding-top: 80px;
	background: url(./img/wrong-os-h3.gif) no-repeat top;
}
*/

#whole
{
overflow: hidden;
width: 100%;
max-width: 1000px;
margin: 50px auto;
}

#left
{
width: 250px;
margin-right: 0px;
float: left;
/*height: 80%;*/
}

#right {
width: 620px;
float: left;
background: url(pics/bgbig.png);
/* border: thin solid black; */
overflow: hidden;
height: 530px;
margin-left: -6px;
padding: 20px 40px 20px 40px;
}

#logo
{
width: 164px;
margin: 35px 15px 0px auto;
}

#newfeatures
{
float: right;
margin-left: auto;
margin-top: 25px;
}

#gotonews
{
float: right;
margin: 15px 10px 0px 0px;
text-align: center;
}

#gotonews a
{
color: #DAC449;
font-weight: bold;
}
/* The toolbar for the content box */

ul#toolbar {
	text-align: right;
	list-style: none;
	width: 150px;
	float: right;
	margin-top: 25px;
}

#toolbar li {
	font-size: 12px;
	height: 33px;
	margin-top: 3px;
}

#toolbar li img
{
margin: 1px 7px 0px 0px;
}

#toolbar li.active img
{
margin: 1px 7px 0px -20px;
}

#toolbar li a {
	text-decoration: none;
	color: black;
	border: none;
}

#toolbar li.active {
	background: url(pics/tab_down.png);
	margin-left: 12px;
	border: none;
}

#toolbar li.inactive {
	background: url(pics/tab_up.png);
}

#toolbar li a:hover {
}

#toolbar br
{
line-height: 12px;
}

#scroller, #content, .section
{
margin-top: 40px;
height: 440px;
}


#scroller {
	margin: 0px;
/* 	padding: 20px; */
	overflow: hidden;
}

#content
{
width: 100%;
}

.section
{

}

em
{
color: #eeeeee;
font-size: 12px;
}

img
{
border:none;
margin: 0;
padding: 0;
}

a{ color: #991111; border:0 }
a:active{}
a:visited{}
a:hover{color: #FF0000;}



.thumbs
{
margin: 25px auto;
width: 85%;
}


.thumbs td
{
vertical-align: top;
text-align: center;
margin: 0 auto;
}

.screenshot
{
width: 180px;
}

.screenshot img
{

width: 160px;
padding: 5px 8px 9px 9px;
background: url(pics/screenshotshadow_big.png);
}

.caption
{
margin: 0 auto;
text-align: center;
font-size: 11px;
width: 138px;
}

p.hilight
{
background: url(pics/quotes.png);
background-repeat: no-repeat;
margin-top: 15px;
margin-left: 20px;
padding-top: 5px;
padding-left: 25px;
min-height: 20px;
}

.small_list
{
margin-left: 45px;
margin-top: 20px;
}

.small_list li
{
margin-bottom: 10px;
}

Download dos arquivos em um zip:
http://www.2shared.com/file/2578875/aa1678b2/AjaxScroll__by___Reeves.html]http://www.2shared.com/file/2578875/aa1 ... eeves.html[/url]

Para terminar, gostaria de esclarecer uma duvida que ouso muito...
"Mas meu código vai poder ser visualizado! Poderei correr riscos!"

Não é tão simples meu caro colega, as técnicas em Ajax, são para criar "dinamismo" na visualização e navegação pelo conteúdo da pagina web, quando necessário a exibição de um resultado que uma busca feita no db, o javascript deveria acionar a função que faz isso por baixo dos panos com linguagem base por tras da pagina Ajax, exemplo: PHP, ASP, JSP, etc...
que são linguagens base para utilizar em suas conexões a banco de dados e outros processos mais "restritos a visualização de terceiros"..
uhahuauhuHAhuAUAHuAUAuhaaa...
acho que isso explica...

Ufa terminei!

Gratz Reeves

°vº NÃO USE DROGAS,
/(_)\ USE GNU/LINUX
^ ^

whit3_sh4rk

Profissional
Postagens: 525
Logado

Re: O Estilo de Navegação do Maemo!

#1

07 de Dezembro , 2007, 09:34:49 AM Última edição: 08 de Dezembro , 2007, 01:43:02 PM por #phobia

Gostei, apanho muito dessas coisas ainda, mas realmente o site tem um método de navegação interessante.

[]s

#phobia

MinÐ Hunter$
Guru
Postagens: 1 474
Linux User: #487453
Local: Belo Horizonte - MG
Logado

Re: O Estilo de Navegação do Maemo!

#2

08 de Dezembro , 2007, 01:41:47 PM

Ptz Reeves, destrinchou o Maemo heim cara! ;)

Anonymous

Visitante
Logado

Re: O Estilo de Navegação do Maemo!

#3

09 de Dezembro , 2007, 10:36:55 AM

Cara, perfeito.

Pelo visto a área de Ajax ficará repleta de novidades hein?!

flw!

Reeves

Administrador
Profissional
Postagens: 786
Local: WiReD.
Logado

Re: O Estilo de Navegação do Maemo!

#4

09 de Dezembro , 2007, 10:41:54 AM Última edição: 09 de Dezembro , 2007, 09:36:43 PM por Reeves

vlww bomber & phobia

sim sim.. não acho na net mto sobre isso em PT-BT
mas tenho lido varios livros e tals
sempre que der, vou enrriquecer a área aki!

°vº NÃO USE DROGAS,
/(_)\ USE GNU/LINUX
^ ^

Imprimir

Ir para o topo Páginas1

Ações

Imprimir

FORUM DARKERS