HA SIGUT UN PLAER MOLT GRAN

Per mi ha sigut un plaer molt gran poder haver compartit el temps i l'espai amb vosaltres. He aprés molt amb/de vosaltres i espero que també hagueu aprés molt de mi. Estic desitjant veure que aneu treballant i treballant. Tot just acabeu de començar i ara es tracta de que guanyeu experiència en lo que hem fet i que continueu autoaprenent.

Estic molt orgullós de vosaltres i de tota la feina que heu fet. Gràcies per l'esforç d'aguantar-me. Espero que us hagi pagat la pena.

El curs continuarà una miqueta més a través d'aquest blog, del portal i del blog que acabo d'iniciar on els articles nous els identificareu per un asterisc. Podeu consultar-me tot el que volgueu a través del foro del portal i els blogs de tal forma que

PHP - 11a Part - RegisterGlobals=On

NOTA IMPORTANT:
Abans de PHP5 per passar variables d'una pàgina a una altra es pot fer de diverses maneres. Però abans, si esteu fent servir un servidor de prova instal·lat al teu PC, com el WAMP, el FoxServ o altres, cal que us assegureu que a l'arxiu PHP.INI estigui habilitada l'opció de RegisterGlobals.

1. Cal canviar "Off", que és el que tenim per defecte, per "On" a on posa "RegisterGlobals" de l'arxiu php.ini.
2. Guardar l'arxiu php.ini.
3. Reiniciar el servidor APACHE.

De lo contrari no tindrem la opció de passar variables d'un formulari a un script que processi aquestes variables.

Amb PHP5 es recomana fer servir les matrius: $_POST i $_GET

PHP & MYSQL - Consultes de PHP a MySQL

Oralment

MYSQL - 3a Part - Creació de taules i tipus de camps

Continuarà

MySQL - 2a Part - Àrea d'administració web PHPMYADMIN

adf

MySQL - 1a Part - Primeres nocions

asdf

MySQL - Introducció

Oralment

PHP - 10a Part - Operadors i Estructures de control

Oralment i pròximament...

PHP - 9a Part - Les Cookies

Pròximament

PHP - 8a Part - El temps

Control del temps, formats de dates

Pròximament

PHP - 7a Part - Variables, Matrius i funcions

Pròximament

PHP - 6a Part - Lectura i escriptura d'arxius

ORalment

Exercici 1
Contador de visites.


Exercici 2
Editor de continguts [Àrea d'administració per tal que un client pogui canviar els continguts de la seva pàgina web]. Més endavant.

PHP - 5< Part - Inclussions d'arxius i mòduls

Oralment

PHP - 4a Part - La funció mail()

S'explicarà oralment i més endavant estarà aquí

PHP - 3a Part - Mètodes Get i Post

Mètodes Get i Post

S'explicarà oralment. I més endavant, a poc que disposi de temps ho relataré per escrit.

Exercici d'exemple amb formularis.

PHP - 2a Part - Bibliografia recomanada

Aquest llibre us el recomano per iniciar-vos. Quan ja en sapigueu prou d'aquest llibre ja podeu buscar algun altre llibre una mica més complex.

ISBN: 84-205-3326-2

PHP - 1a Part - Primeres nocions

1. Cal fer servir la extensió ".php" en aquells arxius que volguem que l'interpret de php funcioni. De lo contrari no funcionarà.
   
2. Cal posar a dintre del codi d'una pàgina les etiquetes especials que tenen l'aspecte següent:
   <?php INSTRUCCIONS EN PHP ?>. A dins d'aquesta etiqueta hi haurà instruccions en llenguatge PHP.
   
3. Entre mig de les etiquetes "<?php INSTRUCCIONS EN PHP ?>" [CODI HTML] "<?php INSTRUCCIONS EN PHP ?>"
4. En algun valor d'atribut pot haver-hi la etiqueta "<?php INSTRUCCIONS EN PHP ?>"
5. Continuarà...
   

CURS DISSENY DE PÀGINES WEB

CURS DISSENY DE PÀGINES WEB

En aquesta adreça podeu veure el blog que estic fent en l'altre curs. Quan faci articles nous, que no heu vist vosaltres heu de mirar els que tenen "(*)" aquest asterisc. Per nosaltres això vól dir "NOU".

Mentrestant el portal que us vaig fer a l'agost encara cal que es vagi polint. De moment vosaltres ja podeu fer servir el fòrum i els articles. Així com disposi de temps aniré traspassant els articles del blog a les subsegüents seccions i categories a fí que ho tingueu tot més estructurat.

En breu us convidaré a que participeu del nou blog com a membres per tal de tenir dret a preguntar els dubtes dels temes que estiguem fent en aquell moment en l'altre curs.

Us aniré informant.

PHP - Introducció

Les sigles del llenguatge PHP desplegades són: "Pre-Hipertext-Processor". Un significat aproximat d'això podria ser "Processador Previ d'hipertext".

PHP és un llenguatge de programació que actua en el costat servidor similar al ASP (Active Server Pages), aquest darrer és més propi dels servidors WINDOWS, mentre que el primer és més propi dels servidors Linux, que per altra banda són els més fiables i barats.

PHP és segurament el llenguatge de programació de costat servidor més popular segurament. Per poder fer funcionar scripts PHP cal que el servidor tingui interpret de PHP.

Junt amb MySQL, un llenguatge de base de dades que funciona en MySQL-Server, formen un "tandem" molt bó. I si a més tenim aquests servidors i interprets vinculats al servidor de pàgines web més usat del món, l'APACHE, llavors el que tenim és el trio més sòlid que hi ha en el món dels servidors.

PHP, és un llenguatge que permet generar pàgines web dinàmiques. Un exemple de pàgines web dinàmiques el tenim al cercador més famós del món, el Google. Quan fem una cerca el que obtenim són pàgines HTML generades automàticament en funció dels termes de cerca que haguem fet servir. No és que hi hagi un webmaster molt ràpid capaç d'escriure HTML molt ràpidament.

Bé, i això ens recorda que aquesta és una altra raó més per la qual vam comentar, és necessari saber HTML, tal i com us vaig dir.

Si es vól començar a aprendre aquest llenguatge i no disposeu d'allotjament en un servidor de pàgines web us recomano que us instaleu el WAMP SERVER en el vostre ordinador, així podreu practicar en el vostre ordinador sense necessitat de tenir ni connexió a internet. WAMP és una suite en realitat, on WAMP són les inicials de "WINDOWS APACHE MySQL i PHP". Existeixen altres.


Només dir-vos que existeixen moltes aplicacions prefabricades com POSTNUKE, PHPNUKE, OSCOMMERCE, MAMBO, JOOMLA, i en general els anomenats Editors de continguts online, que requereixen de PHP i MySQL.

Us animo, ara que ja en sabeu prou de HTML, CSS, d'edició d'imatge, etc... si teniu certes habilitats amb la programació a que comenceu a fer les vostres primeres pàgines web dinàmiques, i més endavant a que us feu les vostres pròpies templates dels portals de continguts que existeixen.

HTML (7a part) - ETIQUETES META

Les etiquetes meta serveixen sobretot per indexar les pàgines web als cercadors. També tenen poden servir per emmagatzemar altres informacions. Anem a fer un recompte, tot i que us recomano que continueu investigant vosaltres a internet per averiguar quines etiquetes META hi ha.

Per altra banda cal que us digui que a les plantilles de Dreamweaver, ara que ja en sabeu fer, el programa Dreamweaver genera una regió editable al HEAD de totes les pàgines "filles", cosa que ens permetrà donar-li a cada pàgina creada a partir d'una plantilla les etiquetes META que s'escaiguin per cada una de les pàgines de forma individualitzada.

Cal dir també que les etiquetes META són etiquetes solteres, com altres que coneixeu: BR, IMG, HR, etc...

ETIQUETES META PER INDEXAR LES WEBS ALS CERCADORS

• Keywords. [ <meta name="keywords" content="restaurant, barcelona, restauració, dinar, sopar, dinars, sopars, categoria, sortir"> ]


• Description. [ <meta name="description" content="El restaurant Cal Trago a prop del mercat de Sant Antoni, al Poble Sec, és tradicional i acollidor oferint tota mena de plats de la cuina popular catalana."> ].

ETIQUETES META PER INDICAR ALFABETS

• Charset. [ <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"> ]

ETIQUETES META PER REFRESCAR LA PÀGINA

• Refresh.. Redireccionant a un altre document [ <meta http-equiv="refresh" content="120;URL=http://cal-trago.com/menu.html" > ]
  


• Refresh.. Refrescant el mateix document [ <meta http-equiv="refresh" content="120" > ]

DREAMWEAVER - HTML (6a part) - FRAMES

Incorporació de FRAMES a les pàgines web. Ho vam veure en Dreamweaver però a poc que disposi de temps extendré més la explicació.

DREAMWEAVER - PLANTILLES - FENT WEBS COM XURRUS

Ja us ho he explicat oralment i en els projectes heu tingut alguns ocasió de fer-les servir. De tota manera, quan disposi de temps ho expressaré pas a pas. Tant sols recordeu que junt amb els frames les plantilles ens serveixen per definir "Navegació constant" i a més ho fa de manera molt pràctica ja que només modificant la plantilla aconseguim actualitzar totes les pàgines filles d'aquesta plantilla.

DREAMWEAVER - ELEMENTS DE BIBLIOTECA

Els elements de biblioteca de dreamweaver, a l'igual que passava amb el flash, són definicions que emmagatzema el dreamweaver cosa que ens va molt bé quan hem de reutilitzar-los constantment. A més, a l'igual que passa amb les plantilles de Dreamweaver i també amb els elements de flash, si modifiquem la definició s'actualitzen totes les pàgines on apareix aquell element de biblioteca.

Els elements de biblioteca de DW són una ajuda pràctica del Dreamweaver.

DREAMWEAVER - COMPORTAMENTS (funcions de javascript que incorpora DW) i exemples

Ja les estem comentant oralment i hem practicat amb elles, però a poc que pogui les expressaré de forma exhaustiva i comentada quan disposi de temps.

HTML (5a part) - ESTILS CSS aplicats a FORMULARIS

Als formularis podem aplicar estils de cascada per millorar-ne l'aspecte i la integració d'aquests a la pàgina. A hores d'ara ja en sabeu prou d'estils de cascada. Us recomano que feu servir atributs de CSS com per exemple:

width, height, padding, margin, color, background-color, background-image, border, etc, ...

HTML (4a part) - FORMULARIS

Explicat oralment amb el Dreamweaver però a poc que disposi de temps ho definiré exhaustivament.

DREAMWEAVER - FLASH AMB FONS TRANSPARENT A UNA WEB

A dreamweaver podem donar-li la ordre que un flash tingui fons transparent, de tal manera que es pot arribar a integrar millor un flash amb la pàgina web en la que es troba. Per fer-ho ho hem de fer seguint els següents pasos.

1) Sel·leccionar el flash i apretar el botó que posa "paràmetres".


2) A la finestra que surt posar el paràmetre "wmode" i com a valor "transparent".

DREAMWEAVER - INCORPORACIÓ DE GRÀFICS

Els hem comentat oralment però a poc que disposi de temps us relataré exhaustivament les formes de fer-ho.

USABILITAT

Us he passat els apunts d'això en paper. De tota manera a poc que pogui ho expressaré també per aquí quan disposi de temps.

CSS - (14a part) - Cursor

Podem escollir el cursor de l'usuari quan passi sobre l'element que estem tractant:

• cursor:pointer;
• cursor:hand;
• cursor:move;
• cursor:e-resize;
• cursor:ne-resize;
• cursor:nw-resize;
• cursor:n-resize;
• cursor:se-resize;
• cursor:sw-resize;
• cursor:s-resize;
• cursor:w-resize;
• cursor:text;
• cursor:wait;
• cursor:help;
• cursor:default;
• cursor:crosshair;
• cursor:auto;
• cursor:url;

CSS - (13a part) - Presentació en bloc, línia,.. i Visibilitat

PRESENTACIÓ

• display:block; [converteix a bloc qualsevol etiqueta com si fos una div]


• display:inline; [Ho posa tot en una sola línia]


• display:none; [Retira l'element de la pàgina, a diferència de visibility que deixa el forat]
  

Podem fer que elements de llista es posin en una línia. Útil de recordar quan feu PHP.


VISSIBILITAT

• visibility:visible;


• visibility:hide;

Útil per mostrar i ocultar capes. Amb els comportaments de DW, és a dir: amb javascript, es pot controlar dinàmicament si volem que una capa es vegi o no.

CSS - (12a part) - OVERFLOW I CLIP

OVERFLOW serveix per indicar com volem que es representi la capsa quan el contingut soprepassi la mida de que disposa.

• overflow: hidden; [la part que excedeixi s'oculta]


• overflow: scroll; [si el contingut excedeix apareixerà una barra d'scroll]


• overflow: visible; [si el contingut excedeix la capsa o contenidor s'engrandeix fins que es veu]


• overflow: auto; [li deixa decidir al navegador]

---

CLIP
(busqueu això vosaltrs.)

CSS - (11a part) - POSICIÓ FLOTANT

La propietat float especifica a quin costat de l'element de capsa pare ha d'aliniar-se l'element tractat.

• float: right;
  
• float: left;
  
• float: none;
  

La propietat clear permet anular la posició flotant d'altres elements contigus.

• clear: right;
  
• clear: left;
  
• clear: none;
• clear:both;

Això és molt útil per maquetar.

CSS - (10a part) - Superposició [CAPES]

• z-index:1; - (un número natural)

Serveix per fer capes flotants. El valor z-index serveix per indicar la profunditat d'aquesta capa. Quant més alt és el número, en cas d'haver-hi vàries capes, més es superposarà.

Exemple:

<div style="position:absolute; left:50px; top:50px; width:80px; height:40px" > border: 2px solid black; padding:5px; background-color:#9cf; z-index: 1


</div >

CSS - (9a part) - Com fer servir DREAMWEAVER per aplicar ESTILS

Teniu tres maneres:

1. A la part on es representa el codi d'una pàgina web podem escriure els estils. Dreamweaver et va suggerint els atributs CSS i els seus possibles valors amb una mena de persianeta flotant.
2. En la finestra Estilos CSS.
3. ...

_

Continuarà...

HTML A DINS DE FLASH? (4a part), Com aplicar estils CSS a un FLASH - EXERCICI

Pròximament ...

CSS - (8a part) - POSICIONAMENT AMB CSS

En HTML és díficil col·locar un element en la posició exacta i hem de fer servir taules anidades unes dintre de les altres. Amb CSS podem afinar més la precisió que no pas amb HTML. Amb CSS podem posicionar de 4 formes diferents.

1. Posicionament estàtic. Posicionament normal que té l'element segons la forma habitual de procedir del navegador.
   
2. Posicionament relatiu. Posiciona un element en relació amb la seva posició normal o estàtica. Aquest element forma part del fluxe de dades, però queda una mica desplaçat amb respecte a la seva posició normal.
   
3. Posicionament absolut. Posiciona respecte als contorns de la pàgina.
   
4. Posicionament fixe. Encara no ho implementen els navegadors però la seva posició seria fixe respecte a la finestra.

exemple:

• position: absolute;
  
• left:0px;
  
• right:0px;
  
• top:10px;
  
• bottom:5%;

CSS - (7a part) - PSEUDOCLASSES

La sintàxi de les pseudo-classes és la següent: SELECTOR: PSEUDO-CLASSE { declaracions d'estil }


LINKS

• a:link {color:#000000; text-decoration:none;}
• a:visited {text-decoration: line-throught;}
• a:hover {color:#000000; background-color:#ffffff;}
• a: active {text-decoration: underline;}

Per obtenir un resultat correcte és primordial declara els aspectes de l'enllaç en aquest ordre: :link, :visited, :hover, :active.

Gràcies a aquests estils podriem definir botons amb CSS amb els 4 estats:repós, visitat, sobre, sel·leccionat.

CAPITOLARS

• :first-letter

Exemple:

<STYLE TYPE="text/css">
.capitular:first-letter {
float:left;
font-size: 300%;
margin-right:3px;
}
</STYLE>

• :first-line

Exemple:

<STYLE TYPE="text/css">
.capitular:first-line {
text-size:200%;}
</STYLE>

CSS - (6a part) - Noció de clase, formes d'assignar estils CSS

FORMES D'ASSIGNAR ESTILS CSS

A. ESTILS APLICATS A ETIQUETES HTML
A l'exemple anterior veiem com definiem un estil que s'aplicava a totes les etiquetes de paràgraf de tota la pàgina. Fixeu-vos que per definir

<html><head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Element Capsa</title>
<meta http-equiv="content-Style-Type" content="text/css" />
<style type="text/css">
<!--
p {
width:200px;
border: 10px solid #f63;
padding: 20px;
background-color:#999999;
}
-->
</style>
</head>
<body>
<p>EM SEMBLA QUE AIX&Ograve; ÉS UNA CAPSETA</p>
</body>
</html>

B. ESTILS PERSONALITZATS O DEFINICIÓ DE CLASSES

<html><head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Element Capsa</title>
<meta http-equiv="content-Style-Type" content="text/css" />
<style type="text/css">
<!--
.lolailo {
text-size:15px;
color:#ff0000;
}

-->
</style>
</head>
<body>
<p CLASS="lolailo">EM SEMBLA QUE AIX&Ograve; TÉ UN ESTIL LOLAILO</p>
</body>
</html>

Fixeu-vos que per aplicar aquest estil fem servir l'atribut CLASS i que per definir l'estil posem un punt davant.


C. APLICACIÓ D'ESTILS A ZONES IDENTIFICADES DE LA PÀGINA O INSTÀNCIES.

<html><head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Element Capsa</title>
<meta http-equiv="content-Style-Type" content="text/css" />
<style type="text/css">
<!--
#TITULAR {
text-size:30px;
color:#ff0000;
font-weight:bold;
}

-->
</style>
</head>
<body>
<H1 ID="TITULAR">EM SEMBLA QUE AIX&Ograve; ÉS/ UN TITULAR </H1>
</body>
</html>

Fixeu-vos com apliquem un estil a una zona de la pàgina que l'hem anomenat "TITULAR" amb l'atribut ID.

CSS - (5a part) - Noció de capsa, contenidor o bloc

Introducció:
Les capses ens serviràn entre d'altres coses per:

• Marcar zones d'una pàgina web per aplicar estils de cascada diferenciats als d'altres zones.
• Delimitar la zona d'actuació d'uns estils en concret.

Definició de CAPSA o CONTENIDOR:

Segons W3C una capsa es defineix com una una zona rectangular constituida per:

• contingut
• marge intern (padding)
• borde
• marge exterior (margin)

Amb CSS es pot configurar per separat:

• Els quatre marges per separat.
• Els quatre bordes del quadre (dimensions, estil, color) per separat.
• Els quatre marges interns per separat.
• Les dimensions (amplada i alçada del contingut) per separat.

---

Noció d'herència:

Junt amb la noció de Cascada podem utilitzar les capses per que s'apliquin estils cap a lo local, això sí, sempre i quan a lo local no indiquem el contrari. Per exemple: podem fer que la etiqueta BODY es representi amb la tipografia ARIAL simplement posant l'atribut STYLE a la etiqueta BODY de la següent manera: <BODY STYLE="font-family: Arial, Verdana, sans-serif">, llavors totes les etiquetes que estiguin anidades a BODY que continguin text heretaràn l'estil de BODY. D'això se'n diu herència.

Etiquetes HTML que es comporten com capses entre d'altres poden ser:

• BODY
• TD
  
• TABLE
  
• DIV
  
• SPAN
• H1,...H7
• P
• ...

Exemple de com definir l'estil d'una capsa. En aquest cas fixeu-vos que s'està referint a qualsevol etiqueta P, la etiqueta per definir paràgrafs, que trobem a la pàgina.

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Element Capsa</title>
<meta http-equiv="content-Style-Type" content="text/css" />
<style type="text/css">
<!--
p {
width:200px;
border: 10px solid #f63;
padding: 20px;
background-color:#999999;
}
-->
</style>
</head>
<body>
<p>EM SEMBLA QUE AIX&Ograve; ÉS UNA CAPSETA</p>
</body>
</html>

---

Estils CSS aplicats a capses.

Amplada

• width:100px;
• width:50%;
• width:auto;

Alçada

• height:300px;
• height:75%;
• height:auto;

Color de borde

• border-color:#ff3300;
• border-top-color:#f65123;
• border-right-color:#456723;
• border-left-color:#456723;
• border-bottom-color:#000000;

Grosor de borde

• border-width:2px;
• border-top-width:2px;
• border-bottom-width:4px;
• border-left-width:5px;
• border-right-width:1px;

Estilo de borde

• border-style: solid; [altres possibles valors: dashed, dotted, double, groove, ridge, inset, ouset, hidden i none].
  
• border-top-style: dashed;
• border-bottom-style: dotted;
• border-left-style: double;
• border-right-style: groove;

Marges externs [MARGIN]

• margin:20px;
• margin-top:15px;
• margin-bottom:25px;
• margin-left:15px;
• margin-right:30px;

Farcits o Marges interns [PADDING]

• padding:20px;
• padding-top:15px;
• padding-bottom:25px;
• padding-left:15px;
• padding-right:30px;

CSS - (4a part) - Controlant els fons

Color de fons

• background-color:#ff0000;


• background-color:red;


• background-color:#f00;


• background-color:rgb(255,0,0);


• background-color:transparent;

Imatge de fons

• background-image: url(xxxx.gif);

Repetició d'imatge

• background-repeat: repeat;


• background-repeat: repeat-x;


• background-repeat: repeat-y;


• background-repeat: no-repeat;

Posició de la imatge de fons

• background-position: left top;


• background-position: center center;


• background-position: right bottom;


• background-position: left center;


• background-position: 50px 150px;

Imatge fixa o mòvil

• background-attachment:scroll;


• background-attachment:fixed;

CSS - (3a part) - Control de llistes i elements de llistes

Tipus de llistes

• list-style-type: disc;


• list-style-type: circle;


• list-style-type: square;


• list-style-type: decimal;


• list-style-type: upper-roman;


• list-style-type: lower-roman;


• list-style-type: upper-alpha;


• list-style-type: lower-alpha;

Vinyeta a partir d'imatge

• list-style-image: url(imagen.gif);


• list-style-image:none;

Sangría de llista

• list-style-position: outside;


• list-style-position: inside
  ;

CSS - (2a part) - Controlant el text.

Color
 

• color: red;


• color: #ff0000;


• color: #f00;


• color: rgb(255,0,0);

Sangria. Serveix per indicar quan volem que es fiqui la primera línia.

• text-indent:20px;


• text-indent:5%;

Decoració

• text-decoration: underline; (subratlla).


• text-decoration: overline; (posa una ratlla per sobre).


• text-decoration: line-through; (tatxa).


• text-decoration: blink; (text intermitent)


• text-decoration: none; (Sense decoració. Precísament això ho aplicarem als links sempre i quan no volguem que es subratllin).

Transformació

• text-transform: capitalize; (converteix en majúscula el primer caràcter)


• text-transform: uppercase; (converteix en majúscula tots els caràcters)


• text-transform: lowercase; (converteix en minúscula el primer caràcter)


• text-transform: none; (deixa tots els caràcters tal i com estàn)

Espai entre caràcters

• letter-spacing:20px; (separa les lletres).

Espai entre paraules

• word-spacing:20px; (separa les paraules).

Espai en blanc. Serveix per preservar o no els espais en blanc de forma similar a lo que ja feia la etiqueta PRE en HTML

• white-space:pre; (preserva espais múltiples i retorns de carro).


• white-space:nowrap; (impedeix l'ajust irregular de línia).


• white-space:normal; (el que faci per defecte el navegador).

Interliniat.

• line-height:2; (indica que la separació entre línies sigui el doble que la mida dels caràcters d'aquella línia)


• line-height:20px;


• line-height:200%;

Alniació horitzontal respecte a l'espai en que es troba.

• text-align: left;


• text-align: center;


• text-align: right;


• text-align: justify;

Aliniació vertical respecte a un altre element de codi(similar a l'aliniament vertical de les imatges)

• vertical-align: baseline;


• vertical-align: sub; (per fer subíndex)


• vertical-align: super; (per fer superíndex)


• vertical-align: top; (a dalt en l'espai pare que ocupa)


• vertical-align: middle; (al mig en l'espai pare que ocupa)


• vertical-align: bottom; (a baix en l'espai pare que ocupa)


• vertical-align: 10px; (10px per sobre de la línia base)


• vertical-align: -5px;(5px per sota de la línia base)


• vertical-align: 5%;


• vertical-align: -20%;

Direcció del text.

• direction:ltr; (esquerra a dreta)


• direction:rtl; (dreta a esquerra)

Longitud i alçada

• width: 200px;


• width: 20%; (el 20% de l'espai que ocupa)


• height: 40px;


• height: 10%;

CSS - (1a part) - Controlant la tipografia

Famílies de fonts:

• font-family: Arial, Verdana, Geneva, sans-serif;
• font-family: 'Lucida Console', Verdana, Geneva, sans-serif; (si el nom de la font porta espais s'han de fer servir les comes simples ' ').
  
• font-family: serif;
• font-family: sans-serif;
• font-family: cursive;
• font-family: fantasy;
• font-family: monospace;

Cursiva, Oblíqua o normal.

• font-style: italic;
• font-style:oblique;
• font-style:normal;

Versalites(majúscules amb la mida de minúscules)

• font-variant: small-caps;
• font-variant: normal;

Negreta

• font-weight: normal;
• font-weight: blod;
• font-weight: bolder;
• font-weight: lighter;
• font-weight: 500; (valors entre 100 i 900)

Mida

• font-size:12px (admet com a unitats: px, punts, em, exs, xx-small, x-small, small, medium, large, x-large, xx-large, smaller, larger)

Propietats combinades de font

• font: italic bold small-caps 24px Arial, sans-serif;
  

CSS (DEFINICIÓ)

wikidefinició aquí.

Las hojas de estilo en cascada (Cascading Style Sheets, CSS) son un lenguaje formal usado para definir la presentación de un documento estructurado escrito en HTML o XML (y por extensión en XHTML). El W3C (World Wide Web Consortium) es el encargado de formular la especificación de las hojas de estilo que servirá de estándar para los agentes de usuario o navegadores.

La idea que se encuentra detrás del desarrollo de CSS es separar la estructura de un documento de su presentación. (Extret de la wikipèdia). Continueu llegint a la Wikipèdia.

CASCADA?
Per què en diem Cascada? La resposta és per que podem definir els estils aplicats a objectes i etiquetes HTML que poden estar uns a dintre dels altres tenint sempre prioritat, a l'igual que a HTML, els estils més interns en contraposició als més externs. Una regla nemotècnica per que us recordeu és la següent:

LO LOCAL ES SUPERPOSA A LO GLOBAL.

Aplicat això a l'article anterior els estils definits amb l'atribut STYLE a una etiqueta es superposarien als estils definits entre les etiquetes STYLE al HEAD del document que al seu torn es superposarien als estils definits en una fulla externa de CSS. A aquesta jerarquització se li diu Cascada.

ON DEFINIR CSS?

Els estils de cascada CSS els podem aplicar en diversos llocs.

1. A dintre d'etiquetes amb l'atribut style. Exemple: <P STYLE="margin-left:20px; background-color:#fafafa;"> ... rollo ... </P>
2. Entre les etiquetes <STYLE> ... </STYLE> a la part del HEAD d'un document.
3. En un arxiu extern amb extensió ".CSS". Per fer això cal vincular la nostra pàgina web a la fulla CSS externa amb la etiqueta <link href="URL" rel="stylesheet" type="text/css" / > que cal posar al HEAD del document HTML
   

---

Si som capaços de definir tots els estils CSS en un arxiu extern ".css" podem aconseguir els següents aventatges:

• Separar continguts d'aspecte, on el contingut estaria definit a l'arxiu HTML i l'aspecte a l'arxiu CSS.
• Centralitzar l'aspecte a un sol arxiu de tal forma que si fem modificacions d'estil afectin a totes les pàgines, o les que convingui, d'una SITE totes canviaràn al mateix temps. D'aquesta manera podem estalviar-nos molta feina per que no caldrà que anem pàgina per pàgina fent canvis. Centralitzem l'aspecte en un sol arxiu.
  
• Recordeu quins arxius van a parar a la carpeta d'Arxius Temporals d'Internet? Recordeu que anaven a parar arxius amb extensió CSS? Doncs resulta que si l'usuari quan navega per una site ja s'ha descarregat aquest arxiu quan ha entrat en una de les nostres pàgines no cal que es descarregui cada estona aquests estils, de tal manera que així les descàrregues de les pàgines són molt més ràpides. Per tant sempre que sigui possible definir estils de cascada en arxius externs amb extensió CSS per reciclar-los per altres pàgines de la nostra site és millor que definir aquests estils tota la estona entre les etiquetes STYLE del HEAD de cada pàgina. Sobretot quan es repeteix continuament els mateixos estils.
• Una altra cosa és que en una pàgina en concret volguem variar, per la raó que sigui, un estil determinat que no hagi de seguir l'aspecte que hem definit per la resta de pàgines. En aquest cas concret convindria definir-lo, excepcionalment, entre les etiquetes STYLE d'aquell document. De fet a això precísament se li diu Cascada.
  

En definitiva CSS està plé d'aventatges quan se sap utilitzar bé.

INTRODUCCIÓ A CSS

INTRODUCCIÓ:
Encara que ho fem amb Dreamweaver us en faré una introducció per que veieu quina és la seva utilitat real. Continuament m'heu estat sentint que amb HTML no n'hi ha suficient per controlar l'aspecte de les pàgines web.

HTML és un llenguatge que originàriament es va crear per a que els científics compartissin informació és a dir que no es va preocupar en excés de l'aspecte de les pàgines i no tenia una visió comercial. Simplement pretenia controlar uns quants recursos per donar-li format a una pàgina web. Un dissenyador de pàgines web no es pot considerar realment "dissenyador" si només és capaç de controlar l'aspecte de les pàgines web amb HTML o amb Dreamweaver.

QUINES SÓN LES COSES QUE PODEM CONTROLAR AMB CSS?

• Amb CSS podem controlar entre d'altres aspectes els marges i els farcits i a més pot ser de forma independent. Així un bloc (DIV), un paràgraf (P), un titolar (H1), .... poden tenir un marge en píxels controlat amb precissió per nosaltres, no com abans que depeniem del que el navegador tingués assignat per defecte.
  


• Podem definir la mida del text en píxels, ems, exs, ... cosa que abans no podiem controlar tant bé ja que depeniem del que el navegador de l'usuari tingués assignat per defecte en aquelles mesures que a la etiqueta FONT definiem amb l'atribut SIZE que contenia els valors 1-7. Per altra banda aquí no dependrà de si l'usuari té definit el seu WINDOWS per a que representi fonts grans (120ppp) o fonts petites(96ppp) o que tingui el navegador posat en fonts grans. En contrapartida amb aquesta acció podriem estar perjudicant a usuaris que tinguessin problemes de visió. En tot cas controlant CSS molt bé podriem ajudar a les persones amb dificultats de visió.


• Podem redefinir l'aspecte d'etiquetes HTML, que és una de les raons per les quals convenia que sapiguèssiu de memòria HTML, ja que ara podrem aplicar estils CSS a etiquetes en concret. Com que teniu un vocabulari suficient i sabeu per a què serveixen les etiquetes principals(P, TABLE, TD, OL, UL, LI, BODY, B, SPAN, DIV, ...) doncs....


• Podem sustituir les vinyetes de les llistes per imatges, com ara els típics llàpiços o forquilles de les receptes de cuina.


• Recordeu que quan posavem una imatge de fons a una pàgina web, una taula o una cel·la aquesta imatge es repetia indefinidament donant lloc a un motiu? Doncs ara amb CSS podrem controlar aspectes com la repetició o no, la repetició en horitzontal o en vertical d'aquesta imatge de fons, el centrat vertical i/o horitzontal d'aquesta imatge respecte a l'espai de que disposa, posar la imatge cap amunt, cap a l'esquerra, cap a la dreta, cap a baix, ...


• L'interliniat.


• L'espai entre caràcters i entre paraules.


• maquetacions líquides amb DIVS en comptes de fer servir taules. Un exemple d'això el tenim en aquest blog.


• Podem treure el subratllat dels links i definir als links l'aspecte que hauràn de tenir si el ratolí clica, passa per sobre, etc... Amb això podriem fabricar botons des de CSS ja que el que s'obté no és ni més ni menys que


• Posar cursors escollits per nosaltres, com per exemple rellotges de sorra, creus, l'interrogant, etc...


• Definir la sangria de la primera lletra d'un paràgraf.


• Capes flotants,...


• Definir la mida de les etiquetes H1 i controlar millor els seus marges.


• Podem fer versalites.


• etc...

Us recomano que visiteu el tutorial sobre CSS que trobem a DESARROLLOWEB. Cliqueu aquí.

Com aprendre CSS?

CSS és un llenguatge que convé que l'aprengueu també de memòria com ho vau fer amb l'HTML. De tota manera, no cal que sigui ara quan ho memoritzeu. El començareu a aprendre amb l'ajut del Dreamweaver, però us recomano que quan ja tingueu superat i assimilat com treballar amb la interfície del Dreamweaver passeu a l'acció aprenent vosaltres mateixos CSS. Per aprendre teniu diverses formes. Us en indico unes quantes.
BIBLIOGRAFIA:
Us recomano aquest llibre per aprendre CSS ja que, de tots els que tinc és el que ho explica més clar. A més també explica clar la base una base de Javascript. És adequat pel vostre nivell inical.

Aquestes són les referències d'aquest llibre:

• Autor: Luc VAN LANCKER.
• Editorial: ENI Ediciones
• Col·lecció: Recursos informáticos - INFORMÀTICA TÈCNICA.
• Títol: CSS en DHTML.
• Subtítol: Javascript aplicado a hojas de estilo.
• ISBN: 2-7460-3067-5
• Us el recomano per que ho explica d'una forma sistemàtica, clara i senzilla.
  

---

WEBS SOBRE CSS

• HTMLPOINT.COM. Aquesta és una web italiana que també està en castellà i que explica molt bé HTML, CSS, javascript. Inclús teniu uns quants exemples per aplicar petits javascripts a les vostres pàgines.
  
• DESARROLLOWEB.COM. Per mí desarrolloweb és la millor web per aprendre qualsevol cosa relacionada amb el disseny i desenvolupament de les pàgines web.
  

HTML A DINS DE FLASH? (3a part), Estils CSS admessos a dins de FLASH

INTRODUCCIÓ: Hem dit en POSTS anteriors que dintre del FLASH podem posar HTML. També hem dit que a partir del FlashMX2004 podiem incorporar estils CSS. A l'igual que passava amb HTML(en que les etiquetes que admet són un subconjunt de HTML) Flash admet un subconjunt d'estils dins de les espcificacions de CSS1.A continuació us relatarem quins són:

ESTILS CSS ADMESSOS A FLASH

Càrrega de text extern i variables amb FlashVars

Hem vist en una explicació anterior com carregar text des d'un arxiu extern mitjançant LoadVars. Per altra banda a l'article de incloure MULTIMÈDIA a un arxiu HTML heu vist ja les etiquetes EMBED i OBJECT(Cliqueu aquí). Quan nosaltres col·loquem Flash a una pàgina web el codi que li posa és té aquest aspecte.

Fixeu-vos que hi ha una variable tant a la etiqueta PARAM corresponent al grup d'etiquetes lligats a la etiqueta OBJECT que interpreta InternetExplorer i a la etiqueta EMBED que es diu flashvars a dins del codi HTML de la pàgina. Doncs bé, aquesta és una altra forma de carregar tant text extern com variables a un arxiu de Flash és mitjançant "FlashVars" que hi haurà en el codi HTML de la pàgina on col·loquem el FLASH.

Això és fantàstic de cara a les pàgines creades dinàmicament amb llenguatges de servidor com PHP o ASP, aquells llenguatges que actuen al servidor i que generen pàgines web dinàmiques, és a dir que re-escriuen el codi HTML. Quan sapigueu PHP li veureu una aplicació.

HTML (3a part) - MULTIMÈDIA (Inclussió de Flash a una pàgina Web)

Fixeu-vos en el codi HTML que incorpora Dreamweaver quan col·loquem un FLASH a una pàgina web. Fixeu-vos que utilitza tant etiquetes OBJECT, compatibles amb InternetExplorer, i EMBED, compatibles amb Netscape i Mozilla en general. D'aquesta manera donem les instruccions al navegador que fa servir l'usuari que representi un FLASH ja sigui Mozilla o InternetExplorer. Si és Mozilla farà cas a la etiqueta EMBED i si és Iexplorer a la etiqueta OBJECT. Fixeu-vos a continuació com queda el codi:






Fixeu-vos com la etiqueta EMBED està anidada a dins de OBJECT.

HTML A DINS DE FLASH? (2a part), Carregant el text des d'un arxiu de text extern.

OPCIÓ B(TEXT HTML CARREGAT DES D'UN ARXIU EXTERN mitjançant la funció LoadVars.):

TUTORIAL

1. En un arxiu de text escrivim el següent:
   

   myText=<B>HOLA</B><BR>Això és un text
    que es troba
    en un arxiu extern
   i que es carrega en aquesta pel·lícula FLASH.

2. Al flash creem un camp de text dinàmic i li posem com a nom de la variable(cosa que ja hem fet en altres ocasions com per exemple en el PRELOADER) myText.
3. En un fotograma o a un botó hem de posar l'ActionScript següent:

• loadVariablesNum("arxiu.txt", 0);

  
  
  
  NOTA:
  

  • Us recomano que feu servir l'assistent d'Script i busqueu la funció LoadVariables on podreu posar els paràmetres d'una forma més WYSIWYG de tal manera que veureu un camp de text per posar la URL. Aquesta URL si fos relativa ha de ser relativa respecte a l'arxiu SWF.
  • I si aquesta ordre la col·loqueu associada a un botó heu de posar naturalment

    On(release) {
    loadVariablesNum("arxiu.txt", 0);
    }

  
  

Descarregeu l'exemple aquí.

---

HTML A DINS DE FLASH? (1a part)

Anem a veure. Posar un Flash a dins d'una pàgina web amb el Dreamweaver és senzill, és com col·locar una imatge però amb un altre botó. Però, posar HTML a dins d'una pel·lícula flash?

Flash admet la inclussió a dintre de camps de text dinàmics d'algunes etiquetes HTML. Amb la qual cosa, no només ens serveix HTML per fer pàgines web amb el bloc de notes o amb el Dreamweaver. A partir del FlashMX ja podiem incorporar HTML i a partir del FLASH MX2004 podiem incloure HTML i fins i tot CSS a dintre dels arxius SWF.

Ara no només els navegadors sabenn interpretar HTML i CSS. Flash també en sap. Una altra raó més per saber HTML. Però aquest cop amb els aventatges de FLASH i dels documents HTML.

ETIQUETES HTML ADMESES A FLASH.
De tota manera heu de saber que les etiquetes d'HTML que admet són un subconjunt de les etiquetes HTML, no totes, que us relato a continuació:

• A, que ja sabeu que serveix per posar links amb el seu atribut href, el qual admet com a possibles valors URLs relatives o absolutes. Si posem URLs relatives han de ser relatives al document SWF. També inclou l'atribut target.
  
• B, per fer negreta.
• BR, per fer salt de línia.
• FONT, amb el seus atributs FACE, SIZE, COLOR.
• IMG amb el seus atributs SRC, WIDTH, HEIGHT, ALIGN(amb valors: left i right), HSPACE i VSPACE i l'atribut ID que especifica el nom de la instància de clip de pel·lícula(creada per Flash Player) que conté l'arxiu d'imatge, SWF o el clip de pel·lícula incorporat.
• I, per fer cursives.
• LI, per fer elements de llista. Cal dir que Flash no reconeix OL i UL.
• P, per fer paràgrafs, amb els atributs; ALIGN(amb valors: left, center, right i justify), CLASS(per definir el nom de l'estil de cascada que volem aplicar-li a aquest paràgraf).
• TEXTFORMAT, que permet utilitzar un conjunt d'atributs que controlen entre d'altres coses, l'interliniat, la sangria, els marges i les tabulacions. Pot combinar les etiquietes <TEXTFORMAT> amb les etiquetes HTML incorporades. Els atributs que ens posar aquesta etiqueta són:
  

• BLOCKINDENT, per especificar la sangria del bloc en punts.
• INDENT, per especificar la sangría esquerra fins el primer caràcter del paràgraf i que també admet números sencers negatius.
• LEADING, interliniat.
• LEFTMARGIN
• RIGHTMARGIN
• TABSTOPS, que especifica el número de tabulacions personalitzades com una matriu de sencers no noegatius.
• U, per subratllar.

CARÀCTERS ESPECIALS QUE ADMET FLASH

• & lt; (NOTA: sense espais), per fer el signe <
• & gt; , per fer el signe >
• & amp; per fer &
• & quot; per fer cometes "
• & apos; per fer apòstrofes o cometes simples '
• FLASH també admet codis de caràcters explícits com & #39 (ampersand - ASCII) i &amp;amp;amp;amp;amp;amp;amp; #x0026; (ampersand - Unicode)

---

COM INCLOURE HTML A FLASH

OPCIÓ A(A UN CAMP DE TEXT DINÀMIC O UN CAMP D'INTRODUCCIÓ DE TEXT):
Si tenim un camp de text dinàmic o un camp d'introducció de text se'ns habilita el botó següent:
. Llavors el podem apretar per indicar que volem que a aquest camp de text incorporarem HTML.

OPCIÓ B(TEXT IMPORTAT D'UN ARXIU EXTERN):
Per a això caldrà ActionScript. En el següent POST us ho explico.

PRINCIPIS GENERALS DE DISSENY D'APLICACIONS MULTIMÈDIA

Amb flash podem incorporar aplicacions multimèdia a les pàgines web. Les finalitats d'aquestes aplicacions sovint poden ser publicitàries, com la web que vam veure del SEAT ALTEA, però també poden ser d'entreteniment o educatives. En tot cas, convindria que coneguèssiu si més no alguns dels principis que fan servir els que desenvolupen aplicacions multimèdia, com per exemple el "Principi de Vitalitat".

[Continuarà...]

HTML (2a part) - MULTIMÈDIA (+ Etiquetes i + Atributs)

Amb lo que sabeu fins ara d'HTML i lo que fem a continuació tindreu més punts d'ancoratge per saber en què fixar-vos en el Dreamweaver. Potser amb aquestes etiquetes, a diferència de amb les anteriors no aplicarem tant els estils CSS per millorar l'aspecte però sí podrem controlar dinàmicament mitjançant les funcions javascript que incorpora el mateix dreamweaver aquests elements multimèdia.

Introducció de sons a les pàgines web.

BGSOUND

• BGSOUND. És la etiqueta que serveix per posar un só de fons a una pàgina web. Aquesta etiqueta és propietat de Microsoft amb la qual cosa només serveix per InternetExplorer.
• La seva sintàxi és:
  < BGSOUND src="URL d'un arxiu de música" loop="1" balance="0" volume="0" > </BGSOUND>
• Els seus atributs principals són:
  
• SRC, que igual que passa a la etiqueta IMG serveix per indicar la URL on està el recurs sonor que volem que s'escolti. Els formats d'arxius que admetia al començament eren arxius midi i WAV. Però en versions més recents del navegador Iexplorer també admet altres formats com AU i MP3
• LOOP, que ens serveix per indicar les vegades que volem que se senti aquest só. Si posem com a valor: "infinite" aquest so es reproduirà indefinidament.
• VOLUME, serveix per indicar el volum que volem que tingui on 0 és el valor màxim i -10.000 és el valor mínim.
• BALANCE, amb valors entre -10.000 i 10.000 estableix la força que ha de tenir el só en un altaveu o en l'altre. 0 és el valor central.
  
• Aquesta etiqueta té més atributs que els podeu veure aquí, com disabled, delay, id, class, controls, etc... Fins i tot a Internet Explorer mitjançant Javascript es pot controlar de forma interactiva aquests paràmetres.
• Més informació aquí.
  
• BGSOUND és

Lo que vé a continuació tant serveix per só com per incorporar vídeos.

---

Introducció de sons i vídeos a les pàgines web.

EMBED

• EMBED. Etiqueta originària de Netscape per incorporar sons i que després Internet Explorer va assumir i perfeccionar. Aquesta etiqueta serveix per incloure a la web arxius que no són reproduibles amb les funcions bàsiques dels navegadors i que requereixen de la presència d'un plug-in (complement que no pertany a un programa i que augmenta les prestacions d'un programa).


• Quan incorporem un objecte EMBED el navegador inclourà botons de play i stop i regulador de volum.


• La sintàxi de la etiqueta EMBED és la següent:
  <EMBED atribut1="n" atribut2="o" > </EMBED>


• ATRIBUTS DE LA ETIQUETA EMBED:
• SRC, que serveix per indicar la URL del recurs multimèdia.
• LOOP, que admet com a valors possibles un número natural, true(es reprodueix indefinidament) i false(per indicar que es reprodueix només un cop). Només serveix per NETSCAPE.
  
• PLAYCOUNT, Equivalent de LOOP per Internet Explorer. Valors possibles: números naturals per indicar el número de vegades que volem que es reprodueixi.
  
• TYPE, serveix per que el navegador sàpigue amb quin plugin s'ha de reproduir. Com a valors podria prendre: audio/midi, audio/wav,...
  
• AUTOSTART, Amb valors true/false indica si volem que comenci reproduint-se o no.
  
• PLUGINSPAGE, Per indicar la URL de la pàgina on es pot descarregar l'usuari el plugin en cas que el navegador no sàpigue reproduir el tipus d'arxiu.
  
• NAME, que indica un nom per poder referir-nos a l'objecte embed mitjançant javascript.
  
• VOLUME, serveix per indicar el volum amb que volem que es reprodueixi. Els valors que accepta van de 0-100, sent per defecte 50 a PC i 75 a Mac.
  
• ATRIBUTS DE LA ETIQUETA EMBED QUE FAN REFERÈNCIA A LA CONSOLA
• HIDDEN, amb valors TRUE/FALSE indica si volem que es vegi o no la consola que li permet a l'usuari regular el volum i la reproducció.
  
• WIDTH, que indica en píxels o % l'amplada de l'objecte embebit.
  
• ALIGN, que té com a valors top/bottom/center/baseline/left/right/
  texttop/middle/absmiddle/absbotom, a l'igual que la etiqueta IMG.
  
• HSPACE, que serveix per indicar un marge horitzontal a banda i banda.
  

---

OBJECT

• La etiqueta OBJECT es va implementar a HTML 4.0 amb la funció de l'anterior però sembla que en Netscape no es va implementar(cosa que haurem de tenir en compte amb les pel·lícules flash, sense anar més lluny) quedant restringit pràcticament a Internet Explorer.


• La sintàxi de la etiqueta OBJECT és una mica més complexe ja que requereix d'etiquetes PARAM on es defineixen alguns paràmetres de l'objecte que incorporem:
  <object atributo1="valor1" atributo2="valor2" ... atributoN="valorN">
  <param name="nombre" value="valor">
  <param name="nombre" value="valor">
  
  ...
  
  </object>


• ATRIBUTS: A la pàgina web aquesta us ho explica molt bé. Desarrolloweb és una pàgina molt recomenable i que us recomano per que aprengueu bé això.
  

Scripts, Actionscript, Javascript, què són

Que son cada cosa, o a qué se refieren. En qué se diferencian.

Actionscript es un lenguaje con el que funciona Flash, ¿no es así?, entonces, ¿un script qué es? y ¿Javascript? ¿qué hace cada cuál?

Resposta:

• Script: és un terme general que dintre del món del cinema es podria traduïr per guió o una cosa similar. Dintre de la creació de pàgines web es refereix a fragments de programació que poden ser escrits en diversos llenguatges per realitzar diferents funcions. En el món de les pàgines web existeixen llenguatges de servidor i de costat client.
  • En el cas primer es fan scripts o programes que actuen al costat de servidor per tal de controlar les pàgines web dinàmiques i bases de dades. Exemple de llenguatges que actuen a costat servidor: PHP, ASP, CGI, SQL,...
    
  • I al segon cas es refereix a llenguatges amb els que es fan scripts que controlen la interactivitat a costat client. Exemples: Javascript, ActionScript, Vbscript,....
    
  
  
• Javascript: És un llenguatge que actua en costat client, o sigui que actua a l'ordinador de l'usuari i per tant no actua al servidor com passa amb el PHP. Aquest llenguatge es troba integrat a dins del codi HTML i actua sobre el navegador, el qual l'interpreta i executa les ordres que amb javascript li donem. Amb javascript podem controlar la interactivitat de les pàgines web. Algunes caràcterístiques de javascript són:




• Els programes javascript s'integren a dins del codi font d'una pàgina entre etiquetes SCRIPT, quan es tracta de definir funcions i variables, i com a crides a aquestes funcions a "eventhandlers" o "events de ratolí" com poden ser: onMouseClick, onMouseOver, etc... També es poden definir a un arxiu extern amb extensió .js anomenat "fulla de javascript".


• Amb javascript es pot controlar coses com comprobar si l'usuari ha posat @ a un camp d'email a un formulari, obrir una finestra de navegador, canviar de color una capa, substituir una imatge per una altra, ...




• ActionScript: També és un llenguatge en costat client. Però en contes d'actuar sobre el navegador actua sobre el player de flash. L'ActionScript, per tant, només serveix dins d'un flash.


• Interacció Javascript-ActionScript: Existeix la possibilitat de cridar a funcions javascript des de dintre d'una pel·lícula flash i controlar la pel·lícula des de javascript.
  

QUINS FORMATS GRÀFICS PER WEB I QUAN CONVÉ FER-LOS SERVIR

Això només és recordatori de lo que ja vam fer quan feiem Photoshop.

Quins formats gràfics es poden fer servir per a les planes web?

---

Resposta:

• FORMATS VECTORIALS
  • SWF _ DEL FLASH
  • SVG
    
• FORMATS DE MAPES DE BITS
  • JPEG
  • GIF
  • PNG
    

Al següents articles parlo una mica més d'aquests formats.

-- - - - - - - - - -

Què ens fa decantar per un format o un altre?

---

Resposta:

• Els Jpegs ens van bé quan tenim imatges amb TRUE COLOR(24bits) i amb molts degradats
• Els GIFS van bé quan tenim imatges amb colors plans. A més admeten 1 grau de transparència, d'això se li diu transparència binària ja que o bé un píxel és opac o bé és transparent.
  
• Els PNG admeten 24bits, cosa que pot donar qualitat TRUE COLOR a la imatge. I també admet graus de transparència. Malauradament Internet Explorer no representa bé els PNG amb graus de transparència. Segurament per interessos econòmics. Tot i així existeix una solució en forma de Javascript i CSS. I també, de tota manera com a mínim que sapigueu que Flash admet molt bé aquest format.
  

Tim Berners Lee, pare de la criatura

BIOWIKIEXPLICACIÓ:
Aquí podeu trobar informació del que és considerat l'inventor d'això que diem el World Wide Web, el HTTP, el llenguatge HTML,... el físic britànic Tim Berner's Lee.

Penseu que sense ell no es faria aquest curs. També tingueu en compte que les pàgines web es van crear per compartir informació els científics. És a dir: que no es van fer per finalitats comercials. D'aquesta manera heu de tenir en compte que el llenguatge HTML no és suficient per controlar l'aspecte de les pàgines web. Té les seves limitacions. Amb CSS veureu que es pot controlar una mica millor l'aspecte.

Actualment presideix el W3C.

Barra de navegació en Flash

Us enrecordeu que quan estavem a Photoshop i ImageReady vam fer barres de navegació amb pestanyes? Doncs amb Flash també ho podem fer. Podem col·locar a dins d'una pàgina web un Flash que pot ser simplement un menú. Aquest menú podria ser per exemple, seguint lo que feiem en Image Ready, un joc de pestanyes amb les pestanyes com a categories principals i uns menús contextuals com a segon nivell de navegació [Exactament com l'exercici de ImageReady].

Bé, tingui la forma que tingui, nosaltres podem fer servir en Flash botons que els podem programa en Action Script. [Aquests botons també podrien ser invisibles i podrien estar a sobre de les zones d'aquesta barra susceptibles de ser considerats clicables per l'usuari. Aquests botons invisibles farien la funció que teniem a l'ImageReady les HOTSPOTS. Recordeu?].

En tot cas, per posar un link a un botó d'un flash que col·loquem a una pàgina web hem de fer servir la ordre getURL("");. Exemple del codi que hauriem de posar.

Si el comandament getURL(""); el col·loquem en un botó el codi que hauriem d'asignar a aquest butó és:

on(release) {

getURL("La URL de la pàgina a la que volem que vagi l'usuari");

}

IMPORTANT: Si la URL que posem com a argument de la funció getURL es tracta d'una URL relativa llavors cal tenir en compte que és relativa al document HTML en la qual està col·locat el flash. No és pas relativa al document flash.

Más URL interesantes

Guadalupe ens escrivia l'adreça d'una altra web

He encontrado otra página donde aplican tanto el ejercicio de "caminar", como el del lápiz, que nosotros hemos hecho:

http://www.leglez.com

COMPOSICIÓ DE MOVIMENTS

Els símbols tenen la seva pròpia línia de temps. Gràcies a això podem composar moviments. Fins i tot d'aquesta manera és possible combinar interpol·lació de forma i de moviment cosa que abans no podiem.

Però per a això cal que domineu l'anidament de símbols uns a dintre dels altres. Amb els diferents exemples que veieu aquests dies amb els exercicis de composició de moviment esteu començant a entendre a on animar les coses. Recordeu que anidar és sinònim de ficar(= en castellano meter). Veieu l'article que explica com anidar per tant.

Per composar moviment cal anidar símbols uns a dintre dels altres. D'aquesta manera estem ficant línies de temps unes a dintre de les altres.

Link d'una web d'un restaurant feta en Flash

esta página me parece estupenda para un restaurante.

http://www.sumoll.com/web.html
per Guadalupe Cervilla

Guadalupe, una alumna anterior va trobar aquesta web feta en Flash. Això pot servir per inspirar-vos.

Gràcies Guadalupe. Et desitjo sort.

La funció determina la forma. Planificant el disseny web

Si volem embassar un litre d'aigüa haurem de fabricar una ampolla el suficientment gran. Si ha de mantenir fresc el contingut haurà de portar un aïllament tèrmic. Si ha de protegir-se de la llum per conservar millor el contingut haurà de ser opaca. Si ha de ser per consum humà haurà de garantir la no toxicitat i i mantenir les condicions higièniques adients.

Vam definir disseny com una construcció funcional destinada a solucionar un problema o optimitzar un procés. És una de tantes possibles definicions de disseny. Disseny implica planificació, anàlisi, ...

Fins ara heu estat desenvolupant recursos gràfics i de codi. Ara estem amb Dreamweaver i estem juntant ja totes les peces. Per anar preparant el projecte us explico fins el punt que es pot explicar, i ja sabeu que no m'agrada fer receptes, ja que no serveixen més que per uns pocs casos.

Lo primer que s'ha de fer és conèixer els continguts i la seva arquitectura tenint en compte categories, subcategories, relacions,etc.... O sigui que determinar els continguts, la informació i la seva categorització és lo primer.

Quan ja tenim resolt què és el que volem comunicar, transmetre, etc... hem de decidir com navegarà l'usuari per aquests continguts, és a dir: com canviarà d'una secció a una altra. Ajuda fer-se un "croquis" en forma d'arbre. Recordeu que les pàgines web són documents que s'articulen amb hipertext i/o amb hipermèdia.

Sabent com ha de navegar ja podem decidir quants nivells de navegació ha de tenir la interfície.

Després és la redacció, la obtenció d'imatges, sons, vídeos, animacions, etc... Per redactar per web us recomano els consells que dona l'uruguaiàDaniel Mordecki Pupko a la seva web que parla de com redactar para web.

El que queda és donar forma al projecte composant tots els elements anteriors amb una plataforma o suport. Aquesta plataforma és, en aquest cas, un document html o un document flash que s'incorpora en un document d'HTML. Aquest és el procés en que intervenen les decisions creatives, comunicacions, estètiques, d'usabilitat, etc...

Hipertext

En aquest link us parla sobre l'origen de l'hipertext i el que ha suposat en la cultura. Clica aquí. Val la pena que el llegiu.

Hipertext, diu Theodor Nelson cap als 60, que és "una escriptura no seqüencial".



WIKIEXPLICACIÓ (aquí):

Un hipertexto es un documento digital que se puede leer de manera no secuencial. Un hipertexto tiene los siguientes elementos: secciones, enlaces y anclajes. Las secciones o nodos son los componentes del hipertexto o hiperdocumento. Los enlaces son las uniones entre nodos que facilitan la lectura secuencial o no secuencial del documento. Los anclajes son los puntos de unión entre nodos. Los hipertextos pueden contener otros elementos, pero los tres anteriores son los mínimos y suficientes...

---

Les pàgines web i algunes aplicacions multimèdia actualment no tenen només hipertext. També tenen imatges, sons, vídeo, animacions, en definitiva: contenen multimèdia. És per aquesta raó que s'utilitza també una altre terme, hipermèdia, per referir-se a la vinculació de documents multimèdia.

Trobem hipermèdia a les pàgines web, aplicacions multimèdia interactives, caixers automàtics,...

Preloader (Recepta)

1. En la película que tengamos antemponemos una escena que le llamaremos preloader.

2. En la escena que hay a continuación de preloader y en su primer fotograma ponemos como rótulo de fotograma "ya".

3. En la escena preloader creamos dos capas, una de ellas será la capa acciones y le ponemos dos fotogramas clave.

4. En el segundo fotograma clave le daremos la orden gotoAndPlay(1); [para que haga un bucle y así evitar que se inicie la peli]


5. En el primer fotograma clave de la capa acciones pondremos el código

---

// Això és per que no es reprodueixi la pel·lícula fins que no s'ha carregat

if(_root.getBytesLoaded()>=_root.getBytesTotal())
{

gotoAndPlay("ya");

}

//Això és per que calculi el percentatge i el mostri a l'usuari

porcent=(_root.getBytesLoaded()/_root.getBytesTotal())*100;

sindecim=Math.round(porcent);

percentatge=sindecim + " %";

// Això és per que la barreta creixi en funció de lo que s'ha carregat

_root.barreta._xscale=sindecim;

---

6.En el escenario tiene que haber un campo de texto dinámico que le tenemos

que llamar percentatge. Y tambien una instancia que le llamaremos barreta.

INTERACTIVITAT I MULTIMÈDIA

Fa uns dies us comentava que un digne dissenayador de pàgines web havia de saber controlar les següents "arts":

1. Edició de mapes de bits. (Retoc digital d'imatges).
2. Dibuix vectorial. I si se sap ilustració millor.
   
3. Animació en Flash. La teoria de l'animació és en sí mateixa un món que no s'acaba mai.
   
4. Interactivitat. Requereix programar.
   
5. Multimèdia. Audio, Vídeo, etc...
   

Ara estem aprenent a controlar la interactivitat a dins del Flash mitjançant el llenguatge ActionScript. Més endavant controlarem la interacvitat amb Javascript al Dreamweaver. Aquestes interactivitats es troben en el costat client. És a dir: que succeeixen en el navegador de l'usuari. Però també hi ha altres interactivitats en les que intervenen programes i scripts que es troben en servidors i que processen informació per fer tasques com per exemple: buscar en una base de dades, enviar un e-mail, registrar un usuari a la base de dades d'usuaris d'una site. D'això en direm "interactivitat en costat servidor".

La interactivitat és la qualitat que tenen algunes aplicacions o programes, com per exemple una pàgina web, en les que l'usuari interactua amb l'aplicació i l'aplicació li respón. Hi ha resposta del programa. A aquest fet, que el programa et respongui, se li diu "interactivitat". Interactivitat = Activitat Entre Usuari i Programa.

Multimèdia: Se li diu així al tipus de productes que contenen diverses "mèdia", és a dir diversos recursos audiovisuals com per exemple música, sons, vídeos, etc... Les pàgines web són un tipus de producte que també contenen sons, vídeos, etc... És a dir: les pàgines web contenen o poden contenir multimèdia.

Flash, com heu vist i com veurem encara, ens permet controlar unes quantes d'aquestes arts a que feia referència: serveix per dibuixar vectorialment, animar, controlar interactivitat i se li pot incloure sons i vídeos.

El programa Flash serveix per produir, entre d'altres, dos tipus de productes bàsicament:

1. Arxius amb extensió SWF, que són els que inclourem en les pàgines web [que col·locarem en els documents HTML].
   
2. Executables que serveixen per fer aplicacions que es llençen des de CDROMS.

Hi ha altres productes que pot produïr també vídeos AVI i MOV que poden servir, si se sap animar bé, per fer caràtules per fer la titolació de vídeos i fins i tot programes de TV.

ActionScripts receptes (1º part)

EXERCICI DE PÈNDOLS

1. Se crea un clip de película con forma de péndulo.
2. En la linea de tiempo(interna) del clip se definen las oscilaciones con interpolaciones de movimiento.
3. Se pone la orden "stop();" en el primer fotograma.
4. Colocamos el clip en el escenario.
5. Le ponemos un nombre de instancia. Por ejemplo: "p1". [Nótese que el nombre de instancia y el nombre del clip de película no tienen por que coincidir necesariamente].
6. Colocamos un botón invisible encima de la instancia "p1".
7. Al botón le asignaremos el siguiente código de ActionScript:
   

---

on(rollOver){
_root.p1.play();
}

---

Notas sobre la sintaxis de ActionScripts:

a) Los botones siempre llevan la forma "on( evento de ratón ) { acciones }"

b) Entre los claudators (llaves) se ponen las acciones que se tengan que realizar.

c) _root.p1 sirve para poder referirnos a la instáncia del péndulo.

d) las acciones siempre acaban en ";".

---

EXERCICI DE BOTONERA TIPUS RADIO DE COTXE

1. Creamos un Clip de película a partir de un rectangulo con dos capas, en su propia linea de tiempo, una para las acciones y otra para la pastilla del botón.(figura 1: linea detiempo). Le llamamos "dostemps".
2. En ambas capas han de haber 2 fotogramas clave.
3. En la capa de las acciones han de haber dos stops: "stop();", uno en cada fotograma clave.
4. En el segundo fotograma clave de la capa "pastillas" que la pastilla sigui diferent.
5. Colocamos en el escenario 3 instancias del clip "dostemps" y les ponemos respectivamente como nombres de instancia: "b1", "b2", "b3".
6. Colocamos encima de estas instancias botones invisibles.
7. A estos botones invisibles les asignamos las siguientes acciones:

   ---

   on (release) {_root.b1.gotoAndStop(2);
   _root.b2.gotoAndStop(1);
   _root.b3.gotoAndStop(1);
   
8. }En los siguientes botones variamos los nombres de instancias en éste código.
   

Nota:
a) El ActionScript es "keysensitive", o sea que distingue entre mayúsculas o minúsculas, o sea que no considera igual las mayúsculas de las minúsculas.

Aquest link us pot servir de model per si s'anima algú,
http://www.nasa.gov/mission_pages/constellation/multimedia/index.html teniu imatges i models estàtics per copiar.

Aquest exercici va bé per què en principi heu de tocar-ho tot lo que té a veure amb lo que hem fet d'animació. Per tant és una excusa per recordar-ho tot.

Us posaré una feina obligatoria, com la del poster, feta en flash. ja us avisaré.

Ho heu d'intentar assimilar tant bé com pogueu abans de deixar-ho per que si no s'us oblidarà. No volem que passi això. Cal molt de rodatge per tant.

Cartell de protesta

Us recordo que encara queda gent sense presentar el seu cartell de protesta. No us en descuideu si us plau.

Composició de moviments

Els símbols tenen la seva pròpia línia de temps. Gràcies a això podem composar moviments. Fins i tot d'aquesta manera és possible combinar interpol·lació de forma i de moviment cosa que abans no podiem.

Però per a això cal que domineu l'anidament de símbols uns a dintre dels altres. Amb els diferents exemples que veieu aquests dies amb els exercicis de composició de moviment esteu començant a entendre a on animar les coses. Recordeu que anidar és sinònim de ficar(= en castellano meter). Veieu l'article que explica com anidar per tant.

Per composar moviment cal anidar símbols uns a dintre dels altres. D'aquesta manera estem ficant línies de temps unes a dintre de les altres.

Anidament de símbols

Anidar vól dir ficar. Anidar símbols vól dir ficar uns a dintre dels altres.
MÈTODE A _ Des de lo global fins a lo local.

1. Crear un nou símbol. Diguem-li GLOBAL.
2. A dins del símbol GLOBAL, editant(o sigui ficant-nos a dins de GLOBAL), crear un altre símbol, diguem-li LOCAL. (o sigui que dintre de GLOBAL fabriqueu el LOCAL).

[NOTA: Aquest mètode seria l'equivalent a crear una carpeta A i dintre de la carpeta A crear una altra carpeta B]

MÈTODE B _ Des de lo local fins a lo global _ embolcallant

1. Crear un nou símbol.
2. [Opcional] Dibuixar i/o afegir altres símbols.
3. Ho sel·leccionem tot i ho convertim en símbol.

[NOTA: A Windows no tenim equivalent. Seria com crear una carpeta i embolcallar-la amb una altra].
MÈTODE C _ Crear per separat i ficar un a dintre de l'altre.

1. Crear dos símbols per separat.
2. Extreure(cortar) un dels dos símbols i enganxar(pegar) a l'interior de l'altre.

[NOTA: A Windows seria com crear dos carpetes per separat i després ficar arrossegant la carpeta B dins de la A].

UTILITAT DE L'ANIDAMENT DE SÍMBOLS

• Empaquetar símbols junts de tal manera que quedin lligats i que poguem otorgar-li un moviment al paquet sencer(com per exemple traslacions d'un cotxe).
• Anidar instàncies per programar amb Action Script.
• Composar moviments.

Editar Símbols

Podem accedir a la línia de temps de cada símbol i editar-lo per dins i us en indico 5 formes possibles per accedir-hi a l'interior:

• Doble click sobre el símbol a l'àrea de treball(que podria ser l'escenari si estigués allà mateix).
• Botó dret sobre el símbol a l'àrea de treball > Edició a l'àrea de treball.
• Botó dret > sobre el símbol a l'àrea de treball Edició en context a l'àrea de treball.
• Botó dret sobre el símbol a la biblioteca > Edició a la biblioteca.
• Doble click sobre el símbol a la biblioteca.

Per què cal accedir-hi a l'interior dels símbols per editar-lo?
Doncs per que, entre d'altres coses, els símbols estàn agrupats i no ens permeten deformar-los.

Observacions i consideracions:

Si estem a dins de la línia de temps d'un símbol i volem tornar a l'escenari o a un símbol més global cliquem a on posa el nom de l'escena o al símbol que englobava a aquest. En el cas de l'exemple si volguèssim sortir del clip "quadres" cap al clip "CAP DE PLOMA" hauria de clickar a "CAP DE PLOMA".

Creació de símbols

MÈTODE A (A partir d'un objecte dibuixat)

1. Dibuixem l'objecte i el sel·leccionem.
2. INSERTAR > CONVERTIR EN SÍMBOLO.
3. Escollim el tipus de símbol i el nomeneu.
4. Col·loquem l'objecte respecte de la creu en cas que volguem que pivoti respecte a on està la creu.
5. Si s'ha d'animar la línia del símbol l'editem i l'animem per dins.

MÈTODE B (Des de zero)

1. INSERTAR > Nuevo Símbolo
2. Escollim el tipus de símbol
3. Dibuixem per dins del símbol
4. Col·loquem l'objecte respecte de la creu per que faci de pivot més tard.

Els símbols

A Flash podem crear uns elements que es guarden a una biblioteca que ens poden fer servir per poder reutilitzar cada vegada que volguem a baix cost d'informació ja que tots els elements de biblioteca que col·loquem sobre l'escenari són representants de la mateixa definició a la biblioteca.

Alguns d'aquests elements de biblioteca que podem crear a Flash es diuen símbols i n'hi ha de tres tipus:

1. Clips de pel·lícula(MovieClips). Els quals "tenen vida pròpia".
   
2. Símbols gràfics. Es sincronitzen amb la línia de temps en la que es troben.
   
3. Botons.

Aquests símbols es poden anidar els uns a dintre dels altres. A més, com que tenen una línia de temps pròpia podem així definir moviments uns a dintre dels altres; és a dir:

podem fer composició de moviments.

D'aquesta manera és possible combinar interpol·lacions de moviment(amb guia o sense) amb interpol·lació de forma.

INTERPOL·LACIÓ DE FORMA

Amb flash a més de les interpol·lacions de moviment podem també fer interpol·lacions de forma, és a dir:"morphings vectorials". El reproductor de flash "sabrà" modificar els vectors que no deixen de ser informació matemàtica. Una altra cosa ben diferent és que nosaltres sapiguem donar-li les instruccions a Flash adequadament i correctament per tal que faci la interpol·lació de forma.
Exemple:

Per fer interpol·lacions de forma es pot fer, de forma similar al que passava amb les interpol·lacions de moviment, mitjançant dos mètodes.

---

MÈTODE A:

1. Dibuixar un objecte a un fotograma.
2. Sel·leccionar el fotograma clau on està el dibuix
3. Anar a la finestra Propietats, desplegar la persiana Animar i escollir la opció "forma".
   
4. Més a la dreta insertar un fotograma clau.

---

MÈTODE B:

1. Dibuixar un objecte a un fotograma clau.
2. Insertar un fotograma clau més a la dreta.
3. Sel·leccionar tots els fotogrames des del primer fotograma clau fins el darrer.
4. Anar a la finestra propietats, desplegar la persiana Animar i escollir la opció "forma".

---

Què es pot fer amb interpol·lacions de forma:

1. Canviar de forma
2. Canviar de posició
3. Redimensionar
4. Girar
5. Canviar de color
6. Animar degradats

---

Què no es pot fer amb interpol·lacions de forma:

1. No es pot agrupar el farcit. Quan es fa això es trenca la interpol·lació de forma i no funciona correctament.
   

   

Màscares

Les màscares en Flash serveixen per deixar veure a través d'elles. Fan la funció de "forats".



Quan hi ha màscares al Flash han d'haver-hi també coses enmascarades, és a dir: coses que es vegin a través d'elles. Dit d'una altra manera, hi haurà capes màscares i capes enmascarades.




Per fer una màscara:

1. Es dibuixa a una capa un farcit amb la forma del forat desitjat. Aquesta forma serà la que farà de màscara. Li posarem com a nom "MASQUI"
2. Creem una capa buida i la posem a sota d'aquesta capa. L'anomenarem "enmascarada".
3. La capa de la màscara, "MASQUI" la convertirem en màscara fent: botó dret i a continuació sel·leccionant la opció "màscara".
4. [Observar que la capa "enmascarada s'ha subordinat a la capa MASQUI i les dues s'han bloquejat amb candaus."]

[ADVERTÈNCIES]

• Les màscares s'han de fer de "farcits". Si hi ha traçats a les capes màscara no s'enmascararà res.
• Les màscares, a diferència de les guies, sí es poden agrupar. Fins i tot es poden animar.

GUIES DE MOVIMENT: INTERPOL·LACIÓ DE MOVIMENT SEGUINT UNA TRAJECTÒRIA DEFINIDA

1. A una capa dibuixar un objecte.
2. Afegir una capa guia i dibuixar un traçat en aquesta capa
3. A la capa de l'objecte "Crear interpol·lació de moviment", crear fotogrames clau i col·locar l'objecte allà on volguem per a cada fotograma clau.
4. Si voleu que l'objecte s'orienti segons traçat sel·leccioneu els fotogrames clau i a PROPIETATS sel·leccioneu la casella ORIENTAR SEGONS TRAÇAT

[ADVERTÈNCIES]

• A la capa guia que només hi hagi traçat. Que no hi hagi cap farcit.
• No agrupeu el traçat a la capa guia.
• No feu cap interpol·lació de moviment a la capa guia(que no deixa de ser una forma d'agrupar).

Exemple:

CANVIS QUE ES PODEN FER A UNA INTERPOL·LACIÓ DE MOVIMENT

Haviem dit el que no podiem fer en l'article anterior. Ara diguem el podem fer.

CANVIS QUE ES PODEN FER A INTERPOL·LACIONS DE MOVIMENT. (Recordeu que heu d'estar a fotogrames clau per a poder efectuar aquests tipus de canvis)

Tocant l'objecte [Modificant paràmetres de la finestra propietats]

1. Canvis de posició
2. Redimensions [Eina transformació lliure]
3. Canvis d'orientació [Eina transformació lliure]
4. Canvis d'opacitat(alpha)
5. Canvis de brillantor.
6. Canvi de "tint"

Tocant el fotograma [Modificant paràmetres de la finestra propietats]

1. Acceleracions
2. Rotacions
3. Orientar segons traçat[Sempre i quan hagueu fet una capa guia amb un traçat que fes de trajectòria]

ADVERTÈNCIES SOBRE INTERPOL·LACIÓ DE MOVIMENT

1. Quan fem una interpol·lació de moviment els objectes, si és que no ho estaven, s'AGRUPEN. Per tant:
• No es poden colorejar
• No podem editar els nodes, "usea" no podem deformar els objectes.
• Un cop fet un objecte, en principi, ja no el podem canviar. L'heu de dibuixar bé abans de crear la interpol·lació.
2. Si intentem fer canvis a un objecte en un "fotograma no clau" accidentalment se'ns pot crear un fotograma clau. Per tant. NOMÉS FEU CANVIS ALS FOTOGRAMES CLAU.
3. Si desagrupem un objecte que estigui a una interpol·lació de moviment LA INTERPOL·LACIÓ ES TRENCA.
4. Si afegim un objecte a un fotograma clau d'una interpol·lació de moviment LA INTERPOL·LACIÓ ES TRENCA.

FOTOGRAMES CLAU

SERVEIXEN PER INDICAR(ESPECIFICAR) CANVIS

Regla nemotècnica - No oblidar

MOVIMENTS INDEPENDENTS EN CAPES DIFERENTS.

INTERPOL·LACIÓ DE MOVIMENT

PROCEDIMENTS PER FER INTERPOL·LACIÓ DE MOVIMENT

MÈTODE A:

1. Dibuixar l'objecte que volguem animar amb interpol·lació de moviment.
2. Sobre l'únic fotograma clau(el primer) fer botó dret -> Crear Interpol·lació de moviment.
3. En un fotograma més a la dreta de la mateixa capa fer botó dret ->Insertar Fotograma Clau.
4. Amb el dial (aquella agulla de color vermell) col·locat en aquest fotograma clau que acabem de crear desplaçarem l'objecte per l'escenari.

MÈTODE B:

1. Dibuixar l'objecte que volguem animar amb interpol·lació de moviment.
2. En un fotograma més a la dreta de la mateixa capa fer botó dret ->Insertar Fotograma Clau.
3. Sel·leccionar tots els fotogrames inclosos els fotogrames clau i fer botó dret -> Crear Interpol·lació de moviment.
4. Amb el dial (aquella agulla de color vermell) col·locat en aquest fotograma clau que acabem de crear desplaçarem l'objecte per l'escenari.

HABILITATS i PROCEDIMENTS D'ANIMACIÓ EN FLASH FETS FINS ARA

Repaseu lo que hem fet i xequejeu:

1. Introducció sobre l'animació en Flash. Hem explicat que, a l'igual que Flash redueix pes dels gràfics vectorials gràcies a que defineix matemàticament les corves, també pot reduir pes a la pel·lícula al definir matemàticament les animacions.
2. Heu vist un exemple d'interpol·lació de moviment on amb dos fotogrames clau l'objecte es deslplaça d'un punt a un altre. Aquí lo que esteu fent vosaltres és indicar la posició on han d'estar els objectes en diferents fotogrames clau i el reproductor de l'usuari interpol·larà les possicions intermitjes entre diferents posicions. És a dir que només amb la informació dels fotogrames clau ja definim el moviment. Ho farem amb més detall més endavantj, només ha sigut una introducció per veure què és una interpol·lació en Flash.
3. Manipulació de fotogrames:
• Insertar fotogrames generant així intervals de fotogrames o "blocs de fotogrames".
• Allargar i/o escurçar intervals de fotogrames.
• Insertar fotogrames clau. I fotogrames clau buits.
• Sel·lecció de fotogrames
• Doble click sobre un interval de fotogrames
• 1 click en el primer fotograma que desitjem sel·leccionar i (1 Click + MAYS) en el darrer fotograma que volguem sel·leccionar. Això es pot fer inclús amb fotogrames que estiguin en diferents capes
• Arrossegant el cursor.
• ...
• Desplaçament de fotogrames
• Fent doble click i arrossegant cap a la dreta o l'esquerra en la mateixa capa.
• Fent doble click i arrossegant cap amunt i cap avall canviant de capa.
• Copiant fotogrames i enganxant-los en una altre lloc.
• Copiar fotogrames
• Extreure fotogrames
• Tallar fotogrames
• Eliminar fotogrames
• Esborrar fotogrames(una mala traducció, hauria de dir: esborrar continguts de fotogrames)
• EXERCICI D'ANIMACIÓ FOTOGRAMA A FOTOGRAMA. Un bitxo caminant. Us recomenava fer servir referències per que les potetes seguissin un moviment més natural fixant-se als punts on trepitjéssin.

Mida de l'escenari

Muchas veces, en el escenario, dentro de Flash, un objeto está contenido en su interior por completo, pero en cambio al visualizarlo mediante "CTRL + ENTER" sólo se ve una parte y en una esquina superior, por ejemplo.

Otras veces, aunque también se ve bien pulsando el "CTRL + ENTER" , a la hora de reproducirlo en .swf o incluso en el navegador, no guarda relación el tamaño ni las proporciones con que se ve con las que hemos indicado.

¿Cómo controlar bien que lo que hacemos en el escenario sea realmente lo que vemos en el resultado final?

Guadalupe


Resposta:

CTROL + ENTER serveix per reproduïr la pel·lícula a dins de la finestra de Flash. Però agafa més tros dels propis límits de l'escenari. En canvi l'arxiu SWF, qual reproduïu només es veu la mida que haguem posat a l'escenari

Introducció a l'animació en Flash

Si el grafisme vectorial en flash ha suposat una revolució en els gràfics vectorials a internet, per la seva estandarització per una banda i la reducció de pes per l'altre, l'animació streaming que permet flash ha permés afegir al web la component de moviment i de temps; o sigui: ha permés desenvolupar animacions per les pàgines web.

Abans els banners publicitaris de les pàgines web es feien en format de gifs animats que eren seqüències de mapes de bits. Us ensenyaré a fer-ne gifs animats. Ara els banners publicitaris gràcies a les possibilitats multimèdia i a la reducció de pes que permet flash es fan sobretot en flash.

Ara, amb les animacions en Flash, es pot arribar a complicar una mica més. En tot cas és un recurs més per poder realitzar la funció principal del Disseny de pàgines web que és la de comunicar.

Comunicar amb imatges estàtiques ja té la seva dificultat i el seu "intringulis". No és pas banal i el disseny gràfic tradicional ha tractat de desenvolupar la comunicació visual durants segles mitjançant tot el que se sabia de psicologia de la percepció per una banda i de les expressions culturals i artístiques per l'altra.

Amb l'aportació de les animacions de Flash podem arrissar encara més el rínxol. Podem aportar-li moviment al missatge visual. Per fer això convindrà aquí desenvolupar quasi quasi, habilitats "cinematogràfiques". Si heu fet alguna cosa d'edició de vídeo i teniu coneixements de cinema, animació, etc... les podeu integrar aquí.

En aquest capítol desenvoluparem aquestes i més habilitats. Convé que tingueu
present que sovint a la gent li costa una mica animar. Així que estigueu amb els
ulls, les orelles i la ment ben oberts quan expliqui. Lo que farem no s'hi
sembla gaire a res que hagueu fet abans. Torna a ser començar de zero. Les
primeres operacions que veurem fan referència al control dels
fotogrames.

[continuaré aquest article...]

STREAMING

Se li diu Streaming a aquella tecnologia d'internet que permet que es vagin descarregant pel·lícules i aplicacions a través de la xarxa d'internet al mateix temps que ja es van veient.

Algunes animacions en flash i alguns trailers de pel·lícules utilitzen aquesta tecnologia i permet que mentre es van descarregant es van ja visionant. Això és Streaming.

Per més informació visiteu el següent link:
http://www.desarrolloweb.com/articulos/482.php?manual=15

LA VUELTA AL COLE, CONSIGUE TUS CORTYS

Holaaaaa!!!

Demà comença el cole. Heu fet els deures? Per què no penjeu al blog el vostre cartell com ha fet Enllel?

Una abraçada.

Cartell protesta

Bones!

Us penjo aquí el meu cartell de protesta, ja que m'agradaria saber la vostra opinió i que em fessiu una petita critica tant a nivell tecnic com visual.

Moltes gràcies i records a tothom. Adeu-siau!