Float

Per a la posició dels elements de la pàgina HTML, és necessari fer servir els "Floats". Ara veurem les diferentes opcions d'aquesta eina:

LEFT: traduït al català, esquerra. Serveix perquè l'element seleccionat es traslladi a l'esquerre.

RIGHT: traduït al català, dreta. Serveix perquè l'element seleccionat es mogui a la dreta.

NONE: és a dir, que no volem que es mogui

Div

El div és un codi que fem servir per aplicar-li un estil a la part que nosaltres desitjem. Per crear un div hem d'anar a la fulla d'estils, i dir "Nuevo estilo", i hi possem les dades que nosaltres veiem adients.

Exemple:
En aquest cas crearem un div ID, ja que només l'aplicarem a una part del document.

Aleshores, al obrir la pàgina CSS, hi podrem apreciar el següent:

Els divs són molt útils, ja que amb ells la organització i el disseny del document és molt més sencilla i bàsica.

Hype

Hype és un programa d'animació vectorial que recorda molt a Flash. Ara explicaré com fer una animació, amb diferentes escenes.

1. Obrim el programa

2. Creem una forma (pulsem a botó i li treiem el text)

3. Si volem canviar-li el tamany a la forma que hem fet, anem a la paleta d'eines que tenim a la dreta ("Inspector") i li donem a medidas. Allà li podem canviar l'amplada, l'alçada i la posició.

4. Per fer que la forma sigui un cercle anem a "Elemento", de la mateixa paleta d'eines "Inspector". On posa "Radio" li posem la meitat del tamany de la nostra forma (en aquest cas, 100 px).

5. Per canviar-li el color anem a "Elemento" i posem el color desitjat

6. Per posar-li sombra, a "Elemento", on posa "Sombra", podem apreciar una forma circular, pulsem a la part on vulguem la sombra i anem jugant amb les altres opcions per trobar la sombra desitjada.

7. Per fer que aquesta forma es mogui, hem d'anar a la part inferior, "Control principal temporal" i seleccionem el temps que volem que duri l'animació. Acte seguit, pulsem al botó vermell que surt a la part dreta de "Control temporal principal". Ara movem la forma fins al lloc on volem que es mogui

(acte seguit veiem la seqüéncia...)

8. Si volem fer que el moviment no sigui recte, sinó que tingui alguna curva o algún altre tipus d'acció, hem de pulsar a la línia de moviment que hem creat i ho movem fins on volguem que vagi.

9. Per fer un text hem d'anar a "Elementos" a la part superior esquerra i pulsem "Texto"

10. Per canviar-li el tamany o tipografia, anem a la paleta "Inspector" i seleccionem "Texto"

11. Per fer que es mogui el text, hem de fer el mateix procediment que amb la pilota: seleccionem la caixa de text, anem a la part inferior, "Control principal temporal" i seleccionem el temps que volem que duri l'animació. Acte seguit, pulsem al botó vermell que surt a la part dreta de "Control temporal principal". Ara movem la caixa de text fins al lloc on volem que es mogui

Botonera

Per a la nostra pàgina web, possar una botonera, és bàsic. Ara us explicaré com fer-ho:

- Anirem a Photoshop, i crearem un nou document amb el tamany del botó que vulguem.

- Farem tres tipus de botó per a cada secció: normal, enfonsat i pulsat.

- Aleshores anirem a DreamWeaver, anem a "Insertar", "Objetos de imagen", "Imagen de sustitución".

- On posa "Examinar", buscarem el botó adient, i el seleccionarem.

- El resultat és satisfactori: a la pàgina web, cada cop que pasem per sobre d'una secció canviarà, i quan el pulsem, canviarà també.

Enllaços

Obrim DreamWeaver, i fem diferents documents per a les diferents seccions, per exemple, Cinema, C1, C2, C3...
Aleshores a on posa "Vínculo", posem l'enllaç de la pàgina a la qual volguem accedir.

El resultat serà que cada cop que pulsem el tema que vulguem llegir de la pàgina web, ens portarà a la pàgina web enllaçada.
Exemple: Volem llegir el tema "Sitge 2013 arrenca amb Grand Piano i expectacio per l'arribada de Terry Gilliam".

Ens portarà al tema seleccionat:

CSS

Els fulls d'estil en cascada o (Cascading Style Sheets, o les seves sigles CSS) fan referència a un llenguatge de fulls d'estils usat per descriure la presentació semàntica (l'aspecte i format) d'un document escrit en llenguatge de marques. La seva aplicació més comuna és donar estil a pàgines webs escrites en llenguatge HTML i XHTML, però també pot ser aplicat a qualsevol tipus de documents XML, incloent SVG i XUL.

La informació d'estil pot ser adjuntada com un document separat o en el mateix document HTML. En aquest últim cas podrien definir estils generals en la capçalera del document o en cada etiqueta particular mitjançant l'atribut  "<style>".

CSS té una sintaxi molt senzilla, que fa servir unes quantes paraules clau preses de l'anglès per especificar els noms de diverses propietats d'estil. Un full d'estil es compon d'una llista de regles. Cada regla o conjunt de regles consisteix en un o més selectors i un bloc de declaració (o " bloc d'estil ") amb els estils a aplicar per als elements del document que compleixin amb el selector que els precedeix. Cada bloc d'estils es defineix entre claus, i està format per una o diverses declaracions d'estil amb el format propietat: valo ; .1

En el CSS , els selectors marcaran quins elements es veuran afectats per cada bloc d'estil que els segueixi , podent afectar a un o diversos elements alhora , en funció del seu tipus , nom (name), ID, classe (class), posició dins del Document Object Model...

Standars multimedia

Estàndars multimedia

-Video

·mp4

·ogv/ogg.

·vp8

-Grafics

-Standard Internet

·gif

·png

·jpg

-Audio

·mp3

·ogg

·acc

-Gràfic vectorial (web)

·swf

·svg

·pdf

-Altres formats

Avantatges

-Prestigi

-Temps

-Sempre disponible

-Compatibilitat

HTML: definició

HTML , sigles de HyperText Markup Language ( « llenguatge de marques d'hipertext "), fa referència al llenguatge de marcat per a l'elaboració de pàgines web . És un estàndard que , en les seves diferents versions , defineix una estructura bàsica i un codi (anomenat codi HTML ) per a la definició de contingut d'una pàgina web , com text , imatges , etc . És un estàndard a càrrec de la W3C , organització dedicada a la estandardització de gairebé totes les tecnologies lligades a la web, sobretot pel que fa a la seva escriptura i interpretació .

El llenguatge HTML basa la seva filosofia de desenvolupament en la referenciació . Per afegir un element extern a la pàgina ( imatge , vídeo , script , etc . ) , Aquest no s'incrusta directament en el codi de la pàgina, sinó que es fa una referència a la ubicació d'aquest element mitjançant text . D'aquesta manera , la pàgina web conté només text mentre que recau en el navegador web ( interpretador del codi ) la tasca d'unir tots els elements i visualitzar la pàgina final . En ser un estàndard , HTML busca ser un llenguatge que permeti que qualsevol pàgina web escrita en una determinada versió , pugui ser interpretada de la mateixa manera (estàndard ) per qualsevol navegadors web actualitzat .

No obstant això , al llarg de les diferents versions , s'han incorporat i suprimit característiques , per tal de fer-lo més eficient i facilitar el desenvolupament de pàgines web compatibles amb diferents navegadors i plataformes ( PC d'escriptori , portàtils , telèfons intel · ligents, tablets , etc . ) . No obstant això , per interpretar correctament una nova versió d'HTML , els desenvolupadors de navegadors web han d'incorporar aquests canvis i l'usuari ha de ser capaç d'utilitzar la nova versió del navegador amb els canvis incorporats . Usualment els canvis són aplicats mitjançant pegats d'actualització automàtica ( Firefox, Chrome ) o oferint una nova versió del navegador amb tots els canvis incorporats , en un lloc web de descàrrega oficial (Internet Explorer ) .

Dream Weaver

Primer hem de portar totes le imatges que adjuntarem al document a "Documents" i a la carpeta "_web", per així crear el sitio al DreamWeaver. Després d'haver posat tot el text a la seva cel·la corresponent, hi posarem els enllaços adients, per així poder obrir informació de la zona que hagim posat l'enllaç.
Anem a la imatge del mapamundi a color inicial, la seleccionem, i anema a "Zona interactiva poligonal". Acte seguit reseguim amb aquesta eina les diferents zones. Havent fet això, seleccionarem, per exemple, la regió 1, després anirem a la Regió 1, i anem a "Seleccionar archivo", i arroseguem el ratolí fins a l'ancla que hem posat a la Regió 1. Amb això conseguirem que cada cop que anem a la pàgina web i hi seleccionem una zona del mapamundi inicial, ens portarà directament a la regió corresponent.

Després d'haver fet tot això, hi adjuntarem les imatges, per fer aquest procediment, seguirem una série d'instruccions:
1- Adjuntarem la imatge amb el background, que serveix perquè l'imatge no ocupi espai i es pugui posar una altre a sobre.
2- Obrirem la imatge principal, la del mapamundi, al Photoshop. Només deixarem el color d'una regió, com ara la 1, i anirem a "Ventana" i seleccionarem "Animaciones", per fer un gif
3- Anem a "Guardar para web y dispositivos", i la guardem en .gif, perquè és el mode que menys pesa i adient per a una animació
4- Quan ja hagim fet l'anterior procediment en totes les regions, guardarem les imatges animades a la carpeta que vam crear a documents a la carpeta _web, on tenim les imatges del mapamundi en color i en gris
5- Anem al DreamWeaver, a sitios, i l'actualitzem. Aleshores veurem les imatges animades. Les arrosseguem a la imatge del amapamundi gris, ja amb el background, de la regió corresponent

Aquó us deixo l'enllaç de l'aquesta pàgina web:
file:///Users/agm2/Desktop/m2m8uf302.html

HTML: Tabla

Aquí veiem la serie de codis HTML que hem d'anar fent per fer una tabla:

HTML

Tim Bennes Lee: https://-hypertext transfer softcol; html: hypertext makyun language
- W3C: www=worl wide web
- Htmls= html + CSS + Javascript


L'etiqueta principal, per regla general, és <html> (sempre que obrim una etiqueta, s'ha de tancar)

<head> (capçalera: javasprint, CSS)
            <title> (títol)
<body> (part visible: textos, imatges, videos...)
   </br>(salt de línea)
    <img src"nomimatge" (imatge)


Exemple: