Web development Hackathon
40
WEB DEVELOPMENT FROM NOVICE TO DJANGO By AlSayed Gamal
-
Upload
al-sayed-gamal -
Category
Education
-
view
292 -
download
0
Transcript of Web development Hackathon
WEB DEVELOPMENT FROM NOVICE TO DJANGO
By AlSayed Gamal
AGENDA
Session plan.!
Web essentials.!
Python.!
Django. Intro
Essentials
Python
django
Final
TIME LINE
In every section we will review/write a small snippet of code.!
Essential skills.!
Extra skills/tools.!
Community.
WEB SCENARIOEvery minute of you career you will be contributing to it.
FRONT-END ENGINEERING
In this section we will be interested in technologies
interested in generating and optimising user interface.
HTMLAlmost every single website have one of these.
DOCUMENT STRUCTUREEvery document will / should include this
ANATOMY OF HTML TAG
Tag is the building block of HTML.!
<tag [attribute=”value”]> </tag>!
or <tag [attribute=”value”] />!
Example <p dir=“rlt”> We are paragraph. </p>
ANATOMY OF HTML TAG
Text formatting.!
<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>.
QUICK DEMO #1
In this demo:!
Text formatting tags.!
Image tag.!
Links.!
Forms.!
Tables.
HTML 5 & CSS3
The buzz
CSS(CASCAD-NG STYLE SHEETS)
Because HTML isn’t enough.
CSS ANATOMYImportant paragraphs are “Red” important.
QUICK DEMO #2
In this demo:!
Linking stylesheets.!
styling borders.!
styling text.!
styling background.
GRID SYSTEMSYou are obsolete if you are not using css framework now.
JAVASCRIPTfor the sake of client.
QUICK DEMO #3
In this demo:!
How to link Javascript.!
Window alert, confirm and prompt.!
How to handle click /mouse over events.
JQUERY IS A MUST.
Javascript libraries that made dom manipulation,
animations, validation and AJAX easy.
BACK-END DEVELOPMENTFrom now on it’s more about making the correct option.
WHY PYTHON?
It’s Open source.!
Cross platform.!
Easy to learn.!
No boiler plates.!
Dynamic (to be explained in code).!
Community.?
OPEN SOURCEopen source = freedom.
CROSS PLATFORMwrite once, run everywhere.
EASY TO LEARNIt takes < 10 seconds to write your hello, world.
SYSTEM.OUT.PRINT(“HELLO,WORLD”);
It takes 1 line to your “hello, world”
FROM 29TH TO 8TH IN < 7 YEARS*
It’s 8th too in 2013.
*TOIBE.com | TIOBE Programming Community Index for November 2013
–Steve Jobs
“Innovation distinguishes between a leader and a follower.”
PYTHON ESSENTIALS
Scripting nature.!
Basic data types.!
Operators.!
Flow control.!
Functions are fun.!
Modules.!
OOP.
EXPRESSION IN PYTHON.
Expressionvariable = 3 + 2
Operators
Operands
+ * = / %[] () > = & != |
Variablesx,name, __len__
Data5,
“hello”,
PYTHON BLOCKS
def foo(x,y): function body
class class_name(parent): class definition
if condition: If block
for item in structure: for block
LoopBranching
Class definitionFunction definition
GETTING YOUR HANDS DIRTY
Quick Demo #4
BEFORE WE START
If you are linux or unix based you are good to go.!
Else If you are on windows (I hope not) download and install!
sublime text editor!
python runtime!
Our code will be perfect for Python 2.x and may be 3.x.
SORTED?
MEDIA.PY
P1: Tawfik Okasha P2: Amr Adib
SCRIPT HIGHLIGHTS.
Basic expression (variable assignment).!
User input and output.!
Function definition / passing function as variable.!
List data-type.!
Basic sorting.
DJANGO
Django is RAD web framework!
Django advantages!
MTV.!
ORM.!
Admin Panel.!
I18n.!
Documentation.!
Minimal Boiler Plates.!
Elegant URL design
DJANGO ADMINWell known to be the main advantage of django and it’s.
QUICK DEMO #5The last and the best.
QUESTIONS?
THANKS
