Este año finalizaremos la última asignatura de programación del grado multimedia, de hecho ya he tenido que tirar de asignaturas opcionales como la cursada el último semestre (programación web avanzada) puesto que las básicas están fulminadas y con la mejor nota posible ;)
Trabajo con: HTML, CSS, PHP, JAVASCRIPT, JQUERY, SQL, ASP, JAVA | AJAX, ALGORÍTMICA
En esta entrada os quiero hacer un resumen de la escalada de aprendizaje con algunos ejemplos de código de cada una de ellas. El contenido de esta entrada es puramente dedicado a aquellos que os guste el mundo de la programación web, o para aquellos que como recurso busquéis información de la materia tratada en la asignatura.
La mayoría de código está comentado, para poder echar un vistazo solo tenéis que hacer clic con el botón izquierdo y: “ver código fuente” ;)
Disculpad posibles aberraciones, o sentencias de un amateur si sois gurús!
Si por otro lado queréis ver los resultados más directos os invito a echar un vistazo al juego plantejado con JAVASCRIPT y diseñado con WEB RESPONSIVE para que la ventana del juego se adapte al tamaño del monitor.
Para jugar con el cursor del teclado moveréis la pala. Si redimensionáis la ventana se hace un nuevo cálculo de las paredes.
JUEGO SIMPLE (TÍPICO PONG)
JUEGO PRESENTADO (ADAPTACIÓN DEL PONG)
LAS ASIGNATURAS:
El orden que os propongo es el que he elegido a la hora de matricularme. Creo que es el más correcto de cara a una escalada sin tropiezos.
ESTÁNDARES WEB (HTML/CSS)
Esta asignatura es básica para la realización de todo lo que propone el grado. ¡La verdad es que aunque llevo más de 20 años haciendo páginas web, descubrir que no tienes ni idea es alarmante! Cuando tomas conciencia de este hecho es cuando, con la autocrítica, el esfuerzo y el aprendizaje de las horas dedicadas; te vas superando día a día.
La asignatura te da los conocimientos de cómo hacer una página web siguiendo protocolos estandarizados. El objetivo es establecer un orden CONTENIDO/ESTILO lógico y funcional para toda la maquinaria que se esconde al fondo de la telaraña que es Internet. Un buen posicionamiento (SEO) depende claramente de ello.
El lenguaje que se trabaja es el HTML combinado con las hojas de estilo CSS. Se aprende a elaborar contenidos bien etiquetados para que lectores de pantalla o agentes de usuario, puedan entender el contenido de la página sin errores estructurales, sintácticos o de definición.
La importancia del trabajo con CSS, por otro lado, es primordial. La elaboración correcta de las hojas de estilo y los elementos HTML permite cambiar la estética de una página web en cuestión de minutos. Así ajustar la estética del contenido al medio que la reproduce mejora verdaderamente la experiencia del usuario.
Páginas que al imprimirse cambian el estilo podrían ser un ejemplo:
<link href="estil-print.css" rel="stylesheet" type="text/css" media="print">Aquí podéis ver algunos ejemplos de trabajo realizado: PAC1 - PAC2 - PAC3
Si tuviese que destacar alguno de los trabajos realizados quizá me quedaría con el diseño que hice de un formulario de pedidos para libros ficticio.
PROGRAMACIÓN (ALGORÍTMICA/PHP)
En esta asignatura se toman las bases de la programación estructurada. Se empieza a trabajar con la lógica de algoritmos de cara a entender cómo diseñar la estructura de un programa y las acciones que este debe llevar a cabo en cada momento. Variables, constantes, arrays, condicionales, iteraciones, funciones con entradas y salidas... ¡la base para trabajar con cualquier lenguaje de programación!
El lenguaje práctico de la asignatura es PHP, y como este se interpreta en la banda del servidor, la asignatura pide la instalación de un servidor PHP para poder elaborar las prácticas en local.
Existeivos opciones para entornos Windows como XAMPP de fácil instalación, no obstante mi opción es utilizar las herramientas del taller y sigo la asignatura con un entorno Linux como servidor (DEBIAN) y Windows como cliente.
Es una asignatura compleja ya que te inicias en un mundo desconocido, pero la verdad es que ha sido la base de todo lo que luego he conseguido con otros entornos de programación. La considero uno de los pilares del Grado.
Os pongo un ejemplo sencillo del trabajo realizado con PHP. Se trabajan condicionales, iteraciones, funciones E/S, arrays...
Realizar el juego CRAPS (funcionamiento)
- Fase 1: Se tiran los dos dados. Si se saca un 7 o un 11, se ha ganado. Si se saca 2, 3 o 12 se ha perdido. Si no se saca ninguno de estos 5 valores, se anota el valor obtenido "punto" y se pasa a la fase 2.
- Fase 2: Se van tirando repetidamente los dos dados mientras no salga punto o un 7. Cualquiera de los dos resultados en una tirada de dos dados finalizan la partida. Si se ha obtenido un 7, se ha perdido. Si se repite primero el valor punto se ha ganado. Esta segunda fase es de longitud indeterminada. Tan pronto se puede acabar en una sola tirada como se puede necesitar una serie de 10 o más tiradas.
Si refrescáis el navegador se vuelve a generar una nueva tirada.
Podéis ver el código funcionando en este enlace
<!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ÓN WEB (JAVASCRIPT)
Si en la asignatura anterior trabajábamos en la banda del servidor ahora es la hora de hacerlo en el cliente, el navegador del usuario. ¿El lenguaje para todo esto? Uno de los más antiguos de la web: el renacido JavaScript.
La asignatura profundiza los conocimientos de la programación estructurada creando programas más complejos y nos adentra en el entorno del DOM (Document object model) y el BOM (Browser object model).
Se da mucha importancia a la elaboración de formularios y comprobación de datos. Por este hecho es imprescindible el juego con REGULAR EXPRESSIONS y el control de los elementos de la parte del cliente (BOM/DOM) de los diferentes navegadores: Internet Explorer, Mozilla Firefox, Google Chrome, Safari...
Otra de las partes de la asignatura es presentar la orientación a objetos. Gracias a JavaScript el alumno puede ver cómo trabajar con los dos paradigmas tratados hasta el momento: imperativo o procedimental y orientado a objetos (POO).
También de forma muy breve trata la biblioteca de JQuery y algún ejemplos.
La práctica final de asignatura nos propone la creación de un formulario con comprobaciones por parte del cliente, así como la realización del juego clásico del PONG. Aquí os dejo el resultado final.
DISEÑO DE BASE DE DATOS (SQL/JAVASCRIPT/PHP)
El diseño de bases de datos es otro de los pilares de cualquier aplicativo. La elaboración correcta de una buena estructura y definición de entidades y relaciones así como sus atributos y cardinalidad de las relaciones, es la base de esta asignatura.
En la presentación de las prácticas no se busca tanto evaluar la nota del alumno sino la comprensión de la materia. Así se habilita un laboratorio práctico y se permite hacer pre-entregas de cara a corregir errores de comprensión y entender la materia. ¡La verdad muy buen trabajo por parte de los profesores, y un muy buen método!
Es una asignatura muy compleja, ¡pero muy estimulante! Se parte del diseño con el programa DIA de los esquemas de base de datos, para en otros módulos, exportar el diseño a un entorno Web con MySQL. Se trabajan los tipos de datos, las relaciones y restricciones (CONSTRAINTS), los triggers, las copias de seguridad y reparaciones de bases corruptes...
Para finalizar se empieza a trabajar con la combinación de JAVASCRIPT/PHP y el traspaso de datos con los métodos GET y POST entre CLIENTE/SERVIDOR. Asimismo acaba por enumerar prácticas de buena escritura de código y aspectos de seguridad en la programación: Magic Quotes, Inyección de código en formularios, el mortal eval...
La práctica final juega con la API de Google Maps para crear un formulario de consulta que liga JavaScript, Php, MySQL y la API de Google. ¡Una pasada de asignatura! ¡Ahora, un nivel alto!
Aquí podéis ver la práctica final funcionando sobre una base de datos que tiene entradas las dades de un grupo de emisoras de radio ficticias. Sobre la API de Google se dibuja un radio de cobertura y se geolocaliza según su latitud y longitud entrada en la base de datos. Toda la información es resultado de una consulta de formulario que se actualiza dinámicamente mediante una función de AJAX de jQuery.
PROGRAMACIÓN WEB AVANZADA (AJAX/JQUERY/ASP) OPCIONAL
La verdad es que esta asignatura la he cogido principalmente para acabar de entender el funcionamiento de AJAX (Asynchronous JavaScript And XML).
La asignatura se centra principalmente en esta tecnología CLIENT/SERVIDOR y en diferentes entornos. Primero de forma directa con JavaScript y XMLHttpRequest, luego con las funciones AJAX de JQuery y JSON.
Para el seguimiento de lo asignatura es necesario dominar HTML y CSS, JavaScript, PHP y MySQL... si no se haría imposible la realización de las prácticas.
Es una pena que hayan quitado del aprendizaje RUBY ON RAILS, no obstante lo han sustituido por una profundización de JQuery de alto nivel.
JQuery es sin duda alguna el futuro de programación del entorno web y facilita muchísimo el tratamiento del DOM y el BOM con las diferentes versiones de navegadores.
Una vez acabado el tratamiento de AJAX en todo sus posibles entornos y realizado un sistema de reservas Online, nos adentramos en ASP de Microsoft. Se trabaja con el ejemplo de reservas del restaurante ONLINE ficticio. Se trata de adaptar el trabajo hecho anteriormente con JQuery y PHP, sobre la base de datos del RestaurantUOC, a un entorno ASP y los necesarios complementos del Ajax Control Toolkit.
El último módulo de ASP contempla el patrón MVC (modelo vista controlador) aunque no se trabaja en práctica.
Todo el último módulo se realiza mediante Microsoft Visual Studio. En la asignatura faciliten las instalaciones de software con máquinas virtual realizadas por el Tutor por lo que si no quieres, no es necesaria la instalación y configuración del software... Nuevamente hemos hecho todo el trabajo sucio... ¡hay que saber cómo instalarlo también! ¡Aunque suponga más dolores de cabeza!
Os dejo los resultados de las PAC tanto por su interés de contenido (ENTORNO DE HTML5 y NOVEDADES/ASP y AJAX TOOLKIT/MVC) como para que podáis echar un vistazo al código que contienen los ejemplos:
Por cierto un éxito de asignatura...
DISEÑO Y PROGRAMACIÓN ORIENTADA A OBJETES (JAVA) OPCIONAL
Poca cosa os puedo decir al momento. He hecho una lectura previa de los apuntes y desarrolla el tratamiento de la programación orientada a objetos con detalle. Los primeros módulos parecen muy teóricos en cuanto a la comprensión del porqué trabajar con POO.
Me hace mucha gracia ver cómo funcionará ya que está basada en JAVA y no he hecho nunca nada con este lenguaje. Os diré más en una nueva entrada. ¡Quedan pocos días para empezarla!
¡Espero no haber sido un toston! ¡Y que sigáis leyendo futuras entradas! ¡Hasta pronto! :)