MI1004 Script programming and internet applications
Course content and details Learn > Course information > Course plan Learning goals, grades and content on a brief level Learn > Course material Study guide content, course literature and planning on a detailed level Presentations, docs, various links and good resources. Most is available for free on the internet Learn > Tasks Labs and examination Languages and some technologies we will use/learn HTML, CSS, JavaScript, PHP, Python, SQL, MySQL, SQLite, JSON,. Questions?
2004 whatwg.org 2007 XHTML 2 XHTML 2 shutdown. CSS 3 HTML 5.0 standard oct. 2014 HTML 5.2 standard dec. 2017
The future of the web is HTML5 Historically we have used some of these tools to achive rich content on the web Adobe Flash (dropped 2020?) Microsoft Silverlight (dropped) Oracle JavaFX (?) Microsoft Edge and Windows 10 have good HTML5 support Metro UI browser variants are using HTML5 You can create both desktop and UI apps for Windows 10 in addition to web sites/apps This includes rich content mobile (hybrid) web applications
Windows 10 and HTML5 XAML (Extensible Application Markup Language) is a declarative markup language which defines the view/design of an application As applied to the.net Framework programming model, XAML simplifies creating a UI for a.net Framework applications together with Windows Presentation Foundation (WPF) WinRT An object oriented replacement for Win32
Your first web page A simple example of a HTML web page and the result <!doctype html> <html> <head> <title>my first web page</title> </head> <body> This is my first web page. <br /> <b><i>this text is in bold italic!</i></b> </body> </html>
HTML 4.x vs. HTML 5.x HTML5 is a superset of HTML 4.01 (which means most of HTML4 is still supported in HTML5) Step 1 doctype ( old doctype below is an example, several exist) Old: <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/tr/html4/strict.dtd"> New: (which never is going to change): <!doctype html> Step 2 content meta tag in <head> element Old: <meta http-equiv="content-type" content="text/html; charset=utf-8"> New: <meta charset="utf-8"> (utf-8 is the standard or use "iso-8859-1") Step 3 link tag in <head> element Old: <link type="text/css" rel="stylesheet" href="lounge.css"> New: <link rel="stylesheet" href="lounge.css"> Step 4 script tag (JavaScript is the standard) Old: <script type="text/javascript" src="my-file.js"></script> New: <script src="my-file.js"></script> <script> var yourock = true; For inline script code (within the HTML </script> file itself, for example inside the body tag)
HTML4.x vs. HTML5 Save the html-file with the given character encoding/charset in your editor! In order to get rid of special: å = å ä = ä ö = ö The rel="stylesheet "attribute specifies the relationship between the current document and the linked document <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/tr/html4/strict.dtd"> <html> <head> <title>mi1004</title> <meta http-equiv="content-type" content="text/html; charset=utf-8"> <link type="text/css" rel="stylesheet" href="lounge.css"> <script type="text/javascript" src="lounge.js"></script> </head> <body> <h1>welcome to MI1004!</h1> <p> <img src="drinks.jpg" alt="drinks"> </p> <p> Join us any evening for refreshing <a href="elixirs.html">elixirs</a>, conversation and maybe a game or two of Tap Tap Revolution. Wireless access is always provided; BYOWS (Bring Your Own Web Server). </p> <script>hello();</script> </body> </html> <!doctype html> <html> <head> <title>mi1004</title> <meta charset="utf-8"> <link rel="stylesheet" href="lounge.css"> <script src="lounge.js"></script> </head> <body> <h1>welcome to MI1004!</h1> <p> <img src="drinks.jpg" alt="drinks"> </p> <p> Join us any evening for refreshing <a href="elixirs.html">elixirs</a>, conversation and maybe a game or two of Tap Tap Revolution. Wireless access is always provided; BYOWS (Bring Your Own Web Server). </p> <script>hello();</script> </body> </html>
Result // lounge.js content function hello() { document.write("hello World!"); } // lounge.css content h1 { color: blue; }
PHP and Python Example form (.html file) with server side (.php and.py) script files <html><body> <form method="post" action="pythonhello.py"> <!-- action="pythonhello.py" or action="phphello.php" --> <label>first Name: </label> <input type="text" name="first_name" size="40" /> <br /> <label>last Name: </label> <input type="text" name="last_name" size="40" /> <br /> <label>send: </label> <input type="submit" value="submit" /> </form> </body></html> <?php #!"\dev\python36\python.exe" # Get data from fields # Import modules for CGI handling if(isset($_post["first_name"])) import cgi, cgitb $fname = $_POST["first_name"]; # Create instance of FieldStorage form = cgi.fieldstorage() else $fname = ''; if(isset($_post["last_name"])) # Get data from fields first_name = form.getvalue('first_name') $sname = $_POST["last_name"]; last_name = form.getvalue('last_name') $sname = ''; print("content-type: text/html;charset=utf-8;\r\n") else $person = $fname. " ". $sname; print() print "<html><body>"; print("<html><body>") print "Hello ". $person. ", how are you today?"; print("<h2>hello %s %s</h2>" % (first_name, last_name)) print "</body></html>"; print("</body></html>")?>
Artifical Intelligence (AI) At end of course perhaps be able to use something quite useful? Perform some image classification
Transfer Learning By changing the very last part in the CNN (Convolutional Neural Network), but continue to use the major first part, one can classify new images with very good accuracy https://www.tensorflow.org/ https://playground.tensorflow.org/ https://www.svtplay.se/video/19065271/ vetenskapens-varld/vetenskapens-varldde-smarta-maskinernas-tid http://users.du.se/~hjo/cs/common/video/