This year we will finish the last programming subject of the multimedia degree, in fact I already have to pull from optional subjects like the one taken last semester (advanced web programming) since the basic ones are finished and with the best possible grade ;)
Work with: HTML, CSS, PHP, JAVASCRIPT, JQUERY, SQL, ASP, JAVA | AJAX, ALGORITHMS
In this post I want to make a summary of the learning climb with some code examples of each of them. The content of this post is purely dedicated to those of you who like the world of web programming, or for those who as a resource seek information on the matter covered by the subject.
Most of the code is commented, to take a look you just have to left-click and: “view source code” ;)
Forgive possible aberrations, or statements of an amateur if you are gurus!
If on the other hand you want to see the most direct results I invite you to take a look at the game proposed with JAVASCRIPT and designed with WEB RESPONSIVE so that the game window adapts to the size of the monitor.
To play with the keyboard cursor you will move the paddle. If you resize the window a new calculation of the walls is made.
SIMPLE GAME (TYPICAL PONG)
PRESENTED GAME (PONG ADAPTATION)
THE SUBJECTS:
The order I propose to you is the one I have chosen when enrolling. I think it is the most correct for a climb without setbacks.
WEB STANDARDS (HTML/CSS)
This subject is basic for the realization of everything the degree proposes. The truth is that even though I have been making web pages for more than 20 years, discovering that you have no idea is alarming! When you become aware of this fact is when, with self-criticism, effort and learning from the hours dedicated; you surpass yourself day by day.
The subject gives you the knowledge of how to make a web page following standardized protocols. The objective is to establish a logical and functional CONTENT/STYLE order for all the machinery that hides at the bottom of the cobweb that is the Internet. A good positioning (SEO) clearly depends on it.
The language that is worked is HTML combined with CSS style sheets. One learns to elaborate well-tagged contents so that screen readers or user agents can understand the content of the page without structural, syntactic or definition errors.
The importance of working with CSS, on the other hand, is paramount. The correct elaboration of style sheets and HTML elements allows changing the aesthetics of a web page in a matter of minutes. Thus, adjusting the aesthetics of the content to the medium that reproduces it truly improves the user experience.
Pages that when printing change style could be an example:
<link href="estil-print.css" rel="stylesheet" type="text/css" media="print">Here you can see some examples of work done: PAC1 - PAC2 - PAC3
If I had to highlight any of the works done maybe I would stay with the design I made of a fictitious book order form.
PROGRAMMING (ALGORITHMS/PHP)
In this subject the bases of structured programming are taken. One starts working with the logic of algorithms to understand how to design the structure of a program and the actions that it must carry out at each moment. Variables, constants, arrays, conditionals, iterations, functions with inputs and outputs... the basis for working with any programming language!
The practical language of the subject is PHP, and since this is interpreted on the server side, the subject asks for the installation of a PHP server to be able to elaborate the practices locally.
Options exist for Windows environments like XAMPP for easy installation, however my option is to use the workshop tools and I follow the subject with a Linux environment as a server (DEBIAN) and Windows as a client.
It is a complex subject since you start in an unknown world, but the truth is that it has been the basis of everything I then achieved with other programming environments. I consider it one of the pillars of the Degree.
I put a simple example of the work done with PHP. Conditionals, iterations, I/O functions, arrays are worked...
Perform the CRAPS game (functioning)
- Phase 1: Two dice are thrown. If a 7 or an 11 is rolled, you win. If a 2, 3 or 12 is rolled you lose. If none of these 5 values are rolled, the value obtained "point" is noted and it goes to phase 2.
- Phase 2: The two dice are thrown repeatedly as long as point or a 7 does not come out. Any of the two results in a roll of two dice end the game. If a 7 has been obtained, you win. If the point value is repeated first, you win. This second phase is of undetermined length. It can end in a single roll as it can need a series of 10 or more rolls.
If you refresh the browser a new roll is generated again.
You can see the code working in this link
<!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>
WEB PROGRAMMING (JAVASCRIPT)
If in the previous subject we worked on the server side now it is time to do it on the client side, the user's browser. The language for all this? One of the oldest on the web: the reborn JavaScript.
The subject deepens the knowledge of structured programming creating more complex programs and enters us into the environment of the DOM (Document object model) and the BOM (Browser object model).
Much importance is given to the elaboration of forms and data checking. For this reason the play with REGULAR EXPRESSIONS and the control of the elements of the client side (BOM/DOM) of different browsers is essential: Internet Explorer, Mozilla Firefox, Google Chrome, Safari...
Another part of the subject is presenting object orientation. Thanks to JavaScript the student can see how to work with the two paradigms treated so far: imperative or procedural and object-oriented (OOP).
Also very briefly it covers the JQuery library and some examples.
The final practice of the subject proposes the creation of a form with checks by the client, as well as the realization of the classic PONG game. Here I leave you the final result.
DATABASE DESIGN (SQL/JAVASCRIPT/PHP)
Database design is another of the pillars of any application. The correct elaboration of a good structure and definition of entities and relationships as well as their attributes and cardinality of the relationships, is the basis of this subject.
In the presentation of the practices it is not sought so much to evaluate the student's grade but the understanding of the matter. Thus a practical laboratory is enabled and pre-deliveries are allowed to correct understanding errors and understand the matter. Truly very good work by the professors, and a very good method!
It is a very complex subject, but very encouraging! It starts from the design with the DIA program of the database schemas, to in other modules, export the design to a Web environment with MySQL. Type of data, relationships and restrictions (CONSTRAINTS), triggers, backups and repairs of corrupt databases are worked...
To finalize it starts working with the combination of JAVASCRIPT/PHP and the transfer of data with GET and POST methods between CLIENT/SERVER. It also ends by listing practices of good code writing and safety aspects in programming: Magic Quotes, Injection of code in forms, the mortal eval...
The final practice plays with the Google Maps API to create a query form that binds JavaScript, Php, MySQL and the Google API. A blast of a subject!!!! Now, a high level!
Here you can see the final practice working on a database that has the data of a group of fictitious radio stations. On the Google API a coverage radius is drawn and it is geolocated according to its input latitude and longitude in the database. All the information is a result of a form query that is dynamically updated through a jQuery AJAX function.
ADVANCED WEB PROGRAMMING (AJAX/JQUERY/ASP) OPTIONAL
Truly this subject I have taken mainly to finish understanding the functioning of AJAX (Asynchronous JavaScript And XML). The subject focuses mainly on this CLIENT/SERVER technology and in different environments. Firstly directly with JavaScript and XMLHttpRequest, then with the JQuery AJAX functions and JSON.
For the tracking of the subject it is necessary to master HTML and CSS, JavaScript, PHP and MySQL... otherwise it would become impossible to realize the practices.
It is a shame that they have removed RUBY ON RAILS from the learning, nevertheless they have substituted it for a deep high-level JQuery study.
JQuery is without a doubt the future of web environment programming and greatly facilitates the treatment of the DOM and the BOM with different browser versions.
Once the treatment of AJAX in all its possible environments is finished and an Online reservation system is done, we enter into Microsoft ASP. It is worked with the example of fictitious ONLINE restaurant reservations. It is about adapting the work previously done with JQuery and PHP, on the RestaurantUOC database, to an ASP environment and the necessary Ajax Control Toolkit complements.
The last ASP module contemplates the pattern MVC (model view controller) although it is not worked in practice. All the last module is performed through Microsoft Visual Studio. In the subject they facilitate the software installations with virtual machines performed by the Tutor so that if you do not want, the installation and configuration of the software is not necessary... Again we have done all the dirty work... one must know how to install it too! Even if it means more headaches!
I leave you the results of the PAC both for its content interest (HTML5 ENVIRONMENT and NEWS/ASP and AJAX TOOLKIT/MVC) and so you can take a look at the code containing the examples:
By the way a successful subject...
OBJECT-ORIENTED DESIGN AND PROGRAMMING (JAVA) OPTIONAL
Bit of things I can tell you at the moment. I have done a previous reading of the notes and it develops the treatment of object-oriented programming in detail. The first modules seem very theoretical regarding the understanding of why to work with OOP.
It makes me very funny to see how it will function since it is based on JAVA and I have never done anything with this language. I will tell you more in a new post. Few days left to start it!
I hope I haven't been a "toston"! And that you continue reading future posts! See you soon! :)