FaltuFunda

In the market lot’s of course planner, student tracking systems, attendance management system, lms are available as open source, but, still education segment lack of any good complete erp solution. There are a few paid solutions web based and desktop based as well are available. These erps are unable to capture big market and persuade school management to buy their products. Some time these don’t fulfill all the requirements of schools and more of the times it’s about cost.

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

about html5

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.

css3 continued

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

Let’s move directly in to the topic.
CSS3 has improved much and added some cool features. We’ll go through all new features added one by one.

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.