Upload
tarik-bagriyanik
View
20
Download
0
Embed Size (px)
Citation preview
Minimal, Responsive, Asynchronous Site Day 1Lets make a simple site with modern (for now) technologies: HTML5, CSS3, jQuery1.11, Bootstrap 3.1 and PHP5 * Adobe Dreamweaver CS6 is our text editor. You need to be familiar for all HTML, CSS, javascript and PHP basics1- Download these files:a. Bootstrap: http://getbootstrap.com/customize/ (front-end CSS framework)b. jQuery: http://jquery.com/download/ (Lightweight JavaScript library)c. PHP&MySQL: https://www.apachefriends.org/download.html (local server)
2- Install or start your apache and mysql servers: 3- Make a database with phpmyadmin:
4- Put your files in a folder in your c:\xampp\htdocs root:
5- We dont have to use every file we download, we can delete or put another folder some files. I want to use uncompressed files for javascript and css files to observe their contents to learn better. Others can be deleted.6- In Dreamweaver, I opened a new PHP (HTML5) index.php file:
7- Add the javascript and css files:
a Site - minimal
8- If you dont have any idea, check Bootstraps http://getbootstrap.com/getting-started/ and http://getbootstrap.com/examples. 9- Add this line to the head for mobile users:
10- We generally add to the head but for faster loading, they advice us to put them to the previous line of .11- Now we need a container div in the body. I prefer class container-fluid to fit the screen: ... 12- Here I added a row and a single column:
a Site - minimal
a Site - Minimal, Responsive, Asynchronous Site
13- Title looks ok for now, lets add 2 columns for menu and content: Menu Content
14- Add some fixes: a Site - Minimal, Responsive, Asynchronous Site Menu Content
For desktop size we have 2 columns and a large h1.
After we resize, we see 1 column and smaller h1.15- Lets add nesting columns inside the content class: Item 0 Item's details Item 1 Item's details Item 2 Item's details
Full size we see 3 items, after resizing we see everthing 1 column and readable for mobil users.
16- Now we can add real data for item panels, for connecting to the MySQL server, add this lines inside the body tag:
17- Filling data is syncronous for now: Item View details
Looks better and works! So, we came the last part.18- Now, we will convert this full page refresh to asyncronous by using jQuery. We can also use this library to animate, to add/remove tags dynamically. Before this, let me give you the last full HTML code:
a Site - minimal
a Site - Minimal, Responsive, Asynchronous Site Home Projects About Item View details Copyleft 2014
Looks lovely for me! If you dont like the white-blue default theme, look for Bootstrap templates19- See you at the second day