Category: Web Tech

  • Sharepoint: Christmas Wishing Application

    Sharepoint: Christmas Wishing Application

    I had a wired Idea to wish people on Christmas. Normally, I send image greeting cards to my friends and colleagues. But that I am doing now for years. I wanted to do something different. Sending e-Cards was other option. But it is more or less the same.

    Then an Idea struck me. I am not too sure that this kind of application is even available or you all will like it. Nonetheless, its here…

    The idea is to have wishes for your colleagues, to be able to wish people online, on record with no involvement of email (except for sharing the URL, ofcourse.)

    I used this beautiful Christmas Theme readily available from Brightstarr on their website. http://www.brightstarr.co.uk/SiteCollectionDocuments/Its%20Christmas.zip

    I created a Blank Sharepoint site with Custom List.

    Me and my colleagues created a web part solution file to show a random online wishing list. The users can visit the website and click opens a form which has fields like:

    Your Name:

    Who you want to wish:

    The Occasion: New Year or Xmas

    Your personal wish:

    After he puts these details in and submits the form, the data is stored in the Sharepoint List.

    The important part is to create a web part that displays these entries in a list and to create each entry formatted in a table, while it keeps scrolling.

    The table looked something like this which is constantly scrolling.

    Image based on the user selection. For example, Xmas Image if the user selected to wish his colleague on Christmas.

    		Person 1 wishes person 2, a Merry Christmas
    Personal MessageDude, when we are launching this application! Merry Christmas

    Steps Taken:

    1. Created a Custom list named Categories with three columns:WishName: Xmas or New YearWishDescription: a merry Christmas or a Happy New Year (text as is)Imagepath: (textbox) used to pull the url and put it as a back ground image of the TD in the auto scrolling layer.
    2. Then Created a Custom List named Wishing Bag, with four columns as mentioned above.Your Name: Text Box
      Who you want to wish: Text Box
      The Occasion: Data input from Categories list > WishName field
      Your Personal wish: Text Area.
    3. Creating the web partWith this created, I would share the logic with which the web part is created.
      Image URL is picked up from the Categories list from the column > ImagePath

      This is decided basis which $WishName$ the user has choosen.

      		Person 1 wishes person 2, a Merry Christmas

      The Person 1 is taken from the Wishing Bag list column $Your Name$

      The Person 2 is taken from the Wishing Bag list column $Who you want to wish$

      “wishes” is hard coded in the code

      A merry Christmas is taken from the Categories column $WishDescription$.

      Since the image on the left shows the correct $WishName$, it is easy to take the description from Categories list.

      Personal MessageDude, when we are launching this application! Merry Christmas

      Personal message take from the $Your Personal wish$ column.

    4. Deploying this webpart is the fourth step.
    5. Post that, you will need to import this webpart to the page.
  • What is HTML? Basics of HTML and XHTML

    What is HTML? Basics of HTML and XHTML

    I had written this article for some of my team members’ benefit, and sharing it with you all here for yours! 🙂

    What is W3C?

    W3C stands for World Wide Web Consortium. Its an organization which develops interoperable technologies (specifications, guidelines, software, and tools) to lead the Web to its full potential. W3C is a forum for information, commerce, communication, and collective understanding.

    What is HTML?

    HTML is a computer language devised to allow website creation. These websites can then be viewed by anyone else connected to the Internet. It is relatively easy to learn, with the basics being accessible to most people in one sitting; and quite powerful in what it allows you to create. It is constantly undergoing revision and evolution to meet the demands and requirements of the growing Internet audience under the direction of the » W3C, the organization charged with designing and maintaining the language.

    The definition

    • Hyper Text is the method by which you move around on the web — by clicking on special text called hyperlinks which bring you to the next page. The fact that it is hyper just means it is not linear — i.e. you can go to any place on the Internet whenever you want by clicking on links — there is no set order to do things in.

    • Markup is what HTML tags do to the text inside them. They mark it as a certain type of text (italicized text, for example).

    • HTML is a Language, as it has code-words and syntax like any other language.

    What is DocType?

    DocType is the Document Declaration Tag. This helps the browser to understand the version of HTML or XHTML the files is being created in. After determining the HTML / XHTML version, the browser renders the code in the respective format.

    This particularly helps in terms of older versions of HTML / XHTML. With every new HTML version, some of the tags are added and some are removed. If the browser is supporting the latest version and the HTML is of older version, it will not support the tags removed in the latest version.

    However, if proper doc type declaration is made, then the browser will understand that for rendering the HTML page is to be made according to the earlier version.

    What are MIME types?

    MIME types are another part of the HTML header – an important one. Also known as the content-type header, they tell the browser what kind of file they are about to send. Browsers don’t rely on HTML files ending in .html, JPEG images ending in .jpeg, and so on: they rely on the content-type header.

    text/html – HTML.
    text/css – CSS
    text/plain – plain text.
    image/gif – GIF image.
    image/jpeg – JPEG image.
    image/png – PNG image.
    audio/mpeg – MP3 audio file.
    application/x-shockwave-flash – Flash movie.

    What is XHTML?

    What is the difference between XHTML & HTML?  XHTML is just cleaner HTML—tags are consistently lowercase, all tags are closed, and tags are properly nested.

    An example how do you create a cell in XHTML?

    The Cell can be created in the following format.

    <table>
    <tr>
        <td> This is a Cell </td>
    </tr>
 </table>

    The above illustration shows how a cell is created. The Table tag defines to the browser that the following code will be displayed in a Tabular Format.

    TR tag defines the start of the row, where as TD  defines the start of the Cell.

    With the closing each and every tag in a properly nested format, with lower case, can make it XHTML.

    An example of valid XHTML code

    The look and feel of the table should be exactly same with font pixels set at 10px, and you should use CSS to style the following table.

    Table Table of Contents
    Type of Buildings Type A – Flat Systems Type B – Flat System
    Bungalow System
    Type of Material Bricks Wood

    Answer:

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
 <html xmlns="https://www.w3.org/TR/xhtml1/normative.html">
 <head>
 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
 <title>Document Title</title>

<style>
 table
 {
 font-family:Verdana, Arial, Helvetica, sans-serif; font-size:10px;
 }
 .style1 {color: #FF6600}
 .style2 {color: #0033CC}
 </style>

</head>

<body>
 <table>
 <tr>
 <td>Table</td>
 <td colspan="2">Table of Contents</td>
 </tr>
 <tr>
 <td rowspan="2" valign="top"><span class="style1">Type of Buildings</span></td>
 <td><span class="style2">Type A – Flat Systems</span></td>
 <td class="style2">Type B – Flat System</td>
 </tr>
 <tr>
 <td width="394" colspan="2" valign="top" class="style2">Bungalow System</td>
 </tr>
 <tr>
 <td>Type of Material</td>
 <td class="style2">Bricks</td>
 <td class="style2">Wood</td>
 </tr>
 </table>
 </body>
 </html>

    Example Output

    TableTable of Contents
    Type of BuildingsType A – Flat SystemsType B – Flat System
    Bungalow System
    Type of MaterialBricksWood

     

     

     

    What is Accessibility for Website?

    Accessibility is basically making websites accessible to the disabled. The disabled use specific browsers to read out the HTML based web pages on the website. By ensuring compliance to W3C Guidelines, you can easily be compliant to these browsers.

    >> The British Disability against Discrimination Act, the US Sec 508, The Australian Disability Law etc, are the laws of the respective countries where following web accessibility is made compulsory.