Publicar a la web

Ja vaig informar fa dies que l'explorer no
em funcionava en el Bloc 1 de ... ( a partir
de la segona quinzena no es veu res). Vaig
dir als alumnes que canviessin a mozilla,
que funciona correctament, però alguns
alumnes em diuen que no els va bé canviar
i que si no es pot resoldre el problema. No
sé si els puc forçar a fer-ho o no. De
moment , els he dit que no hi ha altre
solució.

Estic tenint problemes amb els alumnes
que naveguen amb l'Explorer i intenten
contestar qüestionaris: no veuen totes les
preguntes o simplement no en veuen cap.
Nomès em passa a mi ? Són paranoies
meves?

va
utilitzar el
Word?

Mutacions

Per què és important
treballar amb els
estàndards de la web?

“El teu usuari més important és cec. La meitat de
les visites al teu lloc web ve de Google, i Google
només veu el que pot veure un cec. Si el teu lloc
web no és accessible, rebràs menys visites. Fi de la
història.”
Steven Permberton

•
Compatibilitat: És compatible amb tots els navegadors actuals, i ho serà
també per a futures versions.

•
Compatibilitat: És compatible amb tots els navegadors actuals, i ho serà
també per a futures versions.
•
Independència del dispositiu: Funcionarà de la mateixa manera en un
navegador d’un ordinador, d’un telèfon mòbil, etc.

•
Compatibilitat: És compatible amb tots els navegadors actuals, i ho serà
també per a futures versions.
•
Independència del dispositiu: Funcionarà de la mateixa manera en un
navegador d’un ordinador, d’un telèfon mòbil, etc.
•
Facilitar la feina als cercadors: Als motors de cerca com Google, Bing,
Ask, etc. els agrada un document ben estructurat. No només consulten i avaluen
les metadades, sinó que analitzen amb més precisió el contingut.

•
Compatibilitat: És compatible amb tots els navegadors actuals, i ho serà
també per a futures versions.
•
Independència del dispositiu: Funcionarà de la mateixa manera en un
navegador d’un ordinador, d’un telèfon mòbil, etc.
•
Facilitar la feina als cercadors: Als motors de cerca com Google, Bing,
Ask, etc. els agrada un document ben estructurat. No només consulten i avaluen
les metadades, sinó que analitzen amb més precisió el contingut.
•
Pàgines més lleugeres: Si es compara el pes d’una pàgina maquetada
amb taules amb una altra que fa servir fulls d’estil es veurà que la diferència, en
funció de la complexitat del disseny, pot fer que la segona sigui entre un 60% i un
70% més lleugera que la primera. Els documents que separen l’aparença del
contingut utilitzen menys codi, per la qual cosa els llocs basats en els estàndards
utilitzen menys amplada de banda i es mostren més ràpidament als usuaris.

http://www.csszengarden.com/

Why tables for layout is stupid?
http://www.hotdesign.com/
seybold/everything.html

http://www.hotdesign.com/
seybold/spanish/

Les taules existien en HTML per una única raó: mostrar dades
tabulars. Però l'aparició de l'atribut border="0" va fer possible que els
dissenyadors tinguessin una graella per dissenyar text i imatge

El Problema amb l’ús de les taules

• La informació de la presentació es barreja amb el contingut.

• La informació de la presentació es barreja amb el contingut.
★ Això fa que els arxius de les pàgines web siguin innecessàriament
pesats, ja que els usuaris han de descarregar aquesta informació
per cada pàgina que visiten.

• La informació de la presentació es barreja amb el contingut.
★ Això fa que els arxius de les pàgines web siguin innecessàriament
pesats, ja que els usuaris han de descarregar aquesta informació
per cada pàgina que visiten.
★ La banda ampla no és gratuïta!

• La informació de la presentació es barreja amb el contingut.
★ Això fa que els arxius de les pàgines web siguin innecessàriament
pesats, ja que els usuaris han de descarregar aquesta informació
per cada pàgina que visiten.
★ La banda ampla no és gratuïta!
• Això fa que el redisseny dels llocs web i dels continguts demani molta
mà d'obra.

• La informació de la presentació es barreja amb el contingut.
★ Això fa que els arxius de les pàgines web siguin innecessàriament
pesats, ja que els usuaris han de descarregar aquesta informació
per cada pàgina que visiten.
★ La banda ampla no és gratuïta!
• Això fa que el redisseny dels llocs web i dels continguts demani molta
mà d'obra.
• A més, fa que la consistència visual de tot un lloc sigui
extremadament difícil d'aconseguir.

• La informació de la presentació es barreja amb el contingut.
★ Això fa que els arxius de les pàgines web siguin innecessàriament
pesats, ja que els usuaris han de descarregar aquesta informació
per cada pàgina que visiten.
★ La banda ampla no és gratuïta!
• Això fa que el redisseny dels llocs web i dels continguts demani molta
mà d'obra.
• A més, fa que la consistència visual de tot un lloc sigui
extremadament difícil d'aconseguir.
• I provoca que les pàgines basades en taules siguin també menys
accessibles per als usuaris i usuàries que pateixen incapacitats

Encara sou a temps de la salvar-vos!

HTML
CSS
Javascript

pàgina web
HTML
CSS
Javascript

pàgina web
estructura
HTML
CSS
Javascript

pàgina web
estructura
HTML
CSS estil
Javascript

pàgina web
estructura
HTML
CSS estil
Javascript
comportament

HTML
Hypertext Markup Language

Lorem ipsum

<p> Lorem ipsum </p>

etiqueta inici
<p> Lorem ipsum </p>

etiqueta inici
etiqueta final
<p> Lorem ipsum </p>

etiqueta inici
etiqueta final
<p> Lorem ipsum </p>
Contingut

etiqueta inici
etiqueta final
<h1> Lorem ipsum </h1>
Contingut

IOC

<a href=”http://ioc.xtec.cat”> IOC </a>

etiqueta inici
<a href=”http://ioc.xtec.cat”> IOC </a>

etiqueta inici
etiqueta final
<a href=”http://ioc.xtec.cat”> IOC </a>

etiqueta inici
etiqueta final
<a href=”http://ioc.xtec.cat”> IOC </a>
Contingut

etiqueta inici
etiqueta final
<a href=”http://ioc.xtec.cat”> IOC </a>
Atribut (nom i valor)Contingut

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="ca">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Hola món!</title>
</head>
<body>
<p>Eoooohhh???? hi algú?</p>
</body>
</html>

http://rendur.com/

etiqueta inici

etiqueta inici
etiqueta final

CSS
Cascade Style Sheets

h1 {
}

h1 {
color: #6f6f6f;
}

h1 {
color: #6f6f6f;
font-family: Arial, sans serif;
}

h1 {
color: #6f6f6f;
font-family: Arial, sans serif;
font-size: 22px;
}

Selector
h1 {
color: #6f6f6f;
font-family: Arial, sans serif;
font-size: 22px;
}

Selector
h1 {
color: #6f6f6f;
font-family: Arial, sans serif;
font-size: 22px;
}
Propietats

Selector
Valor
h1 {
color: #6f6f6f;
font-family: Arial, sans serif;
font-size: 22px;
}
Propietats Valors

What the fuching!!!!

IOC???

Margin Margin
Width

puc tafanejar l’HTML i CSS?

http://getfirebug.com/

Javascript
per a un altre curs!

però... i les wikis?

la diferència és el llenguatge
de marques... més, però molt
més facil de recordar...

etiqueta inici
etiqueta final
<h1> Lorem ipsum </h1>
Contingut

marca inici
marca final
====== Lorem ipsum ======
Contingut

etiqueta inici
etiqueta final
<strong> Lorem ipsum </strong>
Contingut

marca inici
marca final
** Lorem ipsum **
Contingut

http://jottit.com/
mi primera wiki :-)