Web & Mobile Development JLW288

00.intro

Slidedeck?!

(press the down key)

Wait? What? This is it?!

  • Yes, it's called a slide deck.
  • Built with HTML/CSS/JS
  • Powered by (a customized) Reveal.js
  • Main navigation: left/right
  • Sub-slides: up/down (try it now!)
  • Touch Device users: Swiping supported!

Lost?

  • Compass (Bottom-Right)
  • Slide Number (Bottom-Right)
  • Progress Bar (Bottom)
  • Slide Overview (space)
  • Back to index link (Top-Left)

Code Examples

  • This slidedeck is filled with interactive examples
  • Syntax Highlighted + Editable
  • Numeric values can be adjusted with the ↑ & ↓ keys
  • Give it a try! 
body {
	font-size: 1em;
	padding: 20px;
	color: lime;
}

Code Examples: CSS

  • Some CSS Snippets are linked to elements ... 
    color: red;
  • ... or to the current slide 
    font-size: 100%;
  • And oh, CSS Snippets don't need vendor prefixes 
    box-shadow: 0px 0px 10px #888;

Code Examples: JS

  • JavaScript blocks can even be run!
  • Use “Run” button, or hit CTRL+ENTER
// A comment
alert('OK GO!');
  • Note
    • Most JavaScript examples will use console.log() — Firebug (or the like) required!

Code Examples: HTML

  • HTML blocks can be rendered into an overlay
  • Use “Show in overlay” button, or hit CTRL+ENTER
  • Click the dark overlay background to close it
<h2>This is how you mark up an unordered list</h2>
<ul>
	<li>Coffee</li>
	<li>Tea</li>
	<li>Milk</li>
</ul>

Code Examples: HTML & PHP

  • HTML & PHP examples can be linked to a working example.
    • The example can be rendered into the overlay
    • The example can be linked into a new window/tab
  • Use “Show in script overlay” button, or hit CTRL+ENTER
  • Click the dark overlay background to close it
<?php
	echo 'Hello world! The time is now ' . date('Y-m-d H:i:s', time());
?>
Note: PHP code examples aren't editable Beware: PHP code examples don't run on GitHub!

Printing?

  • Don't
    • These are interactive slides
    • They will be updated regularly
    • You can't copy paste from paper
  • If you really want: you can
    • Only supported in Firefox and IE though

Web & Mobile Development

Back on track ...

Instructors

Timing

  • One semester = 13 weeks
    • Note: Week 13 = polyweek
  • Weekly hands-on labs
    • Theoretical background + practice throughout timeslot

Prerequisites (1)

  • Webtechnieken1
    • XHTML
      • Correct use of elements
      • Propper syntax / validation
    • CSS
      • Text styling & Backgrounds
      • Box Model
      • Positioning with float/absolute/relative/fixed
    • Basic Javascript
      • Variables & Functions
      • Unobtrusive
      • Formchecking
    • Firebug (or the like) — video
      • Seriously, without this you can't be a webdeveloper.

Prerequisites (2)

  • Webtechnieken2
    • Client-Server
      • GET/POST
    • PHP Basics
      • Syntax
      • Forms
      • Files & Folders
      • Persistency
    • PHP Intermediate
      • Code Organisation and Classes
      • Templates
      • Database Connectivity (MySQL)

Prerequisites (2)

  • Webtechnieken3
    • PHP Intermediate
      • Code Libraries (Plonk)
      • Object Oriented Websites
    • Use Cases, Wireframes & Storyboarding
      • Flow!
    • New techniques
      • HTML5
      • CSS3
      • New JS
        • Drag and Drop, Geolocation, Notifications, ...

Prerequisites (2)

  • Gegevensbanken
    • Structured Query Language
      • Basic CRUD Actions (INSERT, SELECT, UPDATE, DELETE)
      • Subqueries & Joins (left, right, inner)
      • Calculations (numbers, dates, etc.)
      • Optimization (EXPLAIN ...)
    • Basic Administration
      • Import & Export
      • User Management

Course Subjects (1)

  • Advanced Javascript
  • Javascript Libraries and jQuery Basics
  • jQuery Intermediate
    • jQuery Plugins & Performance/Optimization
    • Ajax & JSON
  • RESTful APIs
  • Responsive Webdesign
  • Mobile Apps

Course Subjects (2)

What about mobile apps?
  • Alas, no time this year
  • But things will change next year
    • Exit Javascript
      • Moves forward to Webscripting1 & Webscripting2 (*)
    • Enter Mobile Development
      • iOS, Android, etc.
(*) Other name changes: Webtechnieken2 → Webscripting1; Webtechnieken3 → Webscripting2

Technology

  • Technology
  • Wampserver (Win) or MAMP (Pro) (OS X) recommended
    • Follow these instructions to configure your install
    • Be sure to add the PHP binary to your system's PATH
      • Windows: Add C:\wamp\bin\php\version\ to PATH via Computer Settings
      • OS X: Paste this on the Terminal: echo 'export PATH=/Applications/MAMP/bin/php/phpversion/bin/:$PATH' >> ~/.bash_profile

Development

  • A PHP specific IDE
    • Netbeans
    • Aptana Studio
    • PHPStorm
    • Zend Studio
  • Your favorite text editor with these features (why?)
    • Syntax Highlighting
    • Autocompletion
    • PHPDoc Integration
    • On-the-fly syntax check

Course Materials, Assignments & Announcements

  • Everything distributed via Toledo
    • Check it regularly!
  • Course Materials
    • Available on GitHub
    • Feel free to fork and commit improvements/additions
  • Assignments
    • Several tasks grouped into one big assignment
    • To be completed by the end of the week (Sunday, 8PM)

Cloning the Course Materials

  • Download and install Git
    • Choose “Run Git from the Windows Command Prompt” during install
  • Clone the repository 
    cd c:\wamp\www
git clone https://github.com/bramus/ria-course-materials.git
  • Update the repository regularly to get the latest version 
    cd c:\wamp\www\ria-course-materials
git reset --hard
git pull
Note: This is an example on Windows using Wampserver

Evaluation

  • Permanent: 30%
    • Progress, Accuracy, Attitude, Programming Style, ...
  • Project #1: 30%
    • Deadline some time before the Easter holiday
  • Project #2: 40%
    • End Term Project
    • Free to choose what to do (proposal must get approved by us)
    • Deadline at the end of the semester
    • Presentation/Demonstration/Evaluation at the end of the semester
    • More details later ... :)

When stuck ...

Help yourself ...

  • Breathe in, breathe out, and THINK!
    • Error visible? Read it!
      • PHP will tell you what went wrong in which file and on what line
    • Correct URL? Correct variable? Does the variable contain anything?
      • Debugsession
      • use Plonk::dump(); (PHP) or console.log() (JS)
    • TIP: Rubber Duck Debugging
  • Use the built-in help
    • Syntax Highlighting
    • Function autocompletion
    • Function documentation (PHPDoc)

... or get helped

  • Keep the 10 minute thinking rule in mind!
    You may only interrupt another co-worker to ask a question if you have sat on your own for ten minutes and tried to figure out the solution yourself. When asked, you must be able to demonstrate that you’ve made some effort.
  • Ask a colleague or post a question on ICT-Blue
    • Mail a link to the topic on ICT-Blue to your instructor

Domestic Conventions

Domestic Conventions
(Huishoudelijk Reglement)

  • Do apply
  • Can be found on Toledo
  • Rules/Conventions about
    • Plagiarism
    • Deadlines and Uploads
    • Absences
    • Code Style and Code Layout

Questions?

ikdoeict.be