W3C

W3C = World Wide Web Consortium

El W3C és un consorci de fabricants de software i desenvolupadors que es va crear per posar ordre i consens sobre els llenguatges d'internet ja que al començament els fabricants de navegadors van estar en "guerra" i arribaven a absurds com crear etiquetes que només funcionaven en un dels dos navegadors. Per exemple en Internet Explorer hi havia una etiqueta per fer marquesines que es diu MARQUEE i en Netscape hi havia una altra etiqueta que serveix per intermitències que es diu BLINK.

La funció del W3C és establir els estàndards dels llenguatges que es fan servir a internet.

Mireu la Wikiexplicació aquí i la pàgina oficial del W3C aquí i la versió en castellà aquí.

TIM BERNER'S LEE, el pare de la criatura

BIOWIKIEXPLICACIÓ:
Aquí podeu trobar informació del que és considerat l'inventor d'això que diem el World Wide Web, el HTTP, el llenguatge HTML,... el físic britànic Tim Berner's Lee.

Penseu que sense ell no es faria aquest curs. També tingueu en compte que les pàgines web es van crear per compartir informació els científics. És a dir: que no es van fer per finalitats comercials. D'aquesta manera heu de tenir en compte que el llenguatge HTML no és suficient per controlar l'aspecte de les pàgines web. Té les seves limitacions. Amb CSS veureu que es pot controlar una mica millor l'aspecte.

Actualment presideix el W3C.

DISSENY

Podeu trobar moltes possibles definicions de disseny.

Ja us vaig dir que a mí m'agrada definir el disseny de la següent manera:

Disseny és una construcció funcional destinada a solucionar un problema o optimitzar un procés.

Això denota que el disseny no és només embellir la apariència exterior de les coses.

Disseny podem tenir de diversos tipus: disseny industrial, disseny gràfic i publicitari, disseny de moda, disseny d'interiors, disseny. L'arquitectura i l'enginyeria també es poden considerar disseny.

---

Possible classificació del Disseny visual. Engloba les disciplines que cerquen solucionar o optimitzar problemes de comunicació visual. Aquestes disciplines són:

1. Disseny gràfic. Amb una tradició i una profunditat de almenys 500 anys (des de la impremta de Gütemberg), ha anat evolucionant i perfeccionant-se amb l'ajuda de nous mètodes de preimpressió i d'impressió i també gràcies als estudis de comunicació visual i la psicologia de la percepció. El sistema de colors és el CMYK.
2. Disseny web. Una evolució del disseny gràfic per paper però destinat al WWW per ser representat per pantalla. Del disseny gràfic no agafa ni el sistema de colors ni les tècniques d'impressió. La teoria de la comunicació visual sí que l'agafa i tots aquells elements formals i estructurals. El sistema de colors és el RGB, que és aditiu. I incorpora com a novetat: l'hypertext, la interactivitat en costat client i/o en costat servidor així com aplicacions i elements audiovisuals o multimèdia.
3. Disseny multimèdia. Similar al disseny web però executable també fora de l'entorn de les pàgines web com per exemple CDROMS. Incorpora hypertext, interactivitat i elements audiovisuals.
4. Altres.

---

Propòsits del disseny visual:

1. Facilitar el procés de comunicació visual, jerarquitzar la informació en una composició visual, facilitar la identificació(marques, estacions,...).
2. Usabilitat: Facilitar l'ús...

[Continuarà...]

Origen i definició de l'hipertext

En aquest link us parla sobre l'origen de l'hipertext i el que ha suposat en la cultura. Clica aquí. Val la pena que el llegiu.

Hipertext, diu Theodor Nelson cap als 60, que és "una escriptura no seqüencial, un text que bifurca, que permet que el lector esculli i que es llegeixi millor en una pantalla interactiva. ".



WIKIEXPLICACIÓ (aquí):

Un hipertexto es un documento digital que se puede leer de manera no secuencial. Un hipertexto tiene los siguientes elementos: secciones, enlaces y anclajes. Las secciones o nodos son los componentes del hipertexto o hiperdocumento. Los enlaces son las uniones entre nodos que facilitan la lectura secuencial o no secuencial del documento. Los anclajes son los puntos de unión entre nodos. Los hipertextos pueden contener otros elementos, pero los tres anteriores son los mínimos y suficientes...

---

Les pàgines web i algunes aplicacions multimèdia actualment no tenen només hipertext. També tenen imatges, sons, vídeo, animacions, en definitiva: contenen multimèdia. És per aquesta raó que s'utilitza també una altre terme, hipermèdia, per referir-se a la vinculació de documents multimèdia.

Trobem hipermèdia a les pàgines web, aplicacions multimèdia interactives, caixers automàtics,...

HTML

Aquesta és una introducció de l'HTML per que us aneu familiaritzant. Més endavant quan entrem a Dreamweaver continuarem amb més etiquetes i més atributs. També aplicareu més endavant estils de cascada a aquestes etiquetes que esteu coneixent.

ETIQUETES

1. HTML: Especifica que lo que conté és escrit en el llenguatge HTML
2. HEAD: Lo que conté són etiquetes que donen informació per indexar les pàgines a les bases de dades dels cercadors com per exemple TITLE i META.
3. TITLE: Conté el títol de la pàgina per ser indexades als cercadors.
4. META: Tipus genèric d'etiquetes que serveixen per indexar la pàgina a bases de dades de cercadors que pot registrar entre d'altres dades les paraules clau i descripcions sobre el contingut.
5. BODY: Defineix l'aspecte de la pàgina i conté etiquetes que defineixen les instruccions per a que el navegador sàpigue com representar la pàgina.
6. B: Fa negretes
7. STRONG: Fa negretes
8. I: Fa cursives
9. EM: Fa cursives
10. U: Subratlla
11. S: Tatxa
12. SUB: Fa subíndex
13. SUP: Fa superindex
14. HR: Regla horitzontal
15. BR: Salt de línia
16. P: Defineix paràgrafs
17. PRE: Text predeformatejat
18. FONT: Defineix l'aspecte de la tipografia
19. H1, ..., H6: Defineix titolars
20. CENTER: Centra el text
21. BIG: Engrandeix el text contingut
22. SMALL: Redueix el text contingut
23. BLINK _ (Només per Netscape i Motzilla): Parpalleja
24. MARQUEE _ (Només per Internet Explorer): Fa marquesines
25. UL: Llistes no ordenades
26. OL: Llistes ordenades
27. LI: Elements de llista
28. TABLE: Taula
29. TR: Fila
30. TD: Cel·la
31. TH: Cel·la capçelera(substitueix a les TD)
32. A: Link i punt d'anclatge
33. IMG: Col·loca una Imatge
34. IFRAME: Marc Interior

---

ATRIBUTS: Paràmetres que configuren aspectes de les etiquetes on es troben ubicats.

P:

• ALIGN: Defineix l'alineament dels paràgrafs. Admet com a valors: left, center, right i justify. Aquests valors defineixen el tipus d'aliniament dels paràgrafs a l'esquerra, centrats, a la dreta i justificats respectivament.

BODY:

• LEFTMARGIN: Marge esquerre(Iexplorer) Els valors que admet són (números), per definir quantitat de píxels, o (números %) per definir percentatges.
• RIGHTMARGIN: Marge dret(Iexplorer) Els valors que admet són (números), per definir quantitat de píxels, o (números %) per definir percentatges.
• TOPMARGIN: Marge superior(Iexplorer) Els valors que admet són (números), per definir quantitat de píxels, o (números %) per definir percentatges.
• BOTTOMMARGIN: Marge inferior(Iexplorer) Els valors que admet són (números), per definir quantitat de píxels, o (números %) per definir percentatges.
• MARGINWIDTH: Ample de marge(Netscape) Els valors que admet són (números), per definir quantitat de píxels, o (números %) per definir percentatges.
• MARGINHEIGHT: Alçada de marge(Netscape) Els valors que admet són (números), per definir quantitat de píxels, o (números %) per definir percentatges.
• BGCOLOR: Color de fons de la pàgina Valors hexadecimals
• BACKGROUND: Imatge de fons de la pàgina URL d'una imatge
• TEXT: Color del text a tota la pàgina Valors hexadecimals
• LINK: Color dels links a tota la pàgina Valors hexadecimals
• VLINK: Color dels links visitats Valors hexadecimals
• ALINK: Color dels links actius Valors hexadecimals
• SCROLL: Presència o absència de barra d'Scroll.

FONT:

• SIZE: Defineix grandaria de la lletra Valors de 1-7
• COLOR: Color de la lletra Valors hexadecimals
• FACE: Defineix la tipografia de la etiqueta Com a valors conté families de fonts separades per comes en ordre de prioritats.

UL:

• TYPE: Defineix el tipus de vinyeta que decora els elements d'una llista no ordenada. Com a valors admet els següents: disc, circle i square.

OL:

• TYPE: Defineix el tipus d'ordenació d'aquest tipus de llista. Tant pot ser una ordenació numérica com alfabètica en majúscules, minúscules, números romans, ... etc... Admet com a valors els següents: 1, A, a, I, i
• START: Defineix la posició a partir de la qual s'ha d'iniciar la llista.

IMG:

• SRC: Indica al navegador on es troba situada una imatge. Com a valor es posa una URL d'imatge
• WIDTH: Amplada d'una imatge. Valors en píxels i %
• HEIGHT: Alçada d'una imatge. Valors en píxels i %
• ALT: Defineix un ròtul que es veu a sobre de la imatge quan es passa per sobre amb el ratolí. Com a valors es posa una frase
• VSPACE: Marge damunt i per sota de la imatge.
• HSPACE: Marge a dreta i esquerra de la imatge.
• BORDER: Li posa borde quan la imatge és troba dins d'un link.

IFRAME:

• SRC: URL de la pàgina que ha de sortir per defecte Com a valor la URL de la pàgina que volguem que sorti per defecte
• NAME: Nom de l'IFRAME com a valor es posa una paraula en ASCII i sense espais.
• WIDTH: Amplada de l'IFRAME píxels i %
• HEIGHT: Alçada de l'IFRAME píxels i %
• FRAMEBORDER: Absència o presència de relleu en el contorn de l'IFRAME valors possibles: 0 i 1.
• SCROLLING: Absència o presència de barra de desplaçament (SCROLL): valors possibles: yes, no i auto.

A:

• HREF: URL de la pàgina o document al que volguem enllaçar. Valor: URL
• TARGET: Nom de la finestra o marc on s'ha de representar el document que hi ha al HREF.
• TITLE: Serveix per col·locar un cartell amb una frase que apareix quan el cursor passa per damunt. Sembla ser que només funciona això sobre Internet Explorer.
• NAME: En cas que la etiqueta sigui un punt d'anclatge el NAME defineix el nom d'aquest punt d'anclatge.

TABLE:

• WIDTH: Amplada de la taula. Valor en píxels i %.
• HEIGHT: Alçada de la taula. Valor en píxels i %.
• BGCOLOR: Color de fons de la taula. Color expressat en hexadecimals.
• BACKGROUND: Imatge de fons d'una taula. URL de la imatge.
• ALIGN: Alineament horitzontal de la taula. Valors possibles: left, center , right.
• CELLPADDING: Defineix el marge de cel·la. Valor en píxels i %.
• CELLSPACING: Espaiat entre cel·les. Valor en píxels i %.

TD:

• WIDTH: Amplada de la cel·la. píxels i %
• HEIGHT: Alçada de la cel·la. píxels i %
• BGCOLOR: Color de fons de la cel·la. En hexadecimals.
• BACKGROUND: Imatge de fons de la cel·la. URL de la imatge.
• ALIGN: Alineament dels continguts de la cel·la. Valors possibles: left, center, right.
• VALIGN: Alineament vertical dels continguts de la cel·la. Valors possibles: top, middle i bottom.
• COLSPAN: Indica que la cel·la ha d'ocupar "n" columnes. Valor: un número "n".
• ROWSPAN: Indica que la cel·la ha d'ocupar "n" files. Valor: un número "n" de files.
  
  

---

CARÀCTERS ESPECIALS:

• Á: Á
• è: è
• ç: ç
• Ñ: Ñ
• Î: Î
• €: €
• ©: ©
• ESPAI: 
• PUNT VOLAT( DE LES "L·L" GEMINADES): ·
• <: &lt;
• >: &gt;

Un dissenyador de pàgines web professional hauria de conèixer...

El disseny de pàgines web és multidisciplinar i en ell conflueixen les següents disciplines i arees que cal conèixer i desenvolupar:

1. CODIFICACIÓ(Marcació i Estil):
   HTML, CSS, XML
2. PROGRAMACIÓ:
   Costat servidor
   PHP,ASP,PEARL,PYTHON, JSP, SQL, MYSQL, ...
   Costat client
   Javascript, ActionScript·
3. AUTOEDICIÓ:
   Edició de mapes de bits(Photoshop)
   Dibuix Vectorial i Animació(Flash)
   Maquetació Web(Dreamweaver i HTML)
4. USABILITAT
5. E-MARKETING
6. COMUNICACIÓ VISUAL

Internet com a eina didàctica - Actitud d'investigació

Internet és un nou mitjà que ha suposat una autèntica revolució cultural que, a mida que s'abarateix l'accès als equips informàtics i l'ample de banda redueix els seus preus, permet que es pogui accedir a molta informació. D'això se li acostuma a dir "democratització" de la cultura.Sense entrar en qüestions filosòfiques, històriques o sociològiques sí que vull incitar-vos a que feu servir la internet per trobar la informació que busqueu. Internet és una eina didàctica fenomenal. Teniu molta informació a l'abast. Potser trobareu fins i tot massa informació. No tota us serà útil. Per tant cal que aprengueu a buscar, i és la meva pretensió, que desenvolupeu habilitats per poder trobar tot el que us cal a internet. Cal però que sapigueu destriar el grà de la palla.Internet és un llibre obert on trobareu tota aquesta informació. Quan jo tinc un dubte o em trobo en un problema "guguelejo" i trobo fòrums on sempre hi ha algú que s'ha trobat en un problema similar al meu que demana ajut a la resta d'usuaris del fòrum i sovint obtenen respostes. Sovint saber idiomes ajuda molt ja que així també podeu accedir a fòrums en anglés, castellà, italià, etc...Ja us posaré de tota manera alguns links interessants on trobar informació. Us animo també a que, entre tots anem afegint més enllaços cap a tota mena de recursos que us serveixin per continuar aprenent i investigant sobre el tema.I recordeu això:Els dissenyadors web no tenim totes les respostes. Investiguem per trobar-les.

Formes de processar la informació

Oigo y olvido. Veo y recuerdo. Hago y comprendo.

Proverbio chino.

L'ésser humà té tres tipus de processament de la informació:

1. Linial o seqüencial(auditiu).
2. Visual.
3. Kinestèsic(relacional).

Segons la persona domina més un tipus o un altre.

El visual és el més ràpid i el kinestèsic el més lent. Tot i així el kinestèsic és més profund i més durador.

L'autoaprenentatge requereix més de l'ús del kinestèsic, o sigui que requereix l'esforç de relacionar conceptes(al cap i a la fí per integrar cal connectar-los a la estructura cognitiva). Així s'aconsegueix integrar. No?

- - - - - -

És per a això que us faig passar els tres sistemes a classe. Quants més escombratges millor.

APRENDRE A APRENDRE

Aprendre sense pensar és feina perduda; pensar sense aprendre és perillós.

Confuci

Per optimitzar el vostre aprenentatge, saber com funcioneu.

1. Què és l'aprenentatge? Possible definició: és la integració de noves informacions, nous coneixements, noves habilitats, ... a la estructura cognitiva preexistent.
2. Què és una "estructura cognitiva"? És un conjunt de pensaments, coneixements adquirits i habilitats desenvolupades que es troben connectats entre sí al llarg de l'experiència.
3. Quan més gran és l'estructura cognitiva més capacititat té d'adquirir i integrar nous coneixements ja que els coneixements disposaràn de més conexions amb que enllaçar. Analogia: Xarxa de pesca; quan més gran i quan més fina estigui teixida més capacitat de pescar. [Ara a la introducció heu estat ampliant aquesta estructura i esteu començant a adquirir un nou vocabulari. Aquest vocabulari ens servirà per connectar amb les coses que veurem pròximament].
4. "Acumular" informacions a la "estructura cognitiva" no és aprendre sino que és memoritzar a curt termini ja que no s'estableixen connexions sòlides amb la estructura cognitiva preexistent. Aprendre requereix integració i connexió. [Us demano que no acumuleu sino que integreu, no deixeu mai de preguntar si veieu que no acabeu de connectar].
5. A tot procés d'aprenentatge es donen les següents etapes: incompetència inconscient(no saber que no se sap una cosa), incompetència conscient(saber que no se sap una cosa) , competència conscient(saber que saps una cosa), competència inconscient(saber una cosa sense requerir un esforç d'haver de pensar en això). Aquesta darrera etapa a la que hem de procurar aconseguir quan volem aprendre una cosa. Us asseguro que passareu cadascuna de les etapes. Això implica que si us costa és normal, no us espanteu i no us deprimiu. (Diuen que si pica la ferida és que s'està curant). Serà bon senyal si trobeu resistència. El sentiment que heu de tenir no ha de ser derrotista i pesimista sino que us ho heu de prendre amb esportivitat i us heu de plantejar com un repte.
6. Què passa si integrem un coneixement de forma errònia? Resposta: Arribem a contradiccions. És un efecte no desitjat ja que requereix doble esforç: el de desaprendre lo que haviem cregut que era correcte i el d'aprendre de forma correcta. [La meva missió és evitar que integreu malament].
7. Com es pot evitar integracions errònies de coneixements? Resposta: Amb mecanismes de seguretat com: controls periòdics de seguiment als alumnes o preguntant als professors les possibles contradiccions que es vagin trobant.
8. Tot i que lo ideal seria fer un seguiment personalitzat individual heu de ser conscients que en un curs amb vàrios alumnes el profe ha de treballar en conjunt i la velocitat de creuer serà la de conjunt. Per sort en el vostre cas sou un grup força homogeni si ho comparem amb altres que l'atzar no m'ha evitat de conèixer. Malgrat "l'inconvenient" de l'ensenyament de grup i les dinàmiques de grup també desitjaré amb molt de gust tenir un tracte personal individual per solucionar els dubtes i tractar les particularitats. Les necessitats dels individus són diferents i requereixen un tractament no estàndard.
9. Aprendre és adaptar-se a conviure amb circumstàncies noves.
10. La suma de la capacitat d'aprenentatge + l'experiència prèvia determina la velocitat d'aprenentatge. Com que sou diferents la velocitat òptima serà diferent per a cadascú. Heu de comptar amb això. Per tant una mica de paciència si ets ràpid i una mica de premura si ets menys ràpid.

Encantat de la vida si puc ser un bon catalitzador per vosaltres per fer-vos guanyar velocitat.

[Continuarà...]