About - Website

First and foremost, the purpose of talynkevin.com is to give you, the visitor, a glimpse into our lives. But it's more than that - we wanted to make this a place where you can view and share recipes and ideas. We love cooking and we love eating, we love sharing our recipes and learning recipes from others, and what more convenient way to do it than right here. (away from those pesky banner ads...) So, enjoy!

The Technicalities

(Target audience: budding web developers and those who are simply interested in web development - I try not to get too technical)

Though this site is far from perfect, there are many concepts that I have applied to its design and development. It looks best in Firefox (Mozilla-based browsers have some neat features, like rounded corners, that will come out in CSS3) in 1024x768 resolution, but it has been tested using most resolutions in the majority of the more popular browsers: Firefox 1.5+, IE 5.01+, & Opera 9+. (I'd test on Safari too, but I don't have a Mac) Try playing around with different window sizes & resolutions, and I think you'll be pleasantly surprised at how the content of the page rearranges itself. If, at any time, you notice something else that can be improved, or if I've made any type of error, please let me know. Now, about the site and how it was created:

PHP/MySQL

PHP (recursive definition: "PHP Hypertext Preprocessor", or originally "Personal Home Pages") is used as the backend - ie. it does all the grunt work like processing requests, maintaining user sessions, and retrieving/storing information from/to the database. When a PHP page is requested (eg. when you click on http://www.talynkevin.com/index.php), the index.php script runs on the web server that hosts talynkevin.com (server-side script) - not your home computer - and outputs standard HTML code. This code is translated by your internet browser into what you see on your screen. You will never see any actual PHP code, even when you try to "view source" - this simply shows you the HTML code that was outputted by the PHP script. One advantage of using server-side scripts (like JSP, ASP, ColdFusion, Ruby-on-Rails, etc.) is that as long as the web server can process the scripts, all internet browsers will see the same content. That is, it's not dependent on the client computer.

I chose PHP because of its ease of use, wide availability, and for the fact that it costs nothing - anyone can download a PHP/Apache/MySQL server bundle and install it on their machine.

Javascript

Javascript, though seemingly similar, has no relation to the Java programming language. It is used for parts of the frontend, or user interface - appear/disappear effects, item reordering, drag-and-drop, and other visuals. Unlike PHP, it runs on your computer, not the web server (client-side script). Therefore, if your internet browser doesn't support Javascript, or if you have chosen to turn it off, you will not be able to experience Javascript functionality (which, on some websites, can be malicious or just annoying). Therein lies a challenge with web development. How does the developer deliver a feature-rich website while at the same time supporting more basic browsers? The technique is called "Progressive Enhancement." The developer first designs the site for a basic browser, then uses Javascript to "progressively enhance" the website. In this way, if the browser doesn't support Javascript, it will simply use the most basic version of the website. If it does, then it can display all of the features. Go ahead, try it out! Disable Javascript in your browser (Firefox: Tools-Options-Content-unclick "Enable JavaScript"; IE: Tools-Internet Options-Security-Custom Level-Disable "Active Scripting" (near bottom of list); Opera: Tools-Preferences-Advanced-Content-unclick "Enable JavaScript") and try navigating the site. You may notice that some of the nice features are gone, but you should still be able to use the site without any problem. If you do encounter a problem, tell me about it.

CSS - styles/layout

Years ago, the standard for creating page layouts on web pages was using tables. And they did the trick - you could make even the most complicated layouts by creating complex tables, if you nested them in countless other tables - programs like Adobe Photoshop has tools to create these layouts for you, and it's all done with the click of a button. Visually, it got the job done. But if you look at the HTML code required to make some of these layouts, finding content embedded in the code is like trying to find your one navy blue sock in a basket of black socks. You could have 10 times as much table markup (code) as content. File sizes are much bigger than necessary, and those who use screen readers (which reads a webpage out loud) have a hard time filtering through the gobbly-gook. (if your website still uses this method, don't worry - our old one did too)

Additionally, styling was done with extra HTML markup - font tags for text styling, nested tables for borders, etc. - that cluttered the page markup even more.

Then came CSS, or Cascading Style Sheets. CSS allows you to separate the content (what's really important on your webpage) from both the layout (positioning of elements on the page) and styles (fonts, colors, borders, etc.).This has many advantages, but here are a few:

Accessibility

Unfortunately, accessibility doesn't seem to be high on the priority list of many web developers. More than just a logical page flow and intuitive element positioning, accessibility allows those with less favorable circumstances (eg. decreased motor ability) to still navigate the site. Keyboard shortcuts are very easy to implement (supported on input and link tags as the accesskey attribute), and allow the user an alternative to using the mouse. An underlined letter on a link or the label of an input key denotes the keyboard shortcut. Using these shortcuts varies by browser:

Another important aspect of accessibility is the absence of unnecessary markup, which is attained by good usage of CSS. Not only is it important to avoid usage of old, deprecated tags and attributes (eg. <font>, the bgcolor attribute, etc.) to clean up the page, but it is just as important to use good semantic markup. For example, use the <blockquote> tag if you're quoting something (instead of using a <div> tag) or the <label> tag when identifying an input field (instead of using a table for simple forms). Any of these tags can be styled in your CSS style sheets. Avoid using <i> or <em> tags simply for formatting - only use them when you want to convey the message that the contained text is emphasized. In this way, one who analyzes the code or listens to it being read by a screen reader can have a better understanding of the organization of the page.

 

Resources Used

Sign In