CREATING BASIC JQUERY MOBILE PAGE USING SUBLIME AND CHROME

---

CREATING BASIC JQUERY MOBILE PAGE USING SUBLIME AND CHROME

STEPS

1) Continue from previous tutorial

http://webdocuments.blogspot.com/2014/11/getting-started-with-html5-using-chrome.html 

2) Create New Index File

Save as index.html

3) Paste the following codes

---
---

The codes are taken from http://www.compileonline.com/try_jquerymobile_online.php 

4) Preview in Chrome

5) JQuery Mobile Concepts

The codes above demonstrate the following concepts:

1- JQM Library Links

2- JQM Page

3- JQM Header, Content and Footer

4- JQM HyperLink

5- JQM Theme

6- JQM Back Button

Further reading, http://www.w3schools.com/jquerymobile/default.asp 

--- Read More

GETTING STARTED WITH HTML5 USING CHROME AND SUBLIME

---

GETTING STARTED WITH HTML5 USING CHROME AND SUBLIME

INTRODUCTION

HTML5 technologies

HTML5 technologies refer to collections of languages that are used for structuring and presenting content for web pages.

Thanks to the Web Kit component, HTML5 documents can be developed to resemble the look and feel of mobile apps.  

This subsequently makes them the most economical and efficient way of building cross platform mobile apps.

Chrome Web Browser

Chrome is a Web Browser that comes with tools to help developers build apps that is based on HTML5 technologies.  Developers may use Chrome as an emulation platform to see how their HTML5 projects work on mobile devices.

Sublime Editor

Sublime Text Editor is a multi-platform Text Editor available in Windows, Linux and Macintosh. Developer who seldom switches between these platforms may find it convenient to have a common application to work with their projects.

STEPS

1) Install Chrome and Sublime

Download Chrome from here, https://www.google.com/chrome/browser/ 

Install Chrome.

Download Sublime from here, http://www.sublimetext.com/download 

Install Sublime.

2) Arranging application windows

You can arrange Sublime and Chrome application windows in whatever ways that are convenient to you.

I found the following arrangement the best for editing codes and viewing their output.

3) Setting up project folder

3.1) Create a project folder, example, myprojects.

E.g.

(in Windows XP, 7, 8 etc.) c:\myprojects

(in Mac) {your username}\documents\myprojects

3.2) Try browsing your project folder using Chrome

Type the physical path in your Chrome Address Box

E.g.

(in Windows) file:///C:/myprojects

(in Mac) file://localhost/Users/{your username}/Documents/myprojects/ 

3.3) Create a new subfolder, html5basics

You should see this in Chrome

4) Create HTML5 Test File

4.1) Using Sublime, create test.html in that folder (html5basics)

If you browse the folder html5basics, you should see the file name

4.2) Type the following codes

(further reading, http://www.w3schools.com/html/html5_intro.asp )

4.3) Check the output

5) Creating Project Folder in SubLime

By defining a project folder in Sublime, you would be able to manage your files efficiently.

5.1) Go to menu Project/Add Folder to Project…

5.2) Choose the folder html5basics

5.3) Go to menu View/Side Bar/Show Side Bar

You get a Side Bar that displays your project folder and its contents.

From now onwards, you can manage your files by right-clicking the folder name and selecting options in the pop up menu.

---

--- Read More

Basic WebMatrix Editing

---

Basic WebMatrix Editing

1) Run WebMatrix 2

2) Open your first Web Site project

2.1) Select Open Site/My Sites.

2.2) Select WebSite1

3) Understanding the Development Environment

3.1) When WebMatrix opens your Web Site project, the left panel shows the name WebSite1 (highlighted in blue color) and Site (look at the Home icon that is also highlighted in blue color).

3.2) The Main Panel shows you two addresses.

The first address is http://localhost:8080.

It is called the Web URL (Unique Resource Locator).

If you click this link, the Web Browser program will pop up and automatically open the URL.

Notice that in the main window, a web page is displayed. This web page is also called a Home page. It is the first page that you see when you visit the URL http://localhost:8080.

Close the Web Browser and get back to WebMatrix.

The second address is C:\Documents and Settings\Administrator\My Documents\My Web Sites\WebSite1.

It is called the Web Folder.

If you click this link, a File Explorer will pop up and display the files and folders located at the address.

3.3) When you develop web projects, you are going to work with these two addresses.

First you prepare the web documents in the Web Folder.

Then, you view the results at the Web URL.

4) Editing the Web Page

4.1) Click the item Files and you will notice that the above panel shows a new content.

4.2) Double-click the item default.htm

Notice the text “WebMatrix Default Page”.

4.3) Change the text to “My First Web Page”

4.4) Notice that the title “default.htm” has a symbol “*” besides it.

It means that the content of the file has been changed.

Click the save button.

As you can see in the screenshot above, you can also press the keys CTRL and S  simultaneously to perform the save task.

The “*” should have gone now.

Click the Run button.

Notice that the Web Browser now shows the title “My First Web Page”, ie the text that you have just entered just now.

---

--- Read More

Running A Web Site For The First Time using WebMatrix 2

---

Running A Web Site For The First Time using WebMatrix 2

STEPS

1) Starting Up

When WebMatrix 2 starts, it will show you three options, ie “Open Site”, “Templates” and “App Gallery”.

2) Open Site

2.1) The first option is Open Site.

2.2) If you click the Open Site button, you will see another three options…

2.3) Click My Sites.

A default site called “Website1” has been created for you.

3) Running your first Web Site

3.1) WebMatrix will display the Application Window for Website1.

3.2) Click the Run button.

WebMatrix will run Internet Explorer.

Internet Explorer automatically opens a web page at http://localhost:8080 (this address is called URL, ie Unique Resoure Locator)

The Web Page that you see is called a Home Page because it is the starting page (or landing page) whenever we visit the URL http://localhost:8080 

Localhost is a temporary Web Site address. It only exists when you run your Web Site through WebMatrix. If Stop the running or if you close Web Matrix, the localhost address will not be available anymore.

Close Internet Explorer and get back to WebMatrix Application Window.

If you want a permanent Web Site address, you need to register a location in the Internet, eg http://notarazi.somee.com/WebSite1/ 

---

--- Read More

Install WebMatrix 2 on Windows XP

---

How To Install WebMatrix 2 on Windows XP

How To Install WebMatrix 2 on Windows XP

1) Download Offline Installer

- Download from http://www.microsoft.com/web/webmatrix/v2/ 

2) Run installer

ie WebMatrix2ForVistaOrBelow

2.1) Web Platform Installer (WPI) 5.0 dialog window pops up.

Click Install.

2.2) WPI will connect to the Internet, download and install the required softwares.

2.3) WPI may require you to restart your windows.

Click Yes and watch the Windows restarting itself.

2.4)  Finally WPI will inform you that the installation process is finished.

Click Finish button.

2.5) Click Exit button to close WPI.

3) Test Run

3.1) Run WebMatrix from the Start Menu.

3.2) You will see the Splash Screen of Web Matrix.

3.3) The Quick Start Window will pop up and provide you option to start working with WebMatrix.

---

--- Read More

PREPARING WINDOWS XP FOR DEVELOPMENT PROJECTS

---

PREPARING WINDOWS XP FOR DEVELOPMENT PROJECTS

STEPS

1) Turn on the PC.

Windows XP starts with the default green hill and blue sky.

2) Click START Button.

You get a menu of program and resource shortcuts.

3) Select My Computer short cut.

3.1) My Computer refers to the device resources in your computer.

3.2) When you click My Computer item in Start Menu, Windows will run a program called File Explorer.

3.3) File Explorer automatically opens My Computer resources and you will see items as shown below:

- Shared Documents

- Administrator’s Documents

- Local Disk (C: Drive)

- CD Drive (D: Drive)

- Network Drive (In the example below, it is labeled with E: Drive)

4) Root of Local Drive

4.1) Root means “the start” or “the parent”.

4.2) Double-click Local Disk (C: Drive) . You should be able to see the child items of it.

4.3) Click the Views button and select Details.

4.4) You will see a list of child items such as “Documents and Settings”, “Program Files” and “Windows”. The items represented by a yellow folder icon are called folders or directories.

4.5) The location above is called a ROOT for C: Drive. From here you will be able to explore child items in the sub folders of “Documents and Settings”, “Program Files” and “Windows”.

5) Folder Tree View

5.1) Click the Folders icon in the Tool Bar.

5.2) File Explorer will display a tree structure in the side panel.

Notice that the item Local Disk (C: Drive) is highlighted. It means that the File Explorer is currently displaying the root of C: Drive.

6) Creating a Project folder

6.1) Bring your mouse to an empty area in the folder list (marked as X), right-click and select New/Folder.

6.2) A new folder is created in the list.

6.3) Type a new name “projects” and press Enter key.

6.4) You can rename the folder at any time by clicking the folder, right-clicking and selecting Rename.

---


--- Read More