Tag Archives: css

Short Courses: Mobile Apps using PhoneGap

by

phonegap

Ever thought of depending Mobile Apps using Web Languages? Yes its possible using HTML & JavaScript. Phonegap from Adobe provides exactly what you will need to make such Apps for Android, iPhone etc. This course is totally practical and provides hands-on experience to the participants. Students are expected to bring their own Laptops/Notebooks.

The fee for this course is PKR 2,800 and all the fee collected will be donated to Mishkat Welfare Trust
From: 30th June to 4th July 2014
Timings: 8:30 AM to 11:00 AM
Venue: Olives School, Judicial Colony, Rawalpindi.

Limited transport facility available for female students. Please mention it in the Comments field and provide your address.

At least 5 students must be enrolled for the course to commence.

Short Courses: Designing Websites using HTML5 and CSS3

by
HTML5 Logo

HTML5 Logo

An opportunity to learn Web Designing using the latest techniques of HTML5 and CSS3 in just 1 week. This course is totally practical and provides hands-on experience to the participants. The following are the contents of this course:

  • Basics of Web Designing
  • Working with Images, Table and Forms
  • Styling pages with CSS3
  • Using custom CSS fonts in webpages
  • Changing web page design depending on user screen and device
  • Create animation effects using CSS3
  • CSS Grid system

Students are expected to bring their own Laptops/Notebooks.

The fee for this course is PKR 2,800 and all the fee collected will be donated to Mishkat Welfare Trust
From: 23rd June to 27th June 2014 25th June to 29th June 2014
Timings: 8:30 PM to 11:00 PM
Venue: Olives School, Judicial Colony, Rawalpindi.

Limited transport facility available for female students. Please mention it in the Comments field and provide your address.

Using CSS to Create 3 Columns from DIVs

by

Consider the following code where we have 3 DIV elements nested inside another DIV element:

<div id="container">
   <div id="col1">
      Col 1
   </div>

   <div id="col2">
      Col2
   </div>

   <div id="col3">
      Col 3
   </div>
</div>

To format such elements into 3 columns, we will use the following CSS code:

#container {
   background-color: White;
   float: left;
   width: 100%;
   border: 1px solid Black;
}

#col1 {
   background-color: Red;
   float: left;
   width: 20%;
}

#col2 {
   background-color: Blue;
   float: left;
   width: 60%;
}

#col3 {
   background-color: Green;
   float: left;
   width: 20%;
}

Click for Demo

Optimizing Websites

by

I have listed some resources which I found useful which come under the heading, Optimizing Websites!

Compressing Images

www.smushit.com/ysmust.it

CSS Compression

www.cssdrive.com/index.php/main/csscompressor/

JS Compression

www.jscompress.com

Other Tips

It is a good idea to keep the originals files and rename the compressed files as [file_name].min.[extension]
http://code.google.com/p/minify
http://gist.github.com/491083

Serving files from couple of domains or sub-domains will save load time because they are downloaded in parallel.
http://betterexplained.com/articles/how-to-optimize-your-site-with-gzip-compression/
http://www.alistapart.com/articles/sprites
http://spritegen.website-performance.org/
http://developer.yahoo.com/performance/rules.html
http://www.askapache.com/htaccess/apache-speed-cache-control.html
http://code.google.com/speed/page-speed/docs/rtt.html#ParallelizeDownloads
http://drupal.org/node/685774#comment-2518764
http://github.com/farhadi/SmartOptimizer

Using Web Open Font Format (WOFF) for Arabic and Urdu

by

WOFF is font format especially designed for the web. Developed in 2009, it is the future standard format that will be adapted by W3C. WOFF is basically an encoding/compression technique by which other fonts will be packed and ready for download with the web page just like images.

This way the developer can design using any font and the look-n-feel will remain the same.

Converting fonts to WOFF format

There are many tools available to convert fonts to WOFF format:

  1. Online Font Generator (http://www.fontsquirrel.com/fontface/generator)
  2. The FontForge tool, but the WOFF support is not fully added.
  3. The sfnt2woff command line tool available for Windows and Mac on http://people.mozilla.com/~jkew/woff/
    Command example: 

    sfnt2woff.exe <fontname>.ttf

Using WOFF fonts in Web pages

  1. The converted WOFF fonts can be placed in the web directory (for example under fonts directory).
  2. Next, the CSS needs to applied: 
    @font-face {
   font-family: "myFont";
   src: url("fonts/myfont.woff");
}
  3. This will add the font with the name myFont as a resource.
  4. This can now be referred to any text as: 
    font-family: 'myFont', 'serif';
  5. The font will be downloaded and then applied to the web page.

The Problem with Arabic and Urdu fonts

There are however certain problems when it comes to Arabic and Urdu fonts. The conversion results in an error. So for the time being the conversion tools are not suitable and appropriate for Arabic and Urdu fonts.