Getting Started with Bootstrap

·         Using Bootstrap can create a web page easilly.

·         Bootstrap is a free front –end framework for faster & easier web development

·         It is the most popular HTML, CSS and JavaScript framework for developing responsive , mobile-first web sites.

·         Responsive development means creating web sites which automatically adjust themselves ,depends on the device resolution.

Why use Bootstrap

• Easy to use: Anybody with just basic knowledge of HTML and CSS can start using Bootstrap
• Responsive features: Bootstrap's responsive CSS adjusts to phones, tablets, and desktops
• Mobile-first approach: In Bootstrap 3, mobile-first styles are part of the core framework
• Browser compatibility: Bootstrap is compatible with all modern browsers (Chrome, Firefox, Internet Explorer, Safari, and Opera)

Bootstrap CDN

MaxCDN provide CDN support for Bootstrap's CSS and JavaScript.

(CDN-Content Delivery Network)

One advantage of using the Bootstrap CDN

If a user already have downloaded Bootstrap from MaxCDN when visiting another site.

 As a result, it will be loaded from cache when they visit your site, which leads to faster loading time.

 Also, most CDN's will make sure that once a user requests a file from it, it will be served from the server closest to them, which also leads to faster loading time.

MaxCDN

<!-- Latest compiled and minified CSS -->
<link rel="stylesheet"href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">

<!-- jQuery library -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>

<!-- Latest compiled JavaScript -->
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>

Downloading the Bootstrap files

Two versions available for download,

·         Precompiled Bootstrap    - contain compiled and minified version of CSS and JavaScript files

·         Bootstrap Source Files- contain original source files for all CSS and JavaScript, along with a local copy of the docs.

 

Precompiled Bootstrap

bootstrap/ 

├── css/ 

│ ├── bootstrap.css 

│ ├── bootstrap.css.map 

│ ├── bootstrap.min.css 

│ ├── bootstrap.min.css.map 

│ ├── bootstrap-theme.css 

│ ├── bootstrap-theme.css.map 

│ ├── bootstrap-theme.min.css 

│ └── bootstrap-theme.min.css.map 

├── js/ 

│ ├── bootstrap.js 

│ └── bootstrap.min.js 

└── fonts/ 

├── glyphicons-halflings-regular.eot 

├── glyphicons-halflings-regular.svg 

├── glyphicons-halflings-regular.ttf 

├── glyphicons-halflings-regular.woff 

└── glyphicons-halflings-regular.woff2

Bootsrap folder architecture

In here compiled CSS and JS (bootstrap.*),

as well as compiled and minified CSS and JS (bootstrap.min.*),

 CSS source maps (bootstrap.*.map) are available for use with certain browsers' developer tools. Fonts from Glyphicons are included, as is the optional Bootstrap theme.

Bootstrap source code

The Bootstrap source code download includes the precompiled CSS, JavaScript, and font assets, along with source Less, JavaScript, and documentation.

bootstrap/ 

├── less/ 

├── js/ 

├── fonts/ 

├── dist/

│ ├── css/ 

│ ├── js/ 

│ └── fonts/ 

└── docs/ 

    └── examples/

The less/, js/, and fonts/ are the source code for CSS, JS, and icon fonts (respectively).

The dist/ folder includes everything listed in the precompiled download section above.

The docs/ folder includes the source code for our documentation, and examples/ of Bootstrap usage.

Bootstrap Grid System

The Bootstrap grid system provides the quick and easy way to create the layouts of the web pages.

Ex : Bootstrap 3 introduces the responsive mobile first fluid grid system that appropriately scales up to   12 columns as the device or viewport size increases.

Bootstrap 3 includes predefined grid classes for quickly making grid layouts for different types of devices like cell phones, tablets, laptops and desktops, etc.

As ex:

.col-xs-* class to create grid columns for extra small devices like cell phones

.col-sm-* class for small screen devices like tablets

.col-md-* class for medium size devices like desktops

.col-lg-* for large desktop screens

key features of the new grid system

Features Bootstrap 3 Grid System	Extra small devices Phones (<768px)	Small devices Tablets (≥768px)	Medium devices Desktops (≥992px)	Large devices Desktops (≥1200px)
Max container width	None (auto)	750px	970px	1170px
Grid behavior	Horizontal at all times	Collapsed to start, horizontal above breakpoints
Class prefix	.col-xs-	.col-sm-	.col-md-	.col-lg-
Max column width	Auto	~62px	~81px	~97px
Gutter width	15px on each side of a column (i.e. 30px)

Supported browsers

	Chrome	Firefox	Internet Explorer	Opera	Safari
Android	Supported	Supported	N/A	Not Supported	N/A
iOS	Supported	N/A		Not Supported	Supported
Mac OS X	Supported	Supported		Supported	Supported
Windows	Supported	Supported	Supported	Supported	Not Supported

Follow....

 http://getbootstrap.com

http://www.w3schools.com

http://www.tutorialrepublic.com

R. A.J.R.RUPASINGHE

CIS 2012/2013

jayanirupasinghe123@gmail.com

Continue Reading

What is Android?

• • A complete software stack for mobile devices.

Android is

• • A mobile operating system that based on modified version of a Linux, currently developed by the Google.
• • It offering users to access to Google's own services like Search, You tube, Maps, Gmail and more.
• • It was original developed by same name, Android.
• • It's a First open, complete and free platform. 
• • It software stack is open-sourced licensed under Apache 2.0

 The Android platform

• • Include an OS, a middleware and some applications.
• • Android is very lightweight and fully featured.
• • Developers can extend and replace existing components.

A generous development environment

• • Android programmers is based on Java programming language.
• • An SDK is available to build, compile, test and debug user applications.
• • No deferent between the build-in application and user ones.

As of  2015, Android has the latest installed based on all OS.It is the second most commonly used mobile operating system in the United State , while IOS is first.

Why Android?

Android History

Features of Android

               Android is a powerful operating system competing with Apple 4GS and supports great feature.Few of them are listed below:

Features	Description
Beautiful UI	Android OS basic screen provides a beautiful and intuitive user interface.
Connectivity	GSM/EDGE, IDEN, CDMA, EV-DO, UMTS, Bluetooth, Wi-Fi, LTE, NFC and WiMAX.
Storage	SQLite, a lightweight relational database, is used for data storage purposes.
Media support	H.263, H.264, MPEG-4 SP, AMR, AMR-WB, AAC, HE-AAC, AAC 5.1, MP3, MIDI, Ogg Vorbis, WAV, JPEG, PNG, GIF, and BMP
Messaging	SMS and MMS
Web browser	Based on the open-source WebKit layout engine, coupled with Chrome's V8 JavaScript engine supporting HTML5 and CSS3.
Multi-touch	Android has native support for multi-touch which was initially made available in handsets such as the HTC Hero.
Multi-tasking	User can jump from one task to another and same time various application can run simultaneously.
Multi-Language	Supports single direction and bi-directional text.
Android Beam	A popular NFC-based technology that lets users instantly share, just by touching two NFC-enabled phones together.

 

Android Applications

                   Android applications are usually developed in the Java language using the Android Software Development Kit.

After developed Android application can be package easily and can store in 

• • Google play
• • Slide me
• • Opera mobile Store
• • Mobango 
• • F-droid
• • Amazon App Store 

Android powers hundred of millions of mobile devices in more than 290 countries around the world. Every day more than 1 million new android devices are activated worldeide.

We can start the android application development on either of the following OSs.

• • Microsoft Windows XP or later versions.
• • Mac OS X 10.5.8 or later version with intel chip.
• • Linux including GNU C Library 2.7 or Later.

This kist softwares will need before start the Android application programming.

• • Java SDK 5 or later version.
• • Android SDK
• • Java Runtime Environment (JRE) 6
• • Android Studio
• • Eclipse IDE for Java Developers (optional)
• • Android Development Tools (ADT) Elipse plug-in (Optional)

Android IDEs

                    There are so many sophisticated Technologies are available in develop android applications, the familiar technologies, which are predominantly using tools as follows

• • Android Studio
• • Eclipse IDE
• • JavaIDEdroid
• • TerminalIDE
• • DroidEdit
• • AIDE-Android IDE

How much will Android change in 5 Years?

Rewind your mind back to late 2008, when the first android-powered handset saw the light of world. Google announced its own Chrome browser and world first look at the T-mobile G1.

The Android of 2015 is a world away from that old version, where the android market was is in infancy, there  were no native video playback services and the G1 had multi touch support. But Google keep the lion's share of the smartphone market.

Let's taken a peek into the 2020, consider what android might look With new Android monikers now appearing about once a year and Android M on the way.It's code name shluld be start with an "R". Rice pudding, Royal Toffee? Living Google another chocolate brand?

Piumi Rathnayake

CIS 2012/13

rathnayakepiumi19@gmail.com

Continue Reading