What is Drupal in 57 seconds !!!

Soon in my blog

HTML 5 Canvas clock in Drupal

• Download Needed files...
• download coolclock.js file from here
• download moreskins.js file from here
• For IE versions download excanvas.js file from [latest version of excanvas.js] here

• Next create a block in drupal admin/build/block and,
• Link all the above files in the block
• eg: 
• script type="text/javascript"src="/path0/path1/path2/coolclock.js"></script
• script type="text/javascript" src="/path0/path1/path2/moreskins.js"></script 
• NOTE : and for IE 6,7,8 (you should add the conditional script)
•   eg:
   <!--[if IE]>
  <script type="text/javascript" src="/path0/path1/path2/excanvas.js"></script>
  <![endif]-->
  
   
• And then then add the canvas tag which calls the clock
  
  eg:
  canvas id="c1" class="CoolClock" width="60" height="60" style="width: 170px; height: 170px; "></canvas
• It should probably work in all major browsers (Firfox, Google Chrome, Safari, Opera) but not in IE 5 +
• In-order to fix it in IE include the below function in the body load event, “CoolClock.findAndCreateClocks()”
• eg: body onload="CoolClock.findAndCreateClocks()"
  
• Viola!!!!!! Enjoy HTML5 Canvas Clock

New features for fonts in HTML5 and CSS3

HTML 5 and  CSS3 offers new features in ‘Fonts’, these features are lot more effective comparing to the existing CSS2 ‘fonts’ properties. Lets have an in-depth look at it.

1. One of the major property/feature in CSS3 is using Custom fonts in websites.

Using custom fonts were restricted  in CSS2 and were limited to some fonts such as ‘Arial’,’TimeNewRoman’,’Verdana’ etc...  therefore we had to use  javascript/jquery as an alternative solution. There came the time to take a deep breath for web-developers, Yes! W3C (World Wide Web Consortium) came up with their update in CSS as CSS3 which was a remedy for using Custom fonts too.

There are two ways of using Custom fonts

1. Using our own fonts
2. Using google webfonts (this has a wide range of fontstyles)

These two works in all browsers  Firefox, Chrome, Safari, Opera, IE5+

• Using our own fonts
• Upload the font file(s) you want to use to the(your) server.
• CSS3 can renders several font formats: “truetype” (ttf), “opentype” (otf), “embedded-opentype” (eot) and “scalable-vector-graphic” (svg,svgz).
• IE versions use .eot font type
• In order to use a font, we must first call it using the ‘@font-face’ attribute and this must be done for each individual font we wish to use.
• See  the below sample code

/*Note : This is the way you declare and make the font  to your site */

@font-face{

font-family:your-font-name;

src:url(‘/my/font/location/fontfilename.ttf’) format(“truetype”); /*Non IE*/

src: url(‘/my/font/location/fontfilename.eot?#iefix') format('eot');    /*IE */

}

Note: I have used an IE hack which is highlighted in green to use the custom font above  ‘’

/*The next step is using the font  as you would do to anyother  */

.selector{

    font-family:your-font-name;     /*this should be similar to what you’ve given above*/   

}

Enjoy!

View : Demo

• Using google webfonts
• Go to : http://www.google.com/webfonts
• Then select the font, add it to our collection
• Click  ‘Use’ button in bottom to get the generated code for your selected font code ViewImage
• and then copy the code in step 3 and 4 to your HTML file and CSS file respectively. ViewImage

    eg:

• This is HTML code in step3 which is supposed to be placed in your tag 

            head>

           link href='http://fonts.googleapis.com/css?family=Cedarville+Cursive&v2' rel='stylesheet' type='text/css'>

         

• The next is to place your CSS in the particular selector

    .yourSelector{

     font-family: 'Cedarville Cursive', cursive;   

}

Enjoy!

View : Demo

2. Font-Stretch is the next feature in CSS3

• The property is ‘font-stretch’
• and meny values such as:
• normal
• wider\narrower
• condensed
• expanded
• inherit and more...
• Sadly :( this feature doesn’t support propperly in any of the major browsers

3. Another useful feature is ‘Font-size-adjust’

• Which allows you to specify an aspect ratio for your text when font fallback.

What is it ?
You give a font-family to your element such as
    font-family : ‘Trebuchet MS’,’Times new roman’,’Georgia

• Which means go for ’‘Trebuchet MS’  initially if font is not available go for ’Times new roman’ and so on,
• So just in-case if the first font is not available it loads the second one , this sometime causes to break the styles/ neatness of your site, because aspect value (x-height) in each font type differs so
• To avoid and overcome this issue CSS3 has come with a cool property ‘font-size-adjust’
• this allows you to use the same aspect values when a font is fallback
• http://en.wikipedia.org/wiki/Fallback_font
• View :Demo

 
 

Jquery Cheats

Click on the image to view the Extra-large version

Features Module Drupal

IMO Absolutely this module should be named as one of the core module in Drupal, This is the feature that we all (Drupal developers) were expecting when we were struggling to get the site 'live' from 'staging' or 'staging' from'development'. So here the most anticipated feature of Drupal developers.

What the module does ?
In a nutshell this module allows you to Import and Export Content types,Views,CCK Fields, Permissions, Roles, Menus etc... from one drupal site to another.

Step by step instructions

• Download the module from : http://drupal.org/project/feature
• Upload, Enable it in /admin/build/modules
• After you enable the module you could see the 'Fetures' tab in 'Site Building ' menu or you can directly redirect to  /admin/build/features
• Once you click on that tab or go to the admin/build/features link you might get into the features configurations page with two tabs 
1. Manage
2. Create feature
• Click on 'Create feature'
• Note : all the features that your going to create is going to be a separate module/ will export a different module.(you can get a clear picture of what I mean in the end of this chapter)
•  In the 'Name' field give an appropriate name for your feature.
• Then a 'Description'
• Then the 'Version' such as 6.x-1.0,  6.x-1.0-beta1
• (This is the normal structure of a module you write in the .info file See module development ) 
• Leave the "URL of update XML" field for now 
• In the "Edit components" dropdown list, select the component that you want to export             eg: Views
• Once 'Views' is selected it will give you a  list of the views that you've created in /admin/build/views
• Select the view you want to export (you can select multiple views)
• If all set, then hit the 'Download feature' button and export your view(it will download as a zipped/tar/rar file as you download a module)
• Now your done with exporting your view.
• Note 2: Hope you understood why I said 'its a module' in the previous note
•  Yipppi!!! we exported our view, and next is to import it to the other Drupal site where we need the same view.
• Go to the other site and make sure the 'Features' module is Installed and enabled
• Now untar the feature you downloaded and then upload it to your /sites/all/modules/ folder via FTP
• Then click the 'Features' configuration page in the 'Site Building' menu or go to admin/build/features 
• Click on 'Manage' 
• You'll find the feature that you uploaded in the manage page. 
• Simply check the chekcbox and enable the feature.
• Hurrraaaay!!! the component you exported would be available for in your new site too
• eg: If you have exported a view and uploaded in the other site, the view would have been created in your site by enabling it, you can still check it in /admin/build/views .
• Enjoy Features module cheers :)

  

Adding Custom Markers Open layers and Geocoder in Drupal : Part 2

 Part 1
Introduction
This is an area which covers to add ‘Custom markers’ or ‘Multiple Custom markers’ to yourGeo map. This chapter assumes that you have a fair understanding about the Part1 which is in the above link.

• Now your map is created and then you see  the default marker (ornage/blue ring) sticked in the Address you added.
• now we need to change the marker

Step by Step

• Site building --> Openlayers--> Styles or /admin/build/openlayers/styles
• All the markers will be listed, Clone the ‘Default style’ marker.
• Fill all the fields with your new markers name and description
• Under Style Properties and Plugins--> externalGraphic give the URL of your marker
• then to define the size of the marker size click on pointRadius and adjust then adjust the numeric value in textbox
• Save the Style;
• Your marker will be displayed in the list

• Now you need to select the custom marker for your map
• Go-to the Preset you’ve created already
• Select Layers & Styles tab
• Scroll down to see your ‘View’  you’ve activated and enabled in ‘Overlay layers’
• Select the marker/ style you created from the dropdown list in ‘Style’ column
• Select in all three Dropdown  list
• And hit Save.
• Refresh your map-page and you’ll get your newly created markers

Demo

Integrating Open layers and Geocoder in Drupal

Integrating Open layers and Geocoder in Drupal

Required Modules:

• Openlayers                   : http://drupal.org/project/openlayers
• Openlayers geocoder   : http://drupal.org/project/openlayers_geocoder
• Views                            :  http://drupal.org/project/views

• Enable all the required modules
• Add a content type     eg : ‘Geo Map’
• Create a field on the Content type by clicking on ‘Managing Fields
• Select the ‘ Openlayers WKT’ as your type data to store.
• and ‘Openlayers Geocoder’ Form element type.
• Save the content type

• Create a View : admin/build/views/
• Add a ‘Openlayers Data’ display type
• Add fields :
• Node:title
• Node:teaser
• Content : OpenLayers WKT
• in this field select label ‘none’
• and Format ‘WKT value’
• Filter it by:
• Node type : Geo Map
• Node published: Yes
• Save the view
• View screenshot http://i709.photobucket.com/albums/ww94/ashkarrahman/Openlayers/figure05.jpg

• Now lets create preset
• Go to admin/build/openlayers/presets/
• Clone one of the existing preset ‘eg : Default’
• Rename the fields as you want
• and save the preset
• Now you should find your newly created preset in the admin/build/openlayers/presets/ list.
• Click edit on your preset
• Click the ‘Layers &; Styles’ tab
• Select ‘Map Projection’ 900913
• Display Projection: 4326
• Base layers : Google Maps Normal [Enabled and Default]
• Overlay layers : Enable and Activiate the ‘view’ you created/
• View Screenshot http://i709.photobucket.com/albums/ww94/ashkarrahman/Openlayers/figure02.jpg
• Beahviours is the tab where you  can enable popus for the points you add
• View screenshot http://i709.photobucket.com/albums/ww94/ashkarrahman/Openlayers/figure03.jpg
• The ‘General Information’ tab contains the info about your preset
• The map ‘width’ and ‘height’ could be Adjusted here
• The ‘Center & Bounds’ tab shows where the map will center itself initially.
• Save your preset

Re-check whether you have selected the correct map preset in /admin/build/openlayers - Openlayers Default Preset, and Click ‘Save Configurations’.

• Now go back to our created ‘View’
• Add a ‘Page’ display
• In Basic settings
• Change the style options into ‘OpenLayers Map’
• and click ‘override’ and then ‘update’
• Click the gear icon next to ‘OpenLayers Map’ in styles (Basic settings) and select the Map preset you Created above.
• Override and Update
• Give a path in the ‘Page settings’ below ‘Basic settings’ block eg:map
• Save your ‘View’
• View Screenshot http://i709.photobucket.com/albums/ww94/ashkarrahman/Openlayers/figure04.jpg

• We are almost done with our configurations

• Next lets create a ‘Content’
• The content type is supposed to be the content type you created above.
• And you’ll see your map appearing
• select a location in the map
• or type location in the ‘Search address’ autocomplete field
• and click Save.

• Voila !!!!!
• To view all the locations in one map, go to the path you added in the view eg: http://sitename/path-in-view
• Enjoy and have fun...
• See you in Part2 of the same chapter ‘Adding Custom Multiple Markers’
• http://drupalthread.blogspot.com/2011/07/adding-custom-markers-open-layers-and.html

Demo