Weave & Connect

The WebGL is a part of the JavaScript language library. It enables one to create interactive interfaces and creative environments. The latest example that we come across is the Sony PlayStation 4 (PS4) . The whole startup environment of the menu and all the tiles are made in WebGL exclusively. It is an extremely powerful web technology library, which makes UI design using the 3D models and interfaces very fluid and simple. It provides an elegant look to interfaces. It runs on the OpenGL 2.0 model. All the web browsers are usually equipped to handle this version of the OpenGL but the higher versions of OpenGL requires professional graphics cards like Nvidia's Professional Graphics soultions as Nvidia Quadro Series. NVIDIA Quadro K2000D Nvidia Tesla Series And the AMD's professional graphics solution are AMD FirePro Series. ATI FirePro V5900 ATI FirePro V7900  Now once the content is created we need to test the results as they are to be sol

The language that gives rise to creativity and freedom for a developer. It lets the developer design their own set of language tags that we generally oserve in a markup language. And at the end we get a markup language dtd based on XML. The XML has built new range of platforms like Android interface development and Windows 8 interface development under XAML. Imagine you are working with a website which deals with electronics products.What if you had your own language to which you can define your own rules.No more syntax bindings that were defined by others, no more limits of certain type of data not getting accepted into the forms. You get the leash to command the power of your own dtd. Wouldn't that be great? Let us have a look how that can be possible. XML makes it possible. The famous Extensible Markup Language by which the most used applications in Android and Windows 8 apps are designed makes one reach dreams that were more tedious to reach and sometimes forgotten d

Now we have understood how simple scripting in JavaScript is written. Let us take in some input from the user using the prompt(); function. prompt(); function: The prompt function prompts the user to input data into it by providing a textbox.You also get two buttons to input your reaction.Hence the interactivity. Now the website has asked the input data, now let it process it and act upon it. You have entered the data asked by the webpage prompt, now let us store it in a variable. STORING OF VARIABLES USING prompt(); Storing the data directly upon entering is done using the variable declaration along with the prompt input function separated by a "=" sign. var num = prompt("Enter a number"); DECLARING OF VARIABLES In JavaScript variables are declared using the "var" keyword. Any variable can be created using this keyword, irrespective of the type of data it stores viz.textual,numerical,symbolical,patterns. Sample variable

JavaScript Why is JavaScript special? JavaScript generates DYNAMIC content. JavaScript gives life to your content by animating certain parts and adds interactivity to it.Weren't the hyperlinks enough,why do I need more interactivity? Let us map this to the concept of writing in a book once again. It is pretty hard to imagine interactivity so let us take an example we are aware of i.e. cartoons we see animating in the television. Imagine one day you open your book and suddenly the objects start animating like the cartoons from your favorite bestselling television series. Similarly, JavaScript does the same thing to the content. This is just the beginning, it gets more deeper and denser by allowing you to have complete control of your page content with Server Side Scripting. In this post we have just begun with some simple functional interactivity. We have some simple functions in JavaScript like: 1.     alert(); 2.     document.write(); The alert() function in JavaScript alerts the

Next we have font variant. The font variant does two things mainly like. It changes the smaller case letters to upper case. It adjusts the upper case letter in the previous case to adjust the size of all the letters. Here is a showcase of font variant property in CSS. 1: <?xml version = "1.0" encoding="utf-8"?> 2: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> 3: <html xmlns = "http://www.w3.org/1999/xhtml"> 4: <head> 5: <title>CSS Styling</title> 6: </head> 7: <body> 8: <p class="red"> 9: Red 10: </p> 11: <p class="blue"> 12: Blue 13: </p> 14: <p class="green"> 15: Green 16: </p> 17: <style> 18: p.red 19: { 20: color:red; 21: font-size:20px; 22: font-weight:normal; 23: font-fam

We observe many different font types in word editors, email texts, web pages etc. We can achieve the different font types using the font-family attribute in CSS. Font-Family The font-family names can be classified into two types: Generic family Font family 1. Generic family      The generic family is the default fonts installed in the machine. Why use generic? They can be used as backup, if the font used by one is not installed in a particular machine. 2. Font Family      These font family is all the rest of the fonts which can be used to design the font types in a webpage. Here is a sample program showcasing the font-family attribute. 1: <?xml version = "1.0" encoding="utf-8"?> 2: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> 3: <html xmlns = "http://www.w3.org/1999/xhtml"> 4: <head> 5: <title>CSS Styling

In the earlier post, we looked at the font-style attribute. It gives some styles like italic,normal,oblique. But what about the bold. The bold style is defined under the font-weight attribute. The font weight attribute can be defined in many different ways, let us have a look at some basic ways like normal,bold,bolder,lighter. 1: <?xml version = "1.0" encoding="utf-8"?> 2: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> 3: <html xmlns = "http://www.w3.org/1999/xhtml"> 4: <head> 5: <title>CSS Styling</title> 6: </head> 7: <body> 8: <p class="red"> 9: Red 10: </p> 11: <p class="blue"> 12: Blue 13: </p> 14: <p class="green"> 15: Green 16: </p> 17: <style> 18: p.red 19: { 20: color:red; 21:

Next let us have a look at font styles. All of us know everybody has different styles of writing, some writing slanting whereas some straight aligned. Similarly in CSS and XHTML one can write in normal, italic, oblique styles of writing. Here is a sample showcasing the font-style attribute in CSS. 1: <?xml version = "1.0" encoding="utf-8"?> 2: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> 3: <html xmlns = "http://www.w3.org/1999/xhtml"> 4: <head> 5: <title>CSS Styling</title> 6: </head> 7: <body> 8: <p class="red"> 9: Red 10: </p> 11: <p class="blue"> 12: Blue 13: </p> 14: <p class="green"> 15: Green 16: </p> 17: <style> 18: p.red 19: { 20: color:red; 21: font-size:20px; 22: font-s

Let us take small steps and then create complex pages. The font sizes can be altered using the font-size attribute. The font-size attribute can be defined in various forms. The simplest is using pixels in short px. Here is an example showcasing the font-size using px. 1: <?xml version = "1.0" encoding="utf-8"?> 2: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> 3: <html xmlns = "http://www.w3.org/1999/xhtml"> 4: <head> 5: <title>CSS Styling</title> 6: </head> 7: <body> 8: <p class="red"> 9: Red 10: </p> 11: <p class="blue"> 12: Blue 13: </p> 14: <p class="green"> 15: Green 16: </p> 17: <style> 18: p.red 19: { 20: color:red; 21: font-size:20px; 22: } 23: p.blue 24: { 25: color:

The program earlier had only one color even though there was all three defined. It can be fixed using the class concept. If you would like to color different set of similar tags with different properties. If classes are not used all the properties of the latest declaration of properties are assigned to all the tags. Here is an example showcasing the class and CSS . 1: <?xml version = "1.0" encoding="utf-8"?> 2: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> 3: <html xmlns = "http://www.w3.org/1999/xhtml"> 4: <head> 5: <title>CSS Styling</title> 6: </head> 7: <body> 8: <p class="red"> 9: Red 10: </p> 11: <p class="blue"> 12: Blue 13: </p> 14: <p class="green"> 15: Green 16: </p> 17: <style> 18:

Designing the webpage for different styles of colors is done using CSS(Cascading Style Sheet) It is just like push of button the things are automated by a process. In the program below we observe that the color are not properly colored why does that happen and how can it be fixed will be looked up in the next post 1: <?xml version = "1.0" encoding="utf-8"?> 2: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> 3: <html xmlns = "http://www.w3.org/1999/xhtml"> 4: <head> 5: <title>CSS Styling</title> 6: </head> 7: <body> 8: <p> 9: Red 10: </p> 11: <p> 12: Blue 13: </p> 14: <p> 15: Green 16: </p> 17: <style> 18: p 19: { 20: color:red; 21: } 22: p 23: { 24: color:blue; 25: } 26: p 27: { 28: color:green;

This program shows the usage of pre tag so that the developer can have clutter free of paragraph tags(lots of them) across a large project. 1: <?xml version = "1.0" encoding="utf-8"?> 2: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> 3: <html xmlns = "http://www.w3.org/1999/xhtml"> 4: <head> 5: <title> This is the title of the page</title> 6: </head> 7: <body> 8: <pre> 9: This is the paragraph tag. 10: T h i s i s t h e p r e t a g 11: With the pre tag I can place a text here 12: and 13: here 14: and also here 15: without any clutter of paragraph tags 16: </pre> 17: <p> 18: This is the second paragraph tag usage 19: </p> 20: </body> 21: </html>

This program below shows the usage of basic 5 tags/XHTML elements html | head | title | body | p 1: <?xml version = "1.0" encoding="utf-8"?> 2: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> 3: <html xmlns = "http://www.w3.org/1999/xhtml"> 4: <head> 5: <title> This is the title of the page</title> 6: </head> 7: <body> 8: <p> 9: Hello Web! 10: </p> 11: </body> 12: </html>

The different set of tags under the different DTD are as below 1: XHTML 1.0 Strict XHTML 1.1 Basic 2: a a 3: abbr abbr 4: acronym acronym 5: address address 6: area b 7: b base 8: base big 9: bdo blockquote 10: big body 11: blockquote br 12: body button 13: br caption 14: button cite 15: caption code 16: cite dd 17: code dfn 18: col div 19: colgroup dl 20: dd dt 21: del em 22: dfn fieldset 23: div form 24: dl h1 25: dt h2 26: em h3 27: fieldset h4 28:

Why do we need different type of DTDs? We need them, because as we see from the basic definition they are packages or templates or sets of particular type of tags or more technically referred to as the HTML elements, so if user wants a particular set of tags to be used then the user may opt for that. Below the meaning of each of them is given. 1. Strict      It makes the developer follow the standards strictly without any loosely tied up tags or incomplete tags.   2. Transitional     The transitional is used to have the backward compatibility. The designer get more freedom to use deprecated tags in this type of dtd. 3. Frameset     The frameset standard allows the designer to use the collection of frame elements and their attributes to be included.They can be included even though they are deprecated features.     If the user would like to have frames in their site then frameset dtd comes into play.     

The Document Type Definition DTD is used to define the set of markup declarations that define the kind of SGML family markup language you use in your website design. The different DTD that can be used under different set of user requirements. For XHTML version 1.0 we have 3 different DTD definitions. XHTML 1.0 Strict <DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">  Transitional <!DOCTYPE html PUBLIC "-W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1-transitional.dtd"> Frameset <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN" "http://www.w3.org/TR/xhtml1-frameset.dtd"> For XHTML version 1.1 we have 2 different DTD definitions XHTML 1.1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd"> XHTML Basic 1.1 <!DOCTYPE html

As the weaver weaves a new fabric, the web's weaver also weaves a new virtual fabric to get marked up and form a inter-connected world. Let us dwell deeper into the process of creation and interconnecting the world. Since the beginning of the human race,we have been producing scriptures,scrolls,books etc.. Now we produce the same things with just a pinch of added flavor of technology into it. So let us learn to line up a range of delicacies.