I just came across this little jem. 

http://www.pictaculous.com/

This site allows you to upload an image and then presents you with a color palette to use in coordination with the image.

This is useful for web design, but also photoshop.

Enjoy

What makes many windows system admins cringe?  BATCH FILES  Well, truth is they are not for the faint of heart.  But batch files are just way too handy. 
I just was presented by a colleague a problem of renaming a file to incorporate the date in the filename.  Kindof a handy thing to do in coordination with other batch type tasks.  Well, I wish I'd figured this one out, but thanks to the internet I have a cute little command that can be added to batch files or run from the command prompt to incorporate the date into a filename. 

Here are the pieces. 

1.  GET THE DATE - If you type "echo %date%" into a command prompt you will get a lovely presentation of the date.  This is an environment variable.  All environment variables are precedded and followed by a %. Today looks like "Thu 04/02/2009"

2.  FORMAT THE DATE - This is what got me... the date has slashes in it.  Pretty much a no no for a filename, so we need to strip out the important info from the %date%.  Well, there is a convention for extracting bits of a blob of text.  In the date environemet variable we can follow the word date with a colon (:) a tilde (~) and two numbers separated by a comma to indicate the start position and number characters to extract from the larger bit of text.  For example: if we want just the month from the day ("Thu 04/02/2009") we type the following. 
%date:~4,2 

the result is...
04

This is the result of skipping 4 characters and capturing the next 2. 
Yipee! we have the month... following the same idea we can get the day, and year also.
 (come on you know you want to open up a command line and give it a try...)
Lots more information on this page...http://www.dostips.com/DtTipsStringManipulation.php

3.  RENAME THINGS - The rename command is much simpler to deal with than the date formatting.  All you need to do is type RENAME or REN followed by two parameters.  First is the filename as it is currently, and then the filename you want it to be.  Like this...

REN nate.txt sexy.txt

Ya, all of you reading this are having error messges flash in your brain.  Remember to place each parameter in double quotes if there happen to be spaces in the file name or path to the file.

4.  PUT IT ALL TOGHETHER - Ok well put all those pieces together and we now have the tools to rename a file called happy.txt to 2009-04-02happy.txt by using the folloing command...

REN happy.txt %date:~10%-%date:~4,2%-%date:~7,2%happy.txt

This works by concatenating the year, month, day, and other text in the target filename.
Year = %date:~10%
Month = %date:~4,2%
Day = %date:~7,2%

Give it a go!

I wanted to open this up, so please comment or email me  (nmcclena@esu10.org) your favorite developer tool that is incorporated into a browser.  I'm just playing with "web developer" tool bar for firefox from Chris Pederick (http://chrispederick.com/work/web-developer/) and it has some nice tools to help troubleshoot your web code. 

Add your favorites here.

Recently I did a little study to investigate options for a solid printing foundation from a website.  I did a lot of research and had fun investigating the w3c's css standard for alternate media types.  Although I came to the conclusion that for rock solid printing, there is no alternative to PDF, I learned that there is considerable browser support for print media.  With that said. the most valuable concept I gathered from my research was that it is quite easy using css to make an entire site much more printer-friendly. 
Let me give my definition of printer-friendly.  The ultimate would be complete control of the margins on the page and placement of all objects on the page and meaningful page breaks.  Because of different browser implementations of the print media standard, this is a complete pipe dream.  With that said, I consider printer-friendly to be a way to print the main content of a web page without cluttering up the printed page with web navigation or cute stuff.   
Ok, enough yacking... 

There are several ways to accomplish a different css application to page elements based on the media type.  One can actually make 2 distinct .css files, one for web and one for print.  Then in the page head create the link to each one.  Another method is to include a block of css in the existing css file and enclose it in a @media print{} style rule.  Either way, browsers are smart enough to use the correct css for the media it is trying to present.  I found the best way to test this is by using the print preview option available in most modern browsers. 

Here is an example.  For a simple page with a menu block on the left and a content area on the right, we might have an html block that looks like this...

<div class=page>
    <div class = menu> Menuy things </div>
    <div class = content>  Content Stuff </div>
</div>

A typical css file might set the layout for the menu to be on the left and the content in the middle using a style like this...

.page {width:500px; }
.menu {width:200px; float:left; }
.content { width:300px; }

But by adding another set of styles we can hide the menu for print media like this...


@media print
{
.page {width:7in; }
.menu {display:none; }
.content { width:7in; }
}

This style will only be applied for printing.  The main differences are that the menu class has display:none; which hides that block and I use inches as units rather than pixels.  I like to specify the width to avoid things that extend off the right hand of the printed page.  Again, double check by using the print preview feature in your browser.

Try it out yourself with this code.

Enjoy

With the demise of Manila, Broken Bow is looking for a different way to provide teachers with a professional web presence.  The probable adoption of web apps like Blackboard and the move toward Web 2.0 apps parcels out many of the reasons for a professional web page to a collection of more specialized systems.  As a result, the ubiquitous "professional web page (every teacher should have one)" is being gradually eviscerated.  There are already schools in Nebraska that are using one-to-one and have completely dropped the use of individual teacher professional web pages.  Our approach will probably be to drop back from "every teacher must have one" to "teachers who want one in addition to what's on Blackboard and Infinite Campus already can have one."

Manila's exit from the scene has a bearing on the development of a different approach.  First, it is driving the timeline for adoption.  It's our intent to drop Manila as of the end of the 2009 Spring semester, and a replacement solution must be in place before then.  Second, Manila's long use in the District has a host of difficulties and complaints that we think can be corrected in a new system.  (It's not that we don't like WordPress, it's just that we don't necessarily agree that every computer user and their dog must blog and that the jury's still out for us.)  Complaints include:

• I have to remember a separate login ID and password
• Pages have to be created in Manila, so I have to learn a whole different editing system
• Drag and drop from Microsoft Word doesn't work, so I wind up having to type things twice
• Keeping up my web pages is always an additional task, and I don't have the time

Local resources may lend themselves to an elegant solution.  (1) Microsoft IIS is capable of serving out pages from "webshare" folders located in teachers' network home directories, and we are already using it for many other purposes. (2) Microsoft Office (the District's standard application software platform) is capable of producing robust static web pages to put in the webshare folders.  Links between pages would have to be managed manually, but the effort to do so is no greater than the effort to do so in Manila -- maybe less.  (3) I'm functionally fluent in ASP (including ADSI interface access to Active Directory), HTML, CSS and SQL, and somewhat less fluent in PHP.  I certainly don't consider myself to be anything close to "expert." (4) We have Sharepoint installed, and are considering that as part of the local mix.

Having said all that, here's the vision and the problem:

Professional pages should be created and maintained in Word 2007, and stored/served from a webshare subfolder in the individual's home directory.  Security permissions for editing vs. reading should be controlled by NTFS/Active Directory.   A Microsoft SQL 2000 Desktop instance has been created on the IIS server to support the website, but no tables have been created yet.

Somewhere somehow the professional pages need to be encapsulated in a template wrapper (the template is already fully developed using CSS floated boxes, and can be seen at http://services.bbps.org/theme3/index.asp).   The Word-created HTML pages should appear in the large white section to the right of the navigation menu.

The problem so far has been that Word-created HTML pages include their own styles, fonts, and tags.  If the file is simply imported into it's proper sequence in the template, you have nested <HTML>, <META>, <HEAD>, <STYLE> and <BODY> tags that are consequently misinterpreted.  I'm in the process of experimenting with framesets, but understand that frames have been deprecated.  If I store the Word-created pages as BLOBs in the SQL database, it's still not a matter of just adding the template segments around them -- the nested tags still exist.  Of course, Manila accomplished this by requiring use of their own HTML editor that couldn't understand the complex markup in Word documents.  And storing them in SQL implies a two-step update process: (1) open the document in Word and make the change, then (2) upload it to SQL again.  Ideally, it should be enough to just open it in Word, make the changes, and save it again, just like any other document. 

So what I really need to do is display NESTED web pages (a web page inside another web page), where both the inner and outer pages are fully independent and standards-compliant.

So... any ideas?

I've had fun making dumb little programs for fun.  The inspiration for this came from the need to host a gathering where some group games were to be played.  So knowing that I could project my screen from my laptop I created this game to have a little fun.  It is a very basic version of hangman or Wheel of Fortune.  I've zipped up the source code and exe in this attached file.  Let me know if you have any suggestions. 

WordPuzzle.zip

Note:  Requires .NET Framework 2.0 or greater.

Link: Part 1

Hey TECHS students! Here's the second half of chapter 53: Javascript. There aren't any videos in this part as I'm wanting to clean them up and make them a bit easier. But here's the source files used as you'll see in the video on myelearning.org. These videos assume you've already been through the first half of the chapter, and are a continuation of how to use javascript in an HTML document.

There are currently three videos in the second half of this chapter:

1. Functions   9:40
2. Parameters   8:30
3. Events   8:05

You may download the initial document as it appears at the beginning of the first video to get started. You may also download each document as it appears at the end of each video and test them out on your own!

For more info and training on JavaScript, visit http://www.w3schools.com/JS/. You will find plenty of easy and straight-forward examples of functionality in JavaScript, with an easy-to-find index and even a how-to page for each that allows you to test changes to their example code! If you want to read some more, start at Wikipedia's JavaScript page.

If you have any questions, drop us a comment below--we'd love to hear from you! Happy JavaScripting! :)


2.1 Functions   9:40

html document


2.2 Parameters   8:30

html document


2.3 Events   8:05

html document

Below are the videos for the HTML portion of the techs class. 

Segment 1 - Tools
 
Visual Studio - https://downloads.channel8.msdn.com/
Edit Plus - http://www.editplus.com/ 
Eclipse - http://www.eclipse.org/

Segment 2 - HTML intro
 


Segment 3 - Class project

Nate's Sample Project - http://www.caffeinatedcoding.org/examples/todo/todo.htm
Brian's Sample Project - http://www.caffeinatedcoding.org/examples/ilikeswitchfoot/index.html
Adam's Sample Project - http://www.caffeinatedcoding.org/examples/rockpaperscissors/index.html


Segment 4 - Headings
 

Segment 5 - Attributes
 

Segment 6 - Lists
 

Segment 7 - Breaks
 

Segment 8 - HTML Origins - Who came up with all this anyway?
 
W3C - World wide web consortium - http://www.w3.org/

Segment 9 - Links
 

Segment 10 - Images
 


There are lots more things to explore in HTML, but the previous vidoes cover the most common things. 

Link: Part 2

Hey TECHS students! Here's the first half of chapter 53: Javascript. These videos assume you've already been through the HTML (1) and CSS (1,2,3,4) lessons, and are an introduction to using JavaScript and how to add it to an HTML document. If you've already been through this part, you may continue on to the second half of the chapter.

There are six videos in the first half of this chapter:

1. Intorduction   4:27
2. Changing Style   5:33
3. Changing Content   6:11
4. Branching   6:21
5. Looping   7:37
6. Comments   5:42

If you have trouble watching the videos on this page, you can also find them on youtube. After each video is a link to youtube as well as the final HTML document as shown in the video. Feel free to create the document yourself as you follow along, or download each document and test them out on your own!

You may download the initial document as it appears at the beginning of the first video to get started.

For more info and training on JavaScript, visit http://www.w3schools.com/JS/. You will find plenty of easy and straight-forward examples of functionality in JavaScript, with an easy-to-find index and even a how-to page for each that allows you to test changes to their example code! If you want to read some more, start at Wikipedia's JavaScript page.

If you have any questions, drop us a comment below--we'd love to hear from you! Happy JavaScripting! :)


Introduction   4:27   (1 of 6)


youtube link
html document


Changing Style   5:33   (2 of 6)


youtube link
html document


Changing Content   6:11   (3 of 6)


youtube link
html document


Branching   6:21   (4 of 6)


youtube link
html document


Looping   7:37   (5 of 6)


youtube link
html document


Comments   5:42   (6 of 6)


youtube link
html document

CSS Lesson 1 of 4: What’s CSS and Why Do We Need It?

Cascading Style Sheets (CSS) is a powerful way to add styling and to control a web site’s appearance.

CSS was created to work along side HTML, however it is a different language compared to HTML. You can use CSS to control everything from the color of your text to how far apart elements are spaced on your page. CSS will also let you change the color and background of an element as well as adding borders to an element. It will even allow you to do more advanced stuff like popup windows. One of the real benefits of CSS is it allows web designers to separate the content from the presentation and have all of a site’s presentational information in one location.

The "cascading" in "cascading style sheets" is basically the order of precedence that the browser uses to apply style rules. If there are any conflicting declarations, the cascade is the process that sorts it all out and determines which rule will finally win. In other words, the style rule with the highest precedence is the one that is used. One of the simplest forms of precedence is that the style that has been declared last on the page is the one that will be applied – that is, if all other things are equal.

Now that I have given you a brief synopsis of what CSS is, let’s talk about why we need it. In the beginning, well before CSS at least, HTML was used to control the presentational aspects of a page. With web sites becoming increasingly complex, a majority of the code merely determined the appearance of a web site. While this did not create any problems for the end user, it made web site maintenance especially difficult and time-consuming. For example, to change the color of your links, you would need to go to each and every link and change it manually.

So in 1995, the World Wide Web Consortium (W3C) began working on a solution. By 1996, the W3C came up with, you guessed it, CSS. Using CSS to move the presentational information out of the HTML document not only makes web sites easier to update and maintain, but it also has several other benefits, such as cleaning up the code, making the web sites easier to be indexed by search engines, and making websites more compatible with screen readers. CSS also gives you more options and can make a much richer looking web page than HTML ever could.

Resources for CSS Class
Rock Paper Scissors Demo
RockPaperScissors.zip
lesson4.zip
Pixie (Windows Only)

Notes for Mac Users: If you are having trouble using "TextEdit" to view the code of the HTML files, open up the preferences of TextEdit and under "Open and Save" make sure "Ignore rich text commands in HTML files" is checked.

Instead of using Pixie to grab the hex value of a color you can use the Digital Color Meter in the Utilities folder in Applications.  Select "RGB As Hex Value, 8-bit" from the drop down list in Digital Color Meter and when you are over a color you like do a shift-comand-c to copy the value to the clipboard. For some reason when you paste the hex value it has quotation marks around it so don't forget to remove them.  

Some Great Websites to Learn More About CSS
The W3C CSS Home Page
W3Schools CSS Tutorial
Zen Garden