Embed Size (px)
DESCRIPTION
1 day web development sprint containing introduction to web client side programming, python programming, django and more.
Citation preview
Web Development Day 01“MarsAttack()”
Welcome to
@AlSayedGamal #webDay1
Sunday, February 26, 2012
Agenda*
• Problem Definition
• Web Scenario
• Client-side
• Server-side
• RAD
• Summary.
* We will recursively apply MarsAttack() on this.2
Sunday, February 26, 2012
The web scenario
Behind the scenewe almost watch
every day
Abstract figure shows server, client side and HTTP
3
Sunday, February 26, 2012
The web scenario
• It’s almost the same in all websites you know.
• Browser functionality.
• Server functionality.
• The HTTP Protocol.
• Don’t worry we will visit this again and again.
4
Sunday, February 26, 2012
Firefox, Chrome and IE :D5
Sunday, February 26, 2012
Web Browser Anatomy
• AKA a web client.
• It’s firefox, chrome, safari, opera and unfortunately Internet Explorer.
• Main functions:
• Read and Compose HTTP Requests.
• Interpret HTML.
• Misc tasks including and not excluding bookmarks management.
6
Sunday, February 26, 2012
The Server
• Software && Hardware.
• Contents.
• Server is serving pretty straight forward.
• Functionality is basically based on contents:
• Web server, Database server, DNS Server, Mail server etc..
7
Sunday, February 26, 2012
HTML
• The HTML document structure.
• Anatomy of HTML Tag.
• Tag groups.
• Your first html document.
• Something wrong, no?
8
Sunday, February 26, 2012
Document Structure
<html>
<head></head>
<body></body>
</html>
9
Sunday, February 26, 2012
Anatomy of HTML TagTag is the building block of HTML.
<tag [attribute=”value”]>
</tag>
or
<tag [attribute=”value”] />
Example
<p dir=”rtl”>
We are paragraph.
</p>
10
Sunday, February 26, 2012
Tag groups• Text formatting.
• <p>, <div>,<blockquote>,<marquee>,etc..
• <b>,<i>,<u>,<span>,<sup>,<sub>,<ul>,<li>, etc..
• Images and media.
• <img />, <embed />, <video>.
• Tables.
• <table>,<tr>, <td> and <th>.
• Forms.
• The where, what and how questions.
• <form>, <fieldset>, <legend> and label.
• <input type=””>,<select>,<option> and <textarea>.
11
Sunday, February 26, 2012
CSS
@selector{ property:value;}
12
Sunday, February 26, 2012
CSS
• Cascading style sheet.
• Commonly we <link> it in the <head>.
• The @selector* anatomy.
• tag
• .class
• tag.class
• #identifier
*CSS3 selectors isn’t included and they are extra flexible.13
Sunday, February 26, 2012
CSS: properties and Values
• Font.
• Color and Background.
• Box.
• Classification.
• Units
14
Sunday, February 26, 2012
Javascript
• Javascript is scripting language.
• We write inside <script>Or inside on{event}=”” attribute to handle events.
• Paradigm: it’s imperative with magic some OO capabilities.
• eval() and the calculator demo.
15
Sunday, February 26, 2012
The brighter side• The relative Zero.
• What’s CSS Framework.
• Examples:
• Bootstrap.
• YAML.
• YUI.
• What’s Javascript library.
• Examples:
• MooTools.
• jQuery.
• ExtJS16
Sunday, February 26, 2012
Mock-ups
• I know you are burning to get your hands dirty. (I know how it feels).
• It saves money directly and indirectly.
• Makes UI and UX trackable more measurable.
• And most importantly, it keeps designers away from Photoshop.
17
Sunday, February 26, 2012
Mock-up tools
• Cacoo, belsamq, creatly, pencil and others.
• Collaborative web tools is the buzz.
• Mocking taskati.info
• Consider UX from second0 not day1.
18
Sunday, February 26, 2012
Server side
• Python.
• Python for PHP programmers.
• MySQL.
• django framework.
19
Sunday, February 26, 2012
Python
• Installation.
• Basic syntax.
• Main differences between python and PHP.
• django installation.
• First django app.
20
Sunday, February 26, 2012
MySQL
• DML (Data Manipulation Language)
• DDL (Data Definition Language)
• ORM (Object Relation Mapping)
21
Sunday, February 26, 2012
RAD
• Agile SCRUM development methodology and TDD.
• django testing.
• taskati.info programming.
• Web hosting.
22
Sunday, February 26, 2012
django• Your first django project
• django-admin.py startproject <projectname>
• manage.py startapp <appname>
• manage.py runserve
• Anatomy of django files
• urls.py: contains urls routs in REGEX
• settings.py: contains project settings db, language, debug=True, etc..
• manage.py run django commandsexample: runserver, syncdb, shell, ..
23
Sunday, February 26, 2012
django
• models.py: contains model definition changes in this file most commonly will require syncdb to be reflected on db.
• views.py: contains methods to handle requests like index()
• tests.py: contains unit tests.
24
Sunday, February 26, 2012
SummaryMVC
CSS YAMLMySQLpythonJavascript
Bootstrap SCRUM
TDDDesign patterns
View
Model
25
Sunday, February 26, 2012
Questions?
26
Sunday, February 26, 2012
Thank you!@AlSayedGamal
27
Sunday, February 26, 2012
