Estils més vius amb CSS 3

Posted by Sergi on November 18, 2011 No comments

La nova evolució de CSS ofereix una extensa varietat de novetats que permeten crear un impacte visual en els dissenys de las pàgines web i fer de la navegació una experiència més agradable per a l’usuari. Entre aquestes novetats podem trobar nous efectes de text, millores en les interfícies d’usuari i animacions en certs elements del web. Veiem alguns exemples referents a aquest últim grup de novetats: transicions, transformacions, transformacions en tres dimensions i animacions. Per als exemples utilitzarem el motor de renderització webkit que trobem als navegadors Google Chrome i Safari.

Transicions

Les transicions permeten aplicar canvis en els estils d’un element de forma progressiva i no de forma directa. Per exemple, es possible definir una transició de tal manera que un bloc amplia la seva amplada de 150 píxels a 300 píxels al passar el ratolí, duent a terme aquest canvi en un interval de 2 segons i veient com l’amplada s’amplia durant aquest temps de forma progressiva. L’alternativa fins ara era ampliar-la fins als 300 píxels de forma puntual o dur a terme aquesta transició amb altres tècniques com ara animació mitjançant Javascript. Cal dir que les transicions de CSS3 són interpretades amb tots els motors de renderització dels navegadors actuals excepte el d’Internet Explorer.

#login_box
{
color: blue;
px;
px;
-webkit-transition: width 2s;
}

El que hem fet ara és transicionar la propietat width, de forma que quan aquesta canvii ho faci com una transició de 2 segons. Una forma de fer canviar una propietat és emprant un hover, és a dir, fer passar el ratolí per sobre l’element:

#login_box:hover
{
px;
}

Tranformacions

Les transformacions que podem aplicar són 4: rotació, translació, escalat i esllavissament. A diferència de la tècnica de transició, les transformacions estan disponibles en qualsevol navegador, inclòs Internet Explorer.

#accommodation_pictures
{
-webkit-transform: rotate(30deg);
-webkit-transform: translate(50px,100px);
-webkit-transform: rotate(30deg);
-webkit-transform: scale(2,4);
-webkit-transform: skew(30deg,20deg);
}

També tenim les transformacions en tres dimensions que, malauradament, només són renderitzades pel motor webkit i, per tant, només disponibles navegant amb Google Chrome i Safari. Es poden realitzar les mateixes transformacions que les que hem comentat abans però les rotacions es poden fer en l’eix X i l’eix Y.

#accommodation_pictures
{
-webkit-transform: rotateX(120deg);
-webkit-transform: rotateY(180deg);
}

Animacions

Amb les animacions de CSS3 podem definir una serie de keyframes o passos que defineixen una animació completa. Podem definir la animació amb 2 estats de la següent forma:

@keyframes simple_animation
{
from {background: red;}
to {background: yellow;}
}

També podem definir una animació amb més estats, definint percentatges:

@-webkit-keyframes smooth_animation
{
0%   {background: red;}
50%  {background: orange;}
100% {background: yellow;}
}

Després, apliquen la animació i diem en quant de temps ha de transcórrer aquesta. Apliquem les dues que em creat a dos elements diferents:

#profile_picture:hover
{-webkit-animation: simple_animation 1s;}

#profile_picture:hover
{-webkit-animation: smooth_animation 1s;}

Les animacions encara no estan disponibles per als navegadors Internet Explorer i Opera, però sí per a la resta.

Conclusions

Un dels fets a remarcar com a conclusió és la progressiva delegació de tots els aspectes purament estilístics al CSS per alliberar al llenguatge d’scripting d’aquestes tasques, fet que accelera la renderització de les pàgines web i la separació de conceptes: programació i disseny.

Una empresa de Barcelona Activa guanya el segon premi del “DESAFÍO ABREDATOS 2011”.

Posted by Zona en Línia on June 2, 2011 No comments

El passat dijous dia 2 de juny de 2011, un equip de quatre integrants catalans: Francesc Masana, Albert Brufau, Ricard Espelt  i Albert Balagueró, entre els quals hi ha una representació de Zona en Línia, empresa instal·lada a Barcelona Activa, va ser premiada amb el segon premi de la segona edició del concurs a nivell estatal Desafío Abredatos 2011, concurs que s’ha consolidat com a iniciativa de referència a Espanya en quant a promoció de l’obertura de dades públiques.
El concurs consistia en crear una aplicació web en 48h utilitzant dades públiques i amb codi obert, d’aquesta manera es pretén millorar l’accessibilitat a les dades públiques a la població.

L’apliació presentada per aquest equip consisteix en un web que t’indica la comunitat autònoma on podries anar a viure per satisfer les teves preferències en relació a l’economia, l’educació, la sanitat o el medi ambient, entre altres. El que pretén és comparar de forma senzilla la qualitat de vida de les diferents comunitats autònomes, i que els ciutadans puguin conèixer si les seves preferències s’adapten a la seva comunitat actual, així com donar pistes sobre les possibles migracions.
Podeu visitar l’aplicació guanyadora a: www.aquiosquedais.com

Al Desafío Abredatos es van inscriure un total de 78 grups,  dels quals 38 equips van finalitzar el seu projecte, i 8 d’ells van arribar a la final, entre els que es destaquen El Disparate (primer premi) i Abrelibros (tercer premi).

spacer

L’Entitat del Medi Ambient de l’Àrea Metropolitana de Barcelona (EMA-AMB) ha sigut galardonada pel jurat del Premi Europeu de Prevenció de Residus

Posted by Zona en Línia on March 28, 2011 No comments

L’Entitat del Medi Ambient de l’Àrea Metropolitana de Barcelona (EMA-AMB) ha sigut una de les entitats galardondes pel jurat del Premi Europeu de Prevenció de Residus, en el marc de la segona edició de la Setmana Europea de Prevenció de Residus. Concretament, EMA-AMB ha guanyat en la la categoria Administració pública.

Des de ZonaenLínia enviem les nostres felicitacions, aprofitant per remarcar que ens sentim orgullosos d’haver posat el nostre gra de sorra amb el projecte web Millor que Nou, dut a terme conjuntament amb l’EMA-AMB.

Felicitats!
Ampliar Notícia a Gencat.cat

Us donem la benvinguda a la nova web de Zona en Línia

Posted by Zona en Línia on December 21, 2010 No comments

Els Reis Mags ja han arribat a Zona en Línia i ens han regalat aquesta nova web. Us convidem a visitar-la.
Esperem que us agradi !

L’equip de Zona en Línia us desitja un Bon Nadal i un prometedor any 2011

Posted by Zona en Línia on December 20, 2010 No comments

spacer

Presentació Anoia en Directe

Posted by Zona en Línia on March 16, 2010 No comments
Una eina que permet interconnectar els 33 municipis de la comarca

Es presenta el portal ‘Anoia en directe’

Tot i que ja fa uns mesos que funciona, aquest dimarts es va presentar al Consell Comarcal el projecte ‘Anoia en directe’, un portal basat en l’eina dels RSS que permet integrar les novetats dels webs municipals en una única pàgina. L’objectiu és fomentar el coneixement i la difusió de les informacions entre els diversos pobles, i millorar la cohesió i la interrelació comarcal.

Carles Casanova, conseller de Societat de la Informació al Consell Comarcal, va destacar precisament aquesta voluntat cohesionadora del nou portal, i va explicar que el projecte va néixer per iniciativa de les empreses Redall i Zona en Línia, que van veure-ho com una eina pràctica que permetria interconnectar els diversos municipis de la comarca.

‘Anoia en directe’ funciona a través dels RSS dels webs municipals: cada vegada que s’actualitza un contingut, s’integra de manera automàtica en aquest portal. Això, segons Ricard Espelt, de Redall, ha portat com a conseqüència que els municipis actualitzin els webs de manera més freqüent, i que hi integrin una eina tan pràctica com l’RSS. Espelt també va comentar alguns dels valors afegits de la pàgina: l’usuari es pot personalitzar la configuració del portal i hi ha un widget que permet integrar els continguts que apareixen a ‘Anoia en directe’ a d’altres webs, creant xarxa.

La presentació de la iniciativa va comptar amb el secretari de Telecomunicacions i Societat de la Informació de la Generalitat, Jordi Bosch, qui va elogiar el projecte i va dir que pot ser ‘exportable a d’altres comarques’. Bosch també va explicar que des de la secretaria s’està treballant estretament amb el Consell Comarcal per al desplegament del pla ‘Anoia Connecta’, i que la comarca és molt activa en noves tecnologies, com demostren aquest nou portal o bé el grup TIC Anoia.

De moment, ‘Anoia en directe’ rep la informació de 20 ajuntaments dels 33 de la comarca, encara que s’espera que aviat se n’hi incorporin més.

spacer

Nova oficina a Barcelona

Posted by Zona en Línia on January 18, 2010 No comments

A partir del dia 20 de gener, Zona Enginy obre una nova oficina a Barcelona.
Medium_thumb_asset

Igualada.cat a la Ràdio

Posted by Zona en Línia on January 7, 2010 No comments

Escolta l’emissió a la ràdio, de la nova web d’igualada

Igualada.mp3 14,39 MB

L’Ajuntament d’Igualada estrena nova pàgina web

Posted by Zona en Línia on December 31, 2009 No comments

Un dia abans de finalitzar l’any l’Ajuntament d’Igualada estrena nou disseny de la seva web. Tot i que es tracta d’una versió beta o provisional, s’hi pot apreciar un canvi notable en la distribució dels continguts, amb més predomini dels textos i seccions agrupades per columnes, en lloc dels grans banners que hi figuraven abans. Durant la compareixença setmanal, Jordi Riba, primer tinent d’alcalde, n’ha donat alguns detalls.

La nova web de l’Ajuntament d’Igualada ha canviat de disseny. Tot i que es tracta d’una versió provisional, es pot apreciar una predomini dels continguts per columnes, amb seccions com l’agenda, les notícies, el taulell d’anuncis o els temes.

Amb la possibilitat de sindicació, el text ha pres el relleu als grans banners de la versió anterior en el predomini de la portada; un microblogging de titulars que l’usuari podrà personalitzar segons les seves necessitats (agregador de continguts). A més, l’Ajuntament ha destacat durant la compareixença setmanal que els igualadins podran crear-se una carpeta pròpia per poder seguir els seus tràmits.

Alhora, mitjançant el servei de Livestream, es pot seguir per Internet l’emissió de Conca TV. És un exemple de les eines gratuïtes que incorpora la pàgina. Jordi Riba, primer tinent d’alcalde, ha afirmat que aquesta encara es troba al 15% de les seves possibilitats, si bé anirà incorporant millores. Per exemple, tot i que no ha concretat detalls, participació ciutadana.

La pàgina es divideix en cinc apartats principals. Redall Comunicació i Ajuntament de Igualada han elaborat el guió i continguts, mentre que l’empresa Zona en Línia n’ha fet el disseny, desenvolupament i programació, a més del suport informàtic, el servidor i infraestructura.

Més informació i comentaris a l’anoiadiari
Medium_thumb_asset

RuralDir en 3a posició

Posted by Zona en Línia on December 18, 2009 No comments

El portal estatal d’allotjaments rurals RuralDir està situat en la 3a posició de la cerca orgànica, del cercador Yahoo.

spacer