More of the educational institutions have their unique requirements and it’s very difficult to create a generic solution which can cater to all needs of more of the institutions. www.shcoolsonweb.com have tried to provide such a solution, but still it does not contains all the modules required. From my 6years of experience in education industry, i feel lack of a good open source or cost effective erp for educational institutions, the generic one.

A complete erp solution for educational institutions will have lot’s of modules to fill all the requirements, I can list a few

1. Admission Management
2. Entrance exams management
3. Student Management
4. Identity card/biometric solution management
5. Attendance Management
6. Teachers time table management
7. Employee Management
8. class/course management
9. Exam management
10. Marks sheet publishing
11. Parents-teacher meet management
12. Events Management
13. sports management
14. vehicle management
15. hostel management
16. house management
17. Accounts management
18. Payroll Management
19. Fees Management
20. Library Management
21. Laboratory Management
22. News letter management
23. News Management
24. Notice board management
25. Article management
26. Discussion Forums Management
27. Photo gallery managment
28. Inventory management
29. Point of sale
30. Asset management
31. Alumni management

really overwhelming list of modules. In this list, fees management, course/class management and exam management modules are very difficult to be generic as each institutions across the globe have their unique requirements. It’s very difficult to crate all these modules in a generic fashion by a single entity and even if that is created successfully it will not be cost effective.

We’ve to think of a different model for such a big system. If you see all the modules, we can separate it in to three major section according to their needs.

Basic modules : these modules are very basic entities of the system and needs to work this system. It can include, student management, fees management system, class/course management system educational institutions erp can start with these basic modules. They will provide a bare minimum facility of getting students report class wise and collecting fees.

Moderately required : these management systems are moderately required and these will add some core functionalities. for example employee management, attendance management, exam management, vehicle management, library management, marks sheet publishing, hostel management, accounts, payroll, admission management these modules will all add a unique facility for institutions. But any institution can opt to not use that facility and still continue to use erp. Adding any of these module will be a step towards automation and institutes can go to any level of automation.

Optional modules : these modules are really optional and doesn’t add in any core facility to institutions. These are a value additions to institutions. news letter management , event management, news management, article management, discussion forums, Alumni management etc.

Even today i don’t know any such erp which provides these full list of modules. The one “Literom” by “dreamteam technologies, India” is a close match, but still some are missing. In increasing facility of networking and information technologies, every one wants to be connected every time and it is possible to provide information of students activities to parents instantly. So, it is even now required erp to be accessible in both intranet and internet.

Education industry is a growing at fast pace and have numerous options of business. But, having good solution matching every ones needs is a must.

In my opinion an erp and specifically open source erp can be planned by starting with very basic modules and a plug and play functionality for other modules. With this model, any institution can start with basic modules and that will provide a bare minimum support to management like students in classes and fees reports. Adding each of moderately required modules will provide a new core functionality and institution will move from less automation to full automation. But a strong community is required to develop such a big solution.

I wish, to have such a community support to develop this solution and provide facility to educational institutions of any size to move towards automation and get benefited by innovations in IT sectors and communities.

thanks

HTML4 is doing lot much for us, but that was not enough. So, everybody is doing this or that stimulate many controls in some other way, like input type text as date, time and much more. HTML5 has learned from all this user experiences and tried to make programmers life easier. HTML5 added all these new input types in basic html so, not need of js to do it and much more. Let’s see one by one each features of html5

canvas tag is new to html5 and supports 2d drawing that can be controlled easily using javascript.
Defining canvas element is as easy as defining a div with all properties and styles. for example

Once canvas is created it can be easily controlled using javascript functions.

Commonly used function for context 2d api are

• moveTo(x,y)
• lineTo(x,y)
• strokeRect(x,y,width,height)
• lineTo(x,y)
• beginPath()
• closePath()
• save()
• restore()
• fill()
• stroke()

Embedding video/audio is now very easy with video and audio tag. It’s as easy as embedding an image file. Video tag has attributes

• src
• poster
• preload
• autoplay
• loop
• controls
• width
• height

Audio is similar to video tag, except it is for audio. ( don’t know why)

New structural elements

HTML provided building blocks for structures but no structure element, html5 now provided some new structural elements so, it made easy to create a site template and design elements.

Generally a html page is created as following

Here we are making div behave as structural element with the help of css. It becomes a mess of so many divs. Now with html5, we can write it simply

so , creating site specific elements for structure of html is not required. standard elements are provided, so a standard css can be created. Default behavior of these elements are they sits in their own line. But semantically also, you have to put them in the sequence you want to show them in the browser.

A few block level elements have also been added

The aside element represents a note, a tip, a sidebar, a pullquote, a parenthetical remark, or something that’s just outside the main flow of the narrative. We can make css, to make browser place this element at proper location.

figure
The figure element represents a block-level image, along with a caption. so, now no need to create tricky css for displaying title, or caption with image it can be done easily with figure element.

dialog element is used to display conversation between several persons. element dt is loaded with speakers and element dd is loaded with speech.

New inline elements

mark <m> element is just to mark some text in content on a page. It’s like highlighting some text in book.

time, datetime these elements do not have any special attributes, these are just to identify time and date time content in whole page content. More useful or non visual devices, like robots.

meter is to identify a numeric content in the page. meter can have up to six attributes to describe the value more accurately to machine readable format.

• value
• min
• low
• high
• max
• optimum

progress

New input elements

Dropped elements

Character encoding

<meta charset=”UTF-8″ >

New interactive elements

New dtd

explain more in next post.

In last post i’ve discussed about

@font-face
hsl
box-shadow
animation
transform
transition

Now we’ll discuss about some more properties added to css3

border and background images

Each element in css has box model i.e. when an element is rendered it has boxes around it. Every element has, content box, padding box, border box and margin box. In css3 each of these can be designed separately. By default there background is transparent so background of there parent is displayed.

Background of a box can have multiple layers in css3, just like layers in photoshop. Multiple background images can be applied by comma separated list of images in background-image property. Each of these images forms a layer. Image declared at first position will form topmost layer. If any background color is defined then that color layer will be created at last after form all background image layers. See following example

Here 3 background images are placed. Top most layer will contain image ‘flower.png’ , second layer will contain image ‘ball.png’ and so on.. Positions of each image is set by corresponding entry in background-position property. background position is calculated according to the background-origin property value. Possible values for background-position are

if background-origin is set to border-box then background position will be calculated from border box.

background-repeat defines how background image will be rendered i.e. it is tiled, repeated etc. possible values for background-repeat are

repeat-x | repeat-y | [repeat | space | round | no-repeat]

repeat-x : repeat in horizontal direction only
repeat-y : repeat in vertical direction only
repeat : repeat in all possible directions
space : repeat in all directions without clipping image. background images will be equally spaced and blank space is filled with background color.
round : background is repeated in all directions without clipping image. If blank space is left then, image are resized to fill all blank space.

Other background properties
background-clip : possible values are border-box | padding-box | text
if background-clip is set to text, then background image will be visible through transparent text written in the element.

To apply these properties to element in different browser please use browser specific commands e.g
-webkit-background-image
-moz-background-image
etc.

border-radius

border-radius property is to make curved corners of element like div etc. It has specific commands to make any of 4 corners curved.

border-radius commands can take two one or two values to make curve circular or elliptical. so to make a curve elliptical define

shorthand notation for border-radius is

in this code radius defined is for corners in clockwise direction starting from top-left corner.

Above example may not work even for latest safari. only border-radius simple version worked on my mozilla browser.

border-image

basic command for border radius image is border-radius-image details on it can be read from here

text-shadow

CSS3 added a nice feature of text-shadow. Now to show shadow below text, text-image need not to be created. It’s very easy in css3 to create text shadow

code above will make a shadow positioned at 2px right and 2px down from the text, shadow will be blured to 5px and will of color #coo;

supported browsers for text-shadow are
Webkit (from Safari 3+), Opera 9.5, Firefox 3.1(pre-Alpha), Konqueror or iCab

text-overflow

media query

Till now css supported media=”screen” type functionality to change stylesheet based on media. Other media types supported are ‘aural’, ‘braille’, ‘handheld’, ‘print’, ‘projection’, ‘screen’, ‘tty’, ‘tv’ css3 has improved this support by providing media queries. So, now stylesheet can be changed based on output devices in more details, for instance now stylesheet can be changed according to different sizes of view port. Media queries are logical expressions which evaluates to either true or false. If query return true then defined stylesheet is applied as par css rules. Multiple media queries can be applied to a single statement, separated by comma. for example

media queries can also be applied from html. It is currently not supported by any browser

In the above statement, media type defined is ’screen’ if no media type is defined then it is considered to be ‘all’. So, this statement will include specific.css if output device is color screen.

Media queries can also be applied directly in css statements

details about media queries can be found here.

multi-column

multi-column property of css3 allows designer to specify the no. of columns in which content will be rendered. No additional elements or manipulations or tricks are required to break content in multiple columns and keep them balanced. All manipulations have to be managed for different content in case of dynamic content and it make all that unfeasible solution.

proposed properties for multi columns are

column-count : to determine the number of columns into which the content of the element will flow.
column-width : to describe the optimal width of each column.
column-gap : to set the padding between columns.
column-rule : to define a border between columns.

See following example

List of supported browsers for different properties of css3 are as follows.

CSS3 features in internet explorer

will continue in next post

Using webfonts with @font-face

@font-face feature has already been integrated in css2, it was supported by IE 5 and used a proprietary font format embedded open type (.eot). Now website developers can use any licensed truetype font (.ttf) or open type font (.otf)

To use webfonts, each font family must be first declared use @font-face. It’s a kinda rule to declare font family. syntax is very simple

Any no. of font families can be used. we need to declare for each version of font (bold, italic etc.) with src files. Once @font-face rule is declared, font family can be used anywhere.

HSL Colors

CSS3 can understand HSL(Hue, Saturation, Lightness) colors values.

Hue: it’s the purity of colors and varies from 0-360. 0 or 360 is red, 120 is green and 240 is blue.

Saturation: it’s the intensity of colors. it’s value varies from 0-100%

Lightness: it created different shades for same colors. 0% is dark(black) and 100% is light(white) and it’s values varies in between

box-shadow

css3 has a nice feature of drop shadow around boxes “box-shadow”. box-shadow takes 4 arguments

1. first one is x offset. so a positive x means shadow on right and negative x means shadow on left.

2. second is y offset. positive y means shadow at bottom and negative y means shadow on top.

3. third parameter is blur value of shadow. so, a 0 will create sharp shadow.

4. fourth and last one is the color of shadow.

above code will create a shadow of grey color in right bottom of the box

to work box-shadow in all browsers which support it, you need to put commands for them separately

-moz-box-shadow
-webkit-box-shadow
-o-box-shadow

CSS Animation , transform and transition

css3 provides functionality to move and transform elements. So, we can create cool animations and effects using css3.

let’s start with animation
To start animation first we’ve to declare animation name, duration and loop value.

1. this statement declared animation with the name “myanimation” in further declarations my animation can be used.

2. this statement declares duration of the animation. this animation will be 10 seconds long. default value for duration is 0 and it signifies no animation.

3. this statement sets iteration count. it’s value varies from 0 to infinite. negative no. are considered as 0. iteration count has default value 1, so animation will run from beginning to end.
animation-direction declared direction of animation. it’s default value is normal. it can take any value from [normal, alternate]. In case of alternate value, animation having animation cycle count odd will be played in reverse direction and even value counts are played in normal direction.

4. animation-timing-function property determine how animation will progress over one cycle. It’s default value is ease other possible values are
ease | linear | ease-in | ease-out | ease-in-out | cubic-bezier(, , , )

5. animation-delay is the delay in starting animation after animation is applied. it’s default value is 0 i.e. there will be no delay.

Transitions

CSS Transitions allows property changes in CSS values to occur smoothly over a specified duration.

Normally when the value of a css property changes, the rendered result is updated instantly. Transition allows the value changes updated smoothly over specified duration. So, element css values are animated from old to new value during animation.

Transition are presentational effect, so only properties that can be animated can be transitioned. Properties that can be animated can be viewed here

Transition for a property can be defined easily

Multiple transition property can be defined by comma separated values

shorthand notation for single transition property

transition-property: can have a comma separated list of values to transition other values possible are none and all. ‘none’ means transition will not be applied on any property and ‘all’ means every property that can go under transition, transition will be applied.

The transition-timing-function: property describes how the intermediate values used during a transition will be calculated. Intermediate values are calculated by using ‘cubic bezier’ functions. These are called ‘easing’ function. effect of this property is that, transition from start to end takes place smoothly in varying speeds according to value of easing function set. Possible values for transition-timing-function are

ease | linear | ease-in | ease-out | ease-in-out

If you understands bezier function you can use it directly by

cubic-bezier(<number>, <number>, <number>, <number>)

Mixing the two functions animation and transition can create really amazing effects and good animation. More on animation with css3 can be seen here

More new exciting properties are left. I'll keep on writing on this topic in my later posts.

here i’ll share photoshop keyboard shortcuts, that will increase your working speed on photoshop.

Gradiants —————————————- shft+g

New layer ————————————— Ctl+shft+n

New document ———————————- Ctl+n

Delete Layer (Group) ————— ————— Ctrl+Shift+ -
Delete Layer (Group) (no dialog) —————– Ctrl+Alt+Shift+ -
Duplicate Layer (Group) —————————– Ctrl+Shift+Q
Duplicate Layer (no dialog) ————————- Ctrl+Alt+Shift+Q
Flatten Image ——————————————– Ctrl+Alt+Shift+0
Group into New Smart Object ———————- Ctrl+Alt+Shift+H
Merge Layers —————————————— Ctrl+E
Merge Visible —————————————— Ctrl+Shift+E
New Layer ——————————————— Ctrl+Shift+N
New Layer (no dialog) ——————————– Ctrl+Alt+Shift+N

Duplicate ———————————— Ctrl+Shift+A
Duplicate (no dialog) ——————— Ctrl+Alt+Shift+A
Hue / Saturation —————————- Ctrl+U
Hue / Saturation (last settings) ——- Ctrl+Alt+U
Image Size ———————————– Ctrl+Alt+I
Invert —————————————– Ctrl+ I
Levels —————————————– Ctrl+L
Levels (last settings) ——————— Ctrl+Alt+L
Reveal All ———————————– Ctrl+Alt+R
Rotate Arbitrary —————————- Ctrl+Alt+Shift+R
Trim ——————————————- Ctrl+Alt+Y

Path / Direct Selection Tool ————- ————– A
N Brush / Pencil / Color Replacement Tool ——— B
Crop Tool ————————————————- C
Default Colors ——————————————– D
Eraser Tool ————————————————- E
Cycle Screen Modes ————————————– F
Gradient / Paint Bucket Tool ————————— G
Hand Tool —————————————————- H
Eyedropper / Sampler / Measure Tool —————- I
N Spot Healing / Healing / Patch / Red Eye ———- J
Slice Tool —————————————————– K
Lasso Tool ————————————————— L
Marquee Tool ——————————————— M
Notes / Audio Annotation Tool ————————- N
Dodge / Burn / Sponge Tool —————————- O
Pen / Freeform Pen Tool ——————————– P
Standard / Quick Mask Mode ————————– Q
Blur / Sharpen / Smudge Tool ————————– R
Clone / Pattern Stamp Tool SShape Tool ———– U
Move Tool —————————————————— V
Magic Wand Tool —————————————— W
Switch Colors ———————————————– X
History / Art History Brush Tool ———————— Y
Zoom Tool ————————————————— Z
Hand Tool (toggle) —————————————— Space
Zoom In (toggle) —————————————— Ctrl+Space
Zoom Out (toggle) —————————————– Alt+Space

Conditions can be applied in html

The syntax for conditional comments is as follows:

Positive

Negative
<!–[if !condition]><![IGNORE[--><![IGNORE[]]> HTML <!–<![endif]–>

condition is one of the following:

IE
    Any version of IE
lt IE version
    Versions less than version
lte IE version
    Versions less than or equal to version
IE version
    Only version version
gte IE version
    Versions greater than or equal to version
gt IE version
    Versions greater than version

version is the version of Internet Explorer, typically 5, 5.5, 6, or 7

HTML is the HTML to be included if the condition does or doesn’t match, depending on the type of conditional comment. When included, the HTML is placed right where the conditional comment is in the source.

For negative conditions,
<![IGNORE[--><![IGNORE[]]> can be replaced with –> if the condition is simply IE. The longer version is only needed when Internet Explorer might parse the contents.

The <![IGNORE[ ... ]]> directive is not available in XML, so it is illegal to use it in XHTML. A solution would be to split it up into two special conditional comments:
<!–[if !condition]> XHTML <![endif]–> <!–[if !IE]>–> XHTML <!–<![endif]–> where XHTML is the same both places. Note that Internet Explorer 7 and below don’t yet recognize XHTML as a form of XML, so this is merely forward-looking.

Html provides tags for all needs to format your text on the page. Using all the tags properly certainly helps in improving you site ranking and it is also useful for you search engine optimization.

Here i’m writing all the valid html tags that can be used to format your text properly.

These all the valid html tags and are not deprecated at this time.
Valid Tags

From this <abbr>

Denotes an abbreviation, use the title attribute to give the full meaning.
[html4] — not yet fully supported

From this <acronym>

Much the same as the one above, really. The difference is between abbreviations and acronyms. And you can look that up yourself.
[html4] — not yet fully supported

From this <address >

You’re supposed to put this around your name, address or email address on your pages. Pff.

From this <b>

The simple bold tag.

From this <bdo dir=”rtl” > </bdo>

If your text is meant to be read right-to-left (like Hebrew, or something), using this tag and the attribute dir=”rtl” tells the browser this.
[html4] — not yet fully supported

From this <big>

A quick way to increase the font size by one.

From this <blockquote>

Indents the whole block of text in from both sides and adds line-breaks top and bottom. Use for long quotations.

From this <cite>

Shows a citation (the title of a work that you’re quoting or referencing).

From this <code>
You get this
Sets text off as code, used for examples of source code. Usually rendered as mono-spaced text.

From this <del>

Stands for deleted text, and visually appears with a strike-through.
[html4]

From this <dfn>

Denotes a definition.
[html4] — not yet fully supported

From this <em>

Creates emphasis on the selected text.

From this <h4>

Creates headings. There are 6 levels of heading, from h1 to h6.

From this <i>

The basic italic tag.

From this <ins>

Stands for inserted text. You are meant to use this in conjunction with the del tag.
[html4]

From this <kbd>

Surrounds text that is supposed to be entered by the reader on their keyboard.

From this <pre>

You get this

Stands for Preformatted text. If you wrap this around some text, it will follow the form of the text in your code — i.e. no extra formatting needs to be put in. If you have spaced it out in your code, it will appear spaced out on your page.
[html4]

From this <q>

Used for smaller, inline quotations (as opposed to a blockquote). Adds quotation marks around the text. Cool.
[html4] — not yet fully supported

From this <samp>

Stands for sample, and is used when you’re using an example, usually of an output from a program.

From this <small>

Simple tag to drop the font size by one.

From this <strong>

Makes the text bold.

From this <sub>

Renders the text in sub-script, below the normal line.

From this <sup>

Renders the text in super-script, above the normal line.

From this <tt>

Makes the text ‘typewriter text’, and sets it in a mono-spaced font.

From this <var>

Used to denote variables in equations.

To interact with user, html forms are good method. they are used to take information from user. Various type of data can be taken from user. To get the data in correct desired format, webmaster have to check all the data filled by user. If any error found then user will be redirected to form with an error message. But checking data on server is a long and slow process.

It would be better if we can check the data entered by user in browser. It will save request time on server. Data entered by user can be validated by using javascript. There can be many type of algorithms from simple to complex for form validations. I’m presenting here overview of the possible methods for form validations.

In javascripts every process starts with some event. any activity in html triggers an event. Submitting a form, clicking on button, changing value of input elements will all trigger an event. so we can start js process on any of these events.

For validating a form either we can user value change in input element or we can use form submit event.

1. validation on value change of input element

A javascript can be attached to all the input elements which are to be validated. Suppose we’ve a text box where we need to get user’s email id. So we can write the code like this

here onchange is a javascript function which will be called when value of element, where it is attached changes. So whenever value of input box changes and user removes focus from input box function “validateEmail” will be called. “this” argument is passed in validateEmail function. “this” is an object of the input box and with this all the properties of text box can be accessed. “validateEmail” will be something like this :

If we use this method for validations then user have to enter correct value to proceed next, once he entered in the specified input box. It is a vary tedious method for validations. we have to write a new function for every new field to be verified. and we have to write validation code on each html form where we want validations.

2. Validation on form submit event

This method is much better then previous one. Here many algorithms can be applied to make code reusable and to make javascript unobtrusive. This method is used to make a generalized code for form data validations. Here javascript validation process will be triggered on form submit event, means when user finally presses submit button.
Process can be attached in this way :

function “validateForm” will be something like this:

This code is very easy to use and manage. Just you have to put this code on bottom of any html file where you want validations. But you have to change input fields name according to where you uses it.
This code is much better then first method, but still not so good. it is not perfectly reusable code, and it is not a generalized code also it is not unobtrusive.

Generalized form validation algorithm

If we can free above “validateForm” function from field name and what to validate in form, then this function would become a generalized code. That means we need some intutive way to know that what to validate in input fields and which input fields are to be validated. in “validateForm” function we can fetch all the properties of all the input fields in the form we are validating. So, we need there be some property of input fields by which function can know how to validate this field. For this we should be able to add properties to input’s that can tell us to validate fields. so, we can add these properties in fields like this :

Now these properties can be accessed and fields can be validated according to that. So, now “validateForm” function becomes a generalized code and can be used anywhere.
But this method won’t work in all the browsers. some browsers do not allow such properties to be attached and accessed in input fields.
Another better way is to add “classes” to the fields that can insist function how to validate any input field. “class” property will work in all the browsers and more then one classes can be added. Class property of any input field can be easily accessed.
Class property of any input can be get by this :

If multiple classes are attached then this classname can be split using regular expression and then all parts can be get easily.
Now function can easily find what to validate in input filed.
class names can be intutive like:

jsfv_blank, jsfv_email, jsfv_date, jsfv_num, jsfv_0

here “jsfv_” prefix is added to make it unique, also it stands for
“javascript form validatoin”

Now our code becomes fully reusable and generalized code.

Yesterday i need to get event object for onclick event and onclick event was written inline.
After investing an hour i got methods for that.
I’m writing here for all, who needs that.

to get event object for inline events you have to pass as an argument of the callback function for mozilla browswer and for ie event will be available as

so to make your function cross browser compatible you can add following code in your function

a more appropriate example is

A right example of the this post by earni is like this

this same function will also work for non inline onclick events

If you want to perform some some task, before user leaves page, then it can be done by using javascript function

onbeforeunload

usage :

if message is left blank then, a default message will be prompted with “OK” and “cancel” buttons.
OK will move to leave page and CANCEL will cancel the event.