• IPW – C2 • Quick and inexpensive.

• Prototyping • Possible to make instant

• Prototype changes and test new
• A prototype can be anything iterations.
that takes a physical form—a • Disposable/throw-away.
wall of post-its, a role-playing • Enables the designer to
activity, an object. gain an overall view of the
• In early stages, keep prototypes product using minimal
inexpensive and low resolution time and effort,
to learn quickly and explore • No advanced technical
possibilities. skills required
• Prototypes are most successful • Encourages and fosters
when people (the design team, design thinking.
users, and others) can
experience and interact with • Cons
them. • lack of realism. basic and
• great way to start a sometimes sketchy nature
conversation. =>the applicability of
• interactions with prototypes results may lack validity.
drives deeper empathy and • Depending on your
shapes successful solution product, the production of
low-fi prototypes may not
• Low fidelity prototyping be appropriate for your
• use basic models or examples intended users.
• Just some features • Such prototypes often
• Methods remove control from the
• Storyboarding. user, as they generally
• Sketching have to interact in basic
• Card sorting. ways or simply inform an
• 'Wizard of Oz'. evaluator, demonstrate or
write a blow-by-blow
• Sketching a paper prototype account of how they
• Storyboard prototype would use the finished
• Low fidelity prototyping product.
• Pros
• High fidelity prototyping design team will have in
• look and operate closer to the how people will respond
finished product to, interact with and
• For example, a 3D plastic model perceive the design.
with movable parts (allowing • Cons
users to manipulate and interact • They generally take much
with a device in the same longer to produce than
manner as the final design) is low-fi prototypes.
high-fi in comparison to, say, a • When testing prototypes,
wooden block. test users are more
• Likewise, an early version of a inclined to focus and
software system developed comment on superficial
using a design program such as characteristics, as
Sketch or Adobe Illustrator is opposed to the content
high-fi in comparison to a paper • After devoting hours and
prototype. hours of time producing
an accurate model of how
• High fidelity prototyping a product will appear and
• Pros behave, designers are
• Engaging: the often loathed to make
stakeholders can instantly changes.
see their vision realised • Software prototypes may
and will be able to judge give test users a false
how well it meets their impression of how good
expectations, wants and the finished article may
needs. be.
• User testing involving • Making changes to
high-fi prototypes will prototypes can take a long
allow the evaluators to time
gather information with a • High fidelity prototyping with
high level of validity and Adobe XD
applicability. The closer • Prototyping tool with large
the prototype is to the number of resources available
finished product, the • Used for web or mobile
more confidence the applications
• Choose the right UI kit and just • A web application must function
assemble elements together and it must be usable
• Create interactions between the • There are a lot of books on the
pages subject - we only have time to
• Emulate the workflow present some best practices
• Navigation on the web site
• Start with a UI Kit • Search + Browsing
• Classify the content
• Working with kits • The user must know where he is
• Choose a component inside the web site
• Add it to your page • The user mus know how he
• Customize it arrived in the page
• Define links in prototype mode • Navigation in the content and in
the options of the site
• Test the prototype • Conventions used for navigation
• Test
• chance to gather feedback, • Home page
refine solutions, and continue to • Logo + tag line
learn about your users. • Sections/classification
• The test mode is an iterative • Search
mode in which you place low- • Teasing
resolution prototypes in the • Dynamic content
appropriate context of your • [publicite]
user’s life. • Shortcuts to the most visited
• Prototype as if you know you’re pages
right, but test as if you know • [sign-up]
you’re wrong • Home page objectives
• Show what the user is looking
for
• Usability • Offer alternatives (something
• Usability is the study of the ease more than the user is looking
with which people can employ a for)
particular tool or other human- • Show how to begin and use the
made object in order to achieve web site
a particular goal. • Show credibility and trust
 • CSS usage
• The style information can be
attached in the HTML page
• What elements can you to each element
identify? • => problems in maintaining
the page
• => problems in large sites
containing many pages
• Much easier if the style for
all the elements is stored
separately – modifications
made in 1 place are spread
to all the pages
automatically
• Cascading Style Sheets • Example
• https://
• Plan of the course www.w3schools.com/css/
• What is CSS demo_default.htm
• CSS levels • CSS levels
• Including CSS in HTML files • Style information can be
• CSS syntax defined at multiple levels
• Colours in HTML • Browser level – the default
• Examples style of the browser
– The way the page is
• CSS displayed if no style
• CSS = Cascading Style- information is present
Sheets
• Style = how the HTML tags • CSS Browser level example
are displayed
• Style-sheets = documents • CSS levels
where the style information • External document level –
is stored – usually external the style is specified in an
documents external .css file.
• Cascading = there are • The file is included in the
multiple levels on which we html document by using the
can define the style of a link element
page
• <link rel="stylesheet" • <h1 style="color: black;" >
type="text/css" Introduction dans la
href=“style.css" /> programmation web</h1>

• CSS External Document

Level • CSS Element Style Level
• h1 { color: blue;} • <h1 style="color: black;" >
Introduction dans la
• CSS levels programmation web</h1>
• Internal style sheet (inside • CSS Levels - Conclusion
the <head> tag) • Browser level
– Define the style-sheet – Not reliable (dependant
inside the html page on browser)
– Style specified inside a • External document level
style element – The one we’ll be using
• Example: • Internal style sheet (inside
• <style type="text/css"> h1 the head tag)
{color: yellow} </style> – Should not be used
• CSS Internal Style Sheet • Element style level
Level – Should NEVER be
<head> used
<title>le titre du • CSS Syntax
document</title> • Syntax contains triples:
<link rel="stylesheet" – Selector – on what
type="text/css" element(s) we’re
href="style.css" /> applying the style
<style type="text/css"> h1 – Property – which is the
{color: yellow} </style> property that we
</head> change
• CSS Levels – Value – the modified
• Element level – the style is value
specified inside the element • CSS syntax – selector types
– NOT • A selector can be
RECOMMENDED!!! – the name of an html
• Example element (h1)
• The style defined
applies for all
 elements of that value between 0-
type 255 (FF in hexa)
– The name of an #34AB23
element “.”the name of RRGGBB
the style class • The total number
• H1.blue{color:blue; of colours that can
} be expressed like
• The class is used this is around 16
inside the html million
element as an • A colour value is
attribute formed like
– <h1 #RRGGBB where
class=“blue” RR=the hexa
> value for red,
– The id of an element GG=hexa value
• #id5 {color:blue;} for green…
• In the html the – rgba(Red, green, blue,
element must alpha)
have the id
defined
– <h1 id=“id5”> • Colours in html examples
• Black #000000
• Colours in html/css • White #FFFFFF
• Colours are identified • Red #FF0000
through • Green #00FF00
– Names (blue, red, • Blue #0000FF
green,…) • Yellow #FFFF00
• This is possible for • CSS Examples
a very small • body { background-image:
number of colours url('bgdesert.jpg') }
– Values • body { background-color:
• A colour is #FFFF00; }
represented as a • Background properties
triplet of RGB • background-color
values • background-image:
• Each value in the url(‘name of file’)
triplet can take a
• background-repeat: padding + left border + right
https://www.w3schools.com/ border + left margin + right
cssref/pr_background- margin
repeat.asp • Total element height =
• background-attachment – if height + top padding +
the image is fixed or moves bottom padding + top border
with the page + bottom border + top
• background-position – margin + bottom margin
where the image is
displayed

• Border • CSS text properties

• style (dotted, dashed, solid, • text color- “color”
double, groove, ridge, inset, • alignment - text-align:
outset, none, hidden) center/right/justify/left
• width • decoration: text-decoration:
• color none/overline/line-through/u
• border-x-style where x can nderline
be top, right, left, bottom • transformation: text-
transform:
• border: width style color uppercase/lowercase/capita
lize
• Margin and padding
• margin=distance between
the current element and its • Styling lists
neighbours • list-style-type:
• padding = distance between http://www.w3schools.com/c
the border element and its ssref/pr_list-style-type.asp
content • adding an image as a bullet:
list-style-image: url(‘the
address of the image’)

• image from w3schools.com • CSS Tables Example

• Box Model table, td, th
• Total element width = width {
+ left padding + right border:1px solid green;
//border-collapse:collapse; • PHP
}
th • PHP
{ • PHP Hypertext Preprocessor
background-color:green; • (personal homepage)
color:white; • scripting language (is executed
} by a web server)
• CSS HowTO
• used to generate HTML pages
• There are a lot of CSS
that will be delivered to the
values and attributes to set
the style browser
• Difficult to know them all • http://php.net/manual/en/ -
• Need to use a internet probably the best
reference like documentation of all
– http:// programming languages
www.w3schools.com/ • PHP execution steps
css/css_reference.asp • Server side vs. client side
• Need to understand the • Javascript=client-side scripting.
mechanisms of CSS – script is executed by the
• Use the reference to browser
discover more hidden html – changes the existing html
design features! page
• Conclusions • PHP = server-side scripting
• CSS = the way to modify – script is executed by the
the style of a html page web server
• 4 levels of priority - use as
– used to generate the
much as possible external
html page that is sent to
stylesheets
• Remember that style and the browser
semantics are different • helloworld.php
things for an HTML page
• how to run it
• install wamp –
http://wampserver.com
• how to run it
• how to run it
• load the file in a browser
 • “loosely typed” – the type of a
variable can change during the
• notice the address: execution
http://localhost/helloworld.ph • variable names begin with $
p – $a=5;
• PHP Syntax – $x=“hello world”;
• similar with C/Java • the type of a variable is not
• statements end with usually set by the
semicolon: programmer; rather, it is
– echo “hello world” ; decided at runtime by PHP
• scripts are enclosed by tags: depending on the context in
– <?php …. ?> which that variable is used
• comments: • types in php
– //this is a comment • boolean – true or false (false,
– /* this is a multiple line 0, 0.0,”0”,””,NULL,[])
comment */ • integer
– #this is also a single line • float (floating-point number,
comment aka double)
• PHP & HTML • string
• everything outside <?php … ?> • array
is not interpreted as PHP and • object
it outputted directly • callable
• you can also always print with • iterable
<?= “some string” which • resource
outputs a string • NULL

• conditional parsing • howto debug variable types

• if a condition occurs some • var_dump - displays the type
html code is displayed, and value of an expression
otherwise another is used • gettype – offers human-
• Variables readable representation of a
• a variable can contain any type type
of data • it is possible to cast a variable
• they are not declared to a specific type using settype
• Data types
• boolean • heredoc expands variables,
– $v=True; nowdoc doesn’t
– any non-zero value is • in nowdoc the starting
considered to be true identifier is enclosed in single
– false are considered to quotes: ‘Identifier’
be: • Data types
• False, 0, “0”, 0.0, • arrays
NULL, unset – maps containing key and
variables, [] value:
• numbers: – $array=[“key1”=>
– $x=5;$x=-1; “value1”,
– hexadecimal: $x=0xFF; “key2”=>”value2”];
– binary: $x=0b101; – keys can be integers or
strings
• Data types – access values with
• floating point: $x=1.5; $array[“key1”] or
• strings: $array{“key1”}
– single quoted $x=‘hello – removing values
world’; unset($array[“key1”]);
– double quoted $x=“hello • objects – next week
world”; • global and local variables
– variables contained in • global variables are not
double quoted strings are accessible by default in
parsed: functions:
• Heredoc and nowdoc – $x=1;
• alternative syntax for strings – function testGlobals()
• string is built using { echo $x;}
<<<Identifier – testGlobals();
the string content which can span – //doesn’t print anything
on multiple lines as $x is not visible
Identifier • check if a variable exists
• the closing identifier MUST be • if a variable is not explicitly
the starting and only text on declared how we can check if
the end line it has been used?
• isset($variable) returns true if • include ‘vars.php’
the variable exists and its • the file included inherits the
value is not null: variable scope of the line
• $x=1; where the include occurs
• echo isset($x); //1 • can include files from the web
• echo isset($y); //doesn’t print or from the local filesystem
anything as isset returns false; • require – behaves as include. If
• operators the file is not found the
• arithmetic/bitwise/ execution of the script is
comparison/incrementation/ halted
decrementation/logical – as in • include_once/require_once –
C/Java behave just like include but
• string operators don’t allow a specific file to be
– concatenation: included more than once
$a=“Hello”. “ world”; • include example
– concatenation+assignme • functions
nt: $a=“Hello”; $a.=“ • more similar to javascript
world”; function sum($a,$b)
• operators {
• array operators return $a+$b;
• control structures }
• if/else/for/while/do…while/ • don’t specify the return type
break/continue: just like in C and the type of parameters
• foreach – used to iterate
through arrays • functions
– foreach ($array as $value) • can have optional parameters
• statement function test($val=“world”)
– foreach ($array as {
$key=>$value) echo “Hello “.$val;
• statement }
• control structures test();
• foreach examples //Hello world
• include/require test(“Vlad”);
• include – includes a file and //Hello Vlad
evaluates it
 IP address or name
of the server
o ‘HTTP_REFERER',
'HTTP_USER_AGEN
T',
'HTTP_ACCEPT_LA
NGUAGE' - some of
the HTTP headers
sent by the browser
o some info can be
missing depending
on the server or on
PHP the request
Predefined variables
• Predefined variables - are
available in all scripts
• contain info about $_GET/$_POST
o environment • contain the variables sent
o request through the GET/POST
o user sent variables request
o files • http://localhost/index.php?
o working session var=5
$_SERVER • echo $_GET[‘var’] =>5
• $_SERVER - offers info • the variable names are
about the server, the taken from the names of
request, the headers of the the inputs in the html
request forms
• associative array $_GET
• $_SERVER[name] $_GET
$_GET
$_SERVER $_POST
• $_SERVER[name] where $_POST
name can be Cookie
o 'SERVER_ADDR' or • is a small piece of data
'SERVER_NAME' - sent from a website and
stored in a user's web
 browser while the user is $_COOKIE
browsing that website.
Every time the user loads $_SESSION
the website, the browser • contains the session
sends the cookie back to variables
the server to notify the • what is the session?
website of the user's o HTTP protocol
previous activity. Cookies stateless
were designed to be a o => requests are not
reliable mechanism for related
websites to remember o we need to
stateful information (such “remember” the
as items in a shopping things that remain
cart) or to record the user's the same during
browsing activity (including multiple requests
clicking particular buttons, o this is done through
logging in, or recording session management
which pages were visited o the information need
by the user as far back as to be maintained
months or years ago). during multiple
(wikipedia) requests are kept in
$_SESSION
$_COOKIE $_SESSION
• contains the array of • session_start()
cookies available o creates a session or
• bool setcookie ( string resumes the current
$name [, string $value [, one based on a
int $expire = 0 [, string session identifier
$path [, string $domain [, passed via a GET or
bool $secure = false [, bool POST request, or
$httponly = false ]]]]]] ) passed via a cookie.
• http://www.php.net/ o must be called before
manual/en/ anything is outputted
function.setcookie.php to the browser

$_COOKIE $_SESSION
$_SESSION
classes & objects $product-
>description=$_POST['prod
accessing properties& uctDescription'];
methods $id=R::store($product);
$objectName- find and print objects
>propertyName; $products=R::findall("product"
$objectName- );
>methodName(); <?php
ClassName::staticFunction() foreach ($products as $p){
ClassName::constantValue; ?>
$objectName::constantValue; <tr>
:: can be used to access <td><?=$p->name ?></td>
protected values <td><?=$p->price ?></td>
Php ORM <td><?=$p->description ?
ORM= object relational ></td>
mapping </tr>
allows you to work with <?php } ?>
databases using object-
oriented code
example with:
https://redbeanphp.com/
using redbean
require 'rb-mysql.php';
R::setup( 'mysql:host=localho • Client-side Scripting
st;dbname=dbname', Languages
‘user', ‘pass' ); • Introduction to Javascript
add object to database • Plan of the course
$product=R::dispense("produ • Javascript – Why, When,
ct"); What
$product- • How to include Javascript in
>name=$_POST['productNa HTML
me']; • Javascript syntax
$product- • Document Object Model
>price=$_POST['productPri • Examples
ce'];
• Javascript – Why, When,
What
• At first we had only simple • If the script is included in
text + links + images pages the body page
• “live” pages were required – The script is executed
by the market when the markup is
• Netscape invented found
“LiveScript” in 1995 • Javascript Syntax
• Later renamed to Javascript • Very similar with C & Java
• Javascript – run on • No types for variables
browsers, access – Declare variables using
dynamically to the html the term let
page – let x=5, y=7;
• The language was (is) • Functions are declared
interpreted usually in using the function keyword
different way by the – function sum(x,y)
browsers – { let rez=x+y; return
• Include Javascript into rez;}
HTML • Calling functions is the
• script included in the html same as in C/Java
page – let suma=sum(2,5);
– <script • Javascript objects
type=”text/javascript”> • Objects have
– //cod script – methods (functions)
– </script> – Properties
• Script included in an • Example
external file – let student={nume:
– <script "ion", an:2, note:
src=”fisier_sursa.js”></ {mate:9, pc:8}};
script> – alert(student.nume
+"<br>" );
• When does the code run – alert(student.an
• If the script tag is included +"<br>");
in the <head> tag – let nota
– The script is executed – let student={nume:
when the page is "ion", an:2, note:
loaded – before {mate:9, pc:8}};
actually rendering it • Javascript predefined
objects
• Math //!!! length is a property and not
– http:// a method
www.w3schools.com/ alert(y.substr(0,5));
jsref/ //compute and display as an
jsref_obj_math.asp alert the substring of y
• String between the first and the 5th
– http:// character
www.w3schools.com/ alert(x+" "+y.length+“
jsref/ “+y.substr(5,y.length));
jsref_obj_string.asp //display as an alert the string
• Array formed by x, length of y and
– http:// the substring formed from
www.w3schools.com/ the 5th character of y until
jsref/ the last one
jsref_obj_array.asp }
• Date </script>
– http://
www.w3schools.com/ • Javascript example -
jsref/jsref_obj_date.asp followup
• Examples • String concatenation
<script type="text/javascript"> operator “+”
function printValue() • The alert is used for
//declare a function displaying information
{ during development. NOT to
let x=Math.random()*10; be used in applications
//compute the value of x as • Objects can have methods
a random value between 0 like y.substr(0,5) and
and 10 properties like y.length
alert(x); //display an alert • All types of variables are
containing the value of x declared using var
var y="a random text";
//create a variable of type • Events
string • HTML elements can detect
alert(y.length); //display an when the user interacts with
alert containing the length of them
y • Examples of interactions
 – Mouse over (mouse – Html elements
out) – Text
– Click • The tree elements can be
– Key pressed accessed
– Blur – By traversing the tree
– change (See Data structures
• We can add javascript code course)
to handle every interaction – By accessing them
directly by name
• Events examples (getElementsByTagNa
<script type=“text/javascript”> me)
function youClicked(element) – By accessing them
{this.innerHTML="you clicked directly by id
this element";} (getElementById)
function youMousedOver() – Addressing them
directly (as in an array)
{alert("mouse over detected"); • The root of the DOM tree is
} the document
</script>
<h1 • Methods and properties
onclick="alert('youclicked');y • document.write(“text”)
ouClicked(this);" – Adds the “text” to the
onmouseover="youMoused given page
Over()"> Introduction dans – If the page is finished
la programmation web</h1> loading it rewrites it
– Example
• Javascript Events <script
• Why we need and what is type="text/javascript">
the “this” pointer function printValue()
• DOM {
• DOM=Document Object let
Model x=Math.random()*
• DOM = a way to access the 10;
elements of a HTML page alert(x);
• DOM let y="a random text";
• The DOM tree contains alert(y.length);
nodes which can be alert(y.substr(0,5));
 alert(x+" – The most used method
"+y.length+"!!!"+y.s to access an element
ubstr(5,y.length)); of a html page
document.write(x+" – We have to be careful
"+y.length+"!!!"+ to set ids for the
y.substr(5,y.lengt elements
h)); function modifyFirstH1()
} {
</script> //retrieve the element with
• DOM Methods and the id h1id1
properties let
• getElementsByTagName h1Element=document.
– Returns an array of getElementById("h1id1
elements with a given ");
name //set the HTML value for
– The we need to know the document
the position of the h1Element.innerHTML="n
element we need to ew title";
modify inside the array }
function • DOM objects methods and
modifySecondH1() properties
{ • Direct access to the
let element
headersArray=docume • Predefined collections
nt.getElementsByTagN – Forms
ame("h1"); //retrieves – Links
all the elements whose – Images
names are h1 • document.forms[0].usernam
//elements’ numbering in e.value – accesses the first
the array starts at 0 form in the document and
sets the value property for
headersArray[1].innerH the username input
TML=Math.random()*5; • Example – using javascript
} to validate forms
• DOM Methods and • When a form is submitted
properties we need to validate it first
• document.getElementById on the client-side
• The form should be {alert("please make sure the
validated before submitting username is longer than 4
• The event should be added letters");return; }
to the submit button document.forms[0].submit();
• For example we want to }
check if 2 passwords have • Example of form validation
the same value and if the with Javascript (II)
username is longer than 4
characters <form action="script.php"
• Validate forms with method="POST">
Javascript – example (I) nom d'utilisateur<input
function validateForm(){ type="text"
let id="username" /><br/>
usernameElement=docume mot de passe<input
nt.getElementById("userna type="password"
me"); id="password" /> <br/>
let mot de passe encore une
passwordElement=docume fois <input id="repassword"
nt.getElementById("passwor type="password"> <br/>
d"); <input type="button"
let value="send"
rePasswordElement=docum onclick="validateForm();"/>
ent.getElementById("repass </form>
word"); • Javascript debugging
if(passwordElement.value! • developer console in all
=rePasswordElement.value major browsers
|| • Javascript debugging
passwordElement.value.len example
gth==0)
{alert("please make sure the
password is entered the
same twice");return;}

if
(usernameElement.value.le
ngth<4)
 • arrow function
• standard definition of functions
• let sum = function(a, b)
{ return a +b;}
• arrow functions
• let sum = (a, b) => a+b
• arrow functions can be used in
the following ways
• forEach
• https://developer.mozilla.org/
en-US/docs/Web/JavaScript/
Reference/Global_Objects/
Array/forEach
• JS • The forEach() method is
an iterative method. It calls a
• template literals provided callbackFn function
• a way to add variables in strings once for each element in an
• strings delimited by the backtick array in ascending-index order.
`
• let firstName = "John"; • foreach with arrow function
let lastName = "Doe";
• fetch/promise
let text = `Welcome $ • fetch – makes a request to a
{firstName}, $ web server
{lastName}!`;
• fetch(file)
.then(x => x.text())
.then(y => f(y))
• callback
• a function is sent as a • promise
parameter to another function • fetch uses the concept of
• similar with pointers to promise
functions in C/C++
• producing code – code that can promise q, p will adopt the
take time state of q.
• consuming code – code that • dom functions – createElement
uses the result of the producing • createElement – creates a DOM
code element
• promise is an object that links
producing code and consuming • dom functions - appendChild
code • adds a new node to an existing
element

• example – updating a page

• then using json and fetch
• https://developer.mozilla.org/ • php script loads data from the
en-US/docs/Web/JavaScript/ database and generates a json
Reference/Global_Objects/ file
Promise/then • js page loads the json using
• The then() method fetch
of Promise instances takes up to • iterates through the object and
two arguments: callback creates dynamically dom
functions for the fulfilled and objects
rejected cases of the Promise. It • adds the created element to the
immediately returns an
page
equivalent Promise object,
• the php script
allowing you to chain calls to
other promise methods.
• promise chaining • resulting json file
• Promise chaining is one of
• create a container
the key reasons why <div id="table-container">
promises are so useful. <input type="button" value =
The then() function returns a "load" onclick="load()">
promise p, and if </div>
your onFulfilled() function
- load calls the function to fill the
returns a
container
- mechanism can also be used for const row =
pagination purposes document.createElement('tr');
row.innerHTML = `
• fetch the data <td>${quantity.id}</td>
function load() <td>${quantity.name}</td>
{ <td>${quantity.symbol}</td>
// Fetch the JSON data from the <td>${quantity.description}</td>
PHP script <td>${quantity.unit}</td>
fetch('qty.php') <td>${quantity.formula}</td>
.then(response => response.json()) `;
.then(data => { tbody.appendChild(row);
});
• create the table table.appendChild(tbody);
// Create the table header
const table = • add the table to the container
document.createElement('table'); const tableContainer =
const thead = document.getElementById('table-
document.createElement('thead'); container');
const headerRow = tableContainer.appendChild(table);
document.createElement('tr'); })
headerRow.innerHTML = `
<th>ID</th> • and catch eventual errors
<th>Name</th> .catch(error => {
<th>Symbol</th> console.error('Error:', error);
<th>Description</th> });
<th>Unit</th> }
<th>Formula</th>
`;
thead.appendChild(headerRow);
table.appendChild(thead);

// Create the table body

const tbody =
document.createElement('tbody');

• fill the table

data.forEach(quantity => {