MY BLOG ICT: curs16-17

Showing posts with label curs16-17. Show all posts

Wednesday, 1 February 2017

HTML amb CSS

Per qué hem de fer CSS en un lloc web (site):
   En aquest últim exercici que he fet en l'assignatura d'informàtica, he pogut aprendre quina utilitat té el CSS.
   Per a crear una pàgina web, hem d'utilitzar HTML, però per a separar el contingut de la presentació, utilitzem CSS. En separar el contingut, hem referisc a que en HTML es crea l'esquema de la pàgina, i que amb el CSS ,per separat, li dones estil a la pàgina web que estem creant i després l'enllaces al HTML. Creant així una pàgina web que amb distints CSS(estils), poden crear-se distintes pàgines web.

Aquest ultim treball hem fet una pàgina web d'una taula amb HTML, per crear un calendari i per a crear l'estil d'aquesta pàgina web hem utilitzat CSS.
*** El CSS es pot escriure tant dins del HTML com fora, en aquest cas, estic explicant-ho per a un CSS fora del HTML i enllaçat al HTML:<link rel="stylesheet" type="text/css" href="calendari1.css" />
He creat el primer CSS (calendari1.css) i després el segon (calendari2.css).
Per a no ficar els dos CSS a la vegada, ja que no es pot, hem desactivan un CSS( un estil de pàgina), utilitzant un comentari:

    
   <link rel="stylesheet" type="text/css" href="calendari1.css" />
   

Per activar el calendari amb el segon estil, ho trac de l'etiqueta del comentari i fique com a comentari l'altre link del "calendari1.css", desactivant aquest.
Quan el CSS és un arxiu de fora del HTML no fa falta utilitzar l'etiqueta <style> en canvi si estiguera dins, a l'interior de l'etiqueta <head> hem de crear el CSS(l'estil de pàgina) entre les etiquetes <style> y </style>.

Imatges del meu treball, el calendari:

1. La pàgina web de la taula sense cap estil:

2. La pàgina web amb el primer estil "calendari1.css":

3. La pàgina web amb el segon estil "calendari2.css":

Friday, 11 November 2016

CODI CORRECTE

DOCTYPE:

XHTML deriva de XML=comparteixen moltes normes i sintaxi.

Conceptes fonamentals de XML és la utilització del DTD o Document Type Definition ("Definició del Tipus de Document").

Un DTD és un document que recull el conjunt de normes i restriccions que han de complir els documents d'un determinat tipus.
L'estàndard d'XHTML defineix tres DTD diferents. (per indicar la DTD utilitzat en crear una determinada pàgina, s'empra una etiqueta especial anomenada doctype, l'únic element que s'inclou fora de l'etiqueta <html> de la pàgina. De fet, la declaració de l'doctype és el primer que s'ha d'incloure en una pàgina web, abans fins i tot que l'etiqueta <html>.

El 3WC és l'organització de referència per als llenguatges i standards en
desenvolupament web.

A continuació es mostren els tres DTD que es poden utilitzar en crear pàgines XHTML:

XHTML 1.0 Estricto

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

XHTML 1.0 Transitorio

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

XHTML 1.0 Frameset

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd">

HTML 4.01 strict
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">

HTML 4.01 transitional
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

HTML 4.01 frameset
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN" "http://www.w3.org/TR/html4/frameset.dtd">

HTML 5
<!DOCTYPE HTML>

CHARSET:

L'element meta amb atribut charset en un document HTML està destinat a indicar la codificació de caràcters utilitzada (charset). En HTML5 té la sintaxi:

<meta charset="identificador-juego-de-caracteres">

Es pot utilitzar la codificació UTF-8 (estàndard en HTML5 reconegut per la RFC 3629 de la Internet Engineering Task Force (IETF) i una de les tres possibilitats de codificació reconegudes per Unicode):

<meta charset= utf-8">

En HTML4 la sintaxi era diferent:

<meta http-equiv="content-type" content="text/html;utf-8">

És important que el porter charset es col·loqui just després de l'obertura de l'etiqueta <head>.

Per què s'ha d'especificar el Charset?

1.Assegurar que la pàgina es veu correctament.

Per exemple en HTML4 la codificació utilitzada per defecte és ISO-8859-1 (latin-1). Amb amb aquesta codificació tots els caràcters que no apareguin en l'alfabet llatí hauran de ser escrits com a entitat HTML. Per exemple, & agrave; per a la á, o & ntilde; per a la ñ.
2.UTF-7 XSS Cheat Sheet.

El conegut com a UTF-7 XSS Cheat Sheet no especifica la codificació de les seves pàgines. Per prevenir hi ha prou amb especificar la codificació, ja sigui a través del meta charset o mitjançant les capçaleres HTTP.

BONES COSTUMS PER A HTML:

La primera línia ha de ser el DOCTYPE
El títol, el més important
Escriu totes les etiquetes en minúscules
Tanca tot el que obris i en ordre
Especifica el joc de caràcters (charset)
Les capçaleres <h1>, <h2>, <h3>, ... són per a capçalera

Friday, 28 October 2016

CREAR UN LLOC WEB SENZILL

Vaig a explicar com crear unes pàgines enllaçades entre si, de forma senzilla:

1. Crear una pàgina web incial, que he anomenat "index.html", des d'on estaran enllaçades totes les webs on vuiguem anar mentres llegim aquesta pàgina.
Crear una pàgina web sabem fer-ho, però per a guiar-nos, he pujat la plantilla del meu treball.

Com enllaçar-les?

A través de punxar en una imatge:

A través d'un enllaç(Pàgina creada per nosaltres o ja existent):

<a href="nom de la pàgina on vuiguem anar"> Text</a>

2. Es creen les pàgines on vuiguem accedir a partir de la pàgina principal i en elles es creea un enllaç per tornar a la pàgina d'inici. Com ja he dit, s'enllaça:
<a href="nom de la pàgina on vuiguem anar"> Text</a>

En aquesta última de "mapamundi.html" he volgut crear dos enllaços a partir d'una imatge, però dols dos zones concretes de la imatge, en aquest cas, el lloc on viuen els animals dits en el treball. Com es fa:
1- Introduïm la imatge:
<img src="mapamundi.jpg" width="1250" height="600" usemap="#mapamundi">
2- Introduïm el nom del mapa:
<map name="mapamundi">
3- Creem l'area que volem seleccionar, determinant la forma de la selecció, les coordenades per píxels i la direcció de la pàgina on volem anar:
<area shape="rect" coords="1000,400,1150,550" href="weblinks-ainhoapau/foto-gran-koala.html" alt="selección" />

Consell: Si tots els arxius i imatges estan en la mateixa carpeta, és més fàcil d'enllaçar-les.

Monday, 10 October 2016

EDITORS DE CODI

En aquest trimestre hem util·litzat tres tipus d'editors de pàgines web:

1. GEDIT:
L'editor de textos gedit, que ve instal·lat, de manera gratuita,per defecte a l'entorn d'escriptori GNOME i compatible amb UTF-8, és una aplicació potent tant per a l'edició de documents de text com per edició de codi per a programadors, d'una manera simple i neta.
En aquest programa es pot treballar en distints arxius a la vegada, gràcies a la possibilitat de tenir cada arxiu en una pestanya. Quan acabem amb la programació de la pàgina, guardem l'arxiu amb el nom que vulguem seguit de punt i l'extensió de l'arxiu que vulguem o l'altra opció és anar a les pestanyes inferiors i canviar l'opció txt per l'extensió que vulguem.

2. BLOC DE NOTAS:
El Bloc de notes ens permet fer tasques senzilles d'edició de text com: Escriure, copiar, enganxar, tallar text, buscar i reemplaçar text; però també permet obrir de manera ràpida els arxius de text, que a més ocupen poc espai. Per a què serveix el bloc notes:

Escriure textos, de manera ràpida, sense preocupar-nos dels aspectes d'edició i sense importar quina longitud tinguin.
En cas de no tenir connexió a Internet pots escriure textos en NotePad com a esborranys, com per exemple per a un correu electrònic quan hi haja conexió.
Utilitzar-com un Post-it, realitzant anotacions ràpides i guardar a l'escriptori.
Si vols guardar textos copiats d'Internet sense cap format, enganxa els textos al bloc de notes per incorporar-los després a una edició.
A més, el bloc de notes s'ha convertit en l'aplicació preferida per als dissenyadors de pàgines web, que utilitza caràcters internacional, adequat per als fitxers HTML.
Característiques:
- El bloc de notes és l'equivalent a Windows de l'editor de MS-DOS edit.
- Els arxius o documents es guarden amb l'extensió per defecte de l'editor. Aquesta extensió és ".txt", un format que no té etiquetes ni estils.
- Permet afegir o inserir hora i data actual prement F5, en format "HH: MM DD / MM / AA".
- Realitza les funcions bàsiques d'edició de text com redactar, copiar, talla, enganxar, buscar reemplaçar, seleccionar tot i canviar el format.

3. NOTEPAD++:
Notepad ++ només té versió per a Windows, és bastant més potent que el modest Notepad o 'Bloc de Notes'.
Característiques:

Múltiples pestanyes / Vista dividida (MULTIVIEW):

Podem carregar múltiples fitxers alhora, utilitzant pestanyes i MULTIVIEW. Per exemple, si estem creant una pàgina web amb CSS i JS podem tenir cada fitxer (HTML, Full d'estil, JavaScript) en una pestanya diferent.

Numeració de línies, sagnats (tabulació), desplegat (folding):

Bàsics en un editor d'aquest tipus per localitzar ràpidament errors, presentar més clarament el codi en diferents nivells amb tabulacions configurables i amagar / desplegar blocs que ens permeten veure millor l'estructura del fitxer i les seves diferents seccions.

Ressaltar sintaxi del codi:

Notepad ++ identifica el llenguatge del fitxer que tenim obert i aplica diferents colors als diferents elements perquè els identifiquem més fàcilment.

Códi automàtic:

Ens pot donar suggeriments en línia sobre el codi que estem introduint (paraules claus, funcions o paràmetres de funcions). Podem configurar quina d'aquestes ajudes tenir activa o a partir de quants caràcters apareix un suggeriment o completa una paraula.

Monday, 19 September 2016

PROGRAMACIÓ PER A LA WEB

Els llenguatges de programació web han anat sorgint segons l'intent de facilitar la feina als desenvolupadors d'aplicacions. Es classifiquen en:

1. Llenguatges del costat client, són aquells llenguatges que són assimilats directament pel navegador i no necessiten pre tractament.

Llenguatge HTML: (estudiat a classe)

    Des del sorgiment d'internet s'han publicat llocs web gràcies al llenguatge HTML. És un llenguatge estàtic per al desenvolupament de llocs web (acrònim en anglès de HyperText Markup Language, en espanyol Llenguatge de Marques Hipertextuales). Desenvolupat pel World Wide Web Consortium (W3C). Els arxius poden tenir les extensions (htm, html).
Sintaxi:<Html> (Inici del document HTML)<Head>(Capçalera)</ Head><Body>(Cos)</ Body></ Html><B> </ b> Negreta<P> </ p> Definir paràgraf
Avantatges:

    Senzill.
    Text presentat de forma estructurada i agradable.
    No necessita de grans coneixements.
    Arxius petits.
    Desplegament ràpid.
    Llenguatge de fàcil aprenentatge.
    Ho admeten tots els exploradors.

Desavantatges:

    Llenguatge estàtic.
    La interpretació de cada navegador pot ser diferent.
    Guarda moltes etiquetes qinnecesàries i dificulten la correcció.
    El disseny és més lent.
    Les etiquetes són molt limitades.

Llenguatge Javascript:

Aquest és un llenguatge interpretat, no requereix compilació. Va ser creat per Brendan Eich a l'empresa Netscape Communications. Utilitzat principalment en pàgines web. És similar a Java. La majoria dels navegadors en les seves últimes versions interpreten codi Javascript.

Fulles d'Estil en Cascada:

Els Fulls d'estil en cascada, en anglès Cascading Style Sheets (CSS), van ser dissenyades i desenvolupades per la World Wide Web Consortium (W3C). Un full d'estils CSS és el tipus de document que utilitza un navegador web per redefinir les propietats dels diferents elements i les etiquetes en el codi HTML. Permet donar format als documents de forma global. Proporciona al dissenyador de pàgines web definir un conjunt d'ampliacions HTML especials i aplicar-les al document. Possibiliten més aplicar un format modificat a documents HTML ja existents. Els CSS constitueixen una eina poderosa per al disseny de documents HTML, ja que permeten modificar la representació del document mitjançant l'assignació d'un nou estil.

2. Llenguatges del costat servidor. són aquells llenguatges que s'executen pel propi servidor i són enviats al client en un format clar per a ell, per exemple:

Llenguatge PHP:

És un llenguatge de programació utilitzat per a la creació de lloc web. PHP és un acrònim recursiu que significa "PHP Hypertext Pre-processor". Va sorgir en 1995, desenvolupat per PHP Group.
PHP és un llenguatge de script interpretat en el costat del servidor utilitzat per a la generació de pàgines web dinàmiques, embegudes en pàgines HTML i executades al servidor. PHP no necessita ser compilat per executar-se. Per al seu funcionament necessita tenir instal·lat Apache o IIS amb les llibreries de PHP. Els arxius compten amb l'extensió (php).

Adreça d'interés en la programació

Tuesday, 13 September 2016

LES TIC AL MEU FUTUR

    Les tecnologies de la informació de la comunicació són molt importants en l'actualitat i gràcies a aquestes estem en contacte i comunicació amb moltes altres persones del nostre voltant. Ens comuniquem a través de missatges per exemple pel telèfon mòbil, per imatges i sons com en la televisió que dia a dia ens mostra els successos més importants que passen al nostre voltant. Una de les tecnologies més importants és el Internet creada per milions de xarxes que conecten tot el món i per tant es poden enviar diferents tipus d'informació a alguns coneguts.
    Les TIC no només estan influint el nostre present, sinó que també serà part important del nostre futur. Les tecnologies de la informació i la comunicació són essencials per millorar la vida diària, l'educació i la vida empresarial, sempre que siguin utilitzades de manera intel·ligent.
    L'arribada d'aquestes tecnologies ens ajuda a efectuar tasques en menys temps i organitzar gran volum d'informació. A través dels diferents programes com youtube i google, tot es pot trobar i aprendre. El coneixement que un s'imposi no té límits.
    Per això considere que efectivament les TIC són molt importants en la nostra vida ja que en l'actualitat estem vivint dia a dia amb elles i el no util·litzar-les tant en la nostra vida personal com professional seria el no evolucionar en la nostra vida diària.

Ha sigut complicat determinar que vull estudiar en un futur, però poc a poc he vist que hem decante per una enginyeria informàtica. Mirant les universitats, vaig veure una nova carrera que hem va interessar, aquest és el seu plà d'estudis:

http://www.uji.es/estudis/oferta/base/graus/2015/matematica/que-aprendre/plaestudi/

Ja heu vist, el meu futur està ple d'informàtica:)

Monday, 12 September 2016

PRIMERA ENTRADA DEL CURS

Hola de nou, ja tornem de vacanses i ara toca possar-se a treballar en un nou i dur curs. Ànim!
A l'institut curse l'assignatura d'informàtica. La professora porta un blog on puja tota l'informació del curs Aquest és el seu blog