HTML5 I CSS3!

Hola! En aquest post parlaré sobre HTML5 i CSS3, la seua aparició i les seues novetats.

En primer lloc, pel que fa a l'aparició d'HTML5, empreses com Apple, Mozilla i Opera van reprendre el projecte abandonat per a la creació d'una cinquena versió d'HTML, i van començar a treballar per aconseguir una millor compatibilitat amb les tecnologies de l'actualitat. Va ser en 2006 quan la W3C va tornar a interessar-se en HTML5 i finalment en 2007 es va unir al grup que es trobava treballant en aquesta versió. No obstant això, en la W3C encara existia rebuig cap a aquesta versió. Finalment en 2010 es dóna la popularització d'HTML5.

Per una altra banda,  CSS3 ha estat en desenvolupament des de 1998, i està en complet funcionament actualment.

Pel que fa a les novetats d'HTML5 les més destacades són les següents:

• Presenta una millor estructura, semàntica, que facilita la recerca als navegadors i la comprensió per part d'altres persones. Destaquen les etiquetes <section>, <article>, <aside>, <header>, <footer> i <nav>.

• També permet realitzar millors formularis amb les següents etiquetes: 

• <datetime>, <datetime-local>, <date>, <month>, <week>, <time>, per a indicar una data/hora.
• <number> per a que l'usuari indique un nombre.
• <range> per a indicar un rang entre dos nombres.
• <email> per a indicar un correu electrònic.
• <url> pera indicar una direcció web.
• <search> per a indicar una búsqueda.
• <color> per a indicar un color.

• Per últim, altres elements importants són:

• <audio> i <video> serveixen per a incrustar un contingut multimèdia de so o de vídeo, respectivament. 
• <embed> serveix pe ra contingut incrustat però no natiu, sinó executat per pluggins com el de Flash. 
• <canvas>  permet generar gràfics, dibuixant elements dins d'ell. S'utilitza, per exemple, en Google Maps. 

Les novetats de CSS3 més importants són les següents:

• En les vores:
• border-color: vores amb degradats, sols per a Mozilla.
• border-image: vores redones i de moltes formes per a imatges.
• border-radius: caixes amb vores redones.
• box-shadow: sombres amb gradients per a caixes. 

• Fons:
• background-origin & background-clip: posicions del fondo respecte a les caixes.
• background-size: tamany de la imatge de fons.
• multiple backgrounds: varies imatges de fons en el mateix element.

• Color 
• colors HSL: color, saturació i lluminositat.
• colors HSLA: afegeix opacitat.

• Text
• text-shadow: efectes d'ombra en text, comparables a photoshop.

Espere que siga útil!

HTML amb CSS!

Hola! En aquest post tractarem com fer un calendari amb HTML utilitzant CSS i dissenyant dos estils diferents. 

És important que el codi CSS el fem en un lloc web diferent a l'arxiu HTML on tenim el codi, ja que així ens permet modificar l'estil quan ho necessitem, incloure altres estils amb CSS, canviar un per altres fàcilment i, per últim, també ens permet tindre un model de codi HTML i CSS ja fet.

El procés que hem seguit per a fer un calendari és el següent:

• Primer, creem una carpeta on posarem l'arxiu HTML i els dos codis CSS que escriurem.
• En segon lloc, escribim el codi HTML definint una taula per a fer el calendari. Aquest és el resultat del codi, voreu que estan enllaçats dos arxius .css, açò serà els que ens permet definir l'estil del calendari, per això tenim dos, un actiu, "calendari2.css", i un altre inutilitzat temporalment mitjançant un comentari d'HTML, "calendari1.css". D'aquesta manera, en qualsevol moment podem canviar un estil per l'altre.

• Per últim, creem els full d’estils calendari1.css i calendari2.css, on definirem l'aparença del nostre calendari segons l'estil. Per tant, tindrem un arxiu HTML amb dos codis .css enllaçats, un actiu, que ens permetrá vore l'estil actiu i un inutilitzat, que no apareixerá al navegador. El resultat és el següent:

• Aquest és el primer estil de calendari.

• Aquest és el segon estil del calendari.

Espere que siga útil!

Javascript: llenguatge de programació per a la web

Hola! En aquest post tractaré el llenguatge de programació Javascript, el seu origen, ús i alguns exemples.

• Què és? Qui el va fer? Quan va nàixer?

Javascript és un llenguatge de programació que s'utilitza principalment del costat del client permetent crear efectes atractius i dinàmics en les pàgines web. Es defineix com orientat a objectes, basat en prototipus, imperatiu, dèbilment tipat i dinàmic.

Per a entendre el que es Javascript utilitzarem un exemple: un usuari escriu una direcció web en el seu navegador, per exemple http://mj-tic-bat2.blogspot.com.es/. El servidor rep la petició i com a resposta a aquesta envia a l'ordinador de l'usuari codi HTML junt al codi Javascript. El codi HTML s'encarrega de que en la pantalla es mostre alguna cosa, per exemple una imatge, un menú, etc. El codi Javascript es pot encarregar de crear efectes dinàmics en resposta a accions de l'usuari, per exemple que es desplegue un menú tipus acordeó quan l'usuari passa el ratolí per damunt d'un element del menú.

 Brendan Eich va desenvolupar en Netscape Corporation la primera versió d'este llenguatge sota el nom Mocha, rebatejat LiveScript i finalment Javascript. Aquest últim canvi de nom va coincidir amb la inclusió de la tecnologia Java per part del navegador web Netscape. La primera versió del llenguatge es va presentar el desembre de 1995 a la versió 2.0B3 del navegador Netscape. El 1997 els autors van proposar Javascript com a estàndard de l'European Computer Manufacturers Association (ECMA), tot i que el seu nom no és europeu, sinó internacional, amb la seu a Ginebra. El juny de 1997 va ser adoptat com un estàndard ECMA, amb el nom ECMAScript. Poc després també va ser un estàndard ISO (Organització Internacional per a l'Estandardització).

• Per a què el necessitem a una pàgina web del costat del client?

Javascript és principalment utilitzat per part de programadors web per donar respostes ràpides a les accions de l'usuari sense necessitat d'enviar la informació del que ha fet l'usuari al servidor i esperar resposta d'aquest (la qual cosa faria més lents els processos). El codi JavaScript es carrega alhora que el codi HTML al navegador, i resideix en el client (ordinador en el que ens trobem). JavaScript  suposa que les respostes del servidor siguen més completes i permet que es realitzen més processos al nostre ordinador, de manera que es redueix el nombre de peticions i respostes necessàries entre client i servidor.

Amb Javascript podem crear efectes especials a les pàgines i definir interactivitats amb l'usuari. El navegador del client és l'encarregat d'interpretar les instruccions Javascript i executar-les per realitzar aquests efectes i interactivitats, de manera que el recurs més important, amb que compta aquest llenguatge és el mateix navegador i tots els elements que hi ha dins d'una pàgina. .

• On podem ficar-lo?

S'acostuma a posar el codi JavaScript a la capçalera, entre l'etiqueta <head>,  ja que així el navegador pot emmagatzemar-lo en memòria abans que succeisca un esdeveniment que l'inicie i podem reutilitzar-lo.

 També podem posar el codi javascript entre l'etiqueta <body>, funcionaria  però no és el més recomanable, hem de buscar la millor opció, no la més ràpida. 

Per últim, podem situar el codi javascript fora del HTML, així podem reciclar el codi i no mesclem codi HTML i javascript. Aquest últim és més professional. En compte de posar el codi Javascript dins de l'etiqueta script, el que fem és incloure-li a aquesta etiqueta l'atribut src (source), donant-li com a valor una URL relativa al document, perquè carregue el seu contingut com si fóra javascript. Per descomptat, hem creat un fitxer anomenat javascript.js al mateix nivell del nostre HTML amb el codi javascript.

Ací deixe uns exemples, en la primera captura el codi javascript es troba en <body>, en la segona en <head> i en la tercera i la quarta fora del HTML.

Codi correcte!

Hola! En aquest post tractaré quin és el model que hem de seguir per a crear una web, indicant quines són les etiquetes que sempre han d'aparéixer i una llista de bones costums al escriure codi HTML. Vorem aquestes etiquetes reflexades en model-web.html .

Les etiquetes que sempre hem d'escriure són les que apareixen en la imatge:

• És interessant escriure <! DOCTYPE> perquè és una instrucció per al navegador web sobre en quina versió d'HTML està escrita la pàgina. Especifica les regles per al llenguatge HTML, de manera que els navegadors mostren el contingut correctament.

• També és important escriure  <meta> charset perquè especifica la codificació de caràcters per al document HTML.

A més, la llista de bones costums per a escriure HTML és la següent:

• Escriure el  <! DOCTYPE> correcte que té el nostre document per a que el navegador puga mostrar bé la pàgina.
• Tancar totes les etiquetes.
• Escriure les etiquetes en minúscula.
• No donar mai estil en el document HTML, sinó utilitzar CSS o JavaScript.
• Valida el codi.

Crear un lloc web senzill!

Hola a tots! En aquest post vos vaig a explicar de forma breu i clara com crear un lloc web senzill, com el que he creat, amb links, imatges i un mapa d'imatge.

• Creem la carpeta weblinks
  
  
  

  
  
• Creem un arxiu index.html que posarem en la carpeta, en la imatge interior ja està dins. Li posem el títol index, insertem un enllaç al nostre blog i dues pàgines sobre dos animals a les quals accedim clicant un retall d'una foto de cada animal. Explicaré a continuació aquestes pàgines, a més d'un mapa d'imatges. Aquest seria el resultat final d'index, junt amb el codi.

• En segon lloc, creem les dues pàgines nombrades anteriorment. En el meu cas foto-gran-koala.html i foto-gran-osop.html, les incloem dins la carpeta weblinks (veure imatge punt 1), posem un títol a cadascuna, inserim la foto de cada animal i posem un link a index per a tornar a la pàgina inicial.
  
  

  

 

• Per últim, creem la pàgina mapamundi.html on farem el mapa d’imatge sobre una imatge d'un mapamundi, on clicant al continent correcte et portarà a la pàgina web de cada animal. Aquesta web ha d'inseris-se també a index.html.

Espere que haja quedat clar i que vos agrade!

Editors de codi!

Hola! En aquest post vaig a parlar sobre els editors de codi, els problemes que es presenten al editar arxius quan canvies de sistema operatiu i algunes solucions, prenent com a exemple l'arxiu curriculum.html .

En primer lloc, quan editem curriculum.html amb el sistema operatiu Lliurex utilitzem l'aplicació específica Gedit, ja que no insereix cap format. El resultat seria el següent:

Tanmateix, si necessitem editar curriculum.html des d'un ordinador diferent amb el que hem creat l'arxiu i aquest té un sistema operatiu diferent a Lliurex, per exemple Windows, ens trobem amb el problema de que no apareix correctament el codi, no apareixen totes les etiquetes. El resultat seria el següent:

Per tant, la solució que podem trobar és descarregar un editor de codi que ens permeta editar curriculum.html sense que desaparega el codi que hem escrit. Un dels millors editors és NotePad++, ja que reconeix el codi i és molt fàcil d'utilitzar. NotePad++ es veu d'aquesta manera:

Programació per a la web!

La web actual es basa en l'estàndard HTML5, que incorpora moltes funcionalitats que la versió anterior l'HTML 4.01 no va tindre en compte: àudios, vídeos, eines de dibuix, validació, etiquetatge semàntic, etc. Aquestes novetats fan la web més accesible i comprensible. 

Així i tot, també són comuns llenguatges com :

• HTML 4
• XHTML
•  XML

Hem de tindre en compte que en tots aquests llenguatges no definirem l'estètica de la pàgina, açò ho farà uns altres llenguatges anomenats CSS3 i JavaScript en la part del client.

La web actual es basa en l’estàndard HTML5

La web actual es basa en l’estàndard HTML5. L’anterior versió de l’HTML, l’HTML 4.01, és de l’any 1999 i l’àmbit del web ha evolucionat molt des de llavors. L’HTML5 incorpora moltes funcionalitats que en aquell moment no es van tenir en compte: àudios, vídeos, eines de dibuix, validació de formularis, etiquetatge semàntic i molt més.
HTML5 va incorporant noves funcionalitats, a vegades forçades pels mateixos fabricants i els desenvolupadors de navegadors. Per aquest motiu no tots els navegadors implementen totes les funcionalitats a l’instant en què un desenvolupador s’avança; és a dir, les etiquetes que fem servir no sempre es comporten igual segons el navegador amb què obrim els documents.

La web actual es basa en l’estàndard HTML5. L’anterior versió de l’HTML, l’HTML 4.01, és de l’any 1999 i l’àmbit del web ha evolucionat molt des de llavors. L’HTML5 incorpora moltes funcionalitats que en aquell moment no es van tenir en compte: àudios, vídeos, eines de dibuix, validació de formularis, etiquetatge semàntic i molt més.
HTML5 va incorporant noves funcionalitats, a vegades forçades pels mateixos fabricants i els desenvolupadors de navegadors. Per aquest motiu no tots els navegadors implementen totes les funcionalitats a l’instant en què un desenvolupador s’avança; és a dir, les etiquetes que fem servir no sempre es comporten igual segons el navegador amb què obrim els documents.

La web actual es basa en l’estàndard HTML5. L’anterior versió de l’HTML, l’HTML 4.01, és de l’any 1999 i l’àmbit del web ha evolucionat molt des de llavors. L’HTML5 incorpora moltes funcionalitats que en aquell moment no es van tenir en compte: àudios, vídeos, eines de dibuix, validació de formularis, etiquetatge semàntic i molt més.
HTML5 va incorporant noves funcionalitats, a vegades forçades pels mateixos fabricants i els desenvolupadors de navegadors. Per aquest motiu no tots els navegadors implementen totes les funcionalitats a l’instant en què un desenvolupador s’avança; és a dir, les etiquetes que fem servir no sempre es comporten igual segons el navegador amb què obrim els documents.

La web actual es basa en l’estàndard HTML5. L’anterior versió de l’HTML, l’HTML 4.01, és de l’any 1999 i l’àmbit del web ha evolucionat molt des de llavors. L’HTML5 incorpora moltes funcionalitats que en aquell moment no es van tenir en compte: àudios, vídeos, eines de dibuix, validació de formularis, etiquetatge semàntic i molt més.
HTML5 va incorporant noves funcionalitats, a vegades forçades pels mateixos fabricants i els desenvolupadors de navegadors. Per aquest motiu no tots els navegadors implementen totes les funcionalitats a l’instant en què un desenvolupador s’avança; és a dir, les etiquetes que fem servir no sempre es comporten igual segons el navegador amb què obrim els documents.

La web actual es basa en l’estàndard HTML5. L’anterior versió de l’HTML, l’HTML 4.01, és de l’any 1999 i l’àmbit del web ha evolucionat molt des de llavors. L’HTML5 incorpora moltes funcionalitats que en aquell moment no es van tenir en compte: àudios, vídeos, eines de dibuix, validació de formularis, etiquetatge semàntic i molt més.
HTML5 va incorporant noves funcionalitats, a vegades forçades pels mateixos fabricants i els desenvolupadors de navegadors. Per aquest motiu no tots els navegadors implementen totes les funcionalitats a l’instant en què un desenvolupador s’avança; és a dir, les etiquetes que fem servir no sempre es comporten igual segons el navegador amb què obrim els documents.