Illinois Web Design Contest 2013

For those individuals participating in the Illinois Web Design Contest in Springfield on April 12, 2013, you may wish to examine these links prior to the competition. Note there will not be any Internet connections allowed during the actual contest.

Posted in CSS 3, HTML5 | Leave a comment

Edge Reflow – the code

Last week, I examined the recently released Adobe Edge Reflow tool itself. I thought it might be worthwhile to examine the generated code. For reference purposes, the file I created last week is the one I plan to examine in this current weblog post. As mentioned last week, these generated files are intended to only work in the Chrome browser. If you examine the file using any other browser, you will receive a message that the file needs to be viewed in Chrome. So, let’s take a look (keeping in mind that this is a very early version) … Continue reading

Posted in CSS 3, HTML5, JavaScript | Leave a comment

Adobe Edge Reflow – first look

Responsive design (where content is modified to display on a given device) is easy to discuss and sometimes difficult to implement. Not only should your text be positioned properly for various devices, but images and fonts should respond accordingly. The days of having a website which can be only viewed on a desktop are long over. Pinching and zooming on smaller screens is an impediment. We have media queries to help, but it can be difficult to deal with the myriad complexities associated with responsive design techniques. Enter Adobe Edge Reflow. Admittedly, this is a preliminary version (released in mid-February, 2013), and it only generates test code which works in the Chrome browser. That being said, it is worth further investigation. You can gain access to the product with a free Creative Cloud membership. A good starting point is the introductory article by Chris Griffith. Using that article as a starting point, I investigated this product myself. Continue reading

Posted in HTML5 | Leave a comment

Less CSS

CSS files can become quite large/ cumbersome. Additionally, there are some issues with CSS. These include:

  • not having an ability to use math (for example take current border width and add 5 pixels to it),
  • not being able to reuse common styles
  • not being able to modify existing values
  • not being able to specify variables (and define them with initial values).

Because of these issues, tools like LESS and SASS have arisen. SASS is based on Ruby. For sake of introducing the concepts, I thought it appropriate to focus on LESS. While one could run the minified LessCSS JavaScript library and dynamically change .less files to .css files, this is fairly inefficient and will affect the performance of your web pages. Therefore, it is considered a best practice to use tools on your computer to convert the .less file to .css before uploading to the production environment. These tools typically watch the contents of various folders and automatically make the conversion when a file changes. To understand the concepts, I recommend using either CodeKit (Mac) or SimpLESS (Mac or Windows). Note that SimpLESS relies on the Titanium SDK (separate install in Windows and some limitations on Mac). For my purposes, I used CodeKit. Continue reading

Posted in CSS 3 | Leave a comment

Node.js Server (part 3 of 3)

Now that we have some understanding of some of the capabilities of Node.js, it is time to investigate its true strength – as a web server. Recall that many reseller accounts will not allow Node.js to act as a server as it is viewed as a long running task (and most of these accounts prohibit such activity). That being said, it is still highly useful in the localhost environment. In this weblog post, I will walk through some of the fundamentals in the use of Node.js in a local environment. Continue reading

Posted in JavaScript | Leave a comment

Markdown and Node.js (part 2 of 3)

I realize that not everyone wants to write HTML. Tools like Dreamweaver make it much simpler, but there are times (particularly when taking notes) that an alternative might be more appropriate. Markdown has been around for a number of years. Essentially, you markup your document in plain text and can than convert it to HTML (or PDF or other format). For those just getting started writing HTML, you might consider using this as a starting point to better understand how the pieces fit together. I do teach web page development and design. So, why mention a tool like Markdown? Simple, it plays nice with Node.js and I am putting together several weblog posts on Node.js. Let’s first learn a little about Markdown syntax. Continue reading

Posted in JavaScript | Leave a comment

Node.js (part 1 of 3)

Node.js uses JavaScript to run a web server – yes, JavaScript on the server. One of the main benefits is that a single language is used on both the client and server sides (JavaScript). I know some would argue that JavaScript is not a “true” programming language since it is interpreted. That being said, one can specify use strict; to better enforce some of the loose typing of variables. If one relies on the Chrome JavaScript engine (which Node.js does), it can actually run faster than code written in PHP or Ruby. Of course the mileage will vary depending on the application. Given that I teach multiple classes in JavaScript, I thought it appropriate to discuss the fundamentals of Node.js in this post. This was also spurred by a recent presentation on Node.js by Larry Ball at one of our recent Web Professionals and Adobe User Group meetings. For initial purposes, I am focusing on the use of Node.js to check JavaScript code for syntax errors. I may expand on this with additional examples in a later post. Given that many reseller hosting accounts will not allow Node.js to run natively (it is viewed as a long running task – which is not permitted), I will focus on running Node.js on a local computer. Continue reading

Posted in JavaScript | Leave a comment

Bootstrap

Bootstrap is a framework for front end web development and uses HTML5. One can employ responsive web designs with relative ease (the page will shrink and images will resize as the amount of screen real estate is reduced). This framework uses a 12 column grid for initial layout of items. It was developed at Twitter and relies on LESS CSS and jQuery. I recently spent some time completing the lynda.com course – Up and Running with Bootstrap and thought it might be helpful for students to create this introduction. I understand that this framework is included in Joomla 3.0 so it may be helpful to know from a content management perspective as well. For an overview of Bootstrap, their scaffolding page is a great starting point. So, how does one get started? Continue reading

Posted in CSS 3, HTML5, Mobile | Leave a comment

CSS Filters

The world of CSS is changing rapidly and CSS-filters are definitely a great indication of what is coming to a browser near you soon. In order to actually work with these, you will need Chrome Canary (the experimental version of Chrome). Note that you can run this version alongside your standard Chrome browser. Once you have installed Chrome Canary, you will need to activate the experimental feature which allows CSS-Shaders/ filters to work. To accomplish this, enter the phrase about://flags into the address/ URL files in Canary. Scroll down and enable (see screen capture below). You will need to relaunch the browser for thse changes to take effect.

Enable CSs Shaders

Once you have done this, you are ready to work with tools like the CSS Filter lab at Adobe. Continue reading

Posted in CSS 3 | Leave a comment

Web Professionals Summer 2012 Conferences

This has been my “Summer of Mobile app development with HTML5 and CSS-3 and jQuery.” I am exceedingly honored to have been a part of the WebProfessionals.org Summer 2012 conference schedule in addition to helping run the 2012 national web design contest in Kansas City in June. I spoke at a number of venues ranging from Los Angeles, CA (Coastline Community College) to Boston, MA (Bunker Hill Community College) over the course of the summer. The emphasis was on the implications of multi-screen devices in teaching and learning and how we need to prepare our content for the coming changes. In my opinion, this represents as significant a change as what we call the Industrial Revolution. I term this the “Connection Revolution.” Students are expecting to bring their own devices to campus and will expect content to be delivered in format suitable for each device they use. Pinch and zoom will not yield the desired result; we need to develop appropriate sites and apps to reflect these changes. BYOD (Bring Your Own Device) is just a part of the rising tide of expectations among students and professionals. The consumerization of IT has only begun and it will have a massive impact on education (and many other fields).  With our emphasis on HTML5, CSS-3 and jQuery Mobile, we can build such prototype apps today. In my opinion, we should already have entered this revolution as it will be roughly 1 more year before this is the new (and expected) standard for delivery. mLearning is here and expanding quickly. It is imperative we are ready to deliver content in the appropriate format and venue for students.

My presentations were a part of a major initiative by WebProfessionals.org to place proper materials in the hands of educators so they can update their curricula with the latest technologies. The following quote is taken directly from the WebProfessionals.org website. “The goal of the summer series week long workshops is to help facilitate teacher access to cutting edge Web design and development training and curriculum materials. The summer workshop series helps teachers stay current by engaging them in projects designed to showcase skills that are in the highest demand by those that employ Web professionals.”  I am exceedingly honored that I was selected to provide so much training throughout the U.S. over the summer, 2012. I had the opportunity to meet and interact with many peers and have made a number of new connections and friends. The fact that so many participated in these events indicates the vast need for up to date information in this area. The Connection Revolution is upon us and we had best be ready for this coming wave of change.

School of Web initiative

Bill Cullifer (Executive Director, WebProfessionals.org) introducing Mark DuBois at one of our many events this summer.

The above photo was taken at the kickoff of the WebProfessionals.org School Of Web initiative and should give you an idea of what events were like during this summer. We had roughly 150 people in attendance at this event where I discussed HTML5, CSS-3 and what one should be coding today with respect to web standards and responsive design.

For those who are curious what my summer was like, here are some fundamental statistics that may help you better understand the scope and impact. Keep in mind that I was gone every other week throughout the summer (sometimes only returning to Illinois for a few days before moving on to the next seminar). As an aside, I did all this while recovering from major eye surgery (in early May).

  • Approximate miles traveled: 15,000 (yes, that is over 1/2 way around our planet).
  • Total week long events I participated in this summer: 6.
  • Approximate number of hours of instruction delivered to participants:  230 hours.
  • Total number of colleges (and high schools) participating in series: over 135.
  • Average number of students in each program: 200.
  • Approximate number of students directly impacted by my training: 25,000 (yes, this is an under-estimate if you perform the appropriate math).
  • Pounds of chocolate consumed by attendees: 25 (this is also an under-estimate).

In reflection, this was an incredibly impressive summer. I never anticipated that I would be able to provide this sort of impact on web curricula. Obviously, the emphasis was on web standards, responsive design, and mobile app development. That is what I shared with participants. However, I also learned so much from the numerous interactions with others. I can’t count the number of WebProfessionals business cards I handed out to participants; I have made so many new contacts and hope to continue our discussions over the coming years.

I believe that my efforts were successful as a number of organizers of these events have already indicated they would like me to return next summer to conduct another series of workshops. I am already looking forward to those opportunities (and more).

Posted in CSS 3, HTML5, Mobile | Leave a comment