Publicado em 16 de fev.

[Resolvido] Memória Dinâmica

Prezados,

Uma boa tarde a todos...

Estou desenvolvendo um site para um cliente, e ele me solicitou, uma forma de quando uma pessoa abrir um artigo grande para leitura, e de acordo que a página é aberta, e em fração de segundos, e destacando em amarelo o texto, em três grupos de palavras, até o final do artigo.

Ex.:

A página abrirá um texto gravado no banco MySQL (já está pronto) e ao abrir destacando as palavras em grupo de três palavras. E se possível, ter uma forma de aumentar a velocidade desta marcação para a pessoa desenvolver a leitura com uma maior velocidade.

Não sei se posso fazer isso é PHP ou Javascript, alguém poderia me ajudar neste sentindo.

Sds,

Vagner Nunes

Discussão (19)

Entre ou cadastre-se para participar da discussão

Entrar Criar conta

Andrey Knupp Vital· 16 de fev.

Não entendi , você quer destacar as palavras o mais rapido possivel quando abrir a pagina ?

Vagner Nunes· 16 de fev.

Olá Andrey,

Não... É o seguinte, o texto que irá aparecer será sempre textos enormes, então o cara tem que ler o texto rápido, porém tem que entende-lo, por isso é usado a leitura dinâmica.

Então, gostaria que ao abrir o texto do banco, carregar algo, ou alguma função, seja Javascript ou PHP, que faça um destaque em amarelo, de grupos de três palavras por vez, e depois de alguns segundo, automaticamente, destacar as próximas três palavras.

Obrigado,

Sds,

Vagner Nunes

Andrey Knupp Vital· 16 de fev.

Continuo sem entender .. em certo tempo vai destacando as palavras ??

criatividade zero· 16 de fev.

js apenas

Vagner Nunes· 16 de fev.

Isso... Ele vai destacando as palavras em grupos de três palavras até chegar ao final do texto.

Sds,

Vagner Nunes

Beraldo· 16 de fev.

Toda ação instantânea, sem refresh, é feita com JavaScript. Esse caso não é diferente :thumbsup:

Evandro Oliveira· 17 de fev.

setInterval e Regexp

Se sentir dúvida com alguma das duas funções, basta postar.

Vagner Nunes· 21 de fev.

Prezados,

Em relação a esse sistema de Leitura dinâmica, que estava querendo, achei um JavaScript que seria mais ou menos o que estou querendo, mas o problema é que ele seleciona grupo de palavras, mas gostaria que ele selecionasse um grupo por linha, e não continuasse a seleção na linha de baixo. E também tem como fazer ele funciona sem ser em um Textarea.

Veja: http://www.gouarts.com/Scripts/ditador.htm

Segue arquivos:

Página

<!DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml"><head>
<meta http-equiv="content-type" content="text/html; charset=ISO-8859-1">

<title>Leitura Dinamica</title>

<link rel="stylesheet" href="ditador_arquivos/style.css">

<script src="ditador_arquivos/jquery.js"></script>
<script src="ditador_arquivos/jquery-ui-slider.js"></script>

<script type="text/javascript" src="ditador_arquivos/jscolor.js"></script>

<script src="ditador_arquivos/rsvp.js"></script>
<script src="ditador_arquivos/pagespecific.js"></script>

 <link type="text/css" href="ditador_arquivos/style_002.css" rel="stylesheet">
 <script src="ditador_arquivos/script.js" type="text/javascript"></script>
 <script type="text/javascript">
 function submitRating(evt)
 {
 var tmp = evt.target.getAttribute('id').substr(5);
 var widgetId = tmp.substr(0, tmp.indexOf('_'));
 var starNbr = tmp.substr(tmp.indexOf('_')+1);
 $.get("./feedback.php",
 { ratingID: widgetId, ratingValue: starNbr},
 function(data){
 $(".rating_stars").html("Thank you!");
 }
 );
 }

 function jqueryInit()
 {
 init_rating();
 $('span.rating_stars img').bind('click', submitRating);
 }

 $(document).ready(jqueryInit);

 function openFeedbackForm(){
 $("#feedback_div").show();
 }

 function hideFeedbackForm(){
 $("#feedback_div").hide();
 }

 function submitFeedback(){
 $.get("./feedback.php",
 { feedback: $("#feedback_text").val() },
 function(data){
 $("#feedback_div").html("Thank you for your comment.");
 setTimeout(function(){ $("#feedback_div").hide('slow'); }, 2000);
 }
 );
 }
 </script>

</head><body>
<h2><noscript>
 </noscript>
</h2>

<div style="margin: 0px 0px 15px 15px;"></div>

<div id="feedback_div" style="margin: 0px 0px 15px 15px; display: none;"><form action="./feedback.php" method="get"><textarea id="feedback_text" rows="3" cols="40"></textarea><br><input value="Send comment" onclick="submitFeedback()" type="button"><input value="Hide form" onclick="hideFeedbackForm()" type="button"></form></div>

<div id="tabs">
	<ul id="tabs_ul">
 <li id="textinput_tab">
 <a href="#" id="current" onclick="showtab(1); return false;">

 Escreva um texto </a> </li>
 <li id="playback_tab">
 <a id="" href="#" onclick="showtab(2); return false;">
 Visualizar </a> </li>
 <li id="info_tab"></li>
	</ul>
</div>

<div style="display: block;" id="textinput_pane" class="tab_pane">
	<div id="input_text">
 Para teste escreva um texto aqui!<br> <br>
 <textarea id="input_text_ta" cols="70" rows="10">A maioria das pessoas, quando perguntada, diz que não gosta de ler, porque isto lhe dá sono. Na verdade, não é a leitura que dá sono, e sim o modo como ela é realizada. Devido ao modo como aprendemos a ler, as pessoas ficam com hábitos prejudiciais de leitura , tais como:

1) Sub-vocalização(leitura como os lábios ou com a garganta)
2) Leitura Linear (palavra por palavra)
3) Leitura desatenta (com constantes re-leituras do mesmo trecho, e uma baixa retenção do conteúdo lido)

Também em razão deste tipo de leitura, as pessoas acostumam-se a ler pouco, o que acarreta na maioria dos casos num pequeno repertório de palavras. Assim, qualquer palavra que desconheçam (devido a pouca leitura) provoca-lhe um desconforto interno incosciente, que elas (as pessoas) procuram justificar-se dizendo para si próprio e para os outros que não gosta muito de ler.

Existem, então, dois motivos básicos pelos quais você lê errado:

1) o modo como aprendeu a ler.
2) ler de modo inconstante.

Na verdade, um decorre do outro: você lê pouco, devido ao modo como aprendeu a ler. É claro que isto não significa que não saiba ler; isto significa apenas que, em sua aprendizagem, foi imposto um limite à sua velocidade de leitura, limite este que você jamais tentou superar.

Quando se ensina uma pessoa a ler, as palavras são divididas em sílabas, para facilitar a aprendizagem da leitura. Além disso, as palavras são lidas em voz alta, sílaba por sílaba. Infelizmente, depois de aprendida a leitura, as pessoas continuam a ler fazendo esta vocalização das palavras; mesmo que silenciosamente. Na verdade, este é o maior obstáculo à leitura rápida.

Para aprender a ler dinamicamente, de um modo veloz e produtivo, você deve mudar o seu método de leitura, o que se pode conseguir com um treinamento especial. Primeiro, você deve perder o hábito de sub-vocalizar as palavras. depois, deve habituar-se a enxergar o conjunto de palavras, ao invés das palavras isoladas. À medida que progredir nos exercícios, você conseguirá enxergar blocos cada vez maiores de palavras de uma só vez. Com o exercícios, você conseguirá enxergar blocos cada vez maiores de palavras de um só vez. Com os exercícios de atenção, aprenderá a aumentar a sua atenção durante a leitura, o que fará que retenha cada vez mais o conteúdo do que ler.

A velocidade que conseguir atingir, a par desta retenção de conteúdo, darão um prazer cada vez maior às suas leituras.

Faço os seus exercícios progressivamente, sem pressa e sem pular nenhum, de modo persistente. Escolha um lugar sossegado, e procure colocar-se de modo relaxado e receptivo, confiando que irá conseguir o que deseja. </textarea>
 <br> <br>

 <a href="#" onclick="startNewPlayback(); return false;" title="Começar" onmouseover="$(this).find('img').attr('src', 'ditador_arquivos/playthattext2.jpg'); return false;" onmouseout="$(this).find('img').attr('src', 'ditador_arquivos/playthattext.jpg'); return false;"><img src="ditador_arquivos/playthattext.jpg"></a>
	</div>
</div>

<div style="display: none;" id="playback_pane" class="tab_pane">
	<div id="display">input some text <br>and click "Play <br></div>

	<div id="viewerTa_div" class="controls_div">
 <div style="margin-bottom: 8px;"><a href="#" onclick="$('#viewer_ta').toggle();" style="text-decoration: none;"><b>Ocultar/Mostrar Scroller</b></a>. <small>(Esse recurso só funciona no Firefox e no Internet Explorer - A rolagem não aparece em outros navegadores!)</small></div>
 <textarea id="viewer_ta" rows="5" cols="70"></textarea>
	</div>

	<div id="playback_controls" class="controls_div">
 <table id="controls_table">
 <tbody><tr>
 <td>
 <a href="#" onclick="playButtonCallback(); return false;" class="playback_control_a"><img src="ditador_arquivos/play.gif"></a>
 <a href="#" onclick="pauseButtonCallback(); return false;" class="playback_control_a"><img src="ditador_arquivos/pause.gif"></a>
 <a href="#" onclick="rewindButtonCallback(); return false;" class="playback_control_a"><img src="ditador_arquivos/rewind.gif"></a>
 </td>
 <td>

 <div class="ui-slider" id="slider_div">
 <a href="#" style="border: medium none ; outline-color: -moz-use-text-color; outline-style: none; outline-width: medium;"><div style="left: 70.07px;" class="ui-slider-handle"></div></a>
 </div>
 </td>
 </tr>
 </tbody></table>
	</div>

	<div id="settings" class="controls_div">
 <table id="settings_table">

 <tbody>
 <tr>
 <td>Números de Linhas (A): <input size="3" id="numLines" value="2" onchange="recomputeWpm()" type="text">  </td>
 <td>Palavras por linha (B): <input size="3" id="wordsPerLine" value="3" onchange="recomputeWpm()" type="text"></td>
 </tr>

 <tr>
 <td>Grupos por minutos(C): <input size="3" id="groupsPerMinute" value="100" onchange="recomputeWpm()" type="text">  </td>

 <td>(Calculo) Palavras por minutos (A*B*C): <input size="3" value="600" id="wordsPerMinute" onchange="recomputeWpm()" disabled="true" type="text"></td>
 </tr>

 <tr>
 <td style="text-align: left; font-weight: bold; font-size: 10pt;">
 Você também pode pressionar para cima / baixo nas setas do teclado <br> para aumentar / diminuir a velocidade.
 </td>
 <td style="text-align: right;">
 <input value="Salvar Modificações" onclick="changeSettingsButtonCallback();" type="button">

 </td>

 </tr>
 </tbody>
 </table>
	</div>

	<div id="colors_div" class="controls_div" style="padding: 5px 0pt;">
 Cor de Fundo: <input style="background-color: #FFFFFF; color: rgb(0, 0, 0);" autocomplete="off" class="color" id="bg_color" size="6" value="#FFFFFF">

    Cor do Texto: <input style="background-color: rgb(0, 0, 0); color: rgb(255, 255, 255);" autocomplete="off" class="color" id="text_color" size="6" value="000000">
	</div>
</div>

<div style="display: none;" id="info_pane" class="tab_pane">
	<h3> </h3>
	</body></html>

pagespecific.js

// ---------------------------------------------------------------------------
// Functions that bind the UI to the Rsvp object

function extractSettings(){
return {
 'numLines': parseInt($('#numLines').val()),
 'wordsPerLine': parseInt($('#wordsPerLine').val()),
 'groupsPerMinute': parseInt($('#groupsPerMinute').val())
	};
}

function changeSettingsButtonCallback(){
var newSettings = extractSettings();

if($("#display").data('rsvpInstance'))

	$("#display").data('rsvpInstance').changeSettings(newSettings);

recomputeWpm();
}

function recomputeWpm(){
var newSettings = extractSettings();

$("#wordsPerMinute").val(
newSettings.numLines *
newSettings.wordsPerLine *

 newSettings.groupsPerMinute);
}

function _incrementSpeed(wpm_plus){
var rsvpInstance = $("#display").data('rsvpInstance');

if(rsvpInstance){
	newGpm = rsvpInstance.incrementSpeed(wpm_plus);
	$('#groupsPerMinute').val(newGpm);
	recomputeWpm();
}
}

function startNewPlayback(){
showtab(2);

var oldInstance = $("#display").data(
	'rsvpInstance');

if(oldInstance){
	oldInstance.destroy();
}

$('#viewer_ta').val($('#input_text_ta').val());

var rsvpInstance = new Rsvp(
 $("#input_text_ta").val(),
 $('#display'),
 extractSettings(),
 $('#slider_div'),
 $('#viewer_ta')
	);

$("#display").data(
'rsvpInstance',
rsvpInstance

);

rsvpInstance.start();
}

function handleSlideEvent(e, ui){
var newValue = ui.value;

var rsvpInstance = $("#display").data('rsvpInstance');

if(rsvpInstance){
	if(!rsvpInstance.sliderEventDisabled){
 rsvpInstance.moveToPercentage(newValue / 200);
	}
}
}

function playButtonCallback(){
var rsvpInstance = $("#display").data('rsvpInstance');

if(rsvpInstance){
	rsvpInstance.playOrResume();
}
}

function pauseButtonCallback(){
var rsvpInstance = $("#display").data('rsvpInstance');

if(rsvpInstance){
	rsvpInstance.pause();
}
}

function rewindButtonCallback(){
var rsvpInstance = $("#display").data('rsvpInstance');

if(rsvpInstance){
	rsvpInstance.rewind();
}
}

$(function(){
$('#slider_div').slider({ min: 0, max: 200, startValue: 0, slide: handleSlideEvent });
});

// ---------------------------------------------------------------------------
// Tabs and cosmetic code, unrelated to the Rsvp object

function _hideAllTabs(tabnum){
$('#textinput_tab a').attr('id', '');
$('#playback_tab a').attr('id', '');
$('#info_tab a').attr('id', '');

$('#textinput_pane').hide();
$('#playback_pane').hide();
$('#info_pane').hide();
}

function _getTab(tabnum){

switch(tabnum){

case 1: return $('#textinput_tab a');
case 2: return $('#playback_tab a');
case 3: return $('#info_tab a');
}
}

function _getPane(tabnum){

switch(tabnum){

case 1: return $('#textinput_pane');
case 2: return $('#playback_pane');
case 3: return $('#info_pane');
}
}

function _showOneTab(tabnum){
var tab = _getTab(tabnum);
var pane = _getPane(tabnum);

tab.attr('id', 'current');
pane.show();
}

function showtab(tabnum){
_hideAllTabs();
_showOneTab(tabnum);
}

function _keyupHandler(event){
keycode = event.keyCode;

if(keycode == 38){
	// up key
	_incrementSpeed(10)
}else if(keycode == 40){
	// down key
	_incrementSpeed(-10)
}

return false;
}

function _setBgColor(color){
$("#display").css("background-color", "#"+color);
$("#viewer_ta").css("background-color", "#"+color);
}

function _setFgColor(color){
$("#display").css("color", "#"+color);
$("#viewer_ta").css("color", "#"+color);
}

$(function(){

// To use the text given by the bookmarklet

var qs = window.location.search;

if(qs && qs.length > 1){
	$('#input_text_ta').val(decodeURIComponent(qs.substring(1)));
}

showtab(1);

$(".playback_control_a img")

	.mouseover(function(){ $(this).css('background-color', '#888'); })
	.mouseout(function(){ $(this).css('background-color', '#aaa'); });

$(document).keyup(_keyupHandler);

$("#bg_color").change(

	function(){ _setBgColor( $("#bg_color").val() ); }
	);

$("#text_color").change(

	function(){ _setFgColor( $("#text_color").val() ); }
	);

$("#viewer_ta").keydown(_keyupHandler);
});

rsvp.js

function Rsvp(text, targetDiv, settings, slider, viewerTa){
this._text = text;
this._targetDiv = targetDiv;
this._slider = slider;
this._viewerTa = viewerTa;

this.changeSettings(settings);

this._initializeFromText(text);

this._nextWordIndex = 0;
this._curTimeout = null;

this.sliderEventDisabled = false;

this._playing = false;

this._destroyed = false;
}

Rsvp.fn = Rsvp.prototype;

Rsvp.fn._initializeFromText = function(text){

// match a word and a bunch of non-word-stuff // "g" is important if we want lastIndex to be remembered in match object

var regex = new RegExp("([^\\s]+)\\s+", "mg");

this._words = [];
this._wordPositions = [];

var match = null;
var i = 0;
var lastLastIndex = 0;

while((match = regex.exec(text)) != null){

	this._words[i] = match[1];
	this._wordPositions[i] = lastLastIndex;
	lastLastIndex = regex.lastIndex;
	i++;
}

// last word if there's some text remaining

this._words[i] = text.substring(lastLastIndex);
this._wordPositions[i] = lastLastIndex;

i++;

// To make the final iteration in selectRange work

this._wordPositions[i] = text.length-1;
}

Rsvp.fn.destroy = function(){
this.pause();

this._destroyed = true;
}

Rsvp.fn.changeSettings = function(settings){
this._numLines = settings.numLines;
this._wordsPerLine = settings.wordsPerLine;
this._groupsPerMinute = settings.groupsPerMinute;

this._wordsPerGroup = this._numLines * this._wordsPerLine;

this._msPerGroup = 60 * 1000 / this._groupsPerMinute;
}

Rsvp.fn.incrementSpeed = function(wpm_plus){
this._groupsPerMinute += wpm_plus;

if(this._groupsPerMinute < 1){
	alert("Minimum at 1 group per minute");
	this._groupsPerMinute = 1;
}

this._msPerGroup = 60 * 1000 / this._groupsPerMinute;

return this._groupsPerMinute;
}

Rsvp.fn.start = function(){
this._playing = true;

this.nextFrame();
}

Rsvp.fn.nextFrame = function(){
this.showTextRange();

// Adjust slider

this.sliderEventDisabled = true;

var pos = (this._nextWordIndex - this._wordsPerGroup)
 / (this._words.length - this._wordsPerGroup)
 * 200;
$(this._slider).slider("moveTo", Math.round(pos), 0);

this.sliderEventDisabled = false;

// Timer for next frame

if(this._playing && this._nextWordIndex < this._words.length){
	this.setTimeout();
}
}

Rsvp.fn.moveToPercentage = function(percent){
var startWord = Math.floor(percent * this._words.length);

// Round to correct start word (ie. if wordsPerGroup = 4,
// we want groups to start at 0, 4, 8, ...)

startWord -= startWord % this._wordsPerGroup;

this.showTextRange(startWord);
}

Rsvp.fn.showTextRange = function(firstWordIndex){
if(firstWordIndex === undefined)
	firstWordIndex = this._nextWordIndex;

this._nextWordIndex = firstWordIndex;

var resHtml = "";
var firstWordBeginPos = this._wordPositions[firstWordIndex];
for(var i=0; i<this._numLines; i++){
	for(var j=0; j<this._wordsPerLine; j++){
 if(this._nextWordIndex >= this._words.length){
 this._playing = false;
 break;
 }

 resHtml += this._words[this._nextWordIndex] + " ";

 this._nextWordIndex++;
	}

	if(this._nextWordIndex >= this._words.length){
 this._playing = false;
 break;
	}

	resHtml += "<br/>";
}
var lastWordEndPos = this._wordPositions[this._nextWordIndex];

this.selectRangeInViewer(firstWordBeginPos, lastWordEndPos);

$(this._targetDiv).html(resHtml);
}

Rsvp.fn.setTimeout = function(){
if(this._destroyed)
	// no more setting of timeout after this point...
	// otherwise it might conflict with another object
	return;

// make sure the old timeout is cleared, otherwise timers compete

if(this._curTimeout)
	clearTimeout(this._curTimeout);

var self = this;

this._curTimeout = setTimeout(

 function(){ self.nextFrame(); },
 this._msPerGroup
	);
}

Rsvp.fn.pause = function(){
clearTimeout(this._curTimeout);

this._playing = false;
}

Rsvp.fn.playOrResume = function(){
this._playing = true;

this.setTimeout();
}

Rsvp.fn.rewind = function(){
this._nextWordIndex = 0;

this.nextFrame();
}

Rsvp.fn.selectRangeInViewer = function(start, end){
var ta = $(this._viewerTa).get(0);

if(!$(this._viewerTa).is(":visible")){

	return;
}

if (ta.createTextRange) {
	var oRange = ta.createTextRange();
	oRange.collapse(true);
	oRange.moveStart("character", start);
	oRange.moveEnd("character", end-start);
	oRange.select();

} else if (ta.setSelectionRange) {
	ta.setSelectionRange(start,start+1);

	// causes scrolling to caret position in IE, seen there:
	// http://bytes.com/forum/thread496726.html
	// Only works in Firefox... Opera and Safari won't collaborate
	if(window.KeyEvent){
 var ev = document.createEvent ('KeyEvents');
 ev.initKeyEvent('keypress', true, true, window,
 false, false, false, false, 0,
 ta.value.charCodeAt(start));
 ta.dispatchEvent(ev);
	}

	ta.setSelectionRange(start, end);
}
//$(this._viewerTa).blur();

}

Sds,

Vagner Nunes

Vagner Nunes· 22 de fev.

Achei um site completinho do que estava querendo.

Alguém conhece algum sistema similar, ou me ajudaria a desenvolver algo parecido?

Leitura Dinâmica

Evandro Oliveira· 26 de fev.

Como eu disse, nada além de expressões regulares e setInterval:

var memoria = function(){
 var texto = document.getElementByid('texto');
 var repl = texto.innerHTML;
 repl.replace(/((.*?\s){1,3})/, '<span>$1</span>'); // Envolvemos grupos de até 3 palavras em tags <span>
 texto.innerHTML = repl;
 var partes = texto.getElementsByTagName('span');
 var parte = 0;
 var tempo = 1; // Tempo de transição (em segundos)
 setInterval(function(){
 if(parte > 0) {
 var anterior = parte - 1;
 partes[anterior].style.backgroundColor = 'transparent';
 partes[anterior].style.color = 'inherit';
 }
 if(parte === partes.length) parte = 0;
 partes[parte].style.backgroundColor = '#000';
 partes[parte].style.color = '#fff';
 parte++;
 }, tempo * 1000);
}

Vagner Nunes· 26 de fev.

Como posso chamar essa variável no texto?

Evandro Oliveira· 27 de fev.

A segunda linha procura por um elemento cujo ID seja 'texto'

<p id="texto">este é um texto com mais de três palavras que deverá alternar o plano de fundo e texto para leitura dinâmica</p>

Vagner Nunes· 28 de fev.

Olá Evandro,

Obrigado pelas dicas....

Não estou conseguindo, veja se estou no caminho certo!!!

Criei um arquivo chamado ler.js

var memoria = function(){
 var texto = document.getElementByid('texto');
 var repl = texto.innerHTML;
 repl.replace(/((.*?\s){1,3})/, '<span>$1</span>'); // Envolvemos grupos de até 3 palavras em tags <span>
 texto.innerHTML = repl;
 var partes = texto.getElementsByTagName('span');
 var parte = 0;
 var tempo = 1; // Tempo de transição (em segundos)
 setInterval(function(){
 if(parte > 0) {
 var anterior = parte - 1;
 partes[anterior].style.backgroundColor = 'transparent';
 partes[anterior].style.color = 'inherit';
 }
 if(parte === partes.length) parte = 0;
 partes[parte].style.backgroundColor = '#000';
 partes[parte].style.color = '#fff';
 parte++;
 }, tempo * 1000);
}

e criei um arquivo chamado index.php, que chama a função ler.js

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<script language="JavaScript" src="ler.js"></script>
</head>

<body>

<label>
<input type="button" id="texto" onClick="texto(document.getElementById('texto').value, texto)" value="Iniciar" />
</label>

<div id="texto">

O constitucionalismo, teoria que deu ensejo à elaboração do que é formalmente chamado de Constituição, surgiu a partir das teorias iluministas e do pensamento que também deu base à Revolução Francesa de 1789.

Considera-se a Magna Carta o documento que esboçou o que posteriormente seria chamado de Constituição. Foi assinada pelo Príncipe João Sem-Terra face à pressão dos barões da Inglaterra medieval, e apesar da notícia histórica de que os únicos que se beneficiaram com tal direito foram os barões ingleses, o documento não perde a posição de elemento central na história do constitucionalismo ocidental. A partir da moderna doutrina constitucionalista, a interpretação dada à Magna Carta sofre um processo de mutação denominado mutação constitucional, donde novos personagens ocupam as posições ocupadas originalmente pelos participantes daquele contrato feudal, de maneira que as prerrogativas e direitos que foram concedidos aos barões passam a ser devidos aos cidadãos, e os deveres e limitações impostos ao Príncipe João Sem-Terra passam a limitar o poder do Estado.

Contudo, foi a partir das "Revoluções Liberais" (Revolução Francesa, Revolução Americana e Revolução Industrial) que surgiu o ideário constitucional, no qual seria necessário, para evitar abusos dos soberanos em relação aos súditos, que existisse um documento onde se fixasse a estrutura do Estado, e a conseqüente limitação dos poderes do Estado em relação ao povo.

Com o passar do tempo, em especial com as teorias elaboradas por Hans Kelsen, grande jurista da Escola Austríaca da primeira metade do Século XX, passou-se a considerar a Constituição não como apenas uma lei limitadora e organizativa, mas como a própria fonte de eficácia de todas as leis de um Estado. Tal teoria (chamada de Teoria Pura do Direito, de Kelsen), apesar de essencial para a formação de um pensamento mais aprofundado acerca desta norma, não dá todo o alcance possível do poder e função constitucional.

Mais tarde, outros pensadores como Konrad Hesse, Robert Alexy e Ronald Dworkin contribuíram sobremaneira para definir a real função da Constituição. Esta norma, superior a todas, não teria apenas a função de garantir a existência e limites do Estado. Ao contrário, ao invés de apenas ter um caráter negativo em relação ao exercício dos direitos das pessoas, a Lei Maior deve prever os Direitos Fundamentais inerentes a cada pessoa, e prever modos de garantir a eficácia dos mesmos, de modo que o Estado não apenas se negue a prejudicar as pessoas, mas sim cumpra aquela que é sua função precípua: a promoção da dignidade da pessoa humana.

</div>

</body>
</html>

Rafael Sirotheau· 28 de fev.

Serve jQuery??

fiz assim http://jsfiddle.net/rafasirotheau/Kswwv/1/

Veja se é mais ou menos o que voce quer...

Falta apenas definir a funcao que fara isso de tempos em tempos.. a cada clique, mais 3 palavras sao marcadas

Vagner Nunes· 28 de fev.

Olá Rafael, ficou legal, mas, seria interesante, quando clicar em Iniciar, ele modificar automaticamente, sem precisar de clicar novamente. Como posso fazer isso?

Valeu...

Rafael Sirotheau· 28 de fev.

veja esse entao

http://jsfiddle.net/rafasirotheau/Kswwv/4/

EDIT:

funciona, mas esta com erro pra finalizar a funcao.. trabalhndo nisso agora

EDIT 2:

agora esta ok

http://jsfiddle.net/rafasirotheau/Kswwv/7/

Vagner Nunes· 28 de fev.

Legal, em qual linha que diminui a velocidade?

Bruno Augusto· 1 de mar.

Não sei porque o tópico foi marcado como resolvido se ainda há dúvidas...

Enfim... Acredito que seja o valor da variável intervaloMS

Rafael Sirotheau· 1 de mar.

exatamente.