Logo
Imprimir aquesta pàgina

Resum d'assignatures de programació del Grau Multimèdia

Aquest any finalitzarem la darrera assignatura de programació del grau multimèdia, de fet ja he de tirar d’assignatures opcionals com la cursada el darrer semestre (programació web avançada) posat que les bàsiques estan fulminades i amb la millor nota possible ;)

Treball amb : HTML, CSS, PHP, JAVASCRIPT, JQUERY, SQL, ASP, JAVA | AJAX, ALGORITMICA

En aquesta entrada us vull fer un resum de l’escalada d’aprenentatge amb alguns exemples de codi de cada una d’elles. El contingut d’aquesta entrada és purament dedicat a aquells que us agradi el mon de la programació web, o per aquells que com a recurs busqueu informació de la matèria tractada per l’assignatura.
La majoria de codi està comentat, per poder fer una ullada sols heu de fer clic amb el botó esquerre i:  “veure codi font” ;) 

Disculpeu possibles aberracions, o sentències d’un amateur si en sou gurus!

Si d’altra banda voleu veure els resultats més directes us convido a fer una ullada al joc plantejat amb JAVASCRIPT i dissenyat  amb WEB RESPONSIVE per tal de que la finestra del joc s’adapti a la mida del monitor.

Per jugar amb el cursor del teclat moureu la pala. Si redimensioneu la finestra es fa un nou càlcul de les parets.

JOC SIMPLE  (TÍPIC PONG) 

JOC PRESENTAT (ADAPTACIÓ DEL PONG)

 

LES ASSIGNATURES:

L’ordre que us proposo és el que he triat alhora de matricular-me. Crec que és el més correcte de cares a una escalada sense entrebancs.


 

ESTÀNDARDS WEB (HTML/CSS)

Aquesta assignatura és bàsica per a la realització de tot el que proposa el grau. La veritat és que tot i que porto més de 20 anys fent pàgines web, descobrir que no en tens ni idea és alarmant! Quan prens consciència d’aquest fet és quan, amb l’autocrítica, l’esforç i l’aprenentatge de les hores dedicades; et vas superant dia a dia.

L’assignatura et dona els coneixements de com fer una pàgina web seguint protocols estandaritzats. L’objectiu és establir un ordre CONTINGUT/ESTIL lògic i funcional per tota la maquinària que s’amaga al fons de la tranyina que és Internet. Un bon posicionament (SEO) en depèn clarament.

El llenguatge que es treballa és l’HTML combinat amb les fulles d’estil CSS. S’aprèn a elaborar continguts ben etiquetats per que lectors de pantalla o agents d’usuari, puguin entendre el contingut de la pàgina sense errors estructurals,  sintàctics o de definició.
La importància del treball amb CSS, per altra banda, és primordial. L’elaboració correcte de les fulles d’estil i els elements HTML permet canviar l’estètica d’una pàgina web en qüestió de minuts. Així ajustar l’estètica del contingut al mitjà que la reprodueix millora veritablement l’experiència de l’usuari. 

Pàgines que alhora d'imprimir-se canvien l’estil podrien ser un exemple:

<link href="/estil-print.css" rel="stylesheet" type="text/css" media="print">

Aquí podeu veure alguns exemples de treball realitzat: PAC1 - PAC2 - PAC3

 

Si hagués de destacar algun dels treballs realitzats potser em quedaria amb el disseny que vaig fer d’un formulari de comandes per llibres fictici.

Codi d'estil 

 

 

 


 

PROGRAMACIÓ (ALGORÍTMICA/PHP)

En aquesta assignatura es prenen les bases de la programació estructurada. Es comença a treballar amb la lògica d’algoritmes de cares a entendre com dissenyar l’estructura d’un programa i les accions que aquest ha de portar a terme en cada moment. Variables, constants, arrays, condicionals, iteracions, funcions amb entrades i sortides... la base per a treballar amb qualsevol llenguatge de programació!

El llenguatge pràctic de l’assignatura és PHP, i com aquest s’interpreta en la banda del servidor, l’assignatura demana la instal·lació d’un servidor PHP per poder elaborar les pràctiques en local.
Existeixen opcions per entorns Windows com XAMPP de fàcil instal·lació, no obstant la meva opció és utilitzar les eines del taller i segueixo l’assignatura amb un entorn Linux com a servidor (DEBIAN) i Windows com a client.

És una assignatura complexa ja que t’inicies en un mon desconegut, però la veritat és que ha estat la base de tot el que llavors he aconseguit amb altres entorns de programació. La considero un dels pilars del Grau.

Us poso un exemple sencill de la feina realitzada amb PHP. Es treballen condicionals, iteracions, funcions E/S, arrays...

Realitzar el joc CRAPS (funcionament)

  • Fase 1:  Es tiren el dos daus. Si es treu un 7 o un 11, s'ha guanyat. Si es treu 2, 3 o 12 s'ha perdut. Si no es treu cap d'aquests 5 valors, s'anota el valor obtingut "punt" i es passa a la fase 2.
  • Fase 2:  Es van tirant repetidament els dos daus mentre no surti punt o un 7. Qualsevol dels dos resultats en una tirada de dos daus finalitzen la partida. Si s'ha obtingut un 7, s'ha perdut. Si es repeteix primer el valor punt s'ha guanyat.  
    Aquesta segona fase és de longitud indeterminada. Tan es pot acabar en una sola tirada com es pot necessitar una sèrie de 10 o més tirades.

Si refresqueu el navegador es torna a generar una nova tirada.

 Podeu veure el codi funcionant en aquest enllaç 


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//ES"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html lang="ES" dir="ltr" xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>PAC 3 Exer2 CRAPS</title>
</head>
<body>
<h3>CRAPS</h3>
<h3>David Otero Verdaguer</h3>
<div>
<?php
/******************FUNCTIONS*********************/
function shot(&$x,&$y){$x=rand(1,6);$y=rand(1,6);}

function putDices ($x,$y){print "<img src='$x.png'><img src='$y.png'><img src='sep.png'>";}

function firstShot(){
print "<h3>Primera tirada</h3>";
shot ($x,$y);
putDices ($x,$y);
return $x+$y;
}

function longPlay($punt){
$seg_tirada=0;
while (($seg_tirada!=7)&&($seg_tirada!=$punt)) {
shot($x,$y);
$taula_tirada[]=$x;
$taula_tirada[]=$y;
$seg_tirada=$x+$y;
}
return $taula_tirada;
}

function writeLongPlay ($taula_tirada){
print "<h3>Sèrie de tirades</h3>";
while ($taula_tirada!=NULL){
$x=array_shift($taula_tirada);
$y=array_shift($taula_tirada);
putdices ($x,$y);
}
}

function array_2last($taula_tirada){
$n=count($taula_tirada);
$nou_punt=$taula_tirada[$n-1]+$taula_tirada[$n-2];
return $nou_punt;
}

//L'enunciat no diu que no es pugui fer servir per la primera fase :)
//he trobat convenient agrupar totes les normes del joc en aquesta funció
function win($punt, $taula_tirada=NULL){
//segona fase
if ($taula_tirada!=NULL){
$nou_punt=array_2last($taula_tirada);
if ($nou_punt==$punt) return TRUE;
else return FALSE; //surt un 7
}
else{
//primera fase - ho poso dins l'else per que si
//l'array està definit no compari aquesta part
if (($punt==7)||($punt==11)) return TRUE;
if (($punt==2)||($punt==3)||($punt==12)) return FALSE;
}
}
/******************MAIN*********************/
$punt=firstShot();
$frase_final="tret ".$punt;
$resultat=win($punt);
if (!isset($resultat)){
$taula_tirada=longPlay($punt);
writeLongPlay ($taula_tirada);
$resultat=win ($punt, $taula_tirada);
$nou_punt=array_2last($taula_tirada);
if ($resultat==TRUE){$frase_final="igualat ".$nou_punt;} else {$frase_final="tret ".$nou_punt;}
}
if ($resultat==TRUE){$resultat="guanyat";} else {$resultat="perdut";}
print "<h3>Has $resultat, has $frase_final </h3>";

?>
</div>
</body>
</html>

 


 

PROGRAMACIÓ WEB (JAVASCRIPT)

Si en l’assignatura anterior treballàvem en la banda del servidor ara es l’hora de fer-ho en el client, el navegador de l’usuari. El llenguatge per tot això? Un dels més antics de la web: el renascut JavaScript.

L’assignatura profunditza els coneixements de la programació estructurada creant programes més complexos i ens endinsa a l’entorn del DOM (Document object model) i el BOM (Browser object model).
Es dona molta importància a l’elaboració de formularis i comprovació de dades. Per aquest fet és imprescindible el joc amb REGULAR EXPRESSIONS i el control dels elements de la part del client (BOM/DOM) dels diferents navegadors: Internet Explorer, Mozilla Firefox, Google Chrome, Safari...

Una altre de les parts de l’assignatura és presentar l’orientació a objectes. Gracies a JavaScript l’alumne pot veure com treballar amb els dos paradigmes tractats fins el moment: imperatiu o procedimental i orientat a objectes (POO).
També de forma molt breu tracta la biblioteca de JQuery i algun exemples.

 

La pràctica final d’assignatura ens proposa la creació d’un formulari amb comprovacions per part del client, així com la realització del joc clàssic del PONG. Aquí us deixo el resultat final.

Codi del formulari (POO)

Codi del joc

 

 


 

DISSENY DE BASE DE DADES (SQL/JAVASCRIPT/PHP)

El disseny de bases de dades és un altre dels pilars de qualsevol aplicatiu. L’elaboració correcta d’una bona estructura i definició d’entitats i relacions així com els seus atributs i cardinalitat de les relacions, és la base d’aquesta assignatura.

En la presentació de les pràctiques no es busca tant avaluar la nota de l’alumne sinó la comprensió de la matèria. Així s’habilita un laboratori pràctic i es permet fer pre-entregues de cara a corregir errors de comprensió i entendre la matèria. La veritat molt bona feina per part dels professors, i un molt bon mètode!

Exemple d'estructura de la base de dades

És una assignatura molt complexa, però molt engrescadora! Es parteix del disseny amb el programa DIA dels esquemes de base de dades, per en altres mòduls, exportar el disseny a un entorn Web amb MySQL. Es treballen els tipus de dades, les relacions i restriccions (CONSTRAINTS), els triggers, les còpies de seguretat i reparacions de bases corruptes... 

Per finalitzar es comença a treballar amb la combinació de JAVASCRIPT/PHP i el traspàs de dades amb els mètodes GET i POST entre CLIENT/SERVIDOR. Així mateix acaba per enumerar pràctiques de bona escriptura de codi i aspectes de seguretat en la programació: Magic Quotes, Injecció de codi en formularis, el mortal eval...

La pràctica final juga amb l’API de Google Maps per crear un formulari de consulta que lliga JavaScript, Php, MySQL i l’API de Google. Una passada d’assignatura!!!! Ara, un nivell alt!

Aquí podeu veure la pràctica final funcionant sobre una base de dades que te entrades les dades d’un grup d’emissores de radio fictícies. Sobre l'API de Google es dibuixa un radi de cobertura i es geolocalitza segons la seva latitud i longitud entrada en la base de dades. Tota la informació és resultat d’una consulta de formulari que s’actualitza dinàmicament mitjançant una funció d’AJAX de jQuery.

 


 

PROGRAMACIÓ WEB AVANÇADA (AJAX/JQUERY/ASP) OPCIONAL

La veritat és que aquesta assignatura l’he agafada principalment per acabar d’entendre el funcionament d’AJAX (Asynchronous JavaScript And XML). L’assignatura es centra principalment en aquesta tecnologia CLIENT/SERVIDOR i en diferents entorns. Primerament de forma directa amb JavaScript i XMLHttpRequest, llavors amb les funcions AJAX de JQuery i JSON.

Per el seguiment de l’assignatura és necessari dominar HTML i CSS, JavaScript, PHP i MySQL... si no es faria impossible la realització de les pràctiques.

Es una pena que hagin tret de l’aprenentatge RUBY ON RAILS, no obstant l’han substituït per un aprofundiment de JQuery d’alt nivell.
JQuery és sense cap dubte el futur de programació de l’entorn web i facilita moltíssim el tractament del DOM i el BOM amb les diferents versions de navegadors.

Un cop acabat el tractament d’AJAX en tot els seus possibles entorns i realitzat un sistema de reserves Online, ens endinsem dins ASP de Microsoft. Es treballa amb l'exemple de reserves del restaurant ONLINE fictici.  Es tracta d’adaptar la feina feta anteriorment amb JQuery i PHP, sobre la base de dades del RestaurantUOC, a un entorn ASP i els necessaris complements de l’Ajax Control Toolkit.

El darrer mòdul d’ASP contempla el patró MVC (model vista controlador) tot i que no es treballa en pràctica. Tot el darrer mòdul es realitza mitjançant Microsoft Visual Studio. En l’assignatura faciliten les instal·lacions de programari amb màquines virtual realitzades per el Tutor per el que si no vols, no es necessària la instal·lació i configuració del programari... Novament hem fet tota la feina bruta... cal saber com instal·lar-ho també! Encara que suposi més mals de cap!

Us deixo els resultats de les PAC tant per el seu interès de contingut (ENTORN D'HTML5 i NOVETATS/ASP i AJAX TOOLKIT/MVC) com per que pugueu fer una ullada al codi que contenen els exemples:

PAC1 - PAC2 - PAC3

Per cert un èxit d’assignatura...

 


 

DISSENY I PROGRAMACIÓ ORIENTADA A OBJECTES (JAVA) OPCIONAL

Poca cosa us puc dir al moment. He fet una lectura prèvia dels apunts i desenvolupa el tractament de la programació orientada a objectes amb detall. Els primers mòduls semblen molt teòrics en quan a la comprensió del perquè treballar amb POO.

Em fa molta gràcia veure com funcionarà ja que està basada en JAVA i no he fet mai res amb aquest llenguatge. Us diré més en una nova entrada. Queden pocs dies per començar-la!

 

 

Espero no haver estat un toston! I que seguiu llegint futures entrades! Fins aviat! :)

Darrera modificació elDilluns, 04 Agost 2014 11:29
ReparamiPC.com