Cercar en aquest blog

dimarts, 31 de gener del 2012

Pràctica 6

Hola a totes i tots!
En aquesta nova pràctica acabarem de retocar paràmetres amb els que vam començar a treballar la pràctica passada. Recordeu que els atributs d'estil ara es defineixen conjuntament amb l'etiqueta "style", enlloc 'd'utilitzar paràmetres independents d'altres etiquetes com la "font".

En aquesta pràctica anirem una mica més enllà: aplicarem un color de fons i altres paràmetres d'estil a la nostra web segons aquesta nova etiqueta.

Visiteu l'exemple de la web: http://www.w3schools.com/html/tryit.asp?filename=tryhtml_styles i seguiu-lo per a donar color al fons enlloc de com ho fèieu abans. A més, a la vostra pàgina web, afegeix un paràgraf amb la definició de "CSS" i cerca i escriu-hi a què es refereixen els experts quan es parla d'etiquetes "deprecades" i doneu algun exemple.

Ànim!
Xavi

dimecres, 25 de gener del 2012

Pràctica 5

Hola a tots i a totes!

En aquesta pràctica entrarem en el món dels estils. Antigament es feien servir una sèrie d'etiquetes qe molt probablement vosaltres mateixos heu utilitzat  ala última pràctica per a afegir color o mides diferents als textos que escrivíeu. Ara però, tot això va estant definit mitjançant el que s'anomena "style". El més utilitzat actualment és un estàndard conegut com a CSS, que ens permet, aplicant-lo, convertir una web normal en una web "actual".

A continuació teniu un exemple d'una web simple que encara feia servir l'etiqueta <font>: Proveu-ho

<p>
< font size="5" face="arial" color="red">
This paragraph is in Arial, size 5, and in red text color.
< /font>
< /p>

< p>
< font size="3" face="verdana" color="blue">
This paragraph is in Verdana, size 3, and in blue text color.
< /font>
< /p>

Per a aquesta pràctica, doncs, visiteu aquest enllaç: http://www.w3schools.com/html/html_fonts.asp
Mireu els 4 exemples que us posen a l'apartat "The right way to do it - with styles". I ara ve la feina:

-Realitzeu una plana web explicativa amb el següent contingut:
     - Títol: Explicació
     - Imatge: alguna que tingui a veure amb els estils, cerqueu per Internet
     - Descripció de què fa cada línia de codi de http://www.w3schools.com/html/tryit.asp?filename=tryhtml_fontall
     - Descripció dels atributs de l'etiqueta <style> i quina estructura té l'etiqueta en global.
     - Enllaç a la web que vau crear a la pràctica passada (i que per cert, estan molt bé)


Ara doncs, amb tota la feina per davant, ànim i comenceu!

Xavi

dijous, 19 de gener del 2012

Pràctica 4

Hola a tothom!

Ja heu vist la base del llenguatge HMTL. Anem doncs a aprofundir una mica més.

Ja us heu trobat amb algunes situacions en les que havíeu d'utilitzar el que anomenem "atributs". els atributs són informació extra que s'aporta una etiqueta, com per exemple el href o el src pels enllaços i les imatges respectivament.
D'altra banda ja sabeu que podeu definir headings (p.ex. <h1>) que indiquen encapçalament i dónen un estil de lletra més gran que la del text pla que ve a continuació. Heu de saber, que aquestes etiquetes van des de h1 fins a h6. Cal comprendre que per posar lletra "GRAN" o negreta no s'utilitza aquesta etiqueta.

Una altra etiqueta útil és la <hr />. Aquesta afegeix una línia horitzontal en el vostre paràgraf.
De la mateixa manera, també es poden afegir comentaris a la vostra plana web. Això significa que, al bloc de notes on edito en HTML, puc afegir comentaris a algunes zones amb informació que no em sortirà a la web quan la visualitzi, per exemple, coses que em quedin per fer... etc. Això s'indica així: <!--Això és un comentari -->

També heu vist que els paràgrafs venen definits per l'etiqueta <p>. Heu de recordar que sempre s'han de tancar les etiquetes, al final del paràgraf també </p>. Si volem passar a escriure en una línia nova en un paràgraf, hem d'utilitzar l'etiqueta <br />. Aquesta etiqueta ens afegeix un canvi de linia, especialment important quan estem escrivint textos llargs i no volem que quedi tot amuntegat.

Per tant, què heu de fer en aquesta pràctica? Sobre la web que ja teniu creada, heu d'extendre el text descriptiu i fer servir almenys un cop la cursiva, la negreta, el subratllat, un canvi de línia i afegir una linia horitzontal, tot dins d'un paràmetre d'estils adient per a donar-li el que s'anomena un aspecte amigable. en altres paraules, heu de retocar la vostra web afegint aquestes configuracions d'estils.

Ànim!

Xavi

dimecres, 18 de gener del 2012

Pràctica 3

Bona tarda a tots.

En les pràctiques anteriors, heu descobert el significat i la utilitat de la programació amb etiquetes que ens permet el llenguatge HTML. En concret, coneixeu que la etiqueta <h1>, <h2>... serveixen per indicar encapçalaments (headers, amb la seva diferencia de mida i estil), la etiqueta <p> serveix per indicar paràgrafs, la etiqueta <a> ens indica un hipervincle que definim amb el camp href i hi afegim la etiqueta <img>, que serveix per inserir una imatge, relacionant-la directament a partir de la seva URL, de la mateixa manera que l'hipervincle però amb el camp "src" (source = font).

En la propera pràctica es tracta que dissenyeu i escriviu en un bloc de notes una plana web amb:
-El vostre nom com a títol.
-Una breu descripció de com sou (2-3 linies) en el primer paràgraf.
-Un segon títol (" de secció") més petit que el primer.
-Un enllaç a aquest bloc (recordeu que les URL inclouen el http://).
-Un enllaç a la imatge següent: http://www.imagenesmix.com/images/foto-graciosa.jpg
-Un nou paràgraf explicant la vostra opinió sobre la imatge.


Finalment, guardeu el document (amb el vostre nom i el format corresponent (ho tindrè en compte!)) i m'envieu el bloc de notes adjunt per correu al meu mail. Recordeu que en aquest cas, com les URL que heu de fer servir per als enllaços o imatges són directament webs d'Internet, no cal que guardeu cap informació conjunta en la mateixa carpeta on guardeu el bloc de notes.

Ànim!!

Xavi

dijous, 12 de gener del 2012

Pràctica 2: L'HTML

HTML és un llenguatge que ens serveix per "descriure" pàgines web. Les seves sigles signifiquen Hyper Text Markup Language (Llenguatge hipertextual amb etiquetes) i precisament en això es diferencia de la resta de llenguatges de programació: HTML es basa en aquestes etiquetes o marques. En HTML donem format al document expressant explícitament quin contingut conté cada part, i això s'indica amb les anomenades etiquetes. A l'anterior entrega vau haver de buscar informació sobre les etiquetes i vau descobrir que cadascuna indicava una característica concreta.

Les etiquetes HTML van entre els signes < i > (p.ex. <html>). Aquestes etiquetes acostumen a anar amb parelles, tot i que no sempre es necessari. La segona parella incorpora el símbol "/". D'aquesta manera, quan comença un contingut especial, per exemple, un text d'encapçalament, posarem l'etiqueta <h1>, i quan acabi el text pròpiament dit, ho indicarem amb l'etiqueta </h1>, que podriem traduïr com "fi d'etiqueta.

Així doncs, quan ens trobem amb una pàgina web, podem dir que ens trobem davant d'un document HTML que conté etiquetes i text pla (text normal i corrent). La tasca del navegador web o browser, és la d'interpretar les etiquetes i mostrar la informació que donen per pantalla sense mostrar-les específicament. Veiem aquest exemple:

<html>
< body>

< h1>My First Heading</h1>

< p>My first paragraph.</p>

< /body>
< /html>
1.- El text entre <html> i </html> descriu el contingut del document html.
2.- El text entre <body> i </body> és el contingut visible de la pàgina web.
3.- <h1> ens indica que es tracta d'un encapçalament, per tant tindrà un format de lletra més gran que la resta
4.- <p> ens indica que es tracta d'un paràgraf, per tant apareixerà amb una lletra habitual de mida normal i separat de l'encapçalament.
5.- Segons les etiquetes que utilitzem, donarem un aspecte o un altr5e a la nostra plana web.
6.- En el cas d'imatges o hipervincles, haurem d'indicar amb les etiquetes corresponents la seva URL o ruta, per tal que el navegador les pugui mostrar adientment.

Les planes web actuals combinen el HTML amb grans mòduls de programació en Java o en PHP, que els confereixen dinamisme i un aspecte més multimèdia. Però la base la posa l'HTML.

Què heu de fer a la pràctica?
-Obriu el link: http://www.w3schools.com/html/html_getstarted.asp
-Descarregueu en una carpeta local els arxius mainpage.htm, page1.htm i page2.htm
-Obriu-les amb el bloc de notes i expliqueu-me en un document word o directament en el mail on m'enviareu la pràctica, què fa cada línia de codi HMTL de cada arxiu i què implica cada etiqueta. No patiu si hi ha etiquetes que no sabeu què significa. Ho podeu buscar a Internet.

* La informació teòrica del principi l'he extret de w3schools/html. Està en anglès, però té molt bona informació, per si hi voleu aprofundir una mica més. Em consta que la primera vegada que una persona s'enfronta a qualsevol tipus de metallenguatge nou és complicat, però ànim i veureu com és més fàcil del que us pot semblar ara. Per qualsevol cosa ja sabeu que m'ho podeu consultar, ja sigui a classe, ja sigui via mail. Endavant!

dilluns, 9 de gener del 2012

Bloc web

Bon dia i bon anys a tots i totes!

Desprès d'un bon Nadal i unes merescudes vacances tornem a treballar, en aquesta ocasió amb la intenció de realitzar una pàgina web. El sistema de treball serà el mateix que fins ara.

Les últimes setmanes de l'any vam estar parlant sobre Internet i algunes de les seves característiques més especials. Internet va suposar una gran revolució en el món, potser no com les que s'havien viscut fins ara, però revolució al cap i a la fi. En un món cada cop més gran i on la globalització començava a fer-se present va nèixer (o millor dit, es va reinventar) aquesta eina que permetia publicar i accedir a continguts de qualsevol lloc del món en un temps molt curt. Durant els primers anys, les continues actualitzacions dels estàndards HTML (aneu-vos familiaritzant amb aquestes sigles) van anar succeïnt-se passant de pàgines de text a pàgines amb textos en negreta o subratllats i fins i tot alguna imatge. Poc després, amb un HMTL força més desenvolupat es va forçar també l'evolució dels programes que podien mostrar aquests HTML: la batalla entre els browsers IE i Netscape va començar a centrar l'actualitat tecnològica de l'època. Fa uns 30 anys, les empreses començaven a tenir equips IBM d'última generació (http://www-03.ibm.com/ibm/history/exhibits/vintage/images/4506VV4023.jpg) i la telecomunicació entrava en una nova era. El correu electrònic es massificava i la creació de recursos compartits deixava de ser una utopia per a ser un somni bastant més proper.
El gran salt va venir amb les primeres versions de MS Windows 95, que integraven el navegador en el sistema i amb l'inici de la competició dels ISPs per a oferir un millor accès a Internet. Dels mòdems de 56 Kbps que funcionaven per marcació i connexió telefònica, com si es tractés d'una trucada normal i que t'oferien una velocitat gens despreciable de 33.6 Kbps (uns 300 cops més lents que l'habitual i que alguns de vosaltres potser recordeu) vam passar a les primeres ofertes d'RDSI, l'aparició de diferents ISPs i la famosa ADSL. El Bandwidth començava a copar el protagonisme de les comunicacions per cable, així com nous estàndards d'UTP anaven sorgint, i els primers intents de WiFis anaven apareixent. d'altrabanda, els polèmics xats deixaven pas a la missatgeria instantània i a les xarxes socials, en les que tot això ha derivat. Si la (r)evolució continua amb la mateixa intensitat, estem parlant de que en 10 anys vosaltres tindreu accès a un tipus de servei que no haurieu ni imaginat. Penseu que fa uns anys, ni Google ni Facebook existien, i que en poc temps (un per la seva senzillesa brillant i l'altre per la seva popularitat) s'han convertit, fins i tot empresarialment, en dues grans potències que han absorvit moltes companyies en la seva expansió.

Acompanyant aquesta vida d'Internet  hi ha hagut una evolució realment gran, cada cop amb elements i microcircuiteria més petita i amb grans quantitats de diners dedicats a la recerca i el disseny d nous models i aplicació de noves tecnologies (degut a que es generaven molts diners, també s'ha de dir). D'aquelles primeres versions d'HTML hem passat a scripts sencers de JAVA o a la creació d'un HTML més obert, el XML. en quant a màquines, l'evolució és evident i no cal entrar-hi.

Bé, després d'aquestes linies introductòries, i per començar a posar-nos sobre el terreny vull que em contesteu les següents preguntes en un document word i me l'adjunteu al meu correu amb el nom de pràctica 1.
Si hi ha problemes amb la connexió, ho podeu contestar directament al correu sense adjuntar-ho.

Preguntes:
1.- Escriu totes les paraules o sigles que no entenguis i busca'n el significat. Si les entens totes o gairebé totes, escull-ne 5 per realitzar l'activitat.
2.-Penseu en quan èreu petits. Tenieu ordinador a casa? Què suposava socialment tenir-ne o no?
3.-Busqueu una mica d'informació sobre Google: any de creació, fundadors, idea inicial, lloc de creació, intencions, utilitat, evolució... i resumiu-la en 10 linies
4.- Busqueu una mica d'informació sobre Facebook: any de creació, fundadors, idea inicial, lloc de creació, intencions, utilitat, evolució... i resumiu-la en 10 linies
5.- Abans de Nadal vam veure diferents navegadors, entre altres coses. Cerqueu ara informació sobre alguns editors de planes web, diferenciant entre els online i els offline. En concret, trobeu les característiques que diferencien el Macromedia Dreamweaver i el Microsoft Publisher com a editors offline i GoogleSites i Blogger com a editors online. Un blog és una pàgina web?
6.- Expliqueu la diferència entre una pàgina web, un portal web, un motor de cerca, un blog, una pàgina de facebook.... se us ocorren més "tipus" de planes web?
7.- Trobeu informació sobre l'estàndard d'edició HTML: Què és? Quan va sorgir? Com és? Quin format tenen els seus arxius?
8.- Busqueu informació sobre les tags (etiquetes) del HTML. enumereu-ne 10 i expliqueu què indiquen
9.- Contempla l'exemple de la web http://www.w3schools.com/html/ És HTML? Què indiquen les etiquetes?
10.- Feu click al botó "Try it yourself" de la mateixa web i comproveu el resultat. Proveu afegir i treure etiquetes i contingut i mireu com varia el resultat. L'HTML bàsic és molt simple, igual que als seus inicis. Podries fer una plana web amb els coneixements que tens ara, utilitzant només un "bloc de notas" de Windows?


Ànim! I sort en aquest segon trimestre!
Xavi