tubo de ensaio

 
Quarta-feira, 09/05/2012

E os vencedores da edição 2011/12 são ...

Parabéns aos vencedores...

Parabéns a todos pelo esforço (uns mais que outros ) e pelo resultado conseguido. 

 

classificação

posição
Nome
n° de votos
1
stitched
29
2
templeite
21
3
favas com chouriço
14
4
kids style
13
5
Cornucópia
12
6
silversun
9
7
Fotografia
8
8
vintage notebook
7
9
esboços de Aveiro
7
10
analog studio
6

 

publicado por PedroBeca às 19:33
Sexta-feira, 29/04/2011

And the winner are...

Parabéns aos vencedores...

Parabéns a todos pelo esforço e resultado conseguido.

 

LABMM4 - classificação blogues (2010-11)

publicado por PedroBeca às 08:58
Sábado, 23/04/2011

Dica - Sprites CSS

Sprites CSS é uma técnica utilizada para melhorar o carregamento de uma página poupando pedidos ao servidor através da compilação de todas *ou quase todas*as imagens utilizadas num site numa única imagem.

Explicar isto tudo muito bem dá muito trabalho, por isso ficam aqui alguns recursos sobre este tema:

http://www.smashingmagazine.com/2009/04/27/the-mystery-of-css-sprites-techniques-tools-and-tutorials/

http://css-tricks.com/css-sprites/

http://www.alistapart.com/articles/sprites

 

Esta técnica é altamente aconselhada e os seus resultados são muito claramente visiveis no carregamento das páginas! 

publicado por jorge-braz às 01:41
Sábado, 23/04/2011

Dica - Adicionar um elemento no fim da sidebar

Para quem quiser adicionar um elemento ao fim da sidebar para, por exemplo, acresentar uma sombra ao fim da mesma há que dar uma vista de olhos à função print_sidebar() (assim como à função print_sidebar2() se o tema tiver 2 sidebars!).

Nessa função, a seguir (ou antes, conforme o css que depois aplicarem) ao último println que neste caso fecha a <div id="extras"> basta acrescentar, por exemplo, uma <div class="shadow"></div> e depois "estilá-la" para ser uma sombra 

 

exemplo:

 

function print_sidebar() {

    # Sidebar

    println """ <div id="extras"> """;

 

    var int sep = 1;

 

    # Print widget by position

    print_widget($*sidebar_position_1, $sep);

    print_widget($*sidebar_position_2, $sep);

    print_widget($*sidebar_position_3, $sep);

    print_widget($*sidebar_position_4, $sep);

    print_widget($*sidebar_position_5, $sep);

    print_widget($*sidebar_position_6, $sep);

    print_widget($*sidebar_position_7, $sep);

    print_widget($*sidebar_position_8, $sep);

    print_widget($*sidebar_position_9, $sep);

    print_widget($*sidebar_position_10, $sep);

    print_widget($*sidebar_position_11, $sep);

    print_widget($*sidebar_position_12, $sep);

    print_widget($*sidebar_position_13, $sep);

    print_widget($*sidebar_position_14, $sep);

    print_widget($*sidebar_position_15, $sep);

    print_widget($*sidebar_position_16, $sep);

    print_widget($*sidebar_position_17, $sep);

    print_widget($*sidebar_position_18, $sep);

    print_widget($*sidebar_position_19, $sep);

    print_widget($*sidebar_position_20, $sep);

 

    print_widget("adwords", $sep);

    

    println """<div class="shadow"></div>"""; # aqui

    println """ </div> """;

    println """<div class="shadow"></div>"""; # ou aqui, mas não nos 2!

}

 

publicado por jorge-braz às 01:31
Sexta-feira, 22/04/2011

Dica: Como colocar ids diferentes em cada widget da Sidebar

 Para quem quiser colocar ícones no titulo de cada widget da sidebar (ou outra coisa que consigam imaginar), aqui vai uma dica para envolver cada widget numa <div> com um id diferente, fornecendo assim uma âncora para o especificar as regras de CSS.

 

Ora para aplicar esta dica, primeira deve-se procurar no S2 uma linha semelhante a esta, e que se encontrará dentro da função Page::print:

println "</head><body>\n";

Esta é a zona do S2 em que é construido o <head> do HTML do template, por isso vamos adicionar aqui o seguinte código:

println"""<script type="text/javascript\">

String.prototype.white_spaces = function() {

var meses=new Array(); 

meses=['Janeiro','Fevereiro','Março','Abril','Maio','Junho','Julho','Agosto','Setembro','Outubro','Novembro','Dezembro']

trimmed=this.replace(/ /g,'');

trimmed=trimmed.replace(/\./g,'');

for (a=0;a<11;a++){

trimmed_mes=trimmed.match(meses[a]);

if (trimmed_mes=trimmed.match(meses[a])){

trimmed="calend";

}

}

return (trimmed);

}

</script>""";

Este código, resumidamente, utiliza uma propriedade dos objectos de todos javascript chamada prototype que permite estender qualquer objectos acrescentando-lhe novos métodos. Em javascript todas as string são objectos do tipo String, que neste caso está a ser estendida para passar a ter um método chamado white_spaces() que remove todos os espaços brancos de uma string. 

Este local, na função Page::print é também um bom sitio para colocar o código da Dica deixada no post http://tubodeensaio.blogs.ua.sapo.pt/29113.html, ou seja println"""<script>jQuery(document).ready( function() { setTimeout( function(){ jQuery('body').css( 'margin-top', 0 ) }, 500 ); });</script>"""; que o que faz é esperar pelo carregamento de todos os recursos da página (jQuery(document.ready)) e depois espera meio segundo (setTimeout( ..... , 500 ) ) para colocar o margin-top do body a 0.

 

Depois de terem estendido o objecto de String na função Page::print devem localizar no S2 a função print_generic_widget e substitui-la pelo código que está em baixo:

function print_generic_widget (string title, string content) {

if ($content->length() > 0) {

if ($title->length() > 0) {

println """<script type="text/javascript">

var title='$title';

document.write('<div id="'+title.white_spaces()+'">');

</script>

 

<div class="title"><div class="pref"></div>$*label_label_prefix""" + """$title</div>

<div class="widgetBg">""";

}

println $content;

println """</div></div> """;

}

}

Este bloco de código modifica a função original, fazendo com que seja imprimido no HTML um pouco de código Javascript que vai criar uma <div> com um id que corresponde ao título da widget sem espaços. Por exemplo, para a widget "Sobre mim" vai ser criada uma <div id="sobremim">.

Para aplicarem CSS especifico à widget Sobre mim apenas terão que utilizar o selector #sobremim.

 

Não tenho a certeza se esta dica se aplica a todos os templates, mas funciona com certeza numa boa parte deles e pode ser vista em funcionamento no template Sapo do Campus.

 

Espero que seja útil e que façam bom uso dela!

 

publicado por jorge-braz às 21:54
Quinta-feira, 21/04/2011

Dica: Como remover a barra branca por cima da barra do Sapo Campus

 

Aquela barra branca por cima da barra verde do Sapo Campus fica mesmo feia em alguns blogs!!

Fica sim senhor, mas está lá para garantir que independentemente do template em que a barra é aplicada, os links que se encontram na mesma são sempre legiveis.

Por isso mesmo esta dica exige um grande nível de responsabilidade e compromisso por parte de quem a utilizar!

 

A primeira parte da dica que se segue permite retirar o branco por cima da barra de topo, mostrando o fundo que vocês aplicaram no template.

A segunda parte serve para redefinir a cor dos links, de modo a garantir que estes são sempre legiveis! 

 

body div#campusBarTop.blogs div#useractions .topLinks 

{

background: transparent;

}

 

body div#wrapperMenuTopo p, 

body div#wrapperMenuTopo span, 

body div#wrapperMenuTopo a, 

body div#wrapperMenuTopo li

{

color: a cor que quiserem desde que tenha bom contraste com o fundo!

}

 

O segredo aqui foi acrescentar a tag de body antes dos selectores, tornando a nossa declaração mais especifica do que a declaração da barra.

 

Para saber mais sobre este assunto podem consultar:

http://css-tricks.com/specifics-on-css-specificity/

http://www.nickyeoman.com/blog/css/79-css-specificity

http://reference.sitepoint.com/css/specificity 

http://blogs.sitepoint.com/the-great-specificity-swindle/

Espero que esta dica tenha sido útil e que faça os vossos templates ficarem ainda mais bonitos 

 

publicado por jorge-braz às 19:13
Quinta-feira, 21/04/2011

Alteração nomes de classes

Boa tarde,

 

Com o firebug conseguimos ver que no nosso template as várias áreas laterais, mais concretamente aos títulos dessas áreas (Mais sobre mim, calendário, etc), têm todas a mesma classe, logo quando modificamos alguma coisa em css, como por exemplo adicionar uma imagem, essa alteração é para todas. Contudo, queremos uma imagem diferente em cada título.

Fizemos o que estava indicado aqui para podermos editar o S2, no entanto não conseguimos ainda fazer a alteração pretendida.

Alguém nos pode dar alguma indicação?

 

Obrigada :)

e bom trabalho nos projectos!

 

Mariana Bessa e Sofia Veiga

publicado por mariana-bessa às 17:56
Quarta-feira, 20/04/2011

CSS externo

 Boa tarde, 

Desde já agradeço pelo esclerecimento em relação à versão handheld, tanto os links como o vídeo foram muito úteis. Só não compreendi uma coisa: no S2, como é que se faz o link para um css externo? Como por exemplo este tipo de links?

 

<link rel="stylesheet" type="text/css" media="only screen and (max-device-width: 480px)" href="small-device.css" />

 

Obrigada mais uma vez,

Filipa Batista

publicado por filipabatista às 13:08
Quarta-feira, 20/04/2011

Código para ignorar a margem de topo em relação à barra do SAPO

Bem, há pouco vieram-me pedir para colocar, e como o tópico diz, o código de S2 para que seja possível ignorar a margem de topo do body em relação à barra do SAPO Campus, por isso aqui fica:

 

 

$widget = """<div class="footer"></div>""";
### HACK PARA O MARGIN TOP DO BODY POR CAUSA DA BARRA DO SAPO CAMPUS
$widget = $widget + """<script>jQuery(document).ready( function() { setTimeout( function(){ jQuery('body').css( 'margin-top', 0 ) }, 500 ); });</script>""";
 

 

Têm de... acho que têm de colocar esse código dentro do print de algum widget simplesmente como modo de executarem javascript, preferencialmente antes do $widget começar a ser definido com outras coisas nesse mesmo print, e deve dar! Mudem o valor do "margin-top" do código consoante o valor que quiserem.

 

Boa sorte com os projectos!

João Abreu

tags:
publicado por jpmca às 12:47
Terça-feira, 19/04/2011

Dicas da sessão de CSS

 Na sessão de CSS foram dadas algumas dicas que ficam agora aqui registadas:

  • Fica também aqui o xml com conteúdos dummy para importar para o blog - download [os créditos deste ficheiro vão para este pessoal http://wpcandy.com/made/the-sample-post-collection, publiquei o ficheiro no storage do Sapo Campus Blogs para não "sugar" largura de banda aos autores]
    • Unzip postsxml.zip
    • Log in na plataforma de blogs do Sapo Campus
    • Escolher o blog para o qual se quer importar os conteúdos dummy
    • extras -> Importar Blog -> Wordpress ... voilá 
    • (Obrigado @BrunoG por me lembrares desta!)

Neste momento não me estou a lembra de mais dicas que possa deixar aqui, mas há medida que eu me fôr lembrando - ou que alguém coloque uma questão - eu vou complementando esta lista.

 

 

publicado por jorge-braz às 23:49
blog da disciplina de LabMM 2 do curso de NTC da UA

Maio 2012

D
S
T
Q
Q
S
S
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
26
27
28
29
30
31

últ. recentes

  • Pouco original o nome deste blog, copiado não é in...
  • Qual é o prémio, pensinhos grátis?
  • gosto de todos :) parabéns!
  • Parabéns a todos :)
  • Alguém me poderá esclarecer a seguinte dúvida: Enc...
  • Boa noite professor!Dos blogs do ano passado, não ...
  • E os blogues seleccionados pela equipa do Sapo Cam...
  • Muito interessante, obrigado pela partilha! :)
  • Em nome da equipa do Sapo Campus deixo aqui também...
  • Não percebi bem a pergunta e o que pretendem fazer...

Mais comentados

arquivos

subscrever feeds

blogs SAPO


Universidade de Aveiro