Friday, August 14, 2015

Bootstrap Tutorial Lesson 9 - Responsive Multimedia Video and Pictures

In this Step by step Bootstrap Tutorial Lesson 9 - Responsive Multimedia Video and Pictures
   we see the manipulation of videos and pictures in a responsive way, and build an Application for use on desktop computers and Mobile devices screens. This App will display videos and pictures, with round corners, ellipses and more  .
This is how this Bootstrap Application is shown:
Bootstrap Tutorial Lesson 8 - Responsive Multimedia Video and Pictures


Bootstrap Tutorial Lesson 8 - Responsive Multimedia Video and Pictures    1


And this is the way how it looks the Video display in the Ripple Emulator , for Nexus Galaxy :    

Bootstrap Tutorial Lesson 8 - Responsive Multimedia Video and Pictures  2




Bootstrap Tutorial Lesson 9 - Responsive Multimedia Video and Pictures


This App can be started by using a free Bootstrap template downloaded for example from www.initializr.com/ (explained in this short Tutorial : Bootstrap Templates), or if you wish you can start from scratch. Just write this jQuery and Bootstrap references in the Head:


<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap-theme.min.css">


Bootstrap Tutorial Lesson 8 - Responsive Multimedia Video and Pictures     3


Also place the following javascripts  before the </body> closing tag :

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>  
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>


To use a Mobile Emulator, take a look at this short tutorial on installing the FREE Ripple Emulator.


1) Using Responsive Images in a Bootstrap Web Page:


The Bootstrap web pages are designed to be opened both in Mobile devices and desktop machines. 
Therefore, to be Responsive means that the images will be small in small screens, and bigger in larger screens.
To achieve that, use the class=img-responsive , as follows:
Bootstrap Tutorial Lesson 8 - Responsive Multimedia Video and Pictures    4

Also, we use 3 types of display here: the "img-circle" at the top, the "img-rounded" corners in the middle, and the "img-thumbnail" at the bottom, as defined in the Bootstrap Official Web Site :

Bootstrap Tutorial Lesson 8 - Responsive Multimedia Video and Pictures     5

Because we set the Grid layout as col-xs-12, in Mobile devices each image will spread over all 12 columns. However, in large screens, we set col-lg-4, so each picture will take only 4 cells out of 12:

Bootstrap Tutorial Lesson 8 - Responsive Multimedia Video and Pictures     6



2) Using Responsive Videos in a Bootstrap Web Page:

Exactly the same thing applies for HTML5 Video controls, as you can see here:


Bootstrap Tutorial Lesson 8 - Responsive Multimedia Video and Pictures   7


Therefore displayed this way :

Bootstrap Tutorial Lesson 8 - Responsive Multimedia Video and

Bootstrap Tutorial Lesson 8 - Responsive Multimedia  Pictures



We also added some style  code for the App:

body {
    padding-top: 60px;
    padding-bottom: 20px;
}

.jumbotron h1 {
    
    color: #a8a3a3;
}

h2 {
    font: 900 18px Verdana;
    color: #a8a3a3;
}

.well p{
    font: 700 12px Verdana !important;    
    color: #a8a3a3;
}

.well-footer, .well-footer a {
    font: 900 10px Comic Sans MS;
    color: #a8a3a3;
}

.alert {
    font: 600 9px Verdana;
}

.centered {
    text-align: center;
}



That's all. Our Multimedia will be displayed this way:

1- In Mobile devices : 

 Tutorial Lesson 8 - Responsive Multimedia Video and Pictures

 Lesson 8 - Responsive Multimedia Video and Pictures

 8 - Responsive Multimedia Video and Pictures



Responsive Multimedia Video and Pictures





The display for Nexus Mobile devices screens is as follows:
 Multimedia Video and Pictures






2- On Medium and Big desktops:


 Video and Pictures

 and Pictures

 Tutorial  Responsive Multimedia Video and Pictures

 Lesson  Multimedia Video and Pictures





      by Carmel Schvartzman


כתב: כרמל שוורצמן





Friday, August 7, 2015

Bootstrap Tutorial Lesson 7 - Responsive YouTube Video Modal Window

In this Step by step Bootstrap Tutorial Lesson 7 - Responsive YouTube Video Modal Window
   we explain the implementation of a responsive Video Modal window, and build an App for use on both desktop computers and all kinds of Mobile devices screens. This App will contain a Modal Window that will display a YouTube Video and also Alert messages to the user, by using jQuery.
You can download the complete app from the following GitHub repository:
https://github.com/CarmelSoftware/Bootstrap_YouTubeModalWindow
This is how this Bootstrap Application is shown:


And this is the way how it looks in the Ripple Emulator , in Nexus Galaxy display:    



Bootstrap Tutorial Lesson 7 - Responsive YouTube Video Modal Window


You can begin building this Application by working with a template downloaded from www.initializr.com/ (as is shown in this short Tutorial about Bootstrap Templates), or you can start from scratch by writing the following jQuery and Bootstrap references in the HTML5 <head>:

<script src="//code.jquery.com/jquery-1.11.3.min.js"></script>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap-theme.min.css">





And this javascript references will be located before you close the "Body" tag :

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>  
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>




If you want to use a Mobile Emulator, how to get one is explained in this short tutorial on installing the FREE Ripple Emulator.


1) Create a Button to open the Modal Bootstrap Video:


Generally, the Bootstrap Modal forms will open by adding a data-toggle=modal and a data-target=[YourModalWindowMarkup] directives , to some button:

Here we add also a "data-url" directive with the URL of the YouTube video to be shown.

2) Create the Modal Window:


First, we'll import the markup for the Modal Window as-is from the http://getbootstrap.com Official Web Site , containing a Header, a Body and a Footer. Just COPY-PASTE the markup from the URL above.

Our Modal Window will contain an inline Frame iframe, which will be set programmatically using javascript:


The Modal Window will be closed by a button that's using the directive data-dismiss=modal.
We can also close this window by using jQuery , with the   .modal("toggle").


3) Avoiding Clickjacking by using jQuery:

Finally we code the javascript to set the Iframe URL "src", using jQuery as follows:



We also append "autoplay" to the video URL to force it to play when loaded.

We also add custom style to the  CSS3 file  :

body {
    padding-top: 50px;
    padding-bottom: 20px;
}

.jumbotron h1 {
    font: 900 25px Verdana;
    color: #a8a3a3;
}

h2 {
    font: 900 18px Verdana;
    color: #a8a3a3;
}

.well {
    font: 900 12px Comic Sans MS;
    color: #a8a3a3;
}

.well-footer, .well-footer a {
    font: 900 10px Comic Sans MS;
    color: #a8a3a3;
}

.alert {
    font: 600 9px Verdana;
}

.centered {
    text-align: center;
}



And that's all. Our Modal Video Window will be displayed this way:

1- In Mobile devices : 






The display for Nexus Mobile devices screens is as follows:







2- On Medium and Big desktops:









      by Carmel Schvartzman


כתב: כרמל שוורצמן






Thursday, August 6, 2015

jQuery Plugin to serialize an HTML5 Form into a JSON object


jQuery Plugin to serialize an HTML5 Form into JSON

by Carmel Schvartzman - The MVC Club


A custom jQuery Plugin for serializing a Form into a JSON object to send in an HTTP request to the server.
This elegant Plugin is a high performance code to transform the data inside an HTML5 Form , into a JSON object serialized to a string. This string can then be sent inside the body of an HTTP POST, HTTP PUT or HTTP PATCH request, in order to be preserved in some database at server side.
This jQuery plugin can be referenced by an MVC View, and of course can be used by any HTML5 web page.
Requisites:
1) your HTML5 web page has to reference the jQuery framework
2) only the fields that have a "name" attribute will be serialized in a JSON object. All other fields that you don't want to serialize, such as hidden identity fields and anything like that, will be ignored.
The requisites for the Form input fields serialization are according to the www.w3.org Recommendation on web Forms .
This plugin uses jQuery utilities such as the serializeArray method .
This Plugin can be downloaded from the following GitHub repository:
https://github.com/CarmelSoftware/jQueryPlugin_FormSerializer

Snapshots:






The Form is serialized into the JSON object as follows:






Usage:

This utility jQuery Plugin is used as follows:






The Plugin's code :


All the Form's fields have to have a "name"  :


The Plugin usage is explained in the following Tutorial:
By Carmel Schvartzman

Enjoy MVC !!!


פיתוח: כרמל שוורצמן

Wednesday, August 5, 2015

Bootstrap Tutorial Lesson 11 - Responsive Tables

In this Step by step Bootstrap Tutorial Lesson 11 - Responsive Tables 
   we experiment with several kinds of responsive tables, Condensed, Bordered, Hover, Striped , and more, shown in different formats, by  building an Application for Mobile & desktop computers . This App will display the Bootstrap Tables in all screen sizes .
You can download the complete app from the following GitHub repository:
https://github.com/CarmelSoftware/jQueryPlugin_BootstrapTable

This is how this is displayed:

Bootstrap Tutorial Lesson 11 - Responsive Tables   1

Bootstrap Tutorial Lesson 11 - Responsive Tables  2



And this is the way how it looks in an Emulator , for Nexus Galaxy devices:    

Bootstrap Tutorial Lesson 11 - Responsive Tables  3




Bootstrap Tutorial Lesson 11 - Responsive Tables


You can start this app by using a free Bootstrap template from www.initializr.com/ (explained in this short post : Bootstrap Templates), or you can write the following jQuery and Bootstrap links in the HTML5 file's Head:


<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap-theme.min.css">


Bootstrap Tutorial Lesson 11 - Responsive Tables  4


Also put the following references before closing the </body> element:

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>  
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>

Bootstrap Tutorial Lesson 11 - Responsive Tables 5

To setup a Mobile Emulator, read this short tutorial on installing the FREE Ripple Emulator.


1) Using Bootstrap Responsive Tables in a responsive Web Page:


The Bootstrap supports elegant tables that you can display in several ways. Because the problems planted by small screens, Bootstrap allows you to add scrolling to tables when displayed in them. Using the Bootstrap class "table-responsive", the columns will automatically scroll horizontally according to the screen size, meaning , under the 768px screens wide , tables will be responsive:

Bootstrap Tutorial Lesson 11 - Responsive Tables  6

Also, we achieve a hover striped table by using these classes.

All the Bootstrap Tables  documentation can be found in the GetBootstrap Web Site.

2) Using Bordered Condensed Tables in a Responsive Bootstrap Web Page:

The difference between this kind of tables and the others reside in a "condensed" padding style, and the borders that these classes define:

Bootstrap Tutorial Lesson 11 - Responsive Tables  7



The Bootstrap allows to enable the contextual helper classes such as warning, danger , etc, which is written this way :

Bootstrap Tutorial Lesson 11 - Responsive Tables  8




This is the style added for the App:

body {
    padding-top: 60px;
    padding-bottom: 20px;
}

.jumbotron h1 {
    
    color: #a8a3a3;
}

h2 {
    font: 900 18px Verdana;
    color: #a8a3a3;
}

.well p{
    font: 700 12px Verdana !important;    
    color: #a8a3a3;
}

.well-footer, .well-footer a {
    font: 900 10px Comic Sans MS;
    color: #a8a3a3;
}

.alert {
    font: 600 9px Verdana;
}

.centered {
    text-align: center;
}





That's all. Our Tables will be displayed this way:

1- In Mobile devices : 



Bootstrap Tutorial Lesson 11 - Responsive

Bootstrap Tutorial Lesson 11






The displays for Nexus devices screens is as follows:

Bootstrap  Responsive Tables




2- On Medium and Big desktops:


Tutorial Lesson 11 - Responsive Tables

 Lesson 11 - Responsive Tables

Tables




      by Carmel Schvartzman


כתב: כרמל שוורצמן