Ir ao conteúdo
  • Cadastre-se
Caio Fagundes

Criar simples dashboard com html e css

Recommended Posts

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.

THEINSTANCE.png

Compartilhar este post


Link para o post
Compartilhar em outros sites

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

IxC8kFd.jpg

 

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

Editado por joseRenato
  • Curtir 1

Compartilhar este post


Link para o post
Compartilhar em outros sites
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

IxC8kFd.jpg

 

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

  • Curtir 1

Compartilhar este post


Link para o post
Compartilhar em outros sites

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>

 

  • Curtir 2

Compartilhar este post


Link para o post
Compartilhar em outros sites

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.

Editado por Caio Fagundes
escrevi uma palavra errada

Compartilhar este post


Link para o post
Compartilhar em outros sites

Crie uma conta ou entre para comentar

Você precisar ser um membro para fazer um comentário

Criar uma conta

Crie uma nova conta em nossa comunidade. É fácil!

Crie uma nova conta

Entrar

Já tem uma conta? Faça o login.

Entrar agora





Sobre o Clube do Hardware

No ar desde 1996, o Clube do Hardware é uma das maiores, mais antigas e mais respeitadas publicações sobre tecnologia do Brasil. Leia mais

Direitos autorais

Não permitimos a cópia ou reprodução do conteúdo do nosso site, fórum, newsletters e redes sociais, mesmo citando-se a fonte. Leia mais

×