Let’s 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 basics…

1- 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)Screen Shot 05-17-14 at 08.33 PM

2- Install or start your apache and mysql servers:Screen Shot 05-17-14 at 08.27 PM

3- Make a database with phpmyadmin:Screen Shot 05-17-14 at 08.32 PM

4- Put your files in a folder in your “c:\xampp\htdocs” root:Screen Shot 05-17-14 at 08.35 PM

5- We don’t 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:Screen Shot 05-17-14 at 08.52 PM

7- Add the javascript and css files:

<!doctype html>

<html>

<head>

<meta charset=”iso-8859-9″>

<title>a Site – minimal</title>

<link rel=”stylesheet” type=”text/css” href=”css/bootstrap.css”>

http://js/jquery-1.11.1.js

</head>

<body>

http://js/bootstrap.js

</body>

</html>

8-      If you don’t have any idea, check Bootstrap’s http://getbootstrap.com/getting-started/ and http://getbootstrap.com/examples.
9-      Add this line to the head for mobile users:

<metaname=”viewport”content=”width=device-width, initial-scale=1″>

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

http://js/jquery-1.11.1.js

</head>

 

<body>

a Site – Minimal, Responsive, Asynchronous Site

</div>

</div>

http://js/bootstrap.js

</body></html>Screen Shot 05-17-14 at 09.19 PM

13-      Title looks ok for now, let’s add 2 columns for menu and content:

 

Menu

Content

</div>

14-       Add some fixes:

a Site – Minimal, Responsive, Asynchronous Site

</div>

</div>

Menu

Content

</div>

</div>

Screen Shot 05-17-14 at 09.42 PM

For desktop size we have 2 columns and a large h1.Screen Shot 05-17-14 at 09.43 PM

After we resize, we see 1 column and smaller h1.

15-      Let’s add nesting columns inside the “content” class:

 

Item 0

Item’s details

</div>

</div>

Item 1

Item’s details

</div>

</div>

Item 2

Item’s details

</div>

</div>

</div>Screen Shot 05-17-14 at 09.49 PM

Full size we see 3 items, after resizing we see everthing 1 column and readable for mobil users.Screen Shot 05-17-14 at 09.51 PM

16-      Now we can add “real” data for item panels, for connecting to the MySQL server, add this lines inside the body tag:

<body role=”document”>

<?php

@mysql_connect(“localhost”,”root”,”pass”) or die(“database server is down? <br/> “.mysql_error());

?>

17-      Filling data is “syncronous” for now:

Item

<p><a class=”btn btn-primary” href=”#” role=”button”>View details »</a></p>

</div>

</div>

<?php endwhile;?>

</div>Screen Shot 05-17-14 at 10.13 PM

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:

<!doctype html>

<html>

<head>

<meta charset=”iso-8859-9″>

<title>a Site – minimal</title>

<meta name=”viewport” content=”width=device-width, initial-scale=1″>

<link rel=”stylesheet” type=”text/css” href=”css/bootstrap.css”>

http://js/jquery-1.11.1.js

</head>

 

<body role=”document”>

<?php

@mysql_connect(“localhost”,”root”,””) or die(“database server is down?<br/>”.mysql_error());

?>

a Site – Minimal, Responsive, Asynchronous Site

</div>

</div>

</div>

Item

</div>

</div>

<?php endwhile;?>

</div>

</div>

</div>

http://js/bootstrap.js

</body>

</html>Screen Shot 05-17-14 at 10.31 PM

Looks lovely for me! If you don’t like the white-blue default theme, look for “Bootstrap” templates…

19- See you at the other page : https://tbagriyanik.wordpress.com/2014/05/18/minimal-responsive-asynchronous-site-day-2/

Reklamlar