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é:

• Programa Disseny Web 2008
• Orientacions maqueta wiki
• css, links i recursos
• Administrar i configurar Mediawiki

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

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?
    • Atenció: no posar-ne cap equival a tots els drets reservats.
    • Per determinar la llicència per defecte omplir les variables $wgRightsUrl, $wgRightsText, $wgRightsIcon al fitxer Localsettings.php.
    • Informació sobre llicències a: Germinador Wiki: Llicències, GRF wiki UOC: Info licencias, Info derechos de autor, Compatibilidad entre licencias;
  • 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ó.
    • Veure: Mediawiki.org: Localsettings
  • 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?
      • Veure: wiki Interaccio@elisava: Configurar Localsettings – Usuaris.
  • Volem que es puguin carregar arxius d’imatge (i altres) al wiki?
    • Quins formats d’arxius?
    • Veure: wiki Interaccio@elisava: Configurar Localsettings – Imatges i arxius.
• Necessitem extensions? Hi ha coses que volem per al nostre projecte que no ens dóna la instal·lació bàsica de Mediawiki?
  • Buscar extensions a Mediawiki.org (fer servir eina de cerca).
    • Veure també a Mediawiki.org: Category:Extensions, Extension Matrix, All pages with Extension.
    • Si volem saber quines extensions fa servir un projecte wiki que ens sembla interessant anem a les “pàgines especials” (menú lateral “eines”) i escollim l’enllaç “Versió”.
  • Necessitem fer servir estructures condicionals (#if) a les plantilles? Fem servir l’extensió ParserFunctions.
  • Necessitem un CAPTCHA per impedir l’edició de spammers? Com el configurem? A quins tipus d’usuari i en quines situacions s’ha de disparar?
    • Veure: Mediawiki.org: Combating Spam; Mediawiki.org Extension:ReCAPTCHA; reCAPTCHA Mediawiki Extension.
  • Volem incrustar vídeo, arxius swf, mapes de google maps?
  • Necessitarem formularis per entrada de dades?
    • Veure: SemanticMediawiki i SemanticForms.
  • Volem millorar les interfícies de navegació?
    • Veure extensions: BreadCrumbs2, TreeAndMenu, CategoryTree, WikiCategoryTagCloud
• Quins canvis fer en l’entorn de treball?
  • Canviem la skin per defecte? Per què?
    • Veure: Wiki Interacció@elisava: característiques de monobook
  • Agafem una skin ja creada?
    • Podeu buscar a la Galeria de Skins de Mediawiki. Atenció: les skins poden fallar. Instal·lar i comprobar que funcionen bé amb la versió que tenim de Mediawiki.
    • Veure com canviar les skins: Wiki Interacció@Elisava: CSS i Mediawiki
  • Partim d’una skin ja creada i fem modificacions?
    • Veure: css, links i recursos en aquest blog
  • Fem canvis en els gràfics de l’entorn de treball?
    • Veure: Wiki Interacció@elisava: Canviar Logo, Aparença sense CSS.
  • Ens cal modificar els elements del menú lateral? N’hem de posar de nous? N’hem de treure? Hem de canviar el nom d’alguns dels que hi ha?
    • Veure: Wiki Interacció@elisava: Editar Sidebar
  • Volem un sitenotice? Volem tenir una capçalera amb text o amb un gràfic a totes les pàgines, sota les pestanyes?
    • Veure: Wiki Interacció@elisava: Editar Sitenotice
• 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?
    • Veure: Wiki Interacció@elisava: Us de plantilles
  • 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?
    • Veure opcions i com fer-ho a: Wiki Interacció@Elisava: CSS i Mediawiki
• 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?
  • Com i a on orientem als usuaris perquè facin servir les categories?
  • Volem tenir algun mecanisme per mostrar les categories que tenim en portada?
    • Veure extensions: CategoryCloud, SelectCategoryTagCloud, WikiCategoryTagCloud
    • Veure: SemanticMediawiki i Semantic DrillDown
    • Veure: CategoryTree
• 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…
  • Veure: Wiki Interacció@elisava: Us de plantilles
  • 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?
    • Haurem de respectar que aquestes pàgines es mantinguin sota domini públic.
    • Veure: Ajuda-DP a Interacció@elisava, Mediawiki.org. Project Help-PD, Mediawiki.org: Help-Contents i Help-Contenidos i sobretot Mediawiki.org: cómo exportar páginas de Ayuda.
  • 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…
  • Veure: wiki Interacció@elisava: Ajuda:Variables

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

Comentar els exercicis pendents sobre Wiki.

• 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:
  • Pàgina Wiki ref al wiki de l’assignatura
  • Treball “Descripción; wiki como sistema web” d’un grup d’estudiants del curs 2006-07
  • Llista d’enllaços “Per començar a explorar…” en aquest blog
  • Llista d’agregadors de blogs des d’on buscar blogs per documentar: Agregadors ref.
• 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

• Us de plantilles a Mediawiki (explicació breu)
• Ajuda:Templates/es
• Exemple d’una plantilla amb paràmetres de número i de nom que fa servir la Plantilla:Atenció i la Plantilla:Fitxa estudiant. (editeu la pàgina de cada plantilla per veure’n el “codi”)

Categories a Mediawiki

• Ajuda:Categories/es

Repàs de l’edició amb wordpress

Revisar els blogs personals amb el diari de classe.

Registre d’usuaris

Activar blogs d’equips

Introducció a la diagramació de sistemes socials

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 contents and browser compatibility
• CSS Compatibility and Internet Explorer (Microsoft)
• Time Line of Web Browsers de ADeveria (2007)

CSS Zen Garden, un bon exemple

http://www.csszengarden.com/

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

• HTML del CSS Zen Garden
• exemple de CSS de Zen Garden

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)

• Introducción HMTL+CSS
  • Archivos HTML. Tags básicos de HTML
  • Utilización de HTML + CSS
  • Estilos CSS: propiedades

Maquetar amb CSS:

• Maquetando con DIV’s (DotPress)
  • Maquetando con DIV’s ejemplo I
  • Maquetando con DIV’s ejemplo II
  • Maquetando con DIV’s ejemplo III
  • Maquetando con DIV’s ejemplo IV
• Maquetar con CSS (desarrollo web)

Altres recursos:

• w3schools – css reference (anglès)
• CSS for designers (vídeo) – introducció (anglès)
• Guía de Referencia CSS 2.1 W3C (castellà)
• Especificació CSS-2 (anglès) (traducció castellà)
• Breve historia de HTML – librosweb.es (castellà)

• Web 2.0 cloud-map de Luca Cremonini (12-2006)
• WebTrends 2007 / otro mapa de web 2.0 de Otto Nassar
• Mapa Mental de la Web 2.0 generat amb WikiDraw
• Mapa Web 2.0 Alvy per Fundación Orange (2007)
• Time Line of Web Browsers de ADeveria (2007)
• Map of Online Communities
• Mapa conceptual del programari lliure de René Merou (versió ODG)

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:

• Wikipedia (enciclopèdia lliure) http://www.wikipedia.org/
• Projectes Wikimedia (diccionari, espècies vives, wikillibres, universitat, cites,…) http://wikimediafoundation.org/wiki/Nuestros_proyectos
• Wikicommons (fons d’imatges lliures) http://commons.wikimedia.org/
• Wikilengua (recurso lingüístico) http://www.wikilengua.org/
• Estigmergia Wlog (Wiki com a blog) http://www.estigmergia.net/wiki/Wlog
• Placeography (micro-geografia) http://www.placeography.org/
• Mographwiki (motion graphics) http://mographwiki.net/
• Lotropedia (joc Sr.Anells) http://www.lotro-hispano.com/wiki/
• Chickipedia (porno-eròtic) http://www.chickipedia.com/
• Ubuntu Wiki (suport i coordinació tècnica) https://wiki.ubuntu.com/
• Freeculture (moviment estudiantil) http://wiki.freeculture.org/
• Wikimatrix (eina per comparar sistemes wiki) http://www.wikimatrix.org/

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

• WeMakeMoneyNotArt (artivisme i tecnologíes) http://www.we-make-money-not-art.com/
• Elástico (art i societat) http://www.elastico.net/
• Tempus Fugit (art i ciència) http://www.raquelherrera.blogspot.com/
• NadaImporta http://www.nadaimporta.com/
• Ni libre ni ocupado (blog d’un taxista) http://nilibreniocupado.es/blog/
• El 50 (blog sobre disseny) http://el50.com/
• Kineda (tendències) http://www.kineda.com/
• Ian Dale (periodista) http://iaindale.blogspot.com/
• Neil Clark (comentarista social) http://neilclark66.blogspot.com/
• Simplicity (Blog John Maeda at MIT) http://weblogs.media.mit.edu/SIMPLICITY/
• Nike ACG (comercial) http://team.blog.nikeacg.com/
• Adbusters (acción social) http://www.adbusters.org/metas/eco/bnd/blog.php
• Muchahada Nui ( humor, mediàtic) http://blogs.rtve.es/muchachadanui/posts
• Buenafuente ( humor, mediàtic) http://www.andreubuenafuente.com/
• Paris Hilton (mediàtic) http://www.myspace.com/parishilton
• Kerry (Imatge pública, polític) http://www.johnkerry.com/blog
• Zapatero http://www.euroresidentes.com/Blogs/rodriguez_zapatero/zapatero.htm
• Carod Rovira polític) http://www.carod.cat/
• Obama http://my.barackobama.com/page/content/hqblog/
• Ocurrencias de Aznar (sàtira) http://infotk.blogs.com/infotk/2003/10/frases_y_ocurre.html
• David BecKham (mediàtic) http://www.davidbeckham.com/
• Caspa TV (Premio The BOBs, Best of the Blog) http://caspa.tv/
• NYC London (Web de fotografia) http://www.nyclondon.com/blog/
• Nuevas Tecnologías http://www.sindicacion.net/blogs/pedro/nuevastecnologias.html
• ICTLogy (Ismael Peña-López, ICT para el Desarrollo) http://ictlogy.net/
• Contexto (Adolfo Estalella, recerca sobre blogs) http://estalella.wordpress.com/
• Tecnocidanos (Antonio Lafuente, ciència i societat) http://weblogs.madrimasd.org/tecnocidanos