CSS Resets

html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video {
  margin: 0;
  padding: 0;
  border: 0;
  font-size: 100%;
  font: inherit;
  vertical-align: baseline;
  outline: none;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}
html { height: 101%; }
body { font-size: 62.5%; line-height: 1; font-family: Arial, Tahoma, sans-serif; }
article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section { display: block; }
ol, ul { list-style: none; }
blockquote, q { quotes: none; }
blockquote:before, blockquote:after, q:before, q:after { content: ''; content: none; }
strong { font-weight: bold; }
table { border-collapse: collapse; border-spacing: 0; }
img { border: 0; max-width: 100%; }
p { font-size: 1.2em; line-height: 1.0em; color: #333; }

CSS “Stages” : Flash style canvases

I miss working in flash 5. It was a great development environment. It bridged the gap between visual art and code art. Allowed some creative and exciting user interaction. For the next gen it will all be about css and html 5. I am devving some “TimeLines”  , “Movie Clips” and some “Stages” for creating stuff.  Here is the “Stage” template: stage

Here are some prototypes of a “Movie Clip” made from jpg series.  Bubbles

Guie blink

Here is a comparison of image series rendered in flash, and using my “Movie Clip” and “Timeline”  prototypes

Allow user to print the contents of an element

Here is a cross browser solution to allow the user to press a button and print out the contents of an element. Suppose we have a content area with an id of “mycontentarea”, and a button that says “print”. We can attach a handler to the click event and run this code in the function to print out the contents of “mycontentarea”:

[code]
w=window.open();
reportinfo =  document.getElementById(‘mycontentarea’);
w.document.write(reportinfo.innerHTML);
w.document.close();
w.print();
w.close();[/code]

CSS Transforms

The CSS specification for transform allows for some great things. For example i have this image that I created sideways (on purpose lol), but i want to use it in a different instance right side up. with css i can put:
[code language=”css”]
style=’transform: rotate(-90deg);’
[/code]

I will write some more great examples of css transformations soon.

CSS Text Shadows and special effects

There are some great things you can do with the css text- shadow property.

Here is a cool stamped text effect using a background and a text shadow in combination.
Give your background element a grey background color, and give the text a white shadow.

[code language=”css”]
#stampedtext{
display:inline-block;
background-color:grey;
}

#stampedtext h1 {
text-shadow: 0px 1px 1px white;
color: black;
} [/code]

 

stamptedtext

 

Here is a css menu playground with some great css menu ideas: menuandlayout1

Here is css div styling and transformation playground: demo

Automation: open and close a form every year.

As complex paperless forms become full fledged web applications, there is a growing need for automation such as  having a form available to be used from a certain date/time range. For example,  a health insurance sign up that opens on December 1 at 9:00 AM and closes on December 24th at 5:00pm Pacific Time. We want these times to be hard coded for the server, in case the users  are from different time zones, we want everyone to be able to sign up at exactly the same server time, regardless of their location. So if they were from New York, they would be open to sign up at 3pm December 1st, etc….

We need a few variables.
open_date – the date / time that the form will open
close_date – the date / time that the form will close
today_date_server – the current date/time of the servertoday_date_user – the current date/time of the users machine.
user_time_difference – the difference between the users time and the servers time. this could be used to display correct messages about when the user can sign up.

openorclosed – this will be set by the logic then used to display the correct messages and ui views
closedmessage – this will be a spot for the special message that will display to the user when the form is closed.

So now that I have my variables set up, lets put them to use. I will compare the dates and make sure that today is within the form opening range. Then I will set the openorclosed variable to open or closed based on the results. The I will update the ui view according to the openorclosed variable.

Here is the final form opening and closing automation logic in VbScript:

open_date = "9/2/" & year(NOW) & " 09:00 AM"
close_date = "10/14/" & year(NOW) & " 05:00 PM"
today_date_server = NOW()
datediffopen = DateDiff("n",today_date_server, open_date)
datediffclosed = DateDiff("n", today_date_server, close_date)
If datediffopen < 0 and datediffclosed > 0 Then
openorclosed = "open"
Else
openorclosed = "closed"
End If

This will automatically open and close the form to the users every year. Hooray for Automation!

Now I can manipulate the ui view using the variables, so the user will know when the form is open and why its closed.

[code language=”vb”]
If datediffopen > 0 and datediffclosed > 0 Then
‘display message for before the form has opened for the year.
openorclosedmessage=”The nomination form will be open from ” & open_date & ” to ” & close_date & “. Please submit your nominations between this time period for them to be considered.”
ElseIf datediffopen < 0 and datediffclosed < 0  Then
‘display message for after form has closed for the year.
openorclosedmessage=”The nominations were due by ” & close_date & “. The nominations are over for the ” & year(NOW) & ”  year. The nomination form is closed.”
End If[/code]

To display the date and time in a user friendly format –  Tuesday, October 14, 2014 at 5:00:00 PM – use the FormatDateTime function:
[code language=”vb”]FormatDateTime(close_date, 1)  at FormatDateTime(close_date, 3)[/code]

To debug the automation code, use this snippet:

[code language=”vb”]

‘ this message is for de bugging the open / close  automation
closedmessage = closedmessage + “<p class=’redtext boldtext’>Today is ” & today_date_server & “. The form will open on ” & open_date & ” and close on ” & close_date & “. Is today inside the date range?” & isitopenorclose & “. The date dif open is ”  & datediffopen & “. the date diff closed is ” & datediffclosed & “</p>”

[/code]

Now I would like to take this a bit further, by having the form open on the first Monday of January, and close on the last Friday of January. Here is the algorithm I have come up with:

[code]
mydate = “1/1/” & year(NOW) & ” 9:00 AM”
dtmDate = CDate(mydate)
daycounter = 1
Do While daycounter <= 7
‘ response.write(Weekday(dtmDate) & ” is the weekday for  ” & dtmDate & “<br/>”)

If Weekday(dtmDate) = 2 Then
response.write(“<br>The form will open on ” & FormatDateTime(dtmDate, 1))
Exit Do
End If
daycounter = daycounter + 1
dtmDate = dtmDate + 1
Loop

daycounter = 1
Do While daycounter <= 31
‘response.write(“<br />” & Weekday(dtmDate) & ” is the weekday for  ” & dtmDate & “<br/>”)

If Weekday(dtmDate) = 6 Then
thelastfriday=dtmDate
End If
daycounter = daycounter + 1
dtmDate = dtmDate + 1
Loop
response.write(“<br>The form will close on ” & FormatDateTime(thelastfriday, 1))
[/code]

For the year 2014, the result will display:
The form will open on Monday, January 06, 2014
The form will close on Friday, January 31, 2014

Now I can drop this into my forms that will open in the pattern of first Monday, and close on last Friday of January.

Profile of the Skagit Valley College Information Technology Development Team

Profile Of The Skagit Valley College Information Technology Development Team

I am writing this profile about the Skagit Valley College Information Technology Development Team because of the exciting research and development being done in the areas of paperless applications and responsive web technology. This innovative r&d is being done at my workplace so this is a subject that I have plenty of access to, and I am inspired by ideas and curiosity about it. If you use the SVC website frequently, then you will find the behind the scenes information to be very interesting and informative.

AI generated image from the text prompt "In the I.T. office where I develop paperless applications, the clack of heels in the hallway is echoed with the clickety clack of a keyboard that is most likely being worked out at over 50 wpm."
AI generated image 

In the I.T. office where I develop paperless applications, the clack of heels in the hallway is echoed with the clickety clack of a keyboard that is most likely being worked out at over 50 wpm. There is a distinct buzzing noise that can be recognized as a computer’s fan, clearly straining to remove the heat and keep the hard working processor from melting into silly putty. Not too many people would notice such odd noises, these subtle signs of a computer user pushing his technology to the limits. These cues could easily blend into the background noises that surround our everyday environments and be indistinguishable from the hustle and bustle of the numerous students going about their daily studies.

Our team at the college is responsible for things to do with computers, technology and the Internet.
AI generated image

Our team at the college is responsible for things to do with computers, technology and the Internet. There are 5 men in our core crew of Information Technology Developers. We create and manage the web pages applications, graphics and user interfaces that many of the students use every day. The information technology team that is quietly powering the entire Skagit Valley College information infrastructure is a talented team of Technology Specialists. This diverse group of enthusiastic developers has helped redefine the way technology is used and have dramatically impacted the future of web development. People may be surprised to know that this local team of developers has come up with such a remarkable system of responsive web development that is well ahead of major corporations.

There’s an interesting culture surrounding the information technology offices: they have rituals of coffee and pizza and...

There’s an interesting culture surrounding the information technology offices: they have rituals of coffee and pizza and laughter. They have very critical functions within the community of students who depend on them daily for support for everything from login to printing to writing the code that is behind the scenes running the very classes that they attend. There is a quiet sense of partnership and teamwork. A question is met with a smile and enthusiastic explanation, however I sense they want to stay behind the scenes and quietly keep everything running.

When people hear about the responsive website that the information technology development team created for the college, and how it’s a different user experience on every device, they seem find it very interesting and want to hear more about it. I began with the initial research of web frameworks and responsive web technology, and then I presented my findings to the web team. From there we decided to go with a responsive web site rather than creating a separate mobile site. The technology that we have put in to place can now detect a user’s screen size, and then “respond” by changing the web page to best fit the user’s devices from PC to smart TV to iPhones and beyond.

“Paperless Applications” is a new and rapidly growing field of technology. Going well beyond the traditional web form, this is a very green and efficient way of gathering information. Computer and mobile technology has advanced to the point that it is finally feasible to do away with paper forms and use electronic devices to gather information that a person would normally put on paper. This paperless technology is also a much more secure way to store the information, which is important as usually you are giving your name address and other personal information when you fill out these forms.

Let’s take for example the traditional job application form. If you go apply for several jobs and fill out paper applications with your name address and social security number and leave it with an employee behind the counter you are taking a big risk with your personal information and at the very least your privacy. An online web form based job application is easily accessible and filled out by anyone with a computer or mobile device. When the applicant has finished filling out the application this data is then saved and stored securely and only show the up for authorized personnel.

Some other great reasons to use paperless applications when the data is stored into a storage device, the device may be powered down and it then uses is almost no resources. The information that is stored in this method may be much easier retrieved and displayed in organized reports achieving higher efficiency than paper document storage.

I have future plans for this technology that I would like to use to really enhance eLearning and create a more interactive online classroom environment. I also have an application designed to protect children and sign them in and out of school, daycare or pretty much anywhere. That particular application is currently deployed in one day care and under consideration by the state of Washington for schools as well as the YMCA for their membership needs.

Student Club Roster Form

I was assigned the task of turning the Student Club Roster Form paperwork into a paperless web application. This was a challenging project involving a lot of dynamic elements and on the fly data validation.

I created a day of the week chooser to hide some intrusive and unintuitive form checkboxes and turn it into a slick ui with a responsive modern design.

See this post for more information about the day of the week chooser.