La presentació final de Disseny web serà el proper dimarts 10 de juny de 19 a 21h a l’aula 11 amb l’assistència dels dos professors, Joan Morales i David Gómez.

Aquest dia és la data límit per revisar i presentar els treballs demanats que són:

  • Projecte de sistema web de base wiki i de caire participatiu (40% nota aprox.)
  • Maqueta operativa del projecte (40% nota aprox.)
  • Quadern d’apunts de classe en un blog (20% nota aprox.)

Aquest dia a més cada equip farà una breu presentació pública del seu projecte.

Com fer la presentació a classe?

  • Faran la presentació els 2 membres de cada equip.
  • Primer es presentaran les característiques del projecte. Com a únic suport a aquesta presentació es projectarà un document PDF que les resumeix.
    • El document PDF ha de ser en format apaisat
    • Ha de cabre en la projecció de 800×600 píxels del projector.
    • Tota la informació ha de cabre en una pàgina i s’ha de veure en pantalla sense fer scroll
  • Les explicacions més específiques d’organització de continguts, serveis, funcionament, documentació, configuració i adaptació, etc… es faran utilitzant la maqueta operativa com a exemple
  • És important haver assajat aquesta presentació perquè no s’allargui més del compte ni surtin problemes.

Com ha de ser la maqueta operativa?

  • és un Mediawiki instal·lat i funcionant, que s’ha configurat perquè estigui apunt per ser utilitzat
  • on s’han fet les adaptacions d’aparença pertinents
  • on s’han instal·lat les extensions necessàries
  • on s’han creat les plantilles i categories principals a fer servir
  • on s’han incorporat alguns continguts bàsics d’Ajuda i documentació
  • on s’han incorporat alguns continguts inicials del “tema” del projecte que serveixen de prova i exemple del seu funcionament.

Document del projecte a presentar

A part de la presentació oral i del fitxer a projectar durant aquesta s’ha de presentar un document que defineix clarament les característiques del projecte i que servirà, junt amb la presentació, per avaluar aquest aspecte. El document ha de tenir:

  • 1. Títol del projecte.
  • 2. Síntesi del projecte en 1 paràgraf.
  • 3. Descripció del públic potencial al qual s’adreça (dades sociològiques, hàbits de consum quan a forma de vestir, programes de tv, oci general, nivell d’estudis, àmbit demogràfic, etc.)
  • 4. Descripció dels serveis que ofereix el web (cadascún amb una fitxa descriptiva com la que vem apuntar a la pissarra. Reviseu blog d’apunts propi o dels companys).
  • 5. Descripció de les formes de participació/col·laboració que el projecte proposa
  • 6. Estructura de navegació dins el site.
  • 7. Anàlisi de referents estètics d’altres webs o productes que penseu que poden ser útils per dissenyar la vostra gràfica del website. Expliqueu quins són els referents triats (mostreu imatges) i perqué penseu que són la forma correcta d’adreçar-vos al vostre target.
  • 8. Dibuix de les pantalles principals d’acord amb les posibilitats de la skin per defecte o la que heu triat.

RECORDEU QUE ÉS IMPORTANT DEFINIR BÉ AQUEST DOCUMENT JA QUE ÉS EL QUE EXPLICA LA VOSTRA FEINA I EL QUE SERVIRÀ PER EVALUAR-LA.
Penseu bé la informació que hi poseu. No volem obvietats ni generalismes, ni tampoc parrafades esgotadores, volem la informació pertinent i necessària per entendre el que heu fet.
Després maqueteu bé aquest pdf. Ha de ser un document que informi correctament del projecte i a més, agradable de llegir i seductor.

Pengeu-lo al servidor i enllaceu-lo des d’un article etiquetat com “presentació final projecte” al vostre blog.

S’ha de fer alguna cosa amb el Quadern?

El quadern (blog) de cada equip recull els apunts de classe que s’han anat prenent al llarg del curs i també alguns continguts extra que els equips han volgut afegir.

El dia 12 es considera la data definitiva de lliurament del quadern.

Abans d’aquesta data convé fer-ne una revisió. Es poden completar articles, afegir enllaços, corregir ortografia i redactat. I sobretot fer una bona organització a través de categories i etiquetes.

Veure també:

AVUI COMENTAREM ELS PROJECTES…

1. REVISIÓ DEL TREBALL PER GRUPS:

* Revisarem el document que heu fet per presentar els 5 serveis del vostre web i la seva diagramació d’acord amb l’aparença per defecte del wiki o la skin triada.

2. COMENTARIS GENERALS:

* Parlarem dels drets d’autor en els projectes.

Citació, disclaimers, obres derivades, ús comercial,…

* Repasarem com fer els vostres projectes més participatius.

* Comentarem alguns aspectes de diagramació de la portada del wiki.

Columnat, inserció d’imatges, edició CSS…

* Revisarem l’us de fitxes en els vostres treballs.

Un exemple d’ús de fitxes:

http://commons.wikimedia.org/wiki/Image:Eldredgeops-rana-crassituberculata.jpg

http://commons.wikimedia.org/wiki/Category:Fossils

Fins després,

Joan

Algunes preguntes que us podeu fer i que us poden ajudar a concretar i desenvolupar diversos aspectes del projecte. Algunes referències i informacions que us poden ser útils.

Recordem que és un projecte web participatiu de base wiki i que pot tenir o no un blog vinculat (de fet prioritzem la part wiki ja que el blog ja l’esteu utilitzant com a quadern).

Sobre el projecte

  • De què va el projecte? Quin és el “tema”?
  • Què aporta el projecte? Per què algú hi podria estar interessat?
  • A qui pot interessar i en quins nivells d’implicació?
  • Quins serveis ofereix? Quines formes de colaboració/participació proposa?
  • Com es posarà en marxa el projecte? Necessitarà una dinamització/moderació? Durant quant de temps? Indefinida? Serà assumible? Es preveuen col·laboradors estables? Quin serà el seu nivell d’implicació? Quin perfil han de tenir? Part del funcionament recaurà en els usuaris voluntaris? Quines eines/documentació se’ls proporciona?
  • Algú que accedeixi a la portada, entendrà de què va? Sabrà com accedir als continguts? Entendrà com hi pot participar? Li quedarà clar en quins termes està cedint les seves aportacions?

Sobre la maqueta operativa

Diem maqueta operativa a un Mediawiki instal·lat i funcionant, que s’ha configurat perquè estigui apunt per ser utilitzat, on s’han fet les adaptacions d’aparença pertinents, on s’han instal·lat les extensions necessàries, on s’han creat les plantilles i categories principals a fer servir i s’han incorporat alguns continguts bàsics d’Ajuda i documentació, així com alguns continguts inicials del “tema” del projecte que serveixen de prova i exemple del seu funcionament.

  • Quina és la llicència pels continguts? Sota quins termes legals queda el que es publica i les aportacions dels usuaris pel que fa a la propietat intel·lectual?
    • Quina és la llicència per defecte? La GFDL (copyleft, compatible Wikipedia)? Una Creative Commons? Tots els drets reservats?
    • Quines llicències s’admeten per a les imatges i altres arxius carregats?
    • Com es controlen (a nivell d’administradors o de comunitat d’usuaris) les sospites d’haver infringit la llicència o haver vulnerat la propietat intel·lectual?
  • Com configurem el sistema?
    • Volem fer canvis en la configuració del sistema? Cada cop que el wiki carrega una pàgina llegeix l’arxiu Localsettings.php que hi ha a la carpeta del wiki en el servidor. Editant aquest fitxer i canviant el valor de les seves variables podem controlar la major part de la configuració.
    • Com canviem el nom del sistema?
      • Omplint la variable $wgSitename a Localsettings.php
    • Quin nivells d’usuari preveiem tenir?
      • Permetem que els usuaris anònims puguin veure els continguts? I que puguin editar-los? De totes les pàgines? Només de les de discussió?
      • Quins permisos donem als usuaris registrats?
      • Volem donar permisos diferents segons si els usuaris han estat autoconfirmats per l’antigüetat/participació o tenen una adreça de mail validada?
      • Necessitem un grup d’usuaris amb permisos específics?
    • Volem que es puguin carregar arxius d’imatge (i altres) al wiki?
      • Quins formats d’arxius?
  • Necessitem extensions? Hi ha coses que volem per al nostre projecte que no ens dóna la instal·lació bàsica de Mediawiki?
  • Quins canvis fer en l’entorn de treball?
  • Com organitzem la portada?
    • Com mostrem i/o donem accés als continguts en ella?
    • Com orientem la participació dels usuaris/col·laboradors?
    • Fem servir plantilles per gestionar alguns continguts de portada?
    • Com controlem l’aparença visual de portada? Fem servir CSS? A través de style o a través de la pàgina Common.CSS?
  • Les categories ens ajuden a organitzar els continguts del wiki amb llistats de pàgines que es generen automàticament. Quines categories necessitarem?
    • Pensem bé els serveis i seccions que té el projecte. Pensem quines pàgines volem agrupar.
    • Ens faran falta subcategories? Quina estructura de continguts volem aconseguir?
  • Les plantilles serveixen, entre altres coses, per: posar continguts pre-definits en vàries pàgines (com notes d’avís o encapçalaments), editar per separats parts d’una portada o subportada, crear fitxes que els usuaris poden omplir i controlar l’aparença visual des d’un sol lloc, etc…
    • Quines plantilles necessitarem per al nostre projecte?
    • Farem servir les plantilles per facilitar la participació? Com i on explicarem als usuaris com fer-les servir?
      • Fer servir <noinclude></noinclude> per explicar com fer servir una plantilla dins la seva pròpia pàgina
    • Farem servir les plantilles per incloure les pàgines on es fan servir dins de categories?
      • Fer servir <includeonly>[[Categoria:nom-categoria]]</includeonly> perquè la pàgina de la plantilla no s’inclogui en el llistat de la categoria
  • Quina Ajuda i orientacions podem donar als usuaris?
    • Volem incloure l’Ajuda de Mediawiki del projecte Help-PD de Mediawiki.org?
    • Volem redactar pàgines d’Ajuda pròpies del nostre projecte?
      • Quin to fem servir en el redactat de l’Ajuda? Com estructurem la informació?
      • Haurem de fer captures de pantalla per facilitar la comprensió de l’Ajuda?
      • Inclourem a l’Ajuda com fer servir les plantilles pròpies del projecte?
    • Volem posar Ajuda contextual en les pàgines normals? Diferenciem d’alguna manera aquest tipus d’Ajuda de la resta de continguts (icona, aparença del text, …)?
  • Necessitarem fer servir les variables de Mediawiki que ens proporcionen informació sobre el propi sistema?
    • Potser a la portada o en alguna pàgina necessitem que el sistema posi automàticament el nom del projecte, la data actual, la pàgina on estem, el nombre de pàgines totals, la darrera revisió de la pàgina, etc…

RECORDEU. Cal descriure 5 serveis pel projecte web i la diagramació de la pàgina principal d’acord amb l’aparença de la skin triada i de la informació que volgueu posar a aquesta pàg. ppal. (incloent la descripció i enllaç als 5 serveis). Per cert, mireu els comentaris que he posat al blog de cada equip.

Ci vediamo martedi!

Joan

Revisió dels pdf amb la descripció dels projectes.

Comentar els exercicis pendents sobre Wiki.

Els objectius d’aquest exercici són:

  • Practicar l’us de categories i plantilles a MediaWiki
  • Documentar informació que serà útil com a referència pels projectes web

L’encàrrec consisteix en:

  • Crear al wiki de l’assignatura (Interacció Wikiwikiweb) 8 fitxes per documentar el següent:
    • Software wiki (programes per fer funcionar wikis com Mediawiki, MoinMoinWiki, etc…)
    • Wiki farms (serveis d’activació de wikis com Wikispaces, etc…)
    • Projectes wiki (projectes concrets com Wikispecies, MographWiki, Wikilengua, etc…)
    • Software blogs (programes per fer funcionar blogs com WordPress,
    • Serveis de blogs (servidors de blogs que ofereixen activació directa com Blogger, WordPress.com, etc…)
    • Projectes blog (blogs concrets d’alguna persona o grup)
    • Briefing projectes (fitxa de descripció del projecte a realitzar a Disseny web)
    • Notes tècniques (fitxa per guardar informació tècnica relacionada amb sistemes wiki, blogs, extensions i altres que poguem fer servir)
  • Com fer-ho?
    • Utilitzar plantilles de Mediawiki per crear les fitxes
    • Pensar quins camps ha de tenir cada fitxa
    • Fer que cada fitxa tingui una categoria associada; que al posar la plantilla en una pàgina automàticament estiguem classificant aquella pàgina en una categoria
    • Utilitzar CSS dins el paràmetre “style” per donar l’aspecte visual de les fitxes
  • Un cop fetes les plantilles fer-les servir per documentar informació que ja tenim al wiki i als blogs i altra informació que es pugui trobar. Algunes fonts d’informació i enllaços que ja tenim són:
  • Qui ho ha de fer?
    • Cal repartir-se la feina per fer les plantilles entre els equips
    • Qui faci una plantilla l’ha de provar documentant uns quants casos
    • Tothom pot fer servir les plantilles ja fetes per completar la documentació de casos que ja tenim referenciats o afegir-ne de nous.
  • On s’ha de documentar?
    • Un cop tingueu les plantilles i les categories apunt creeu una pàgina des de qualsevol altra pàgina del wiki, i feu servir la plantilla per fer la fitxa.
    • Aquesta pàgina pot servir de plataforma per crear noves pàgines: documentant.

Referències útils per fer aquest exercici:

Plantilles a Mediawiki

Categories a Mediawiki

Revisar les idees pels vostres projectes web (per parelles)

Repàs de l’edició amb wordpress

Revisar els blogs personals amb el diari de classe.

Fer equips

Registre d’usuaris

Activar blogs d’equips

Introducció a la diagramació de sistemes socials

HTML-img200px-css.png

HTML - HyperText Markup Language (Llenguatge de marques d’hipertext)
- veure entrada HTML Wikipedia-es -

CSS - Cascading Style Sheets (fulls d’estil en cascada)
- veure entrada CSS Wikipedia-es -

Algunes dates:

  • 70’s GML ( IBM)
  • 1986 SGML (ISO)
  • 1991/1992 primera versió HTML i resta d’elements de la WWW (URL, HTTP, Browser)
  • 1994 creació del W3C
  • 1995 borrador HTML 3.0
  • 1996 (desembre) recomanació CSS-1
  • 1997 (gener) especificació HTML 3.2
  • 1997 (desembre) recomanació HTML 4
  • 1998 recomanació CSS-2
  • 1998 Mozilla (alliberament codi Netscape Navigator)
  • 2000 XHTML-1
  • 2005 borrador HTML-5 (WHATWG)
  • 2008 CSS-3 en procés de desenvolupament

Qui guia principalment aquest treball és el …

web oficial - oficina espanyola

Però hi incideix molt l’adopció per part dels desenvolupadors de navegadors (browsers)

CSS Zen Garden, un bon exemple

http://www.csszengarden.com/

http://www.csszengarden.com/tr/espanol/

I uns exemples en detall per aprendre a fer coses a:

http://www.w3schools.com/css/css_examples.asp

Recursos sobre CSS

Anna Fuster (Pimpampum+UPF)

Maquetar amb CSS:

Altres recursos:

Mapes conceptuals, de forces i/o relacions de la Web i la Web 2.0:

Qui/Què té un paper significatiu a la web:

  • Google, Yahoo, Fundació Wikimedia, Fundació Mozilla, W3Consortium …
  • Wikipedia, Wikicommons, Flickr, Youtube, Google-Search, Google-maps, Google-docs, Blogger, WordPress, MySpace, Facebook, Twitter, Jabber, MS Messenger, Digg, Menéame, Tecnorathi, Sourceforge, GLAMP, Miro…
  • GNU (GPL, GFDL,…), Creative Commons, ColorIuris, …
  • … entre d’altres …

Per començar a tafanejar i empapar-se de wikis:

Per començar a tafanejar i empapar-se de blogs:

Next Page »