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.
D'altra banda 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. A més, afegiu dues imatges simpàtiques més i un enllaç a la plana web de l'escola.
Ànim!
Xavi
dimecres, 29 de gener del 2014
dimecres, 22 de gener del 2014
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 una imatge d'Internet.
-Un nou paràgraf explicant la vostra opinió sobre la imatge.
*Si no sabeu com es fa servir l'etiqueta <a> o la <img>, busqueu-ho a w3schools o a Internet.
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
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 una imatge d'Internet.
-Un nou paràgraf explicant la vostra opinió sobre la imatge.
*Si no sabeu com es fa servir l'etiqueta <a> o la <img>, busqueu-ho a w3schools o a Internet.
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
dimecres, 15 de gener del 2014
Pràctica 2
Bon dia a tots!
(Recordeu llegir tot l'enunciat abans de capficar-vos-hi!)
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/
-Llegeix la informació que explica com fer un document html.
-Realitza un currículum vitae en format HTML en el bloc de notes utilitzant les etiquetes que creguis convenients. Al link anterior us explica com he de realitzar el document i com l'heu de guardar. Si no saps com realitzar-lo, busca informació a la web de quins apartats ha de tenir.
-Envieu-me l'arxiu HTML adjunt a un correu.
* La informació teòrica del principi l'he extret de w3schools/html, pàgina que ja us vaig comentar en sessions anteriors. 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, tot i que continuaré valorant l'autonomia personal. Endavant!
Recordeu que fer coses que no toquen serà penalitzat.
(Recordeu llegir tot l'enunciat abans de capficar-vos-hi!)
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/
-Llegeix la informació que explica com fer un document html.
-Realitza un currículum vitae en format HTML en el bloc de notes utilitzant les etiquetes que creguis convenients. Al link anterior us explica com he de realitzar el document i com l'heu de guardar. Si no saps com realitzar-lo, busca informació a la web de quins apartats ha de tenir.
-Envieu-me l'arxiu HTML adjunt a un correu.
* La informació teòrica del principi l'he extret de w3schools/html, pàgina que ja us vaig comentar en sessions anteriors. 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, tot i que continuaré valorant l'autonomia personal. Endavant!
Recordeu que fer coses que no toquen serà penalitzat.
dimarts, 7 de gener del 2014
Bloc web - P1
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.
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.
Tampoc cal oblidar la importància que aquest mitjà de comunicació ha tingut en el desenvolupament dels dispositius mòbils, ara generalitzats com a smartphones. L'última novetat, fixeu-vos, és el 4G, que tot i que no és 4G pròpiament (les tecnologies HDSPA i HSUPA que utilitzen es categoritzen en l'anomenat 3.5G) ja aconsegueix taxes de transmissió importants, en un moment en el que la fibra òptica també guanya protagonisme amb la implantació de la seva estructura i la seva comercialització.
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 necessitat d'adjuntar cap document.
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.- Què és la tecnologia LTE? Quines velocitats ofereix? En què és diferencia del que s'anomena comercialment avui dia 4G?
6.-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, Blogger i WordPress com a editors online. Un blog és una pàgina web?
7.- 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?
8.- Trobeu informació sobre l'estàndard d'edició HTML: Què és? Quan va sorgir? Com és? Quin format tenen els seus arxius?
9.- Busqueu informació sobre les tags (etiquetes) del HTML. enumereu-ne 10 i expliqueu què indiquen
10.- Contempla l'exemple de la web http://www.w3schools.com/html/ És HTML? Què indiquen les etiquetes?
11.- 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 any nou!
Xavi
P.D.: En aquesta avaluació valoraré especialment l'autonomia personal. Heu de continuar desenvolupant l'habilitat de buscar respostes per vosaltres mateixos, una habilitat que té una importància especial, sobretot tenint en compte que l'any que ve canviareu d'etapa i el sistema de funcionament serà força diferent. Podeu buscar informació referent a aquesta habilitat en la pàgina web de la Generalitat o del Departament d'Ensenyament.
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.
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.
Tampoc cal oblidar la importància que aquest mitjà de comunicació ha tingut en el desenvolupament dels dispositius mòbils, ara generalitzats com a smartphones. L'última novetat, fixeu-vos, és el 4G, que tot i que no és 4G pròpiament (les tecnologies HDSPA i HSUPA que utilitzen es categoritzen en l'anomenat 3.5G) ja aconsegueix taxes de transmissió importants, en un moment en el que la fibra òptica també guanya protagonisme amb la implantació de la seva estructura i la seva comercialització.
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 necessitat d'adjuntar cap document.
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.- Què és la tecnologia LTE? Quines velocitats ofereix? En què és diferencia del que s'anomena comercialment avui dia 4G?
6.-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, Blogger i WordPress com a editors online. Un blog és una pàgina web?
7.- 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?
8.- Trobeu informació sobre l'estàndard d'edició HTML: Què és? Quan va sorgir? Com és? Quin format tenen els seus arxius?
9.- Busqueu informació sobre les tags (etiquetes) del HTML. enumereu-ne 10 i expliqueu què indiquen
10.- Contempla l'exemple de la web http://www.w3schools.com/html/ És HTML? Què indiquen les etiquetes?
11.- 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 any nou!
Xavi
P.D.: En aquesta avaluació valoraré especialment l'autonomia personal. Heu de continuar desenvolupant l'habilitat de buscar respostes per vosaltres mateixos, una habilitat que té una importància especial, sobretot tenint en compte que l'any que ve canviareu d'etapa i el sistema de funcionament serà força diferent. Podeu buscar informació referent a aquesta habilitat en la pàgina web de la Generalitat o del Departament d'Ensenyament.
Subscriure's a:
Missatges (Atom)