Criar simples dashboard com html e css

Caio Fagundes · 19 de julho de 2016

Fala galera,

Estou estudando programação para fazer um painel de controle e visualização simples, onde tenho que criar uma página que mostre 6 outras páginas dentro dela.

- De preferência as 6 páginas pequenas devem atualizar-se e mostrar o conteúdo sempre da página original.

- De preferência ao clicar em um dos 6 quadrados pequenos (que contém as respectivas páginas) a abertura deve ser redirecionado para uma nova guia.

Eu pensei em fazer isso usando comando 'frame' porém não consigo diminuir o zoom da página ao usar esse comando para que mostre toda a tela na miniatura. Pensei em inserir apenas imagem com link mas uma imagem não me mostra a tela em tempo real.

Vou mandar um exemplo pra vocês entenderem melhor. Alguém tem alguma ideia pra me auxiliar? Talvez um comando que printe a tela original de coloque como miniatura do meu dashboard, ou algo melhor que essa minha ideia.

joseRenato · 19 de julho de 2016

Olá

Você já tentou com cURL?

um exemplo básico:

<!DOCTYPE html>
<html>
<head>
	<meta charset="UTF-8">
	<title></title>
	<style type="text/css">
		section{
			margin: 0;
			padding: 0;
		}
		article{
			width: 600px;
			height: 600px;
			float: left;
			border: 1px solid black;
		}
	</style>
</head>
<body>
	<header>cURL</header>
	<section>
		<article>
			 <?php 
			 	  $ch = curl_init();
			 	  curl_setopt($ch, CURLOPT_URL, "https://www.google.com.br/");
			 	  curl_exec($ch);
			 ?>
		</article>
		<article>
			<?php 
			 	  $ch = curl_init();
			 	  curl_setopt($ch, CURLOPT_URL, "http://www.globo.com/");
			 	  curl_exec($ch);
			 ?>
		</article>
	</section>
</body>
</html>

o resultado é este: kkkkk

Claro, você terá que filtrar o html das paginas etc e tal, estudar melhor a biblioteca, mas acho que da certo deste jeito

Caio Fagundes · 25 de julho de 2016

Em 19/07/2016 às 14:20, joseRenato disse:

Olá

Você já tentou com cURL?

um exemplo básico:


<!DOCTYPE html>
<html>
<head>
	<meta charset="UTF-8">
	<title></title>
	<style type="text/css">
		section{
			margin: 0;
			padding: 0;
		}
		article{
			width: 600px;
			height: 600px;
			float: left;
			border: 1px solid black;
		}
	</style>
</head>
<body>
	<header>cURL</header>
	<section>
		<article>
			 <?php 
			 	  $ch = curl_init();
			 	  curl_setopt($ch, CURLOPT_URL, "https://www.google.com.br/");
			 	  curl_exec($ch);
			 ?>
		</article>
		<article>
			<?php 
			 	  $ch = curl_init();
			 	  curl_setopt($ch, CURLOPT_URL, "http://www.globo.com/");
			 	  curl_exec($ch);
			 ?>
		</article>
	</section>
</body>
</html>

o resultado é este: kkkkk

Claro, você terá que filtrar o html das paginas etc e tal, estudar melhor a biblioteca, mas acho que da certo deste jeito

Cara, valeu aí pela ajuda mas não consegui fazer do seu jeito. Achei um site gringo que o cara fez exatamente o que eu queria. vou deixar o comando aqui em baixo. Mas ainda não consegui fazer com que o frame abrisse em new tab quando clico em algum link no interior dele. Segue comando:

IFRAMECOMMAND.txt

joseRenato · 25 de julho de 2016

Massa cara

Para abrir as paginas em outra aba tenta esse código:

Spoiler


	<script type="text/javascript">
		$(document).ready(function(){
			$('.wrap').on('click', function(e){
				e.preventDefault();
				var href = $(this).find("iframe").attr("src");
				window.open(href, '_blank');
			});
		});
	</script>
	<style>
		iframe{  
			pointer-events:none; 
		}
	</style>

Usei Jquery, apenas link isso no teu arquivo, caso você n tenha:

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>

Caio Fagundes · 27 de julho de 2016

Po irmão, show de bola cara, copiei e colei seu script e o link no heading e deu tudo certo. Eu tinha tentado adicionar esse comando "_blank" de todas as formas, mas como sou inciante em programação, o comando não estava dando certo. Porém, com essa sua ajuda ficou perfeito!

Valeu cara, obrigado aí, me ajudou muito mesmo. Forte abraço aí pra tu.