March, 2014 Puzzler

If you think it is easy teaching HTML, CSS and related web technologies… Let’s see how long it takes you to figure out these puzzlers. I plan to provide one periodically. Keep in mind these are real problems that students encounter as they code their pages. Obviously, you need to view the source code. Continue reading

Posted in Puzzler | 2 Comments

2013 National Web Design Contest

During the last week of June, I helped run the WebProfessionals.org national web design contest (held in Kansas City, Missouri under the auspices of SkillsUSA). Details of the contest (as well as past winners) can be found at WebDesignContest.org. Over 30 teams participated at the high school level (secondary) and over 15 teams participated at the post-secondary level.In order to compete in Kansas City, each team had to win their respective state web design contest. Every 2 years, one winning individual is selected to participate in the international web design contest (this year was in Leipzig, Germany). Obviously, this was a team effort. We had multiple individuals on site helping coordinate the contest briefing and de-briefing. We also had teams of judges throughout the US who worked diligently to review the submitted entries. I am most appreciative of the efforts by everyone involved to make this a reality. This was our 11 year for the national web design contest. I thought it would be appropriate to include various observations (which were made at the competition) and comments received from the judges. These have been generalized as many apply to more than one team. Continue reading

Posted in HTML5 | Leave a comment

HTML5 Geolocation book

I returned from my recent trip to speak at MPICT So. California on web analytics, business intelligence and big data and found a copy of this book waiting for me. I was asked to review this book prior to publication and am pleased the author incorporated some of my recommended improvements. Thought students might like to see what I was up to recently.

HTML5 Geolocation book

Posted in HTML5 | Leave a comment

2013 Illinois Web Design Contest

Now that the 2013 Illinois Web Design Contest is history, I thought it might be appropriate to share some thoughts and observations. First, congratulations to everyone who participated (in either the secondary or post-secondary contest). You took the extra effort to grow and learn. Those who are taking classes in web technologies and not participating – why not? This is a great opportunity to learn from web professionals. It is also a great networking opportunity. Whether you earn a medal or not, you have tested your self and your knowledge and grown in the process. Continue reading

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

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