This exercise continues to use the weather report code but has you explore (a) more use of dynamic classes, (b) reading inputs from a text file, and (c) writing a history of inputs back into a text file.
Using inline CSS in conjunction with PHP.
And here’s a quick reminder of the two types of inline CSS:
You can wrap regular CSS statements in the <head> of your HTML page using the <style> tag:
<!doctype html>
<head>
<title>My Page</title>
<style>
h1 {color:red;}
p {font-size:24px; line-height:30px;}
</style>
</head>
...
You can also style a particular element with the style attribute. This will override styles inherited from the main stylesheet or the <style> tag in the page.
...
<p style="font-size:24px; line-height:30px;">My paragraph is large.</p>
...
So if I wanted to generate a random font size with PHP and just affect a single paragraph, I could do this:
<?php
$font_size = rand(10, 50); // generate a random number between 10 and 50
?>
<p style="font-size:<?php echo $font_size; ?>px; line-height:30px;">My paragraph is large.</p>
...
Here’s a quick survey of dynamic projects that visualize data or assemble existing visual material to create something new:
Designing with data or material that is being generated “live” is different from designing known or static content. As with a blog, your job is to design template or “view” that adapts to whatever content it might contain in the future. How can your project re-frame the content by aggregating and re-presenting it? Can the user interact with the content in a meaningful way after it has loaded, by changing its display or switching from a macro view of all the content to a micro view of one piece of it?
Think of the web browser is a modern-day canvas with its own limitations, conventions, and user expectations. Which conventions/limitations do you want to embrace, and which do you want to play against? Think about the fundamentals of the web experience: links, scrolling, typography, images. How can you mix these elements to create something new, compelling, surprising, or delightful?
Kuler is an Adobe website that allows users to brows and submit color combinations. You can then take the colors and adjust them in the browser to get the color scheme you are looking for. It gives you the RGB, CMYK, HSV, LAB, and HEX values of each color so you can use them in a design program.
PatternCooler is a website that allows you to choose from a huge selection of patterns and make a custom colored version that will repeat horizontally and vertically. You can mess with the colors in the browser and input HEX colors if you already know what you want. The patterns range from god awful to actually pretty cool. The more basic designs, such as hexagons or stripes are useful because if you already know what you want it can save you the trouble of making a repeating pattern in Photoshop.