ALGUNS CONSELLS BÀSICS PEL DISSENY WEB

Primer has de pensar en:

• una idea per fer la pàgina web.
• els objectius que vols que tingui.
• quant de temps invertiràs en fer la web.
• quins resultats esperes tenir.

Quan tinguis la idea ben definida, pots començar amb els detalls: el tipus de colors que faràs servir o el tipus de lletra per cada cas, la tecnologia que utilitzaràs...

Si hi ha molta informació, no la posis tota perquè es fa molt pesat.

Quant estigui definit tot el material i tinguis la informació i el mapa web fet, ja pots començar a fer la pàgina web es pot utilitzar programes per fer les pagines mes ràpidament.

La consistència visual ha d'estar ben definida. S'ha de trobar l'equilibri entre la imatge i la informació.

Adrià

Procés de creació de Web

Una altra vegada tornem a la càrrega amb informació per al nostre públic...

Avui, com el títol diu, parlarem de quin és el procés a seguir per a la creació d’una pàgina web.

Abans de començar a crear la teva web, has de tenir molt clar què vols fer, com ho vols fer, sobre què anirà... El que se sol aconsellar en aquests casos és fer un esborrany per, més o menys, fer-te una idea de com serà la teva pàgina.

Començarem primer per definir els colors de fons i el tipus de lletra. Has de pensar que el color de la lletra ha de ser l’apropiada per al color de fons, que a vegades et deixes la vista intentant llegir el que posa.

Una vegada escollit tot aixó, hauràs de decidir quina forma de creació web utilitzaràs: darrera d'una web hi ha un procés de creació amb codis HTML i fotografies .gif o .jpeg. També pots utilitzar diferents tecnologies com FLASH o PHPs.

El següent pas serà crear el “mapa" de la teva plana per estructurar-la i que després no hi hagi cap complicació en muntar-la correctament.

Ara ja, amb tot el material definit i a punt d’usar-se, és hora de posar-se mans a l’obra. Començarem amb el procés creatiu on haurem de fer ús d’un programa per facilitar la creació de la pàgina. Els més famosos són Macromedia Dreamweaver i Adobe Photoshop.

Ja creada la teva web, has de ser molt curós amb les faltes o els errors dels enllaços o en els javascripts. Una web mal construïda és una web poc visitada.

• En el tema visual, has de trobar el disseny apropiat al tema de la web i crear una estructura coherent.
• En els titulars i el menú, el més aconsellable és donar-li un únic estil per facilitar la navegació a l' usuari.
• El peu de pàgina, ja usat per quasi totes les webs, ha d'incloure informació de qui ha creat la web, informació de la teva empresa o enllaços a altres planes web amb informació de contacte.

Alguns consells del Gurú Jakob Nielsen, el pare de la usabilitat, són:

• Intentar fer la plana web el més simple possible evitant detalls innecessaris.
• Que la plana no pesi més de 50k.
• Utilitzar paraules claus curtes i concises per guardar els documents.

Doncs amb tot això, ja hauries de saber com organitzar-te per poder crear una plana web.

Ara tot és posar-se...

Ivan

HTML. Conceptes Bàsics

L'HTML és el llenguatge que s'utilitza en la creació de pàgines web.

En el seu origen, l'HTML era un llenguatge dissenyat per compartir informació entre científics de tot el món. Era purament un llenguatge estructural, en què no hi havia forma de descriure l'aparença de les pàgines (ni tan sols la possibilitat de posar un text en negreta o cursiva). Més endavant s'hi van afegir nombroses opcions per formatar i presentar text i gràfics.

A mitjans de la dècada de 1990, van començar les ampliacions de l'HTML per aconseguir la presentació desitjada, però sempre des de diferents perspectives de diferents desenvolupadors, que van acabar amb diverses solucions no estàndards per diferents navegadors. Això va provocar l'aparició d'un consorci que controla l'evolució de l'HTML: el W3C (World Wide Web Consortium).

Etiquetes bàsiques:

Les etiquetes bàsiques d'HTML són:

• <.!DOCTYPE>: És l'etiqueta que permet definir el tipus de document HTML que s'empra. Existeixen tres tipus bàsics: l'estricte (Strict), el transicional (Transitional) i el de marcs (Frameset).
• <.html>: És l'etiqueta arrel de qualsevol document HTML o XHTML.
• <.head>: Defineix la capçalera del document HTML. Permet declarar informació del document que no es mostra directament en el navegador. Aquesta informació és d'especial rellevància pels indexadors i cercadors automàtics.
• <.body>: Defineix el cos del document. Aquesta és la part del document HTML que es mostra en el navegador.

Dins de la capçalera <.HEAD> hi podem trobar:

• <.title>: Permet definir el títol de la pàgina. En navegadors gràfics el contingut del title apareix a la barra del títol a sobre de la finestra.
  
• <.meta>: Permet definir metainformacions del document tals com l'autor, la data de realització, la codificació del document (UTF, ISO, etc.), les paraules clau i la descripció del mateix
  
• <.LINK>: Permet definir metadades complementàries a les del meta tals com el document anterior, el següent, el capítol al qual pertany el document, la pàgina glossari, etc.
  

Dintre del cos <.BODY> hi podem trobar:

• <.a>: Etiqueta ancla. Crea un enllaç a un altre document o a una altra zona del mateix, segons els atributs.
  
• <.h1>, <.h2>,… <.h6>: capçaleres o títols del document, acostumen a distingir-se per mida.
  
• <.div>: Divisió estructural de la pàgina.
  
• <.p>: Paràgraf.
  
• <.br>: Salt de línia.
  
• <.table>: Indica el començament d'una taula, després s'haurà de definir les files amb <.tr> i les cel·les dintre de les files amb <.td>.
  
• <.ul>: Llista desordenada (sense numerar). Els ítems es defineixen amb <.li>.
  
• <.ol>: Llista ordenada (numerat). Els ítems es defineixen amb <.li>.
  
• <.dl>: Llista de definició. Hi ha dos tipus d'ítem; el dt, terme a definir, i el dd, la definició del terme.

Excepte unes poques etiquetes, la majoria requereixen ser tancades escrivint la mateixa etiqueta precedida d'una barra "/". Exemple: <.html>…<./html>

Vegeu també:

• Llista de colors HTML

Altres enllaços:

• World Wide Web Consortium Regulador dels estàndards de la Web, incloent HTML
• HTML Home Page Pàgina oficial del HTML
• Validador automatitzat de codi HTML
• Lebyrus - Resum de la primera setmana d'un curs d'HTML
• Apunts ràpids d'HTML

Souraida

Disseny Web

World Wide Web (o la "Web") és un sistema de documents de hipertext i accessibles a través d'Internet. Amb un navegador Web, un usuari visualitza pàgines Web que poden contenir text, imatges, vídeos o altres continguts multimèdia, i navega a través d'elles usant hipervincles.

El disseny web és una activitat que consisteix en la planificació i implementació de llocs web i pàgines web. No és simplement una aplicació del disseny convencional ja que requereix tenir en compte qüestions tals com navegabilitat, interactivitat, usabilitat, arquitectura de la informació i la interacció de mitjans com l'àudio, text, imatge i vídeo.

La unió d'un bon disseny amb una jerarquia ben elaborada de continguts augmenta l'eficiència de la web com a canal de comunicació i intercanvi de dades, que brinda possibilitats com el contacte directe entre el productor i el consumidor de continguts.

La Web va ser creada al voltant de 1990 per l'anglès Tim Berners-Llig

Aquests documents o pàgines Web poden ser creats:

• Creant fitxers de text en HTML.


• Utilitzant un programa WYSIWYG, acrònim de What You See Is What You Get (en anglès, "el que veus és el que obtens")


• Utilitzant llenguatges de programació del costat del servidor per generar la pàgina Web.

Diferència entre pàgina Web i Lloc Web?

Un lloc Web (en anglès: website) és un conjunt de pàgines Web, típicament comunes a un domini d'Internet en la World Wide Web.

Una pàgina Web és un document HTML/XHTML accessible generalment mitjançant el protocol HTTP d'Internet.

A les pàgines d'un lloc Web s'accedeix des d'una URL arrel comuna anomenada portada, que normalment resideix en el mateix servidor físic. Les URL organitzen les pàgines en una jerarquia, encara que els hipervincles entre elles controlen com el lector percep l'estructura general i com el tràfic Web flueix entre les diferents parts dels llocs.

Adrià Victoria

A voltes amb "l'uniforme"

Des de la Granja ens van anunciar que el grup de la Casa d'Oficis tindrà un vestuari especial per a les seves pràctiques.

"Un uniforme com els del cole!!?", vam pensar tots i totes. "No pot ser..."



Res d'això. En realitat es tracta d'una bata que ens protegeixi quan haguem de realitzar les pràctiques de microinformàtica. Ja sabeu que en les reparacions informàtiques un s'ha d'embrutar, sinó, malament.

L'altre dia, va venir l'Ivan per prendre les talles del vestuari, una bata de color blau a l'estil mecànic de tota la vida. Aquí en teniu algunes fotos:



Per cert, que els docents tampoc es lliuren...

OFIMÀTICA

Després de 2 mesos sense informació al nostre públic, tornem a carregar d'entrades aquest blog fins que no pugui més!

En aquests dos mesos hem aprés dinamització, microinformàtica, ofimàtica i creació de webs amb HTML.

En aquesta entrada parlarem de l'ofimàtica, del que hem estat fent.

Vam instal·lar en els ordinadors el pack Office 2003, però de tot el pack solament vam utilitzar 3 programes: Word, Excel i Powerpoint.

1.Excel: Aquest programa es basa en una funció de taules que té com a disseny a l'esquerra números i en la part de dalt hi ha lletres (de la A fins a la Z) i quan arriba al final de l'abecedari comença amb AA i així successivament.

En l'Excel, vam haver de fer taules, inserir dades, fer càlculs amb aquestes dades, fer funcions “fx” de comptar i donar forma a la taula ajustant el text. Després, vam fer gràfiques. Les gràfiques les vam fer a partir de les taules, les vam fer en forma de formatges circulars i en forma de columnes. Vam modificar les gràfiques donant-li diferents colors i canviant els títols i el nom dels eixos.

2.Powerpoint: Aquest és un altre programa del paquet que serveix per fer presentacions amb imatges, posar efectes al canvi de fotografies i sons. També es poden inserir taules i gràfiques però l'excel és el programa idoni per això, no el powerpoint.

En el powerpoint, vam agafar les imatges de les gràfiques que vam fer amb l'excel i vam fer una presentació. Vam utilitzar vàries funcions del programa com efectes i sons i decorar cada imatge amb diferents fons, enganxar imatges baixades des de Internet i crear una portada per la presentació.

3.Word: Aquest és l'últim programa del qual parlarem. Té la funció d'escriptura, el redactar documents, fer portades, coses senzilles. Pots canviar el color de la lletra, el tipus de lletra, la mida, posar-la en cursiva negreta o subratllada, etc.

En el word vam haver de fer les unitat didàctiques de la dinamització. També vam fer un treball sobre un país a elecció pròpia.

Ivan i Ruben

MICROINFORMÀTICA

Microinformàtica

Durant els dies que el nostre Sergi va estar malalt, va venir un nou docent que es deia Quintí, i ens va ensenyar:

- A veure una placa base, per a què serveix i les seves funcions i veure que tot estigués ben col·locat.
- Muntar discs durs (saber per a què serveixen i les seves funcions com màster, slave, etc...)
- Muntar una font d'alimentació (verificar si passa la corrent exacta per cada cable, també la seva funció)
- Vam muntar memòries RAM (posar-les bé a la placa base, verificar-les amb el boot cd i la funció i tipus de RAM que hi ha)
- Verificar les targetes de xarxa (provar-les una per una a l'ordinador per verificar)
- Vam muntar flopys, cd, dvd, vam verificar les seves funcions.
- També vam posar els cables de corrent de l'ordinador com power led, hd led, reset st,
- Igual que vam saber muntar, vam aprendre a desmuntar.

Vam aprendre bastant durant la absència del nostre docent (Sergi). Ara ens posarem a fons amb el arxius HTML.




David i Adrià

SOFTWARE

Reprenem el blog desprès de 2 mesos de treball. Això és un petit resum del que hem fet...

Software

1.S.O. Windows XP

-Instal·lació del Sistema Operatiu a les particions en format NTFS.
-Una vegada que hem instal·lat, actualitzem el Windows amb el Service Pack 3.

Per instal·lar el Service Pack 3, calia que estigués validada la llicència de Windows, així que vam haver de trucar a Microsoft per tal que es validés. Entrem en Windows Updater, decidim les actualitzacions que més ens convenien. Les descarreguem i instal·lem.

http://update.microsoft.com/windowsupdate/v6/default.aspx?ln=es

-Per tenir un millor rendiment, cal desactivar millores d'aparença i complements que fan més lenta la marxa de l'ordinador.

-Poder elimina la llicència de Windows o poder-la modificar per una altra.

2.Utilitats i programari

-Hiren´s Boot CD

A aquest CD, hi ha diferents utilitats per comprovar l'estat del PC, verificar unitats, recuperar, etc.

Nosaltres vam utilitzar unes utilitats determinades, com pot ser “Ghost”, per fer imatge del disc dur, comprovar alguns discos durs i recuperar informació. El Paragon Partition o Partition Magic, per crear particions i donar-li format. –Hi ha una utilitat de verificació que et diu quins components té l´ordinador i si els troba.

-Office:

Vam instal·lar l´Office XP, per tal de tenir-lo al ordenador. Només vam posar el Word, PowerPoint i l'Excel, perquè les altres aplicacions no les utilitzarem tant habitualment.

-Avast Antivirus

És de programari lliure, només calia registrar-se. Ho vam instal·lar per tenir un antivirus. Té proteccions per anar en xarxa. També tens la possibilitat de desactivar-lo.

http://www.avast.com/esp/download-avast-home.html

-Internet Explorer:

Vam estar provant modificant les barres de menú, decidint quin buscador volíem tenir, com el Google.

Txema i Adrià

Dinamització

En aquests dos mesos hem fet:

DEBATS:

Hem fet debats sobre diferents articles i opinions nostres.

L'Anna, la profesora de català, ens donava a escollir unes imatge del diari, cada alumne feia una redacció sobre la imatge del diari i donàvem la nostra opinió.

Cada alunme feia una explicació als seus companys, llegia la seva redacció, els companys deien què li semblava de la redacció de cada alumne.

UNITATS DIDÀCTIQUES:

D'altra banda, els alumnes, per parelles, van fer un treball sobre el país que més li agradava.

A les classes de Català, amb l'Anna, hem organitzat unes sessions didactiques, que vam fer per grups de dos. Havíem de fer una classe de dues hores de durada explicant un tema que a nosaltres ens agradava per explicar als nostres companys. La classe va ser d'una hora de teòrica i una altra hora de pràctica. Així hem après com preparar unitats didàctiques.

Souraida i Mireya