Mansoura University CSED & Nozom web development sprint

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


The web scenario

Behind the scenewe almost watch

every day

Abstract figure shows server, client side and HTTP

3


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


Firefox, Chrome and IE :D5


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


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


HTML

• The HTML document structure.

• Anatomy of HTML Tag.

• Tag groups.

• Your first html document.

• Something wrong, no?

8


Document Structure

<html>

<head></head>

<body></body>

</html>

9


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


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


CSS

@selector{ property:value;}

12


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


CSS: properties and Values

• Font.

• Color and Background.

• Box.

• Classification.

• Units

14


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


The brighter side• The relative Zero.

• What’s CSS Framework.

• Examples:

• Bootstrap.

• YAML.

• YUI.

• What’s Javascript library.

• Examples:

• MooTools.

• jQuery.

• ExtJS16


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


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


Server side

• Python.

• Python for PHP programmers.

• MySQL.

• django framework.

19


Python

• Installation.

• Basic syntax.

• Main differences between python and PHP.

• django installation.

• First django app.

20


MySQL

• DML (Data Manipulation Language)

• DDL (Data Definition Language)

• ORM (Object Relation Mapping)

21


RAD

• Agile SCRUM development methodology and TDD.

• django testing.

• taskati.info programming.

• Web hosting.

22


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


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


SummaryMVC

CSS YAMLMySQLpythonJavascript

Bootstrap SCRUM

TDDDesign patterns

View

Model

25


Questions?

26


Thank you!@AlSayedGamal

27


Mansoura University CSED & Nozom web development sprint

Technology

web server

server functionality

web client

database server

dns server

mail server

django project

django framework