Overcoming code fear <ul><ul><li>An introduction to programming for designers </li></ul></ul>
Unintelligible - Yuk <ul><li>^[A-Z0-9._%+-]+@[A-Z0-9.-]+.[A-Z]{2,4}$   </li></ul>
But not all code is squiggles! <ul><li>SUBTRACT Tax FROM GrossPay GIVING NetPay   </li></ul>
So what is a script? <ul><li>A script for a play defines a cast and gives them instruction to produce the desired result, ...
Languages <ul><li>BASIC, C++, Java, JavaScript, Lisp, SQL, PHP, Perl, Python, Ruby  </li></ul><ul><li>Why is HTML not cons...
A standard HTTP request Request hello.HTML Browser Server hello.HTML <h1>Hello</h1> goodbye.HTML <h1>Hello</h1>
A standard HTTP request Response Browser Server hello..HTML <h1>Hello</h1> goodbye.HTML <h1>Bye</h1> <h1>Hello</h1>
A standard HTTP request Hello
A CGI Request Request hello. PHP Browser Server hello.PHP Echo “Hello”; goodbye.PHP Echo “Goodbye”;
A CGI Request Response hello.PHP Echo “Hello”; Browser Server goodbye.PHP Echo “Goodbye”; <h1>Hello</h1>
A CGI Request hello.PHP <?php echo “ <h1>Hello</h1> ”; ?>
A CGI Request Hello
Server Side vs Client Side Javascript Java Flash PHP Java ASP Client Server HTTP
Sequences <ul><li>echo “<p>Hello</p>” ;   </li></ul><ul><li>echo “<p>Goodbye</p>” ; </li></ul><ul><li>To Do: </li></ul><ul...
Variables Name Price John 16.50
Variables Name Price Pete 16.50
Variables <ul><li>$ price = 20; </li></ul><ul><li>$ name = “John”; </li></ul><ul><li>echo “Hello  $ name, the price is £ $...
Input A PHP script Get Post Database Cookies Files Server Info To Do:
Output A PHP script HTML Database Cookies Files To Do:
Hello $name <ul><li>$name =  $_REQUEST[‘your_name’] ; </li></ul><ul><li>echo “<p>Hello  $name </p>”; </li></ul>helloform.H...
Expressions and operators <ul><li>$counter + 1; </li></ul><ul><li>($quantity * $price) + $shipping </li></ul><ul><li>“ blu...
Selection – Hello maybe <ul><li>$name = “Martin”; </li></ul><ul><li>if   ($name != “John”) </li></ul><ul><li>{ </li></ul><...
A more useful Hello maybe <ul><li>$name = $_REQUEST[‘your_name’]; </li></ul><ul><li>if ($name != “Pete”) </li></ul><ul><li...
Repetition (looping) <ul><li>run a lap  </li></ul><ul><li>until  done 100 laps or completely knackered </li></ul><ul><li>$...
Functions <ul><li>function fill_kettle () </li></ul><ul><li>{ </li></ul><ul><ul><li>place kettle under tap; </li></ul></ul...
Hello function <ul><li>  hello(); </li></ul><ul><ul><li>function  hello() </li></ul></ul><ul><ul><li>{ </li></ul></ul><ul>...
Hello parameter <ul><li><?php </li></ul><ul><li>welcome( “Jane” ); </li></ul><ul><li>welcome($somebody); </li></ul><ul><ul...
Databases <ul><li>Databases need code to retrieve data and translate into HTML </li></ul><ul><li>SQL is the most popular l...
SQL <ul><li>SQL is used with other languages such as PHP </li></ul><ul><li>SELECT *  FROM orders; </li></ul><ul><li>SELECT...
Let’s Design an App Twaddl.com What have you done today? Update Cooked a curry Went to work Jogged 2 miles
Twaddl Database ID Twaddl 1 Argued with girlfriend – again! 3 Went to work 4 Cooked a curry 2 Jogged 2 miles
Twaddl Main Program Flow Handle posted  twaddl List twaddles
Handle Posted Twaddl Is submitted twaddle empty? Insert twaddle into database List twaddles No Yes Display an error message
List Twaddles Get list of twaddles from database End Program For each twaddle in list: Display twaddle
Complications! An example. <ul><li>Ordinals: 1 st  2 nd  3 rd  4 th  etc. </li></ul><ul><li>Mod: 53 % 10 </li></ul><ul><li...
Where from here? <ul><li>PHP Lessons Online: </li></ul><ul><li>http://uk3. php .net/ tut . php   </li></ul><ul><li>http://...
Upcoming SlideShare
Loading in …5
×

Programming For Designers V3

1,475 views
1,431 views

Published on

Published in: Technology
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total views
1,475
On SlideShare
0
From Embeds
0
Number of Embeds
3
Actions
Shares
0
Downloads
1
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide
  • Programming For Designers V3

    1. 1. Overcoming code fear <ul><ul><li>An introduction to programming for designers </li></ul></ul>
    2. 2. Unintelligible - Yuk <ul><li>^[A-Z0-9._%+-]+@[A-Z0-9.-]+.[A-Z]{2,4}$ </li></ul>
    3. 3. But not all code is squiggles! <ul><li>SUBTRACT Tax FROM GrossPay GIVING NetPay </li></ul>
    4. 4. So what is a script? <ul><li>A script for a play defines a cast and gives them instruction to produce the desired result, a play. </li></ul><ul><li>A script for a computer could be said to be the same. It defines the resources and how they are used in a prescriptive manner to achieve a desired result. The words script and program can be used interchangeably. </li></ul>
    5. 5. Languages <ul><li>BASIC, C++, Java, JavaScript, Lisp, SQL, PHP, Perl, Python, Ruby </li></ul><ul><li>Why is HTML not considered a programming language? </li></ul><ul><li>Why is ASP not on this list? </li></ul><ul><li>Learn one language and you have learned a lot about many others. </li></ul>
    6. 6. A standard HTTP request Request hello.HTML Browser Server hello.HTML <h1>Hello</h1> goodbye.HTML <h1>Hello</h1>
    7. 7. A standard HTTP request Response Browser Server hello..HTML <h1>Hello</h1> goodbye.HTML <h1>Bye</h1> <h1>Hello</h1>
    8. 8. A standard HTTP request Hello
    9. 9. A CGI Request Request hello. PHP Browser Server hello.PHP Echo “Hello”; goodbye.PHP Echo “Goodbye”;
    10. 10. A CGI Request Response hello.PHP Echo “Hello”; Browser Server goodbye.PHP Echo “Goodbye”; <h1>Hello</h1>
    11. 11. A CGI Request hello.PHP <?php echo “ <h1>Hello</h1> ”; ?>
    12. 12. A CGI Request Hello
    13. 13. Server Side vs Client Side Javascript Java Flash PHP Java ASP Client Server HTTP
    14. 14. Sequences <ul><li>echo “<p>Hello</p>” ; </li></ul><ul><li>echo “<p>Goodbye</p>” ; </li></ul><ul><li>To Do: </li></ul><ul><li>Go Home </li></ul><ul><li>Make Tea </li></ul><ul><li>Wash Up </li></ul>To Do:
    15. 15. Variables Name Price John 16.50
    16. 16. Variables Name Price Pete 16.50
    17. 17. Variables <ul><li>$ price = 20; </li></ul><ul><li>$ name = “John”; </li></ul><ul><li>echo “Hello $ name, the price is £ $ price”; </li></ul><ul><li>$ name = “Pete”; </li></ul><ul><li>echo “Hello $ name, the price is £ $ price”; </li></ul><ul><li>$ tax = $ price * 0.15; </li></ul>
    18. 18. Input A PHP script Get Post Database Cookies Files Server Info To Do:
    19. 19. Output A PHP script HTML Database Cookies Files To Do:
    20. 20. Hello $name <ul><li>$name = $_REQUEST[‘your_name’] ; </li></ul><ul><li>echo “<p>Hello $name </p>”; </li></ul>helloform.HTML … … … <form action=“ helloreply.php ” method=“post”> <label>Your Name</label> <input type=“text” name=“your_name” /> <input type=“submit” /> </form> … … … helloreply.PHP <html> <head>…..</head> <body> <?php $name = $_REQUEST[‘your_name’]; echo “<p>Hello $name</p>” ; ?> </body> <html>
    21. 21. Expressions and operators <ul><li>$counter + 1; </li></ul><ul><li>($quantity * $price) + $shipping </li></ul><ul><li>“ blue” . “bird” </li></ul><ul><li>1 < 2 </li></ul><ul><li>$dog == “Spot” </li></ul><ul><li>$price != 44; </li></ul>
    22. 22. Selection – Hello maybe <ul><li>$name = “Martin”; </li></ul><ul><li>if ($name != “John”) </li></ul><ul><li>{ </li></ul><ul><li>echo “Hello!”; </li></ul><ul><li>} </li></ul><ul><li>else </li></ul><ul><li>{ </li></ul><ul><li>echo “Goodbye!”; </li></ul><ul><li>} </li></ul>To Do: Plan for today if it is hot then go outside otherwise stay in bed
    23. 23. A more useful Hello maybe <ul><li>$name = $_REQUEST[‘your_name’]; </li></ul><ul><li>if ($name != “Pete”) </li></ul><ul><li>{ </li></ul><ul><li>echo “Hello!”; </li></ul><ul><li>} </li></ul><ul><li>else </li></ul><ul><li>{ </li></ul><ul><li>echo “Goodbye!”; </li></ul><ul><li>} </li></ul><ul><li>hello.php?your_name=Mary </li></ul><ul><li>hello.php?your_name=Pete </li></ul>
    24. 24. Repetition (looping) <ul><li>run a lap </li></ul><ul><li>until done 100 laps or completely knackered </li></ul><ul><li>$counter = 1; </li></ul><ul><li>while ( $counter <= 10 ) </li></ul><ul><li>{ </li></ul><ul><li>echo “$counter <br />”; </li></ul><ul><li>$counter = $counter + 1; </li></ul><ul><li>} </li></ul><ul><li>echo “Finished<br />”; </li></ul>
    25. 25. Functions <ul><li>function fill_kettle () </li></ul><ul><li>{ </li></ul><ul><ul><li>place kettle under tap; </li></ul></ul><ul><ul><li>turn on tap; </li></ul></ul><ul><ul><li>wait until kettle is full; </li></ul></ul><ul><ul><li>turn off tap; </li></ul></ul><ul><li>} </li></ul><ul><li>fill_kettle (); </li></ul>
    26. 26. Hello function <ul><li> hello(); </li></ul><ul><ul><li>function hello() </li></ul></ul><ul><ul><li>{ </li></ul></ul><ul><ul><ul><li>$name = $_REQUEST[‘name’]; </li></ul></ul></ul><ul><ul><ul><li>echo “<p>Hello $name</p>”; </li></ul></ul></ul><ul><ul><li>} </li></ul></ul>
    27. 27. Hello parameter <ul><li><?php </li></ul><ul><li>welcome( “Jane” ); </li></ul><ul><li>welcome($somebody); </li></ul><ul><ul><li>function welcome( $name ) </li></ul></ul><ul><ul><li>{ </li></ul></ul><ul><ul><ul><li>$message = “<p>Hello $name</p>”; </li></ul></ul></ul><ul><ul><ul><li>echo $message; </li></ul></ul></ul><ul><ul><li>} </li></ul></ul><ul><li>?> </li></ul>
    28. 28. Databases <ul><li>Databases need code to retrieve data and translate into HTML </li></ul><ul><li>SQL is the most popular language for asking databases for data </li></ul><ul><li>PHP can talk to many databases using SQL but most often is paired with MySQL </li></ul>
    29. 29. SQL <ul><li>SQL is used with other languages such as PHP </li></ul><ul><li>SELECT * FROM orders; </li></ul><ul><li>SELECT profile_pic FROM profiles WHERE profile_name = “Jimbo123”; </li></ul>
    30. 30. Let’s Design an App Twaddl.com What have you done today? Update Cooked a curry Went to work Jogged 2 miles
    31. 31. Twaddl Database ID Twaddl 1 Argued with girlfriend – again! 3 Went to work 4 Cooked a curry 2 Jogged 2 miles
    32. 32. Twaddl Main Program Flow Handle posted twaddl List twaddles
    33. 33. Handle Posted Twaddl Is submitted twaddle empty? Insert twaddle into database List twaddles No Yes Display an error message
    34. 34. List Twaddles Get list of twaddles from database End Program For each twaddle in list: Display twaddle
    35. 35. Complications! An example. <ul><li>Ordinals: 1 st 2 nd 3 rd 4 th etc. </li></ul><ul><li>Mod: 53 % 10 </li></ul><ul><li>function ordinal($number) </li></ul><ul><li>{ </li></ul><ul><li>$last_digit = $number % 10; </li></ul><ul><li>if ($last_digit == 1) $ord = “st”; </li></ul><ul><li>elseif ($last_digit == 2) $ord = “nd”; </li></ul><ul><li>elseif ($last_digit == 3) $ord = “rd”; </li></ul><ul><li>else $ord = “th”; </li></ul><ul><li>echo $number . $ord; </li></ul><ul><li>} </li></ul>
    36. 36. Where from here? <ul><li>PHP Lessons Online: </li></ul><ul><li>http://uk3. php .net/ tut . php </li></ul><ul><li>http://www. webmonkey .com/tutorial/PHP_Tutorial_for_Beginners </li></ul><ul><li>Tuition  </li></ul>

    ×