HTML5 i CSS3

 

Hola suscriptors!!

Avuí vos faré una introducció a l'HTML5 i CSS3, que és l'últim que estem donant en TIC.

L'HTML5 (HyperText Markup Language, versió 5) és la quinta revisió important del llenguatge bàsic de la World Wide Web, HTML. HTML5. La versió definitiva de la quinta revisió de l'estàndard es va publicar a l'octubre de 2014.


Les novetats d'HTML5 són la incorporació d'etiquetes com canvs 2D i 3D, audio i video amb codecs per a mostrar els continguts multimedia, etiquetes per a gestionar grans conjunts de dades, que permetixen generar taules dinàmiques que poden filtrar, ordenar i ocultar contingut en el costat del client, millores en els formularis amb noves dades i facilitats per a validar el contingut sense Javascript, visors per a formules matematiques i grafics vectorials i funcionalitat per arrastrar objectes com imatges.
 El CSS3, a diferència de CSS2, que va ser una única especificació que definia diverses funcionalitats, CSS3 està dividida en diversos documents separats, cridats "módulos".  Els treballs en el CSS3, van començar al mateix temps que es va publicar la recomanació oficial de CSS2, i els primers esborranys de CSS3 van ser alliberats al juny de 1999. A causa de la modularització del CSS3, diferents mòduls poden trobar-se en diferents estats del seu desenvolupament,23 de manera que a dates de novembre de 2011, hi ha al voltant de cinquanta mòduls publicats, tres d'ells es van convertir en recomanacions oficials de la W3C en 2011: "Selectores", "Espacios de nombres" i "Color". Alguns mòduls, com "Fondos i colores", "Consultas de medios" o "Diseños multicolumna" estan en fase de "candidatos".

Estes són 5 de les novetats del CSS3:
 1. Box shadow:  el que box shadow fa, és afegir una ombra a un element del tipus caixa (display: box). Li podem definir un valor opcional cridat "inset" la qual cosa farà és posar l'ombra dins de la caixa en compte de fora.

2.Border radius:el border radius afegeix bordes en els cantons.

3.Columns: aquesta propietat és útil per a quant es vol separar en columnes un text o un grup d'elements.

4.Text shadows: esta propietat afegeix una sombra paralela al text.

5.Transitions: aquesta propietat és una animació feta sols amb CSS, la seua sintaxis conisteix a seleccionar una propietat i definir el temps d'animació.

HTML amb CSS

Hola suscriptors!!

Aquest curs hem estat treballant amb l'HTML i últimament hem començat a utilitzar el CSS per a que així canvie un poc l'aspecte de les meues pàgines web.

Per a utilitzar el css, el millor per a mi es fer-fo en un lloc web i incrustar-lo amb un link a l'HTML. D'aquesta manera, si volem editar l'arxiu CSS sols haurem de canviar l'arxiu incrustat i no tot l'HTML i per tant, serà més fàcil i senzill.

El que caldria fer en aquest cas seria, crear l'arxiu HTML i a continuació el CSS on posarem el color de fons de la pàgina, canviarem l'estil de la lletra.... Aquest CSS hauriem d'integrar-lo en la pàgina HTML amb el següent link que conté el nom del arxiu css:

Pero si volem que la nostra pàgina web  tinga més d'un estil, haurem de crear un altre CSS i per a que ens aparega sols tindrem que canviar el nom de l'arxiu que hem posat abans entre cometes per el nom de l'altre arxiu nou. 

A continuació us vaig a ensenyar el direfents dissenys que he fet d'un calendari:

-Aquest seria una llista de calendari d'HTML bàsica sense CSS

-Aquest seria amb un dels meus dissenys incrustats del CSS

-Aquest seria un altre estil diferent de CSS

Espere que vos haja agradat, si teniu algún dubte deixeu-ho als comentaris.

Fins la pròxima!!!

JavaScript: llenguatge de programació per a la web

Hola suscriptors!!!

Avuí parlarem del JavaScript.

JavaScript és un senzill llenguatge de programació, que presenta una característica especial: els seus programes, cridats comunament scripts, s'en les pàgines HTML i s'executen en el navegador (Mozilla Firefox, Microsoft Internet Explorer,...) . Estos scripts normalment consistixen en unes funcions que són crides des del propi HTML quan algun esdeveniment succeïx. D'esta manera, podem afegir efectes com que un botó canvie de forma al passar el ratolí per damunt, o obrir una finestra nova al polsar en un enllaç, ...
 JavaScript va ser desenrotllat per Netscape, a partir del llenguatge Java, el qual seguix una filosofia semblant, encara que va més enllà. Java és un llenguatge de programació per si mateix, açò vol dir, que es pot executar un programa Java fora d'un navegador. La diferència fonamental és que Java és un llenguatge complet, que pot ser utilitzat per a crear aplicacions de qualsevol tipus, mentres que JavaScript només "funciona" dins d'una pàgina HTML.

JavaScript va ser declarat com a estàndard de l'European Computer Manufacturers' Association (ECMA) en 1997, i poc després també va ser estandarditzat per ISO. No obstant això, l'estructura d'objectes que implementaven els diferents navegadors (Netscape i Explorer en aquells moments) no s'ajustava a l'estàndard, la qual cosa provocava nombrosos problemes de compatibilitat. Per a resoldre'ls el W3C va publicar un nou model d'objectes, DOM (Document Object Model) , que incorporen la majoria de navegadors actuals com Explorer o Firefox.


Utilitzem Javascript al costat del client perquè és un dels llenguatges que pot ser directament dirigit pel navegador no necessiten un pretractament.

Per a insertar un javascript en un document html, s'ha de posar entre les etiquetes <script></script>, d'aquesta manera:

 

Fins promte!!

Codi correcte!!

🌟Hola suscriptors🌟

Avuí vaig a parlar-vos de 2 elements de l'HTML, concretament del doctype i del charset, també d'un llistat de bones costums per a quant utilitzem el llenguatge html i un model de còdi necessari en tota pàgina web

 Pel que fa al doctype podem dir que és la declaració del tipus de document que indica que el nostre document està escrit la estructura determinada per un DTD concret. 

*Recorda posar el doctype per a dir-li al teu navegador quina versió d'HTML ha d'utilitzar.

 Pel que fa al metacharset, que està compost per l'etiqueta "meta" que indica el tipus de codificació de la nostra pàgina web i altre tipus de metadades, i per l'etiueta "charset" que s'utilitza per a especificar la codificació utilitzada en la nostra pàgina web.

*Nota: sols ha d'existir una etiqueta meta amb l'atribut charset a la pàgina.

  També és necessari utilitzar unes bones costums per a escriure el codi en HTML:

1. Escriure les etiquetes bàsiques per a crear un lloc web, com l'HTML, el title, el head, el body... i tancar-les immediatament per a no oblidar-se'n després Açí teniu l'exemple que inclou les etiquetes mecionades anteriorment:

2.Escriure totes les etiquetes en minuscula i anar dentant cada vegada que escrivim una etiqueta dins d'una altra ja que així podrem vore més ràpidament tots els elements que formen la pàgina web i, si algú ha de editar alguna cosa podrem fer-ho de seguida.

 Espere que ho entengau tot, fins la próxima!!

Fàcil i senzill lloc web!!!

Avuí m'agradaria parlar-vos de el ue fet durant aquesta primera avaluació en TIC ja que ens hemm dedicat a treballar l'HTML i en un d'aquests treballs hi ferem una web link la que es una página web que es comunica amb altres i en el meu cas, he fet un joc molt divertit.
Es veu així:

Per entrar a eixa página fes click açí: E:\TIC II\B2-U1-1-HTML-BASIC-ACT\weblinks-maria-oviedo\index.HTML

Una vegada estigues dintre de la página si segueixes les instruccions podràs accedir a diferents llocs com el meu blog, una página amb l'informació dels koala i un altra amb información dels òssos panda:

El meu blog

La pàgina de l'os panda

La página del koala

Espere que vos haja agradat, fins la próxima!!!

  



Editors de codi!

Hola a tots!

Avuí vaig a parlar-vos dels edtiors de codi i els seus problemes que sorgeixen al editar arxius quant canvies de sistema i algunes de les seues solucions. Us mostraré l'exemple del meu arxiu curriculum.html

Abans que res, per editar el curriculum.html amb Lliurex utilitzem l'aplicació Gedit i apareix així:

Si volem editar curriculum.html des d'un ordinador diferent que 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 nostre arxiu HTML apareixeria així:

Una solución rápida i senzilla que es pot 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. Amb aquest editor es veuria així:

Espere que us haja agradat, fins la pròxima!!



Programació per a la web

Actualment la web es basa en l'estàndard HTML5, que incorpora moltes funcionalitats que la versió anterior no va tindre en compte: àudios, vídeos, eines de dibuix, validació, etiquetatge semàntic, etc. 

Alhora també són comuns llenguatges com :

• HTML 4
• XHTML
•  XML

*Tots aquests llenguatges no definirem l'estètica de la pàgina, açò ho faram uns altres llenguatges anomenats CSS3 i JavaScript en la part del client.

Fins promte!!