Novo site de noticias.rtp.pt

Entre hoje o novo site de notícias no grupo rtp.pt.
Foram feitas várias mudanças face ao site anterior.

 

DESIGN
O design de uma maneira geral, foi criado por duas empresas externas.

DESENVOLVIMENTO
No que se refere desenvolvimento de html/css/html5/programação esteve a cargo de três pessoas que pertencem “nucleo duro” do desenvolvimento dos sites no grupo rtp.pt. Nestes termos técnicos, o site foi desenvolvido em três meses e meio, mas conseguiu-se integrar funcionalidades que até hoje eram inexistentes e aperfeiçoar outras que mereçeram uma maior atenção.

HTM5
É o primeiro site do grupo rtp.pt a ser desenvolvido em html5. O grupo técnico decidiu desenvolver o site de informação neste tipo de estrutura, integrande assim novas funcionalidades e semanticas. As tags <video>, <audio>, <header>, <nav>, <footer>, <section>, <article> foram as que mais integraram o site. Claro que sendo o primeiro projeto, foi um desafio para todos, que será aperfeiçoado no decorrer dos dias e dos inputs que vamos tendo de todos.

CSS
Tal como já tem sido habitual, teve-se o cuidado de formatar todos os layouts neste tipo de linguagem/programação. Tendo sempre em conta os diversos browser e as suas diferentes interpretações das páginas. Claro, o que deu mais trabalho foram as versões antigas do IE, mas enquanto estas versões existem, temos a “obrigação” de os ter em conta.

ICM (gestor de conteúdos) e flexibilidade jornalistiva
É o gestor de conteúdos que os jornalistas e toda a empresa já está habituada a usar para os sites da rtp.pt.
Foram integradas novas funcionalidades e valências. Existem várias áreas no site onde o jornalista pode destacar os diversos tipos de conteúdo, sejam eles artigos de texto, vídeos, aúdios, galerias…, pode-os “misturar”, alterar o conteúdo na própria área de destaque, alterar o design… isto tudo numa unico sítio e através de um clique.  Todas estas áreas de destaque foram pensadas para viver isoladamente e podendo estas mesmas serem usadas em páginas de rss para aplicações móveis ou outro tipo de funcionalidade.
Paralelamente a isto, na função de artigos “live” foi feito uma renovação. O jornalista pode começar a desenvolver um artigo em direto onde as pessoas para além do timeline, podem assistir ao jogo pela emissão TV, ou pela emissão rádio, ou mesmo pelas duas (caso haja direitos). Neste artigo, o timeline que o jornalista está a construir e a ser visto pelas pessoas, pode ser feito através do que está a dizer na net, seja um artigo de um outro site, seja um video do youtube, um post do twitter, ou facebook, uma imagem … . São inúmeras as possibilidades de fazer um artigo em direto. Estes artigos também podem ser interessantes na área da política e para seguir entrevistas ou grandes acontecimentos.
As galerias também sofreram um desenvolvimento. Estas podem ser vista em fullscreen onde podemos tirar proveito de imagens exelentes.
O jornalista também tem a possibilidade de na homepage do noticias.rtp.pt, destacar num bloco o twitter de uma ou mais pessoas. Imagine-se que existem vários jornalistas no parlamento a twittar nas suas contas pessoais. Pois bem o editor da homepage, consegue integrar todos esses jornalista numa única área.

Através do ICM conseguiu-se desenvolver mecânicas que facilitaram a publicação de conteúdos e a sua respetiva formatação nas diferentes secções.
Foram aperceiçoados todos os destaques que o jornalista faz para a homepage rtp.pt. Nestes destaques o jornalista, pode destacar quantos artigos quiser, como quiser e no formato que quiser. O artigo principal pode ser formatado com uma imagem expandida, normal ou ao alto. é indiferente como aparece, pois a sua facilidade de alteração é imensa.
Como digo, “isto até dá horas de prazer”, pois a fexibildiade é tanta em que podem escolher os diferentes conteudos, e alterar a forma dos mesmo como quiserem. Podem remover as imagens e/ou o lead nos destaques, embora o artigo tenhas estes elementos.

E é assim, aqui seguem alguns pontos do site de noticias.rtp.pt . Existem mais pormenores, mas que vão descobrindo.


CSS Sprite examples

CSS Sprites it is a common technique in web development. Are necessary in situations if we want to reduce your server load. Instead of uploading multiple images, we only have the desire to generate a single. Through the css change what becomes visible / invisible inside the div / tag. Of course the image is always used as background. In the examples below refer to the image is not repeated either in the x axis or the axis of y. In the case of terms such images have to be made new images.

Os exemplos que se seguem dizem respeito ao site http://www.rtp.pt e em que usei este método

Homepage rtp.pt

Site rtp.pt/cinemax

Site rtp.pt/antena2

Site rtp.pt/noticias

Site rtp.pt/rtpmemoria

Typetester – Compare screen type

Typetester  it’s a site for you to compare differents  fonts at the same time. Let you choose a best looking soluction for your design. You can test the fonts with settings. This way you can choose the best css for text.

allow you to compare up to three different fonts at the same time and
choose the right and best looking solution for your site. Tool have
very much different options to change and manipulate with text until
you find the best solution. The most important option for web designers
is possibility to see CSS settings for chosen text – this option, of
course, is included, but I think it is uncomfortable to use, and this
is the biggest imperfection of Typetester.

The site: Typetester

Everything You Know About CSS Is Wrong

When released, Internet Explorer 8 will support many new values for the CSS display property, including the table-related values: table, table-row, and table-cell.

Before other browsers to do a table with css techniques it was a problem, but no more. Using this new concept of tables, will be more fast and easy.

Use CSS Tables

Now, using CSS tables solve the problems when using absolute positioning or floats to create multi-column layouts in modern browsers.

see more in: http://www.digital-web.com/articles/everything_you_know_about_CSS_Is_wrong/

css menu with sub-levels

Free css menu framework. Separate html, css e js. The dop-down can be vertical and horizontal, just chaging a class. It’s available horizontal, vertical left-to-right, vertical right-to-left, horizontal linear and horizontal upwards.

About the browseres it’s available for for Windows Internet Explorer 5 or later, Mozilla Firefox 1.5 or later, Opera 7 or later, Apple Safari 2 or later.

zip file

share:http://www.lwis.net/free-css-drop-down-menu/

PNG Fix for Transparent PNGs in IE 6

When you write the css document, you have a problem in PNG background images that are transparent. You can put other attribute for ie 6 that if when is Ie6 exchange to another image:
Img { background-image:url(../images/img_DespInf_Selected.png);} _background-image:url(../images/img_DespInf_Selected.gif);}

The other way, is use css whit javascript. I see a javascript very small and is perfect to work whit css. The link is http://labs.unitinteractive.com/unitpngfix.php . Very small script (3kb). Put the script on the head tag and them put this code in html/php page

<!–[if lt IE 7]>
<script type=”text/javascript” src=”unitpngfix.js”></script>
<![endif]–>

Direct link to http://labs.unitinteractive.com/downloads/unitpngfix.zip

Vertical align images and text in a content. work for ie and firefox

Vertical -align is much used, but nor always results.
To obtain this effect it is necessary over all that the image or the text is absorbed in one div and this div has that to be “display-cell“. However, this div will have that to be involved in one another one div with “display-table“.
Clearly that it is necessary, other values, but below follow an example:

Css Document
.documImagem { display: table; vertical-align: middle; text-align: center; width: 400px; height: 300px;background-color:#8bbbf6;float:left;}
.documImagem * {vertical-align: middle;}
.documImagem .Img {display: table-cell}
.documImagem i { _display:inline-block; _height:100%; *display:inline-block; *height:100%;}

html Document

Table or Css in your pages?

Many are the people who still use tables to idealize the sites. Although to know the technique relatively css, are felt more comfortable to use tables.

To Designer, becomes necessary to visualize that are make, and the tables, for some times becomes easy and is the fast way to give reply to this.
However, the power of css surpasses everything this. Flexibility with that we will be able to form and to remake our page becomes a trick with css. Clearly is, that the person that is accustomed to work with tables has that to learn this new concept. Delay a little and for times the things do not leave as we want. We start to create garbage in our pages that not always is very good, but with the persistence we obtain to see these errors and decides them in a well practical way.

Through css, for example we obtain to only remake a site of two for three columns, moving a line of the style of sources. It is obtained to remove an image, a content, or same a table; with a simple trick, without harming the layout. The change of color of one determined field, exactly of all the site is easy. Everything becomes very simple .
Everything this does not want to say that if it forgets tables. All the type of information, for example article lists, etc, must be made by tables, therefore thus a compact code smaller e becomes. However, its formatting is that it must have the aid of styles. In sites sufficiently great, the use of css makes with that the pages have a lesser number of weight, what for times becomes well significant.