Ponto Fla - Laboratório de Idéias http://www.ponto-fla.com/blog Um pouco sobre css, design, jquery e desenvolvimento web Mon, 09 Mar 2009 16:30:29 +0000 http://wordpress.org/?v=2.7 en hourly 1 Manipulação de Imagens http://www.ponto-fla.com/blog/?p=56 http://www.ponto-fla.com/blog/?p=56#comments Mon, 09 Mar 2009 16:30:29 +0000 Flavinhaw http://www.ponto-fla.com/blog/?p=56 Bom hoje vou fazer um pouco de propaganda minha mesmo…rs
Essas são algumas imagens que eu criei manipulando no photoshop através de outras imagens. Nunca tinha feito isso, até resolver pegar um turorial e seguir o passo a passo, fiz umas 3 imagens seguindo tutoriais, e depois disso comecei a criar as minhas próprias imagens…Com o tempo vou postando mais imagens, é legal para ver como o trabalho vai melhorando como o tempo!

As imagens a seguir foram utilizadas no trabalho logo abaixo:
Imagens usadas no resultado abaixo

As imagens a seguir foram utilizadas no trabalho logo abaixo:
Imagens usadas no resultado abaixo

As imagens a seguir foram utilizadas no trabalho logo abaixo:
Imagens usadas no resultado abaixo

]]> http://www.ponto-fla.com/blog/?feed=rss2&p=56 Ilustração Digital http://www.ponto-fla.com/blog/?p=48 http://www.ponto-fla.com/blog/?p=48#comments Mon, 09 Feb 2009 14:09:23 +0000 Flavinhaw http://www.ponto-fla.com/blog/?p=48 O que eu mais gosto na ilustração é a variedade de estilos, um tão diferente do outro e trabalhos tão interessantes.
Coloquei aqui algumas imagens e links de alguns ilustradores que eu andei vendo por aí e seus variados estilos:

Rianna Moller

As ilustrações dessa artista de 22 anos são bastante sombrias, mas o que mais me chamou atenção foi o belo uso das cores.

Chris Borges

Chris Borges tem 25 anos e é de São Paulo, e tem um estilo que eu particulamente adoro.

Raul Allen

O estilo de Raul Allen é fascinante, o uso das cores, o traço do desenho… Sem dúvida é uma ótima fonte de inspiração

Marek

Com um realismo de impressionar o polonês Marek tem trabalhos em 3D com uma imensa riqueza de detalhes. Com tantos trabalhos maravilhosos foi difícil escolher apenas dois para mostrar aqui.

Em todos esse portfólios dá pra perceber a grande diferença de estilos em uma ilustração e o quanto você pode criar coisas legais, só depende da sua imaginação.

]]> http://www.ponto-fla.com/blog/?feed=rss2&p=48 Pintura Digital http://www.ponto-fla.com/blog/?p=46 http://www.ponto-fla.com/blog/?p=46#comments Mon, 02 Feb 2009 19:34:32 +0000 Flavinhaw http://www.ponto-fla.com/blog/?p=46 Estava pesquisando na net sobre pintura digital, e encontrei o blog do cartunista William Medeiros. O blog tem ótimas ilustrações e caricaturas, desenhadas a mão e pintadas na grande maioria no photoshop.
Outros trabalhos podem ser visto em seu site pessoal.
Vale a visita pra quem gosta do estilo.



]]> http://www.ponto-fla.com/blog/?feed=rss2&p=46 Imprimindo apenas o conteúdo de uma div http://www.ponto-fla.com/blog/?p=41 http://www.ponto-fla.com/blog/?p=41#comments Mon, 19 Jan 2009 19:05:25 +0000 Flavinhaw http://www.ponto-fla.com/blog/?p=41 Aqui no meu trabalho surgiu esse problema, precisavamos imprimir um conteúdo de uma div sem enviar esse conteúdo para outra página ou para um pop por exemplo.
Deveria abrir direto a opção de imprimir, e na página existem vários outros conteúdos que não deveriam ser impressos.
Depois de muito pensar e com a ajuda do Edu chegamos a seguinte solução:

Clique aqui para ver o exemplo funcionando.

Nesse exemplo deixei o iframe aparecendo para vocês conseguirem visualizar que o conteúdo da div onde tem o botão imprimir está aparecendo no iframe e será o conteúdo impresso.

Então vamos lá vou explicar como foi feito:

O javascript:

1
2
3
4
5
6
7
8
9
10
11

$(document).ready(function(){
$('.conteudo-impressao').append('<iframe id="contFrame" name="contFrame" > </iframe>');
var conteudo = $('#grupo_content')[0];
var ifr = window.open("", "contFrame", "")
ifr.document.open()
ifr.document.write(conteudo.innerHTML)
ifr.document.close()
$('#print').click(function(){
	ifr.print();
});
});

O html

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25

<body>
<div class="content">
<div class="conteudos">
<p>
	Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean tincidunt, turpis at feugiat gravida, ante mauris tempor sapien, sed accumsan eros nisi quis ipsum! Nunc quis ante eu leo mollis dictum. Nullam eget quam. Integer nec nibh? Fusce aliquam. Phasellus hendrerit pretium ante! Sed ligula. Pellentesque purus lorem, euismod volutpat, molestie porta, blandit et, risus. Etiam vehicula turpis sit amet dui. Fusce sed est ac dui dictum vehicula. Aliquam lobortis porttitor nibh.
</p>
<p>
	Sed mollis porta lectus. Donec id purus. Etiam risus. Morbi semper ligula. Nulla iaculis suscipit erat. Aliquam erat volutpat. Suspendisse potenti. Duis at orci. Nulla facilisi. Vestibulum tempus. Suspendisse diam. Cras eros nibh, pretium ac, placerat in, tristique elementum; mi. Nulla facilisi. Sed nibh orci, molestie non, vulputate in, aliquet a; arcu. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Etiam eu nibh quis quam rutrum posuere.
	</p>			
</div>
<div class="conteudo-impressao">
<p>
	<a href="#" title="IMPRIMIR" id="print" >IMPRIMIR</a>
</p>
<div id="grupo_content">
	<p>
	Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean tincidunt, turpis at feugiat gravida, ante mauris tempor sapien, sed accumsan eros nisi quis ipsum! Nunc quis ante eu leo mollis dictum. Nullam eget quam. Integer nec nibh? Fusce aliquam. Phasellus hendrerit pretium ante! Sed ligula. Pellentesque purus lorem, euismod volutpat, molestie porta, blandit et, risus. Etiam vehicula turpis sit amet dui. Fusce sed est ac dui dictum vehicula. Aliquam lobortis porttitor nibh.
	</p>
        <p>
	Sed mollis porta lectus. Donec id purus. Etiam risus. Morbi semper ligula. Nulla iaculis suscipit erat. Aliquam erat volutpat. Suspendisse potenti. Duis at orci. Nulla facilisi. Vestibulum tempus. Suspendisse diam. Cras eros nibh, pretium ac, placerat in, tristique elementum; mi. Nulla facilisi. Sed nibh orci, molestie non, vulputate in, aliquet a; arcu. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Etiam eu nibh quis quam rutrum posuere.
		</p>
		</div>
	</div>
</div>	
</body>

O css

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18

.content {
margin: 10px auto;	
text-align: left;	
width: 500px;
}
.conteudos, .conteudo-impressao {
width: 500px;
border: 1px solid #cecece;
padding: 5px;
}
.conteudo-impressao {
border: 1px solid red;
margin-top: 20px;
}
.txtIframe {
visibility: hidden;
height: 0;
}

Nesse script criamos um iframe dentro da div com a classe “conteudo-impressao”*
Depois criamos uma variável e nela armazenamos o conteúdo da div com o id “grupo_content” colocamos o ‘[0]‘ porque em jQuery ele retorna um objeto jQuery utilizando o ‘[0]‘ ele retorna o objeto html
Criamos uma variável “ifr” e fazemos abrir “uma janela” dentro do iframe com o name “contFrame”
Depois disso precisamos abrir o documento e na linha 6 escreve-se o conteudo armazenado na variável “conteudo”, na linha seguinte fechamos o documento.
Criamos então uma função dizendo que quando clicarmos no link com o id “print” vamos imprimir o conteudo da variável “ifr”

*Para utilizar esse exemplo o iframe não deve ficar visível na página para isso basta colocar no iframe a classe “txtIframe”:

1

$('.conteudo-impressao').append('<iframe id="contFrame" name="contFrame" class="txtIframe"> </iframe>');
]]> http://www.ponto-fla.com/blog/?feed=rss2&p=41 jQuery Funções Básicas http://www.ponto-fla.com/blog/?p=10 http://www.ponto-fla.com/blog/?p=10#comments Wed, 14 Jan 2009 14:09:19 +0000 Flavinhaw http://www.ponto-fla.com/blog/?p=10 Vou começar falando sobre algumas funções básicas de jQuery para quem está começando a estudar. Darei exemplos práticos de como a biblioteca jQuery pode agilizar a vida dos desenvolvedores.

- Selecionando um elemento e aplicando uma propriedade Css
Com o código abaixo iremos selecionar todos os elementos “p” e aplicar uma cor de fundo

Clique aqui para ver o exemplo funcionando.

O script:

1
2
3

$(document).ready(function(){
$('p').css('background','#cecece');
});

O html:

1
2
3

<body>
<p>Esse é um parágrafo modificado por jQuery.</p>
</body>

A primeira linha diz que quando o documento for lido a seguinte função será executada.
Na segunda linha pegamos o elemento “p” e incluimos background com a cor de fundo cinza.

O mesmo efeito pode ser conseguido também apenas com quando o evento for acionado pelo usuário, como por exemplo clicando em um botão.
Clique aqui para ver o exemplo funcionando.

Ficaria assim:

O script:

1
2
3
4
5

$(document).ready(function(){
$('#modificar').click(function(){
$('p').css('background','#cecece');
});
});

O html:

1
2
3
4

<body>
<button name="bt" id="modificar">Modificar</button>
<p>Esse é um parágrafo modificado por jQuery.</p>
</body>

Aqui dizemos que quando o id “modificar” for clicado vai executar a seguinte função: trocar o background do elemento p para cinza.

E se eu tiver mais que um parágrafo e quiser alterar apenas o primeiro?

Clique aqui para ver o exemplo funcionando.

O script:

1
2
3
4
5

$(document).ready(function(){
$('#modificar').click(function(){
$('p:first').css('background','#cecece');
});
});

O html:

1
2
3
4
5
6
7

<body>
<button name="bt" id="modificar">Modificar</button>
<p>Esse é o parágrafo que será modificado por jQuery.</p>
<p>Esse é o parágrafo comum.</p>
<p>Esse é o parágrafo comum.</p>
<p>Esse é o parágrafo comum.</p>
</body>

Aqui utilizamos o seletor “:first” para identificar que é apenas o primeiro parágrafo que será alterado.
Podemos também utilizar o “:last” e alterar apenas o último parágrafo.

Clique aqui para ver o exemplo funcionando.

Por hoje é só mais continuarei postando sobre jQuery.

]]> http://www.ponto-fla.com/blog/?feed=rss2&p=10 Olá, blogosfera! http://www.ponto-fla.com/blog/?p=1 http://www.ponto-fla.com/blog/?p=1#comments Mon, 12 Jan 2009 17:00:25 +0000 admin http://www.ponto-fla.com/blog/?p=1 Olá pessoas!

Meu nome é Flavia sou programadora de interface e estou entrando nesse mundo da blogosfera. Aqui falei um pouco sobre Css, Design, Jquery e desenvolvimento web.

Vou começar com a dica de um ótimo blog que fala sobre desenvolvimento web, arquitetura de informação, javascript,  jquery. O TidBits é escrito por Danilo Augusto e Belinha o blog trás exemplos práticos. Recomendo a leitura diária.

Espero que gostem de tudo que irei postar aqui.

]]> http://www.ponto-fla.com/blog/?feed=rss2&p=1