Thursday, June 19, 2014

Use of Modernizr.js

In HTML we are having lot of ways to apply cool technologies, Modernizr.js is used to make your life easy by conditional JavaScript and CSS.

Here is a simple example of usage of Modernizr.js, If you are trying to execute a HTML 5 tag with older browsers like IE7, if the browser didn't support the HTML5, DOM may not understand your code. But using Modernizr.js you can execute the HTML5 code with older browsers.

Example usage:

<html class="js no-touch postmessage history multiplebgs boxshadow opacity" lang="en">
<head>
    ...
    <script src="/modernizr.js"></script>

    ...



Advantages
Supplementary to conditional class names, used for feature detection.

Disadvantages
Introduced a script in the will slow down the page more or less.

Read more:
http://modernizr.com/

Advanced HTML Structuring - !DOCTYPE

!DOCTYPE

Despite old existing sites, only the !DOCTYPE declaration is allowed for new sites.

Example:    <!DOCTYPE html>

Do not use any legacy !DOCTYPE any more, codes below are part of those.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN" "http://www.w3.org/TR/html4/frameset.dtd">
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd">


Without a !DOCTYPE, IE9 and earlier versions display webpages in IE5(Quirks) mode. Also, if there is anything precedes the !DOCTYPE, for example, a comment.

Read more:
http://en.wikipedia.org/wiki/Quirks_mode (Quirks mode)
http://blog.whatwg.org/tag/doctype (Current standard)
http://www.w3.org/QA/2002/04/valid-dtd-list.html (Deprecated doctypes)

Tuesday, June 17, 2014

HTML5: How to detect browser and write css

Before HTML5 found, we normally used to detect the browser type in certain ways. We use javascript function to identify the browser version and bind some defined element to the HTML DOM and apply CSS based on created element.

Traditional approach:
<body class="js created element with browser version (ie8 bodyclass) ">

We call CSS as follows
.ie8 .bodyclass{background-color:#00ff00;}

But as now we have new technology to directly identify the browser and apply CSS, it is pretty straight forward and easy to use. When it comes to DOM manipulation the time is very short and faster approach.

HTML5 approach:

Here is the way to detect the browser version and apply CSS

<!DOCTYPE html>
<!--[if IE 7]><html class="no-js lt-ie9 lt-ie8"><![endif]-->
<!--[if IE 8]><html class="no-js lt-ie9"><![endif]-->
<!--[if gt IE 8]><!--> <html class=no-js lang=en> <!--<![endif]-->

We can easily track or identify the browser version using above HTML, so we can apply relevant styles using CSS for required browser type.

.lt-ie8 .bodyclass{background-color:#00ff00;}
.lt-ie9 .bodyclass{background-color:#ffff00;}

Website usability program

These days website usability become main concern in usage of web development,
What does mean website usability?
It is simple to understand, website usability means that a website how easy to use by a normal and minimal IT user,

Whenever we develop a website, we must consider the fact how a user will easily navigate the pages and how user friendly for them, without making the site more complicated to use. For an example we need to have a proper structure in the layout, we must follow a standard navigation.

There is also another main concern about disabled users,  we must also support to develop the website for accessibility users,

Learn more about  accessibility from following link
http://realwebdeveloper.blogspot.com/2014/02/web-accessibility-basic-idea-for-web.html


Tuesday, February 11, 2014

Montessori Management System functional Requirement

As I have promise my previous post herewith I am sharing the Montessori Management System functional Requirement

1. Student.

1.       Create new student
Should be able to add new student information to the system and those entered student will be available under student attendance section.
2.       Edit student
User should be able to update the student information details for existing students.
3.       View student
Should be able to view all students. If user wants to search particular student then should be able to enter the partial name of student or full name of the student.
4.       Delete student – no deletion, only active status.

User should be able to delete the students from the system but won’t be able to delete the student permanently only status will be set as deleted.  

User should be able to delete the students from the system but won’t be able to delete the student permanently only status will be set as deleted.  

Student Termination
Once the student completed his/her studies at Daffodil Education Centre user should be able to terminate the student by reactivating the student status.

Student can be terminated by the management due to his or bad attitude or may be some other reasons..

Student also can be terminated by parents/ guardian from the Daffodil Education Centre, this time also user can set the status as terminated.

Student Payments
User updates the system with the following details:
o   Invoice Date
o   Student Name
o   Invoice Number
o   Invoice Value
o   Payment Due
o   Payment type (Card/cash/cheque)
o   Payment for (Admission fee / term fee / sports fee / concert  fee/ other)

Once the user enters the above information payment details will get saved to the system and user should be able to print the receipt and hand it over to the parent/ guardian.

Payment Receipt Creation
            Once the payment success, user should be able to print the receipt for the payment. Copy of the receipt will kept into student file.

Student Attendance
            Daily basis, user or class teacher needs to select the student attendance by selecting yes/no field where it’s displays next to the student name. If the student is absent user must select the reason for it from the selection box which will appear when user select the attendance as no.

2.  Staff /Teachers Management

1.       Create new Staff/ Teachers
Should be able to add new Staff/ Teachers information to the system and those entered Staff/ Teachers will be available under Staff/ Teachers attendance section.
2.       Edit Staff/ Teachers
User should be able to update the Staff/ Teachers information details for existing Staff/ Teachers.
3.       View Staff/ Teachers
Should be able to view all Staff/ Teachers. If user wants to search particular Staff/ Teachers then should be able to enter the partial name of Staff/ Teachers or full name of the Staff/ Teachers.
4.       Delete Staff/ Teachers – no deletion, only active status.
User should be able to delete the Staff/ Teachers from the system but won’t be able to delete the Staff/ Teachers permanently only status will be set as deleted. 

            Daily basis Staff/Teachers attendance should be updated to the system manually by user where details available in the attendance book. User needs to enter staff in and out time.
Also user will manage the Staff/Teachers leave information too.

3.  User Management

Users

Ø  Add Users
User could be able to add user authentication details such as User Name, Password, First Name, Last Name, Address, emails, contact number and user role which is to help identify what level of access need to be granted to the user.

Ø  Edit Users
User could be able to modify the details and save the changes to the system.

Ø  View / Search Users
User could be able to view all available users or filter the user by entering the user name.

Ø  Delete Users
User could be able to delete the user detail from the system.

Roles

Administrator is able to add different user roles based on their performing roles such as Manager, teacher, accountant etc.

Pages

Ø  Add Pages
User could be able to add new pages with url.

Ø  Edit Pages
User could be able to modify the details and save the changes to the system.

Ø  View / Search Pages
User could be able to view all available pages or filter the user by entering the user name.

Ø  Delete Pages
User could be able to delete the page detail from the system

Permissions

Ø  Add Permission
User could be able to give the page level permission to each role.

Ø  Edit Permission
User could be able to edit the permission from the role and save the changes to the system.

Ø  View / Search Permission
User could be able to view the role level permission


Reporting module consists with following static reports

4. Static Reports

a)      Student daily attendance Reports
        Daily attendance

b)      Teachers daily attendance Reports
        Teacher’s Daily attendance

c)      Payment Reports

        Admission payment, Terms Fee, Sports Fee, Concert fee

5.  Events Management

Events

Ø  Add Events
User could be able to add events details such as Event Title, Event Start Date and Time, Event End Date and Time, Full day event or not and the event url.

Ø  Edit Events
User could be able to modify the details and save the changes to the system.

Ø  View / Search Users
User could be able to view the events in the events list.

Ø  Delete Events
User could be able to delete the events from the system.

School Calendar

User could be able to view events details from the calendar by month wise and able to edit event dates by dragging the event..

User can move forward or backward the event dates by dragging and dropping the even title in the event calendar, Also can expand the number of days cover or reduce the days by dragging the event title

6. Communications

Notice for Parents

Ø  Create notice/message
User could be able to create a message to parents, Message can be individual parent , group of parents, parents/guardians of entire class or may be all students parents/guardians in the school. This can be choose by selecting the option available in the notice  to parents section.

Ø  View existing details of communication list

User could be able to view existing notice/message by selecting the date or by selecting the subject of the message. By Clicking on it able to see the details of the message.

Newsletters

Ø  Create newsletter
User could be able to create newsletters by entering message into rich editors, users can use or attach any images to create the message, User needs to enter the subject of the newsletter and needs to save it as a template before sending it. So they can use the template for next time sending.

Ø  View existing newsletters

User could be able to view existing newsletters by selecting the date or by selecting the subject of the newsletter. By Clicking on it able to see the details of the newsletter

Ø   Sending newsletters

User should be able to select the list audience, There are three option to select the newsletter audience, User could be able to send the newsletters only to entire parents/guardians or Only to staff or teachers the last option is to send it to both staffs and parents.


Easy Email

Easy email is developed to make the communication between the staff and parents. This facility can be also use any communication between staff members,  between staff members and parents and between management and staff members. Basically this system developed to manage the email communication, rather using an external email. It is identified to use same system for it.

Ø  Create email
This is similar to normal email system, User should be able to enter the message subject, body and receive email, User also can attached any documents.  User should be able to search the reception details and add it in the email to list.

Ø  View email/inbox

User could be able to view the messages sent from other users,  User can click on the list and view the emails, Also attachment can be downloaded.

Ø   Replying to the email


User should be able to select the message and reply to the same message.

You can find more about Montessori Management System (MMS) Feature.s and Modules from my previous post
http://realwebdeveloper.blogspot.com/2014/01/montessori-management-system-mms.html

Monday, February 10, 2014

Invisible Content text for Screen Readers

There are some instances we must use invisible text while we develop a webpage. Disable people or visually impaired user will not be able to see all in the screen. To overcome such issue developers are using screenReaderOnly class.

screenReaderOnly class will hide the messages from normal users and will only allow to screen readers to read it. For an example if a short cut needs to use for a screen reader software, developer must be able to use a screenReaderOnly class and display the short cut to screen reader user only.

Here is a sample class which can we use

.screenReaderOnly
{
position:absolute;
left:-10000px;
top:auto;
width:1px;
height:1px;
overflow:hidden;
}

<div class="screenReaderOnly">Text message to read only by screen readers.</div>

The above css making the positioning the content off screen.

Please do not use visibility: hidden; or display:none; because screen readers will avoid reading such

a css contents. 

Friday, February 7, 2014

“Skip to content” is an essentials needs for blind users.


Last few months I am working on a project which is supporting to blind users who are using web pages using screen readers like JAWS. While I was doing my development I have overcome lot of issues which are new for me.

Today I will share something about it. A screen reader likes JAWS reads the page aloud. When the page started to read, it will read from the beginning and go all over the page. For instance if we have a lot of links in the top menu bar with sub links the screen reader will reads all for long time and navigating through keyboard is difficult to do all the pages.

To overcome this issue we must have an option to go directly to the content page, so users can directly pressing a key and able to read the content. This will make the users easy navigation to content. “Skip to content” can be applied to resolve this issue.

Beginnings of the page we can add “Skip to content” so users can use the keyboard and directly navigate to the body content.

Normally we are adding the text as invisible as shown below class.

#skip a, #skip a:hover, #skip a:visited{
position:absolute;
left:-10000px;
top:10px;
width: 1px;
height: 1px;
overflow:
hidden;
}

#skip a:active, #skip a:focus {
left:auto;
width:auto;
padding:5px 10px;
top:33px;
height: auto;
background:#eee;
font-size:1.2em;
}

Example usage of skip to content

<body>
<div id="skip"><a href="#main">Skip to content</a></div>
......
<div id="main">
<h1>Heading</h1>
<p>This is the body contents</p>
</div>

Some wording which you can use for “Skip to content”

Skip to content
Skip navigation
Skip navigation links
Skip to main content
Skip main navigation