Responsive web design
=======================
Responsive web design (often abbreviated to RWD) is an approach to web design in which a site is crafted to provide an optimal viewing experience—easy reading and navigation with a minimum of resizing, panning, and scrolling—across a wide range of devices (from desktop computer monitors to mobile phones).[1][2][3]
RWD uses CSS3 media queries,[3][5][6] an extension of the @media rule,[7] to adapt the layout to the viewing environment—along with fluid proportion-based grids[8] and flexible images:.[9][10][11][12]
Media queries allow the page to use different CSS style rules based on characteristics of the device the site is being displayed on, most commonly the width of the browser.
window onload and document ready
==================================
The ready event occurs after the HTML document has been loaded, while the onload event occurs later, when all content (e.g. images) also has been loaded.
Multi-tenancy
===============
Multi-tenancy is an architecture in which a single instance of a software application serves multiple customers. Each customer is called a tenant.
With a multi-tenancy architecture, the provider only has to make updates once. With a single-tenancy architecture, the provider has to touch multiple instances of the software in order to make updates.
jQuery Fading Methods
============================
With jQuery you can fade an element in and out of visibility.
jQuery has the following fade methods:
fadeIn() The jQuery fadeIn() method is used to fade in a hidden element.
fadeOut() The jQuery fadeOut() method is used to fade out a visible element.
fadeToggle() The jQuery fadeToggle() method toggles between the fadeIn() and fadeOut() methods.
fadeTo() The jQuery fadeTo() method allows fading to a given opacity (value between 0 and 1).
The optional speed parameter specifies the duration of the effect. It can take the following values: "slow", "fast", or milliseconds.
The optional callback parameter is the name of a function to be executed after the fading completes.
jQuery Sliding Methods
=========================
slideDown()
slideUp()
slideToggle()
Query slideToggle() Method
============================
The jQuery slideToggle() method toggles between the slideDown() and slideUp() methods.
If the elements are slide down, slideToggle() will slide them up.
If the elements are slide up, slideToggle() will slide them down.
jQuery stop() Method
======================
The jQuery stop() method is used to stop an animation or effect before it is finished.
jQuery Callback Functions
===========================
A callback function is executed after the current effect is finished.
DOM = Document Object Model
===========================================================================
The DOM defines a standard for accessing HTML and XML documents:
"The W3C Document Object Model (DOM) is a platform and language-neutral interface that allows programs and scripts to dynamically access and update the content, structure, and style of a document."
Get Content - text(), html(), and val()
============================================================================
Three simple, but useful, jQuery methods for DOM manipulation is:
text() - Sets or returns the text content of selected elements
html() - Sets or returns the content of selected elements (including HTML markup)
val() - Sets or returns the value of form fields
The jQuery empty() method removes the child elements of the selected element(s).
The jQuery remove() method removes the selected element(s) and its child elements.
append() - Inserts content at the end of the selected elements
prepend() - Inserts content at the beginning of the selected elements
after() - Inserts content after the selected elements
before() - Inserts content before the selected elements
addClass() - Adds one or more classes to the selected elements
removeClass() - Removes one or more classes from the selected elements
toggleClass() - Toggles between adding/removing classes from the selected elements
css() - Sets or returns the style attribute
AJAX = Asynchronous JavaScript and XML.
===========================================
AJAX is the art of exchanging data with a server, and updating parts of a web page - without reloading the whole page.
AJAX is about loading data in the background and display it on the webpage, without reloading the whole page.
jQuery provides several methods for AJAX functionality.
With the jQuery AJAX methods, you can request text, HTML, XML, or JSON from a remote server using both HTTP Get and HTTP Post - And you can load the external data directly into the selected HTML elements of your web page!
HTTP Request: GET vs. POST
Two commonly used methods for a request-response between a client and server are: GET and POST.
GET - Requests data from a specified resource
POST - Submits data to be processed to a specified resource
GET is basically used for just getting (retrieving) some data from the server. Note: The GET method may return cached data.
The load() method loads data from a server and puts the returned data into the selected element.
POST can also be used to get some data from the server. However, the POST method NEVER caches data, and is often used to send data along with the request.
$.ajax() Performs an AJAX request
ajaxComplete() Specifies a function to run when the AJAX request completes
ajaxError() Specifies a function to run when the AJAX request completes with an error
ajaxSend() Specifies a function to run before the AJAX request is sent
$.ajaxSetup() Sets the default values for future AJAX requests
ajaxStart() Specifies a function to run when the first AJAX request begins
ajaxStop() Specifies a function to run when all AJAX requests have completed
ajaxSuccess() Specifies a function to run an AJAX request completes successfully
$.get() Loads data from a server using an AJAX HTTP GET request
$.getJSON() Loads JSON-encoded data from a server using a HTTP GET request
$.getScript() Loads (and executes) a JavaScript from the a server using an AJAX HTTP GET request
load() Loads data from a server and puts the returned data into the selected element
$.param() Creates a serialized representation of an array or object (can be used as URL query string for AJAX requests)
$.post() Loads data from a server using an AJAX HTTP POST request
serialize() Encodes a set of form elements as a string for submission
serializeArray() Encodes a set of form elements as an array of names and values
$("button").click(function(){
$.post("demo_test_post.asp",
{
name:"Donald Duck",
city:"Duckburg"
},
function(data,status){
alert("Data: " + data + "\nStatus: " + status);
});
});
var jq = $.noConflict();
jq(document).ready(function(){
jq("button").click(function(){
jq("p").text("jQuery is still working!");
});
});
HTML5
==========
New Elements
New Attributes
Full CSS3 Support
Video and Audio
2D/3D Graphics
Local Storage
Local SQL Database
Web Applications
HTML5 is a cooperation between the World Wide Web Consortium (W3C) and the Web Hypertext Application Technology Working Group (WHATWG).
WHATWG was working with web forms and applications, and W3C was working with XHTML 2.0. In 2006, they decided to cooperate and create a new version of HTML.
Some rules for HTML5 were established:
New features should be based on HTML, CSS, DOM, and JavaScript
Reduce the need for external plugins (like Flash)
Better error handling
More markup to replace scripting
HTML5 should be device independent
The development process should be visible to the public
What is HTML5 Web Storage?
==============================
With HTML5, web pages can store data locally within the user's browser.
Earlier, this was done with cookies. However, Web Storage is more secure and faster. The data is not included with every server request, but used ONLY when asked for. It is also possible to store large amounts of data, without affecting the website's performance.
The data is stored in key/value pairs, and a web page can only access data stored by itself.
localStorage - stores data with no expiration date
sessionStorage - stores data for one session
What is Application Cache?
==================================
HTML5 introduces application cache, which means that a web application is cached, and accessible without an internet connection.
Application cache gives an application three advantages:
Offline browsing - users can use the application when they're offline
Speed - cached resources load faster
Reduced server load - the browser will only download updated/changed resources from the server
What is a Web Worker?
==================================
When executing scripts in an HTML page, the page becomes unresponsive until the script is finished.
A web worker is a JavaScript that runs in the background, independently of other scripts, without affecting the performance of the page. You can continue to do whatever you want: clicking, selecting things, etc., while the web worker runs in the background.
Server-Sent Events - One Way Messaging
====================================================================
A server-sent event is when a web page automatically gets updates from a server.
This was also possible before, but the web page would have to ask if any updates were available. With server-sent events, the updates come automatically. The EventSource object is used to receive server-sent event notifications
HTML Best Practices Examples:
====================================================================
Use meaningful Title Tags and Meta Tags;
Always close your tags;
All images require the “Alt” attributes;
Proper use of headings (Use H1 – H6 Tags);
View source and validate all the code;
Use the right HTML elements at the right place;
Use lower case markup;
Be consistent in how you work;
Avoid using inline styles;
Place Javascript fiels at the bottom.
Declare the Correct DocType
Consider Placing Javascript Files at the BottomPlace all External CSS Files Within the Head Tag
Never Use Inline Javascript. It’s not 1996!
Keep Your Tag Names Lowercase
Choose a Great Code Editor
Once the Website is Complete, Compress!
CORS
=========
Cross-Origin Resource Sharing (CORS) is a W3C spec that allows cross-domain communication from the browser. By building on top of the XmlHttpRequest object, CORS allows developers to work with the same idioms as same-domain requests.
E[@foo] an E element with a "foo" attribute
E[@foo=bar] an E element whose "foo" attribute value is exactly equal to "bar"
E[@foo^=bar] an E element whose "foo" attribute value begins exactly with the string "bar"
E[@foo$=bar] an E element whose "foo" attribute value ends exactly with the string "bar"
E[@foo*=bar] an E element whose "foo" attribute value contains the substring "bar"
$("*") Selects all elements Try it
$(this) Selects the current HTML element Try it
$("p.intro") Selects all <p> elements with class="intro" Try it
$("p:first") Selects the first <p> element Try it
$("ul li:first") Selects the first <li> element of the first <ul> Try it
$("ul li:first-child") Selects the first <li> element of every <ul> Try it
$("[href]") Selects all elements with an href attribute Try it
$("a[target='_blank']") Selects all <a> elements with a target attribute value equal to "_blank" Try it
$("a[target!='_blank']") Selects all <a> elements with a target attribute value NOT equal to "_blank" Try it
$(":button") Selects all <button> elements and <input> elements of type="button" Try it
$("tr:even") Selects all even <tr> elements Try it
$("tr:odd") Selects all odd <tr> elements
$("#p1").css("color","red").slideUp(2000).slideDown(2000);
Parse an XML Document
The following code fragment parses an XML document into an XML DOM object:
if (window.XMLHttpRequest)
{// code for IE7+, Firefox, Chrome, Opera, Safari
xmlhttp=new XMLHttpRequest();
}
else
{// code for IE6, IE5
xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
}
xmlhttp.open("GET","books.xml",false);
xmlhttp.send();
xmlDoc=xmlhttp.responseXML;
=======================
Responsive web design (often abbreviated to RWD) is an approach to web design in which a site is crafted to provide an optimal viewing experience—easy reading and navigation with a minimum of resizing, panning, and scrolling—across a wide range of devices (from desktop computer monitors to mobile phones).[1][2][3]
RWD uses CSS3 media queries,[3][5][6] an extension of the @media rule,[7] to adapt the layout to the viewing environment—along with fluid proportion-based grids[8] and flexible images:.[9][10][11][12]
Media queries allow the page to use different CSS style rules based on characteristics of the device the site is being displayed on, most commonly the width of the browser.
window onload and document ready
==================================
The ready event occurs after the HTML document has been loaded, while the onload event occurs later, when all content (e.g. images) also has been loaded.
Multi-tenancy
===============
Multi-tenancy is an architecture in which a single instance of a software application serves multiple customers. Each customer is called a tenant.
With a multi-tenancy architecture, the provider only has to make updates once. With a single-tenancy architecture, the provider has to touch multiple instances of the software in order to make updates.
jQuery Fading Methods
============================
With jQuery you can fade an element in and out of visibility.
jQuery has the following fade methods:
fadeIn() The jQuery fadeIn() method is used to fade in a hidden element.
fadeOut() The jQuery fadeOut() method is used to fade out a visible element.
fadeToggle() The jQuery fadeToggle() method toggles between the fadeIn() and fadeOut() methods.
fadeTo() The jQuery fadeTo() method allows fading to a given opacity (value between 0 and 1).
The optional speed parameter specifies the duration of the effect. It can take the following values: "slow", "fast", or milliseconds.
The optional callback parameter is the name of a function to be executed after the fading completes.
jQuery Sliding Methods
=========================
slideDown()
slideUp()
slideToggle()
Query slideToggle() Method
============================
The jQuery slideToggle() method toggles between the slideDown() and slideUp() methods.
If the elements are slide down, slideToggle() will slide them up.
If the elements are slide up, slideToggle() will slide them down.
jQuery stop() Method
======================
The jQuery stop() method is used to stop an animation or effect before it is finished.
jQuery Callback Functions
===========================
A callback function is executed after the current effect is finished.
DOM = Document Object Model
===========================================================================
The DOM defines a standard for accessing HTML and XML documents:
"The W3C Document Object Model (DOM) is a platform and language-neutral interface that allows programs and scripts to dynamically access and update the content, structure, and style of a document."
Get Content - text(), html(), and val()
============================================================================
Three simple, but useful, jQuery methods for DOM manipulation is:
text() - Sets or returns the text content of selected elements
html() - Sets or returns the content of selected elements (including HTML markup)
val() - Sets or returns the value of form fields
The jQuery empty() method removes the child elements of the selected element(s).
The jQuery remove() method removes the selected element(s) and its child elements.
append() - Inserts content at the end of the selected elements
prepend() - Inserts content at the beginning of the selected elements
after() - Inserts content after the selected elements
before() - Inserts content before the selected elements
addClass() - Adds one or more classes to the selected elements
removeClass() - Removes one or more classes from the selected elements
toggleClass() - Toggles between adding/removing classes from the selected elements
css() - Sets or returns the style attribute
AJAX = Asynchronous JavaScript and XML.
===========================================
AJAX is the art of exchanging data with a server, and updating parts of a web page - without reloading the whole page.
AJAX is about loading data in the background and display it on the webpage, without reloading the whole page.
jQuery provides several methods for AJAX functionality.
With the jQuery AJAX methods, you can request text, HTML, XML, or JSON from a remote server using both HTTP Get and HTTP Post - And you can load the external data directly into the selected HTML elements of your web page!
HTTP Request: GET vs. POST
Two commonly used methods for a request-response between a client and server are: GET and POST.
GET - Requests data from a specified resource
POST - Submits data to be processed to a specified resource
GET is basically used for just getting (retrieving) some data from the server. Note: The GET method may return cached data.
The load() method loads data from a server and puts the returned data into the selected element.
POST can also be used to get some data from the server. However, the POST method NEVER caches data, and is often used to send data along with the request.
$.ajax() Performs an AJAX request
ajaxComplete() Specifies a function to run when the AJAX request completes
ajaxError() Specifies a function to run when the AJAX request completes with an error
ajaxSend() Specifies a function to run before the AJAX request is sent
$.ajaxSetup() Sets the default values for future AJAX requests
ajaxStart() Specifies a function to run when the first AJAX request begins
ajaxStop() Specifies a function to run when all AJAX requests have completed
ajaxSuccess() Specifies a function to run an AJAX request completes successfully
$.get() Loads data from a server using an AJAX HTTP GET request
$.getJSON() Loads JSON-encoded data from a server using a HTTP GET request
$.getScript() Loads (and executes) a JavaScript from the a server using an AJAX HTTP GET request
load() Loads data from a server and puts the returned data into the selected element
$.param() Creates a serialized representation of an array or object (can be used as URL query string for AJAX requests)
$.post() Loads data from a server using an AJAX HTTP POST request
serialize() Encodes a set of form elements as a string for submission
serializeArray() Encodes a set of form elements as an array of names and values
$("button").click(function(){
$.post("demo_test_post.asp",
{
name:"Donald Duck",
city:"Duckburg"
},
function(data,status){
alert("Data: " + data + "\nStatus: " + status);
});
});
var jq = $.noConflict();
jq(document).ready(function(){
jq("button").click(function(){
jq("p").text("jQuery is still working!");
});
});
HTML5
==========
New Elements
New Attributes
Full CSS3 Support
Video and Audio
2D/3D Graphics
Local Storage
Local SQL Database
Web Applications
HTML5 is a cooperation between the World Wide Web Consortium (W3C) and the Web Hypertext Application Technology Working Group (WHATWG).
WHATWG was working with web forms and applications, and W3C was working with XHTML 2.0. In 2006, they decided to cooperate and create a new version of HTML.
Some rules for HTML5 were established:
New features should be based on HTML, CSS, DOM, and JavaScript
Reduce the need for external plugins (like Flash)
Better error handling
More markup to replace scripting
HTML5 should be device independent
The development process should be visible to the public
What is HTML5 Web Storage?
==============================
With HTML5, web pages can store data locally within the user's browser.
Earlier, this was done with cookies. However, Web Storage is more secure and faster. The data is not included with every server request, but used ONLY when asked for. It is also possible to store large amounts of data, without affecting the website's performance.
The data is stored in key/value pairs, and a web page can only access data stored by itself.
localStorage - stores data with no expiration date
sessionStorage - stores data for one session
What is Application Cache?
==================================
HTML5 introduces application cache, which means that a web application is cached, and accessible without an internet connection.
Application cache gives an application three advantages:
Offline browsing - users can use the application when they're offline
Speed - cached resources load faster
Reduced server load - the browser will only download updated/changed resources from the server
What is a Web Worker?
==================================
When executing scripts in an HTML page, the page becomes unresponsive until the script is finished.
A web worker is a JavaScript that runs in the background, independently of other scripts, without affecting the performance of the page. You can continue to do whatever you want: clicking, selecting things, etc., while the web worker runs in the background.
Server-Sent Events - One Way Messaging
====================================================================
A server-sent event is when a web page automatically gets updates from a server.
This was also possible before, but the web page would have to ask if any updates were available. With server-sent events, the updates come automatically. The EventSource object is used to receive server-sent event notifications
HTML Best Practices Examples:
====================================================================
Use meaningful Title Tags and Meta Tags;
Always close your tags;
All images require the “Alt” attributes;
Proper use of headings (Use H1 – H6 Tags);
View source and validate all the code;
Use the right HTML elements at the right place;
Use lower case markup;
Be consistent in how you work;
Avoid using inline styles;
Place Javascript fiels at the bottom.
Declare the Correct DocType
Consider Placing Javascript Files at the BottomPlace all External CSS Files Within the Head Tag
Never Use Inline Javascript. It’s not 1996!
Keep Your Tag Names Lowercase
Choose a Great Code Editor
Once the Website is Complete, Compress!
CORS
=========
Cross-Origin Resource Sharing (CORS) is a W3C spec that allows cross-domain communication from the browser. By building on top of the XmlHttpRequest object, CORS allows developers to work with the same idioms as same-domain requests.
E[@foo] an E element with a "foo" attribute
E[@foo=bar] an E element whose "foo" attribute value is exactly equal to "bar"
E[@foo^=bar] an E element whose "foo" attribute value begins exactly with the string "bar"
E[@foo$=bar] an E element whose "foo" attribute value ends exactly with the string "bar"
E[@foo*=bar] an E element whose "foo" attribute value contains the substring "bar"
$("*") Selects all elements Try it
$(this) Selects the current HTML element Try it
$("p.intro") Selects all <p> elements with class="intro" Try it
$("p:first") Selects the first <p> element Try it
$("ul li:first") Selects the first <li> element of the first <ul> Try it
$("ul li:first-child") Selects the first <li> element of every <ul> Try it
$("[href]") Selects all elements with an href attribute Try it
$("a[target='_blank']") Selects all <a> elements with a target attribute value equal to "_blank" Try it
$("a[target!='_blank']") Selects all <a> elements with a target attribute value NOT equal to "_blank" Try it
$(":button") Selects all <button> elements and <input> elements of type="button" Try it
$("tr:even") Selects all even <tr> elements Try it
$("tr:odd") Selects all odd <tr> elements
$("#p1").css("color","red").slideUp(2000).slideDown(2000);
Parse an XML Document
The following code fragment parses an XML document into an XML DOM object:
if (window.XMLHttpRequest)
{// code for IE7+, Firefox, Chrome, Opera, Safari
xmlhttp=new XMLHttpRequest();
}
else
{// code for IE6, IE5
xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
}
xmlhttp.open("GET","books.xml",false);
xmlhttp.send();
xmlDoc=xmlhttp.responseXML;
No comments:
Post a Comment