SlideShare ist ein Scribd-Unternehmen logo
1 von 9
Downloaden Sie, um offline zu lesen
Daniel Moliner
 Marc Soler
INTRODUCCIÓ
Creativity és una de les guies més completes de mostra de dissenys moderns, un referent i una
bona font d’informació per el dissenyador gràfic que necessita coneixer i estar actualitzat de les
últimes tendències i idees que han sorgit en el món de la creativitat funcional.
Creativity és un magazine que recull tots els dissenys, idees i accions creatives a nivell interna-
cional. Creativity només exposa dissenys a la TV, shows, dissenys interactius, prints i videos,
més aviat dissenys vinculats a la branca del gràfic.
Hem decidit analitzar aquest website ja que és una clara mostra dels canvis que l’internet ha
realitzat durant els últims 4 anys a nivell d’estructura de pàgines i de optimització dels usos del
html, però d’una forma molt sutil, ja que a primera vista el website no mostra una evolució for-
mal gaire gran. Elements com el RSS (Feeds), o l’aparició de les xarxes socials, han represen-
tat un canvi de difusió i comunicació en el mercat, i aquesta web és un bon exemple de canvi
radical envers aquests avenços a la xarxa.
EVOLUCIÓ
Per tal de facilitar material per a visualitzar l’evolució del website de Creativity, hem usat
l’eina del WayBack Machine (http://waybackmachine.org), la qual emmagatzema la caché de
moltes websites conegudes, totes elles organitzades per hora, dia i any de captura. Desprès
d’haver analitzat exhaustivament el website hem trobat que l’evolució gràfica d’aquesta no és
molt extensa, però els canvis que ha suposat els avenços en l’internet com les xarxes socials
i els RSS, entre d’altres evolucions més propies de l’organització i l’estructura de totes elles
(com el JavaScript), si que han conformat l’evolució interna del funcionament d’aquesta. Per
poder visualitzar clarament els canvis d’aquesta, hem seleccionat 4 dates “clau” que demostren
aquesta evolució dividint-les per estructura i gràfica aplicada.
3. Contingut:

                                                                                                      El contingut està dividit en dues columnes, cada una d’elles subdividida en varis apartats se-
                                                                                                      gons el tipus d’article:

                                                                                                      -Columna esquerra:

                                                                                                      Aquesta columna esta formada per una taula de contingut amb una retícula de 1 cuadre en l’eix
                                                                                                      vertical i 3 en l’eix horitzontal.
                                                                                                      Contingut en mode redacció.



2007
                                                                                                      -Columna dreta:

                                                                                                      Aquesta columna oferix el contingut adicional i antic, articles pasats, etc....

                                                                                                      4. Peu de pàgina:
ESTRUCTURA                                                                                            Botons d’enllaç a normatives, condicions, privacitats i demés contingut legislatiu del website.
L’estructura està formada per un conjunt d’etiquetes div que separen el contingut de la web de
manera bastant ordenada i jerqarquitzada:

1. Capçalera:                                                                                         GRÀFICA APLICADA (ESTIL
El element principal de la capçalera és el logotip el qual conté un enllaç directe al home. Situat    CSS, ETC...)
al mig de la capçalera trobem un altre element a destacar, el buscador personalitzat de paraules
clau dins de Creativity. I per últim, situat a la dreta, uns botons ens permeten accedir a la subs-   Els menús tenen un filet per disposar el titular de la notícia en vertical. Els destacats es donen
cripció al newsletter i a l’apartat “login” per poder accedir al material privat del propi usuari.    per el color del filet, el qual està colorejat.
                                                                                                      Els estils CSS en destacats de tipografia estan molt ben jerarquitzats, però dins la columna
2. Menu:                                                                                              dreta de l’etiqueta DIV “contingut”, es situa un subapartat que no conté cap estil CSS i per tant
                                                                                                      queda desencaixat en l’harmonia del website. Per altre banda l’etiqueta DIV “contenidor” no
Menú bastant senzill fet de botons amb desplegable (els botons canvien de color, etc..)               està centrada, té una disposició alineada a la dreta.
2008
ESTRUCTURA
El web per primer cop i en context als avenços del moment, inclou un servei de Feeds RSS
que permetrà obrir una nova difusió encara més ràpida entre el emisor i el receptor de totes les
notícies que s’actualitzin. Un altre avenç és l’ús del javascript per poder optimitzar els menus,
les càrregues, etc..
Per altre banda, l’estructura segueix sent la mateixa, l’interfaç igua, els formularis, els colors,
etc..



GRÀFICA APLICADA
No existeixen canvis.
2009
ESTRUCTURA
Estructura sense cap canvi, donada l’època, el website no va estar gaire al corrent dels canvis i
dels avenços.




GRÀFICA APLICADA
Sense canvis.
2. Menú:
                                                                                                    Eliminen el botó RSS del menú principal. Aconsegueixen fer una renovació eficaç per difondre
                                                                                                    les seves accions a travé de xarxes social tipus Facebook, etc..
                                                                                                    Canvi d’aspecte en els mòduls de desplegables. Per últim, van aconseguir compactar els con-


2010
                                                                                                    tinguts del website amb menys menús.

                                                                                                    3. Contenido:
                                                                                                    Manté l’estructura de dues columnes a nivell de contingut. El contingut a simple vista està molt

ESTRUCTURA                                                                                          més ben organitzat. Per altre banda, van excloure els elements més decoratius del website com
                                                                                                    era avans.

Etiquetes DIV:                                                                                      4. Pié pàgina
                                                                                                    Igual que fins ara.
0. Contenedor:
Aquest cop van integrar totes les etiquetes dins de una per poder otorgar-li propietats més efi-
caces.
                                                                                                    GRÀFICA APLICADA
1.Capçalera:
Ús del banner com a suport publicitari. Per altre banda definitivament van canviar el disseny,      En aquest cas, la modificació va se més important a nivell estil i estètica. Els botons es van
el logotip amb hipervincle, va ser modificat cromàticament amb un degradat senzill, però amb        colorejar, sobre un fondo gris tirant a clar. L’etiqueta contenidor és d’un gris al 80%de llumino-
classe. El buscador del website el van disposar al lateral junt amb els botons de login, de news-   sitat, amb efecte de sombrejat en paral·lel. La tipografia es va canviar per una Arial
letter, etc...                                                                                      Alguns columnats estan fets amb etiquetes de contingut.
CONCLUSIÓ
Desprès d’haver analitzat exhaustivament l’estructura formal i estètica d’aquest website podem
extreure varies opinions ja siguin subjectives o objectives. Una d’elles seria l’afirmació de que
un website d’aquesta embergadura hauria d’estar totalment actualitzada als canvis i els avenços
informàtics en la xarxa.dia a dia. El món del website és un món certament molt treballat i
pràctic, però això no diu que s’hagi inventat tot, per tant, l’exprimentació amb nous serveis via
internet són una bona ocasió per aprofitar al màxim les prestacions d’internet i per altre banda
una optimització clara del funcionament d’una web a nivell intern.
Presentacio_projectesweb_MarcSoler_DaniMoliner

Weitere ähnliche Inhalte

Ähnlich wie Presentacio_projectesweb_MarcSoler_DaniMoliner

Grup 7
Grup 7Grup 7
Grup 7
UIB
 
Configuracio I Disseny Dels Blocs
Configuracio I Disseny Dels BlocsConfiguracio I Disseny Dels Blocs
Configuracio I Disseny Dels Blocs
gosanje
 
Crear bloc
Crear blocCrear bloc
Crear bloc
talati
 
5.2.Extensions
5.2.Extensions5.2.Extensions
5.2.Extensions
mnicolau
 
7.Gestor Menus
7.Gestor Menus7.Gestor Menus
7.Gestor Menus
mnicolau
 
Manual bàsic per utilitzar el nostre espai wiki
Manual bàsic per utilitzar el nostre espai wikiManual bàsic per utilitzar el nostre espai wiki
Manual bàsic per utilitzar el nostre espai wiki
edu
 

Ähnlich wie Presentacio_projectesweb_MarcSoler_DaniMoliner (20)

Formació metodologia amb WordPress 2
Formació metodologia amb WordPress 2Formació metodologia amb WordPress 2
Formació metodologia amb WordPress 2
 
Guió del curs de l'Escola d'Estiu Rosa Sensat 2009
Guió del curs de l'Escola d'Estiu Rosa Sensat 2009Guió del curs de l'Escola d'Estiu Rosa Sensat 2009
Guió del curs de l'Escola d'Estiu Rosa Sensat 2009
 
Práctiques TIC
Práctiques TICPráctiques TIC
Práctiques TIC
 
Grup 7
Grup 7Grup 7
Grup 7
 
Configuracio I Disseny Dels Blocs
Configuracio I Disseny Dels BlocsConfiguracio I Disseny Dels Blocs
Configuracio I Disseny Dels Blocs
 
Practicacreaciobloc
PracticacreacioblocPracticacreaciobloc
Practicacreaciobloc
 
Gencat 2003
Gencat 2003Gencat 2003
Gencat 2003
 
wordpress.com corporativo
wordpress.com corporativowordpress.com corporativo
wordpress.com corporativo
 
Tutorial+google+sites
Tutorial+google+sitesTutorial+google+sites
Tutorial+google+sites
 
Crear bloc
Crear blocCrear bloc
Crear bloc
 
100726CIFOweb
100726CIFOweb100726CIFOweb
100726CIFOweb
 
Lenguatges i Estàndarts web Pac03
Lenguatges i Estàndarts web Pac03Lenguatges i Estàndarts web Pac03
Lenguatges i Estàndarts web Pac03
 
Dinamització associativa 2.0 sessió 1
Dinamització associativa 2.0 sessió 1Dinamització associativa 2.0 sessió 1
Dinamització associativa 2.0 sessió 1
 
5.2.Extensions
5.2.Extensions5.2.Extensions
5.2.Extensions
 
7.Gestor Menus
7.Gestor Menus7.Gestor Menus
7.Gestor Menus
 
Curset 1a Sessio
Curset 1a SessioCurset 1a Sessio
Curset 1a Sessio
 
Curset 1a Sessió
Curset 1a SessióCurset 1a Sessió
Curset 1a Sessió
 
Blocs corporatius
Blocs corporatiusBlocs corporatius
Blocs corporatius
 
Manual bàsic per utilitzar el nostre espai wiki
Manual bàsic per utilitzar el nostre espai wikiManual bàsic per utilitzar el nostre espai wiki
Manual bàsic per utilitzar el nostre espai wiki
 
Kompozer (nvu)
Kompozer (nvu)Kompozer (nvu)
Kompozer (nvu)
 

Presentacio_projectesweb_MarcSoler_DaniMoliner

  • 2. INTRODUCCIÓ Creativity és una de les guies més completes de mostra de dissenys moderns, un referent i una bona font d’informació per el dissenyador gràfic que necessita coneixer i estar actualitzat de les últimes tendències i idees que han sorgit en el món de la creativitat funcional. Creativity és un magazine que recull tots els dissenys, idees i accions creatives a nivell interna- cional. Creativity només exposa dissenys a la TV, shows, dissenys interactius, prints i videos, més aviat dissenys vinculats a la branca del gràfic. Hem decidit analitzar aquest website ja que és una clara mostra dels canvis que l’internet ha realitzat durant els últims 4 anys a nivell d’estructura de pàgines i de optimització dels usos del html, però d’una forma molt sutil, ja que a primera vista el website no mostra una evolució for- mal gaire gran. Elements com el RSS (Feeds), o l’aparició de les xarxes socials, han represen- tat un canvi de difusió i comunicació en el mercat, i aquesta web és un bon exemple de canvi radical envers aquests avenços a la xarxa.
  • 3. EVOLUCIÓ Per tal de facilitar material per a visualitzar l’evolució del website de Creativity, hem usat l’eina del WayBack Machine (http://waybackmachine.org), la qual emmagatzema la caché de moltes websites conegudes, totes elles organitzades per hora, dia i any de captura. Desprès d’haver analitzat exhaustivament el website hem trobat que l’evolució gràfica d’aquesta no és molt extensa, però els canvis que ha suposat els avenços en l’internet com les xarxes socials i els RSS, entre d’altres evolucions més propies de l’organització i l’estructura de totes elles (com el JavaScript), si que han conformat l’evolució interna del funcionament d’aquesta. Per poder visualitzar clarament els canvis d’aquesta, hem seleccionat 4 dates “clau” que demostren aquesta evolució dividint-les per estructura i gràfica aplicada.
  • 4. 3. Contingut: El contingut està dividit en dues columnes, cada una d’elles subdividida en varis apartats se- gons el tipus d’article: -Columna esquerra: Aquesta columna esta formada per una taula de contingut amb una retícula de 1 cuadre en l’eix vertical i 3 en l’eix horitzontal. Contingut en mode redacció. 2007 -Columna dreta: Aquesta columna oferix el contingut adicional i antic, articles pasats, etc.... 4. Peu de pàgina: ESTRUCTURA Botons d’enllaç a normatives, condicions, privacitats i demés contingut legislatiu del website. L’estructura està formada per un conjunt d’etiquetes div que separen el contingut de la web de manera bastant ordenada i jerqarquitzada: 1. Capçalera: GRÀFICA APLICADA (ESTIL El element principal de la capçalera és el logotip el qual conté un enllaç directe al home. Situat CSS, ETC...) al mig de la capçalera trobem un altre element a destacar, el buscador personalitzat de paraules clau dins de Creativity. I per últim, situat a la dreta, uns botons ens permeten accedir a la subs- Els menús tenen un filet per disposar el titular de la notícia en vertical. Els destacats es donen cripció al newsletter i a l’apartat “login” per poder accedir al material privat del propi usuari. per el color del filet, el qual està colorejat. Els estils CSS en destacats de tipografia estan molt ben jerarquitzats, però dins la columna 2. Menu: dreta de l’etiqueta DIV “contingut”, es situa un subapartat que no conté cap estil CSS i per tant queda desencaixat en l’harmonia del website. Per altre banda l’etiqueta DIV “contenidor” no Menú bastant senzill fet de botons amb desplegable (els botons canvien de color, etc..) està centrada, té una disposició alineada a la dreta.
  • 5. 2008 ESTRUCTURA El web per primer cop i en context als avenços del moment, inclou un servei de Feeds RSS que permetrà obrir una nova difusió encara més ràpida entre el emisor i el receptor de totes les notícies que s’actualitzin. Un altre avenç és l’ús del javascript per poder optimitzar els menus, les càrregues, etc.. Per altre banda, l’estructura segueix sent la mateixa, l’interfaç igua, els formularis, els colors, etc.. GRÀFICA APLICADA No existeixen canvis.
  • 6. 2009 ESTRUCTURA Estructura sense cap canvi, donada l’època, el website no va estar gaire al corrent dels canvis i dels avenços. GRÀFICA APLICADA Sense canvis.
  • 7. 2. Menú: Eliminen el botó RSS del menú principal. Aconsegueixen fer una renovació eficaç per difondre les seves accions a travé de xarxes social tipus Facebook, etc.. Canvi d’aspecte en els mòduls de desplegables. Per últim, van aconseguir compactar els con- 2010 tinguts del website amb menys menús. 3. Contenido: Manté l’estructura de dues columnes a nivell de contingut. El contingut a simple vista està molt ESTRUCTURA més ben organitzat. Per altre banda, van excloure els elements més decoratius del website com era avans. Etiquetes DIV: 4. Pié pàgina Igual que fins ara. 0. Contenedor: Aquest cop van integrar totes les etiquetes dins de una per poder otorgar-li propietats més efi- caces. GRÀFICA APLICADA 1.Capçalera: Ús del banner com a suport publicitari. Per altre banda definitivament van canviar el disseny, En aquest cas, la modificació va se més important a nivell estil i estètica. Els botons es van el logotip amb hipervincle, va ser modificat cromàticament amb un degradat senzill, però amb colorejar, sobre un fondo gris tirant a clar. L’etiqueta contenidor és d’un gris al 80%de llumino- classe. El buscador del website el van disposar al lateral junt amb els botons de login, de news- sitat, amb efecte de sombrejat en paral·lel. La tipografia es va canviar per una Arial letter, etc... Alguns columnats estan fets amb etiquetes de contingut.
  • 8. CONCLUSIÓ Desprès d’haver analitzat exhaustivament l’estructura formal i estètica d’aquest website podem extreure varies opinions ja siguin subjectives o objectives. Una d’elles seria l’afirmació de que un website d’aquesta embergadura hauria d’estar totalment actualitzada als canvis i els avenços informàtics en la xarxa.dia a dia. El món del website és un món certament molt treballat i pràctic, però això no diu que s’hagi inventat tot, per tant, l’exprimentació amb nous serveis via internet són una bona ocasió per aprofitar al màxim les prestacions d’internet i per altre banda una optimització clara del funcionament d’una web a nivell intern.