dimecres, 28 d’abril del 2010

Selectors CSS: Què són i quins tipus hi ha?

Els selectors identifiquen un element general o particular del document XHTML al qual se li aplicarà la regla d'estil.

Els selectors poden ser de quatre tipus: selectors XHTML, selectors id, selectors class i el selector universal.

SELECTORS XHTML

El selectors de tipus XHTML identifiquen un determinat element de l'XHTML. Alguns exemples de selectors XHTML són:

p {
color: red;
}

El selector p s'associa a l'etiqueta , és a dir, a tots els paràgrafs del document XHTML.


SELECTORS ID

Especifiquen un determinat element del document XHTML que conté el valor de l'atribut id.

Veieu el següent exemple:

<h1 id="principal">Introducció a Lorem Ipsum</p>
'etiqueta <h1> conté l'atribut id de valor "vermell". L'especificació del selector es correpondria amb:

#principal {
color: red;
}

És a dir, es pren el valor de l'atribut id i se li afegeix al començament el caràcter #.

SELECTOR CLASS

Especifiquen un determinat element del document XHTML que conté un atribut del tipus class.

Veieu el següent exemple:

<p class="ciutats">Barcelona</p>

Si es vol aplicar un determinat estil a la classe "ciutats", s'utilitzarà el valor de l'atribut class afegint-li al davant el caràcter .

.ciutats {
color: red;
}

Es poden combinar diferents classes en un mateix element XHTML:

<p class="ciutats europa" >Barcelona </p >

i aplicar a cadascuna una regla diferent:

.ciutats {
color: red;
}

.europa {
font-size: 13px;
}

SELECTORS UNIVERSAL

El selector universal engloba a tots els elements del document XHTML. Es representa amb el caràcter d'asterisc: *.

* {
font-size: 13px;
font-family: verdana;
}

En aquest exemple, tots els elements del document tindran una mida de la font de 13 píxels i la font de lletra correspondrà a la família Verdana.


Més informació sobre Selectors: CSS en català


dimarts, 27 d’abril del 2010

Com creem fulls d'estil? Sintaxi CSS.

Per fer el nostre full d'estil seguirem una pauta fixa, sense oblidar-nos de la correcta puntuació:

SELECTOR {
PROPIETAT: VALOR;}

Els selectors identifiquen un element general o particular del document XHTML al qual se li aplicarà la regla d'estil. Exemple: els pàrrafs, els títols...


La propietat és la característica que es modificarà amb el valor. A aquest conjunt, se l'anomena EXPRESSIÓ.

Quan acabem de posar una propietat amb el seu valor, tancarem amb un punt i coma; podem modificar més d'una propietat, però sempre dins de l'etiqueta del selector.
Quan donem per acabat la modificació del selector, ho farem tancant les claus { }.

És recomanable que cada instrucció la posem una sobre l'altra, per tenir un ordre i facilitar-nos a l'hora de modificar alguna propietat o valor.

Per finalitzar l'entrada, poso un exemple del codi en el css i una imatge de com quedaria a la plana web:

pre {
color:purple;
font-family:"Comic Sans MS";
font-size:80%;
/*background-color:#58ACFA;*/
background:url(preformat.png) no-repeat right;
border:5px double purple;
margin:25%;
padding:10px 20px 10px 20px;
}

Què és CSS?


Hola sóc l'Alberto i aquí us deixo una breu explicacio de què és el CSS.

El CSS respon a l'acrònim Cascade Style Sheets, és a dir, fulls d'estil en cascada. CSS és un llenguatge orientat a definir l'estil dels documents web.

Hi ha diferents motius per utilitzar CSS en la creació dels documents web:
  • Respectar el lema del W3C de separar l'estructura i la presentació del document.
  • Frenar l'ús erroni d'elements HTML amb finalitats visuals i no estructurals.
  • Tenir un control centralitzat del disseny.

La presentació no es limita només a la pantalla de l'ordinador. Mitjançant els CSS es pot definir la impressió del document, la presentació visual en dispositius mòbils, etc.

De la mateixa manera que l'HTML i l'XHTML, el llenguatge CSS ha anat evolucionant a través de diferents versions segons les directrius del W3C: la CSS 1, la CSS 2, la CSS 2.1 i la darrera, encara en desenvolupament, la CSS 3.

Podeu trobar el document oficial de les especificacions de la versió 2.1 al següent enllaç. També hi ha disponible una guia de referència ràpida en castellà a la següent adreça.

dilluns, 26 d’abril del 2010

Què és XHTML?

XHTML (Llenguatge de Marcat de d'Hipertext Extensible) és una versió més estricta i neta d'HTML, que neix precisament amb l'objectiu de reemplaçar aquest davant la seva limitació d'ús amb les cada vegada més abundants eines basades en XML.

XHTML estén HTML 4.0 combinant la sintaxi d'HTML, dissenyat per a mostrar dades, amb la de XHTML, dissenyat per a descriure les dades.


L'XHTML
també té unes avantatges que L'HTML no en té, com són:
  • Compatibilitat parcial amb navegadors antics: la informació es visualitza, encara que sense format. Apuntar que el XHTML 1.0 va ser dissenyat expressament per ser mostrat en navegadors que suporten HTML de base.

  • Un mateix document pot adoptar dissenys radicalment distints en diferents aparells, podent fins i tot escollir-se entre diversos dissenys per a un mateix mitjà.

  • Facilitat d'edició directa del codi i de manteniment.

  • Format obert, compatible amb els nous estàndards que actualment està desenvolupant el W3C com recomanació per a futurs agents d'usuari o navegadors.

  • Els documents escrits conforme a XHTML poden potencialment presentar millor rendiment en les actuals eines web que aquells escrits conforme a HTML.

Aquí teniu més informació.


Migració d'HTML a XHTML

Quan parlem de migració d'HTML a XHTML, cal tenir en compte que XHTML deixa de costat tot aspecte estètic i se centra en el contingut i en la semàntica. En lloc d'utilitzar una etiqueta per donar un aspecte concret, utilitzem etiquetes per fer que les paraules signifiquin una cosa o altra.

  • Abans era una pràctica molt comuna escriure les etiquetes en majúscula, per a diferenciar-les del codi. Per compatibilitat amb XML, en XHTML totes les etiquetes han d'anar en minúscules.

  • Totes les etiquetes es tanquen.

  • <font> i certs atributs desapareixen.

  • Negretes i cursives també se'n van. Si volem donar èmfasi, utilitzem <em> i per a donar èmfasi més forta <strong> .

  • Compte al anidar etiquetes. XHTML és molt estricte quant a la anidación d'etiquetes. Bàsicament, hi ha dos tipus d'elements: els block i els inline. Els block són etiquetes com paràgrafs, headings, llistes, etc. Així a ull els distingim perquè sempre van sols i insereixen salts de línia. Els inline no interropen el flux del text. Són les etiquetes de format, els enllaços, i altres. No podem ficar un element bloc dintre d'un inline.

  • Tampoc existeixen els frames.

Per saber més sobre aquest naixement d'XHTML aqui en teniu més

divendres, 23 d’abril del 2010

Presentació sobre la meva pagina web.

Aquí ve la meva primera pàgina web sobre uns quants països del món: Brasil, Argentina, Estats Units, Espanya, Regne Unit, Itàlia, Japó, Egipte.

M'he decidit a fer-la sobre aquests països perquè m'agrada aquest tema, saber mes sobre els païssos, les capitals, etc.

Disseny Web

1. Objectius
  • Aprendre sobre uns quants païssos del món i les seves capitals.
2. Audiència
  • Persones que els hi agrada la geografia del món, països.
3.Competència.
4. Continguts
  • Descripció dels paisos següents: Estats Units, Brasil, Argentina, Espanya, Regne Unit, Italia, Japó, Egipte explicant una mica d’història, capital, president, moneda, idioma oficial.

5. Aspecte Visual



La pàgina web de l'Ismael


Presentació de la meva pàgina web


Disseny Web


1.Objectius

La meva pàgina serà del transport de material perillós

Els meus objectius són:
  1. Per aprendre què és el transport de material perillós.
  2. Aprendre els productes que hi ha de material perillós, les multes, les sentències, etc.
2.Audiència
  • Públic Objectiu:
  1. El públic pots ser de totes les edats.
  2. Perquè el públic aprengui tot sobre el material perillós.
  • Competència:
  1. http://www.traficoadr.com/
3.Continguts
  1. Principal
  2. Instruccions de ADR
  3. Productes perillosos
  4. Sancions
  5. Restriccions
  6. Fotos de camions de material perillós
  7. Comentaris
  8. Contactar
4.Aspectes visuals
  • Pantalles
  1. El títol dalt centrat amb negreta i després el contingut de cada pàgina.
  • Tipografies,colors,gràfics
  1. El tipus de lletra serà Arial en totes les pagines i en títol en Comic sans MS, subratllat i en negreta. El subtítol serà en Comic sans MS i en negreta i subratllat pera una altre mida de la lletra.
  2. El colors de totes les pàgines serà el taronja.
  3. El gràfics els posaré en fotos i en material
  4. Faré una llista d'instruccions, sancions i restriccions.
  5. Faré una taula en material.
  6. Faré un formulari en comentari.
  • Maquetes/prototips



dijous, 22 d’abril del 2010

Web Gio


Objetivo
  • Dar a conocer un poco lo que es la cultura urbana o mejor conocida como Hip-Hop. Están los 4 estilos más importantes, con la historia, vídeos y fotos de estos.
  • Recoger información de todo lo que envuelve esta cultura con baloncesto, vídeos de humor,etc.

Audiencia
  • amantes del hip-hop e interesados en saber un poco de la cultura.
Contenido
  • Vídeo Hip-Hop
  • Vídeos Breack-dance
  • Fotos Graffity



dimecres, 21 d’abril del 2010

Mario: 1a pàgina web

Hola!

Estic aquí avui per presentar la meva primera pàgina web amb HTML.

Aquí deixo algunes imatges d'ella perquè la observeu:


Principalment l'objectiu d'aquesta pàgina és que les persones tinguin un poc més de coneixement o almenys sàpiguen què és un accelerador de partícules i més detalladament el LHC.


Tira per a un públic curiós i que li agradi la tecnologia perquè al cap i a la fi d'això parla la meva pàgina, de tecnologia, jeje!

Té un contingut dividit en 3 parts. La 1a explica el funcionament d'un accelerador de partícules, la 2a parla sobre l'accelerador LHC, el més gran de món amb una longitud de 27 km, i la 3a que és un enllaç a la pàgina web del CERN (Organització Europea per a la Recerca Nuclear)

La seva estructura és molt bàsica: entres a una pàgina on hi ha un menú i pots anar a qualsevol de les parts que he comentat abans i el seu disseny és tan fàcil que fins un nen de 3 anys podria saber usar en els dies que corren.

Pàgina web de la Miryam


1 - OBJECTIUS

La pàgina serà de la cantant de la Britney Spears, on parlarem de la seva vida musical, com va començar la seva carrera, els èxits que ha tingut, els seus fracassos musicals... Els seus concerts, els seus nuvis, les seves cançons, les seves lletres, els seus vídeos pas a pas, com ha fet la seva única pel·lícula.


2 - AUDIÈNCIA

- Públic objectiu: els seus fans.

- Competència:

3 - CONTINGUTS
  • Biografia:
  • Vida personal
  • Els seus premis
  • Fotografies
  • Cançons i vídeos
4 - ESTRUCTURA I NAVEGACIÓ
















5-ASPECTE VISUAL

-Esquema: doncs tindrem un fons de color els més segur, amb lletra normal. I ja ho anirem veient poc a poc.


dimarts, 20 d’abril del 2010

Cristian: Primera pàgina web


Això és el que hem fet a la casa d 'oficis: "una pàgina web"
.

La meva pàgina web va sobre Leo Messi "la puça", que és un jugador increïble i ho demostra dia a dia. Quan surt Messi al terreny de joc saps que serà un partit espectacular, amb gols, amb regateig, etc.

El que he fet a la pàgina són enllaços per anar a tot el que he fet sobre Messi. És un treball cansat, però després veus que l'esforç es recompensa.

1.OBJECTIU

Fer que la nostra primera pàgina sigui bona i consegir guanyar a la competència per exemple:

-http://lionelmessi.org
-http://messiadictos.com/

2.AUDIÈNCIA

És una pàgina que parla sobre Messi i aquesta pàgina seriosa per als segidors del barça i als seguidors del bon futbol.


3.CONTINGUTS

Els continguts de la pàgina són:

-Biografia

-Campeonats/Trofeus

-Messi al Barça

-Messi a la selecció


4.ASPECTES VISUALS




dilluns, 19 d’abril del 2010

Alberto: primera pàgina web

Hola, sóc l’Alberto i us vaig a explicar breument com està formada la meva pàgina web y com està estructurada.

El primer de tot és el seu objectiu. L'objectiu d’aquesta pàgina web és que els usuaris que es fiquin dins la pàgina es facin una idea de com es juga al pòker amb les instruccions que hi ha.

Està dirigida a aquelles persones que no sàpiguen jugar al pòker i que volen aprendre. En la darrera pàgina de la web, el link 7, hi ha uns enllaços per practicar o jugar amb diners reals al poker on-line o amb diners ficticis.

El contingut d’aquesta pàgina es divideix en 7 punts:

1-Inici :La portada de la pàgina
2-Què és el poker: Explica com és el joc del poker.
3-Com es juga: Explica les cartes que hi ha i el necessari per jugar.
4- Jugades guanyadores: Ordre de mans guanyadores.
5-Diferents tipus de pokers: Texas Holdem, Ohama hi, 3 Card poker, Caribbean poker.
6-Apostes: explica les opcions que tens per fer quan és el teu torn i el que has d'apostar segons tu vulguis.
7-Link de pàgines web per jugar al poker on-line.

L'estructura de la pàgina és molt simple:

1-A l'entrar en la pàgina us sortirà aquesta imatge amb un link que diu “ PINCHE AQUÍ” cliqueu i accediu al menú de la pàgina.


2- De la Portada accedeixes al menú, En el menú hi ha un índex que et permet ficar-te’n dins de qualsevol pàgina de la web.



Pràctica: Primera pàgina web

Per tancar el mòdul d'html i anar més enllà en el mòn de les pàgines web, hem fet una pràctica durant unes horetes. L'objectiu final era crear una pàgina web pròpia amb llenguatge html. Cadascú hem agafat un tema i l'hem fet.


Per començar hem seguit uns passos estructurats, per fer-ho més pràctic i fàcil a l'hora de dissenyar. Els pasos que he seguit per fer la meva plana web han estat:

Temàtica triada: Festes paganes.

1. Objectius. La finalitat de la pàgina.

Es parla de festa pagana la festa que no té un concepte de festa religiosa cristiana. L’objectiu de la pàgina es mostrar quines festes paganes té la cultura neopagana “wicca”, fent fora els conceptes negatius imposat per l’església. A més d’introduir als usuaris de la pàgina a les celebracions perquè puguin posar-les en pràctica.

2. Audiència.

- Públic objectiu: persones de qualsevol marge d’edat i de qualsevol entitat religiosa. Públic obert.

- Competència:3. Continguts.

- Agrupació. Títols.

Els títols principals són: introducció, festes Sabbath (dintre estan les 8 festes: Samhain, Yule, Imbolc, Ostara, Beltaine, Litha, Lammas i Mabon.), festes Esbbath i un calendari de les festes del 2010.

4. Estructuració. Esquema previ.

5. Aspecte visual.

- Pantalles.
- Tipografies.
- Maquetes/Prototips

Clica a la imatge següent per veure tota aquesta informació:


Material d'informació.

"Jóvenes y brujas", de Silver Ravenwolf. Ed. Obelisco.


"Agenda de las Brujas 2010" Llewellin. Ed. Obelisco.

Per finalitzar, nomès dir que ha estat molt interessant veure com d'uns quants troços de codi i una mica de treball, va sortint una plana web.


IPSUM: EINA D'AUTODIAGNOSI PER A L'ORIENTACIÓ

Divendres passat vam visitar la Mostra d'Ensenyament a la Promotora.

Allà, la Cristina, l 'educadora, ens va estar parlant de les diverses opcions formatives que tenim a la nostra disposició. Vam estar parlant dels Graus (mig i superior) que hi ha, de les proves d'accés, del batxillerat i la universitat...

Però sobretot vam parlar de la importància de la formació en el desenvolupament personal i professional i del que pot suposar una vida laboral si no s'escullen les opcions de futur. Sempre s'ha dit que ens hem de dedicar a allò que ens agrada i adaptar-ho als nostres gustos i habilitats.

Si no tenim massa clar a què ens volem dedicar, la Cristina ens va recomanar una eina molt útil: IPSUM



L’IPSUM (Eina d'autodiagnosi per a l'orientació)com a finalitat ajudar en el procés d’autoconeixement, a entendre millor com ets i a fer-te reflexionar sobre el que vols fer, abans de dissenyar el teu itinerari formatiu o professional.

L'IPSUM està al servei de totes les persones que volen iniciar o continuar un itinerari d’aprenentatge i necessiten orientar-se davant les diferents opcions educatives i formatives. Està pensat per a persones de totes les edats a partir de 16 anys, i de qualsevol nivell formatiu.

Aquesta iniciativa respon a un doble repte, d’una banda fer accessibles a tohtom les noves tecnologies aplicades a l’àmbit de l’orientació i l’aprenentatge, per que puguin utilitzar-les de forma autònoma. D’altre, oferir una eina per a l’orientació que aspira, de manera innovadora, a ser una aportació perquè les persones, el món educatiu, el teixit empresarial puguin establir sinergies encaminades a promoure l’aprenentatge al llarg de la vida.



Com funciona?


Al llarg de la seva administració, has d’anar expressant els teus gustos, preferències i interessos respecte d’una sèrie de característiques personals que et cal tenir en compte en la selecció dels futurs estudis o professió. Cal que es vagin seguint tots els passos que s’estableixen en el qüestionari.

Un cop hagis completat tot el qüestionari, obtindràs uns resultats sobre el teu perfil, i et proporcionarem informació dels itineraris que ofereix el sistema educatiu.

IPSUM és un producte resultant del projecte innovador Aprendre a Vilafranca que ha impulsat l’Ajuntament de Vilafranca del Penedès amb el suport del Departament de Treball de la Generalitat de Catalunya i el Fons Social Europeu.

Accedeix a IPSUM

divendres, 16 d’abril del 2010

Avui visitem la Mostra d'Ensenyament

Des del 6 d’abril, té lloc a la Promotora, al número 26 del carrer de Pablo Picasso, la Mostra d’Ensenyament. Com és divendres, aprofitarem per sortir al carrer a que ens toqui l’aire una mica i, de pas, veure quina és l’oferta formativa que tenim al nostre abast un cop acabi la Casa d’oficis.

El certamen compta amb informació sobre ensenyament reglat i no reglat, centres educatius, vies d’accés a la universitat, acreditació de competències, plans d’estudis i sortides professionals, entre d’altres.

A més, la Mostra d’Ensenyament compta amb quatre ordinadors amb connexió a Internet i una assessora juvenil, que resol els dubtes que puguin tenir els visitants que s’adrecin fins a l’equipament municipal situat al barri de Can Folguera.

La mostra, que arriba enguany a la seva onzena edició, està organitzat per la Regidoria de Joventut i estarà obert fins el divendres 16 d’abril en horari de dilluns a divendres, de 17 a 20 hores.




dilluns, 12 d’abril del 2010

Instal·lació d'Ubuntu.

Ara fa unes setmanes, el Sergi es va trobar amb un problema: tenia una màquina molt vella que encara funcionava, però que no tenia capacitat per treballar amb un sistema operatiu pesat i recent com Windows XP o versions posteriors. Després de provar i rumiar i rumiar, vam arribar a la conclusió que un sistema operatiu lliure com Ubuntu era la millor solució. I així ho va fer, va instal·lar el programa al pc i ara funciona perfectament, sense res que envejar els seus companysescriptori.

En aquest post, ens explica com va fer la instal·lació d'UBUNTU:

En la instal·lació d’Ubuntu habitualment se sol tardar uns 30 minuts, si no hi ha cap problema.

Passos a seguir:
  • Pantalla inicial d’instal·lació d’Ubuntu. Surten 5 opcions per instal·lar. Clicar a l’opcióInstal•lar Ubuntu i sense problema començarà.



  • El següent pas de la instal·lació. Escollim l'idioma. Si a la pantalla de benvinguda va escollir l'espanyol, simplement premeu endavant ("Següent" o "Forward"), en un altre cas seleccioneu «Espanyol» a la llista, i continueu.
  • Escollim la zona horària. Simplement fem clic sobre la seva zona per apropar el mapa i després sobre la ciutat concreta representativa del seu fus horari. Per exemple, en el cas del fus peninsular a Espanya caldria prémer sobre el país i després sobre Madrid.
  • Escollim el tipus de teclat. Si tot va bé i no té un teclat fora del comú sinó un teclat espanyol estàndard, hauria d'estar seleccionat (teclat «Spain»). Asseguri's que això és així escrivint a la caixa de text que hi ha a la part inferior, prement les tecles específiques de l'espanyol, com la «ñ» i alguns símbols habituals com l'euro.
  • Compte! Aquest és un dels passos més importants i delicats. Es tracta d'indicar on s'ha d'instal·lar Ubuntu. Tria l'opció correcta o podria formatar l'espai no desitjat si va a compartir el disc dur amb altres sistemes operatius. Cadascú ja selecciona la seva partició que vol.


  • Amb aixó ja es passa a posar nom a l’equip. Poses el nom que vols a la teva máquina. I ja passa a instal·lar Ubuntu

divendres, 9 d’abril del 2010

IV Premi Edublogs 2010

La casa d'oficis participa en el Premi Edublogs 2010, que organitza l'associació Espiral, educació i tecnologia.

Aquests premis van néixer fa quatre anys per valorar la importància i la repercussió dels blocs en l'educació, per reconèixer el treball de molts professionals, per mostrar la realitat del corrent educatiu innovador dins de la blogosfera, per afavorir espais d'opinió i de debat sobre aquestes eines.

Com us diem, aquests premis acumulen ja 4 anys en què ha crescut el nombre de participants, així com la qualitat dels blocs i projectes.



L'asssociació Espiral és un col·lectiu de professorat, persones amb formació tècnica, investigadors i investigadores, estudiants i entitats, interessats en la promoció i l'aplicació de les tecnologies de la informació i la comunicació a l'educació (TIC). Neix l'any 1989 com a grup de treball dins de l'Associació de Tècnics d'informàtica (ATI) i des de 1993 és una associació professional independent.

Objectius
  • Propiciar l'intercanvi d'opinions, experiències i informació entre els socis i les sòcies.
  • Informar sobre cursos, seminaris, congressos, beques i recursos disponibles.
  • Actuar com a mitjà d'actualització i promoció professional dels associats i associades.
  • Proporcionar un entorn material i institucional per a la recerca i el desenvolupament de tècniques i materials educatius basats en l'aplicació de les noves tecnologies de la informació i la comunicació.
  • Assessorar en l'ús dels mitjans tecnològics a l'ensenyament i facilitar una formació continuada i actualitzada en aquest sentit.
  • Col·laborar amb altres entitats vinculades al món de l'ensenyament i facilitar la comunicació entre els sectors professionals i educatius.


El nostre bloc participa en la categoria de Blocs de professors i professores, blogs que elaboren materials didàctics i que tenen un marcat contingut educatiu, però hi ha moltes categories més. Els guanyadors de cada cateogira rebran una baldufa, com el motiu del logotip dels premis.

Des d’aquí, us animem a que visiteu la pàgina dels premis. Donar un cop d’ull a tots ells permet fer-se una idea de la importància que aquest mitjà ha adquirit en la tasca docent de molts professionals per la seva facilitat d’ús i versalitat.

I a tots aquells i aquelles que hi participen, els desitgem molta sort!!


dimarts, 6 d’abril del 2010

Tornem-hi!


Benvinguts!

És hora de tornar a començar!