Images and Learning About Retina Ready Images

My next task was to set up the image slider. Avada comes with Layer Slider 4.0, Revolution Slider, Elastic Slider, FlexSlider, ThemeFusion Slider, and Post Sliders. I was a little apprehensive about the slider. It turns out that I didn't need to be. I dedicated Monday to the project and it was quickly solved. In hindsight, it was the photo work that has taken up more time.

Revolution Slider
I liked the look and feel of this slider. It became my test subject. Once again the Avada YouTube tutorial made it fairly simple. I set the video to full screen and paid careful attention to the file type and size of the images being used in the tutorial.

Setting the solid color background image on the slider becomes very important when containing the actual image and potential text layers. I would not have done that step without the tutorial. (See approximately 3:16 on the video.)

Adding the photo layer and setting its exact location was another speedy tip to developing the slider (4:08 on the video).

Retina Ready
Avada is a retina ready template. I noticed the Avada Retina Ready Information video after I had edited six images and some graphic files for the school name. I wish I had found that first and I am grateful I had only a handful of graphic images already created.

My younger son had been talking with me about retina ready images for some time now. He develops apps for iPhone, iPad, and iTouch.  I understood that he was making images twice the size he needed them, but I didn't think about that as I was creating those first images for the school website. You should play the Avada Retina Ready video for a quick understanding of the concepts. What is amounts to is that however big your screen area is for an image, you need to upload an image that is actually twice as big. As the video says, if the image area is 100x100 pixels, the uploaded image should be 200x200 pixels.

I will be working on this concept tomorrow. There is a WordPress plug-in that I have to install that will check the images.

Image Editing in Gimp and iPhoto
Gimp has been my free image editing software for years now. I knew the types of images I would be seeking from the school marketing class I took in my now completed Masters program. The photos should show action not things. The photos should show the best of what we as a school want to represent. The photos should be tightly cropped on faces. The photos should be of the highest resolution possible.

From years in working with photography as a hobby I knew I wanted crisp, sharp focus. I wanted the images color balanced. I wanted clean lines and no distractions behind the faces. If I can find leading lines in the images it is all the better.

I know I will improve my methodology over the next few months. Yesterday I found an exciting option in Gimp to help me get the size I thought I needed before I started to understand the implications of being retina ready. Even as I write this, I wonder if the Revolution Slider images are ok because mine are the same size as those that were used in the tutorial. I am being very careful to look at everything on the screen in the videos.

First, the Revolution Slider needed a background image. This anchors the rest of the layers on each slide that revolves through the slider. The tutorial suggested a PNG file filled with the hex color #f6f6f6. Hex colors are another concept I teach my students when we learn about HTML. In brief, colors are made up of red, green, and blue on monitors. Instead of counting in the base 10 system (0-9) we count in base 16 (0-9 then A-F). The hash tag symbol (#) denotes a hex number.

In Gimp I created a new image that was 940x434 pixels. I filled the background with #f6f6f6. I saved it as a Gimp (.xcf) file and a Portable Network Graphics (.png) file. I started a folder called smscranford to store all images that make it to WordPress in our domain.

Next, I gathered several images and brought them into iPhoto to do a quick color balancing. I need to learn more about this step too. In iPhoto 9.4.3 I click on the Photo then choose the Edit icon on the lower left side of the screen. Next I click on the Adjust tab on the top right side of the program. Finally, I locate the tiny color picker icon and click on a white or neutral color. 

I drag the newly balanced photo to an "Adjusted" subfolder in my Pictures folder.

The tutorial showed the actual imported images to be 940x434 pixels. I don't know how that squares with the idea that for the retinal display the images should be twice as big. For the moment, I am resizing my original images that range from 2048x1536 to 4000x3000 proportionally down to 940 pixels wide. If there is a lot to be cropped out I first use the rectangular selector and attempt to select an area that is in the neighborhood of 940 pixels or a bit larger. Once the area is selected, I Edit-Copy the selected area and Edit-Paste as New Image.

Next, as needed, I Image-Scale Image so that it is proportionally 940 pixels wide.

Here is the new trick! I found Image-Canvas Size. I unlink the proportional resizing and leave the Width at 940 pixels and change the Height to 434 pixels. It then gives me the ability to slide the image up and down to determine which pixels will fill the height.

I was really happy with this feature.

Avada WordPress Theme

I have spent approximately 16 hours working within the WordPress theme at this point. I have followed the documentation index.html that came with the download from ThemeForest.

Downloading the Demo Data XML File
I initially was not sure that I wanted to import the demo data. I am glad that I did. One of the things that I appreciate about the Avada theme is that the developers took the time to make screencasts of each step. The videos are posted on YouTube. Their written directions are very clear and include links to the associated YouTube video. Despite the fact that there are clear written directions, have listened to most of the screencasts. This is a great example in relation to good teaching in general. They give their "students" multiple ways to learn.

The video helped me quickly set up the menu, home page, post page, and widgets. The XML import does include all of the menu items and is really a sales page for the Avada them. It will not take too long to modify my initial content and pare away all of the demo words, links, and images.

The First New Page

I set up the basic layout of the home page in my first attempt to learn how to apply the theme. The index.html file has great documentation. By signing on to the Theme Fusion website I was able to access more video tutorials. The tutorial quickly led me to understand how to select among different types of pages. For the home page I wanted to use the full screen. The Page Attributes on the right side of the screen gave me ready access to Full Width and many more other options that I will explore as I build more pages.

The first problem I encountered was figuring out where the shortcodes were located. Shortcodes are macros that generate snips of HTML code that enable the editor to create pages within the Avada theme.

The video tutorial explains that once you edit the page and select the visual editor a series of short codes appear. I did not see the short codes so I went over to the Theme Fusion forum. I did a search for short code and quickly found a thread with a discussion revolving around my exact problem. It had been posted just a half day earlier. One of the replies said to look for the Kitchen Sink. 

Clicking the Kitchen Sink icon still did not lead me to what I was hoping to find, but as I hovered my mouse over the new set of icons, I noticed the ThemeFusion Shortcodes drop down list.

At this point, everything became easier.

The First New Page
In all honesty I am very glad that I understand the basics of HTML. When you choose a shortcode it dumps a bunch of HTML into the editor. When I begin to teach HTML to my middle school students I explain why they might find the knowledge useful in the future. Here in my own life is a clear example.

The tutorial demonstrates how to add a tagline. I used the school's philosophy as the tagline. The shortcode looks like this:

[tagline_box backgroundcolor="" shadow="no" border="1px" bordercolor="" highlightposition="left"  title="Saint Michael School Philosophy" description="Saint Michael School exists to promote the spiritual, academic and personal formation of the whole child. As witnesses to the teachings of Roman Catholic doctrine, the students are challenged to achieve excellence in their relationship with God and in all they do. The challenge of the Saint Michael student is to live these teachings beyond our doors into the local and world community. Faculty, parents, and students are the cornerstone upon which we build our faith-based, academic environment. The deepened awareness of the presence of Jesus Christ in our lives is fundamental to life at Saint Michael School. "][/tagline_box]

while the actual output looks like this:

The words I highlighted in light purple above amount to HTML codes with options embedded. It was easy to understand how the tags equated to the final product on the screen. The default shortcode includes a link and a button. I did not want those so I removed them from the shortcode. If you care to compare the original shortcode with my edited version up above, you can see how much I removed or replaced:

[tagline_box backgroundcolor="" shadow="no" border="1px" bordercolor="" highlightposition="right, left, top or bottom" link="http://themeforest.net/user/ThemeFusion" linktarget="" button="Purchase Now" title="Avada is incredibly responsive, with a refreshingly clean design" description="And it has some awesome features, premium sliders, unlimited colors, advanced theme options and so much more!"][/tagline_box]

With a tiny bit of playing I realized the highlightposition was the think line on the tagline box.

We will be calling our "blog posts" School News. The tutorial gave very simple directions for using the Recent Posts and Title shortcodes. With these features underway the website began to take shape.

I learned that there would be more work to actual put the photo slider on the screen so I saved that for another day.

Creating a Brand New School Website

I am in the process of creating a brand new website for our school. I want to leave a breadcrumb trail behind so that if someone else from my school needs to learn what I have done, they will be easily able to do so. A bigger concern is that if I have to do it again for some reason, the entire path will be laid out here. Perhaps someone else will find it useful, too.

Getting the Domain Name
Our school is associated with a parish. There are a multitude of hosting sites to choose from. My choice of HostGator was simple because the church had just set up their new site through this company. The parish chose a business account so the school followed suit. 

Advantages of HostGator:
The website was very easy to use. We will be allowed to host unlimited domains on our own account. I am not sure how that will help us yet, but I will find out. There are unlimited POP3 email accounts. They have a one click installation of WordPress. When I had a question, I was able to call their 800 number and I received a quick response from an individual who was well trained and their spoken English was easily understood.

Minor Inconvenience:
The company sent an email requiring the principal to call in to "prove" that we had indeed requested the domain. It took a day between submitting the electronic paperwork and having the principal call the company to verify the transaction. This was not a disadvantage, but it did slow me down a little.

Setting Up the Initial eMail Address

I believe that it will be advantageous to have an admin email address to capture all of the various sites and supports for the system. I created an administrator account in eMail. After signing on to the CPANEL (Control Panel) I looked in the Mail section for the Email Accounts icon. I created an account to administer the website creation project, an account with my own name, and there is a separate account that is automatically created as a "catch all" account for unrouted mail. 

The actual account creation is simple. The Email entry is the "address" of the email such as annoro. The Password must be at least five characters. It checks the strength. Mailbox Quota specifies how much storage space the individual will have in their account.


Installing WordPress

The installation of WordPress was fairly simple. I found the installation in the Software/Services section of the CPANEL. The Quick Install icon gives an array of choices. I found WordPress under the Blog Software heading. When the pointer hovers over WordPress a green arrow appears. Clicking on the green arrow leads to a Continue button to install the software. I did not capture all the steps in the installation of WordPress, but it seemed logical to me as I did it.

Determining the WordPress Theme
This step is quite time consuming. There are many free and paid WordPress themes. I have been taking a course through Team Treehouse. I applied for, and received, a two year scholarship to learn on their website. The most recent course I have been working on is Building a Responsive Website under the Intermediate Website category. Team Treehouse deserves a post of its own sometime. I knew I wanted a Responsive WordPress theme.

I did a search in Google for wordpress responsive theme education and came up with several choices. I then removed the word education from the search query and came up with a few more choices. My principal and I then sat a looked at theme after theme. We started listing what we liked and did not like about the themes. A pattern began to emerge. When all was said and done we settled on Avada. There is a one time fee for the theme. We needed a Paypal account to pay for the theme. After submitting payment I downloaded the theme and followed the 0 - READ ME FIRST.pdf directions. The developers really paid attention to the customer. They left a breadcrumb trail of files to get me to the documentation folder. This folder had a second 0 - read me first.txt with a simple message to open the index.html file.

The Table of Contents menu in index.html contains 24 major categories to get the user going with the theme. I signed up for the free forum support and began following the directions for the WordPress installation. I downloaded a free Museo Slab web font and installed it into WordPress. I imported the demo data into my site. This is a useful step. The demo data installed all I needed to get going with the development as well as the entire sample website. Another post will follow this with my foray into the development of the site.

Keeping Track of Various User IDs and Passwords
There are an interesting collection of new IDs and passwords. I opened a TextWrangler file to log every website, user id, and password. There were more than I would have imagined: the new website has a CPANEL userid and password, downloading the Avada WordPress theme required an envato account, ThemeFusion required an id and password for the community forum, the new website has an associated default email account, the administration account and the one with my name and those associated passwords, HostGator has a billing system with a unique password.

Now the Development Fun Begins
I have already started developing the pages. As I was doing so the other evening, I realized that I was missing a big opportunity for myself by not documenting all the steps. This will serve as a record of what I have done and I am doing. I have a few most posts to get to where I am in the process now. From there forward, I can document as I create. In this way, I will not forget any steps.

EBSCO Search and Jersey Clicks

This post continues the theme of my last five posts about teaching web search and evaluation skills from Kindergarten through eighth grade. Another important skill set involves understanding the deep web.

The Deep Web
We begin by discussing what the students know about icebergs. Their common explanation is that there is more iceberg underwater that what appears above the surface of the ocean. My explanation to the students in sixth through eighth grade is that there are resources available only if you have a public library card. The Internet is like an iceberg. What Google, Bing, or any other search engine shows is much smaller than what is available. In the state of New Jersey we have access to Jersey Clicks. It is a website that verifies your membership in a public library and gives you access to EBSCO search.

I walk the students through Primary Search, Middle Search Plus, and Academic Search Premier. I explain that we will see results from magazines in our Jersey Clicks work. Magazines usually require a paid subscription. As a service through the public library we can view the articles online. The students in middle school have to read scientific articles for a report each trimester. With this example in mind, we search for electric automobiles.

EBSCO Search
It is very important to help the students locate the full text check box on the search screen. If they do not check the box, they will receive results that include items that cannot be read online. Once we view the results page, we look at the difference between HTML Full Text and PDF Full Text results. The major difference is that the PDF files are generally like scanned images of the magazine pages.

In Primary Search they will see magazines like Boys' Life, Science World, and Science News for Kids. The content is appropriate for middle school students and elementary school children. In 2013 we found 56 entries for electric automobiles. Middle Search Plus located 906 entries. Its results come from magazines such as Time, Popular Science, and Discover. The reading level is much higher than the results from Primary Search. Finally, Academic Search Premier contained 3,849 results. It includes academic papers in addition to more complex magazines such as New Scientist, Futurist, and Kiplinger.

Follow Up Activity
This year, Margaret Thatcher had died the week before we completed this lesson. I had the students find three resources in Google and three from Jersey Clicks. I provided the students with the following prompts in a word processor document. They turned in their completed research as an Edmodo assignment.

• How many entries are there for Margaret Thatcher in the Primary Search?
• How many entries are there for Margaret Thatcher in the MiddleSearch Plus?
• How many entries are there for Margaret Thatcher in the Academic Search Premier?
• How many entries does Google give you for Margaret Thatcher?
• How many entries does Google give you for “Margaret Thatcher”?
• What is the difference in the types of articles you get between Primary Search and Middle Search Plus?
• What is the difference in the types of articles you get between Middle Search Plus and Academic Search Premier?
• What is the difference between Jersey Clicks and Google?
• When might you use Jersey Clicks instead of Google?
• Tell me three things you found out about Margaret Thatcher in Jersey Clicks.
• Tell me three things you find in Google.

We held a class discussion following the research. They understood that they could receive more factual, targeted answers through Jersey Clicks. They were able to quickly see what Margaret Thatcher looked like in Google. The found 6 Primary Search, 292 Middle Search Plus, and 1,260 Academic Search Premier results and over 38 million Google hits.

The end result is that the students recognized that they authority of the articles was much greater for Jersey Clicks/EBSCO and that they could go there for trusted research.

Image Citation
Mjöbäcksvillan Barnaby Iceberg, Family Barnaby 
http://www.flickr.com/photos/80120017@N03/8010607983
Creative Commons Attribution-NonCommercial-ShareAlike

Rating Your Research in the Seventh Grade

So often school projects require the students to research a topic within a narrow range selected by the teacher. For the last two years, I have had the seventh grade students submit a proposal for a topic they would like to research. The results have been worth the effort. This year, I tied the results of their research into what they learn about authority, bias, content, and usability as sixth grade students. 

General Project Guidelines
I ask the students to write a short paragraph explaining the topic they are interested in researching and why they would like to do the research. It is not a simple task for a seventh grade student. Over the last two years, my students have researched a variety of topics including photography, animal habitats, sports, and hobbies.

Once the topic is approved, they receive a Google Doc with a series of questions to guide their research. Each question will eventually turn into a slide in a presentation to be created in Open Office.

Slide 1: Topic introduction - what is the topic, why did you choose it, who else might be interested in the research you gather
Slide 2: What did you know about the topic before you began your research
Slide 3: What is one specific thing you wanted to find out and what did you learn
Slide 4: Continuation of the one specific thing and what was learned
Slide 5: What is a second specific thing you wanted to find out and what did you learn
Slide 6: Continuation of the second specific item
Slide 7: Wrap up - what other questions did the research bring to mind, in what other ways did your knowledge increase, who else will you share your knowledge with and why

Search Skills Refresher
Over the course of the previous years, the students have been working on skills with Sweet Search and Google. We learned how to construct a query to get the best answer to a question by including quote marks in the query and thinking about the words that would appear on a page that had the best answer.

The students used their Diigo student account to bookmark relevant pages. They must always find the content first. Some students need to be steered away from daydreaming by paging through images (depending on their research topic). 

Once they find the content, bookmark it in Diigo, and type their answers into Google Docs they may start finding images for their presentation. The students continue to need direction in bookmarking the actual page containing the image. Some students bookmark the Google search result. 

By keeping the research results in Google Docs and the bookmarks in Diigo, I am able to easily check up on their progress from any location that has Internet access. The students are able to move to different computers and still have access to all their content.

The presentations reinforce the skills of presenting to an audience, being a good audience member, and designing slides that rely on images for the audience and speaker notes for the presenter.

Extending Analysis of Web Page Content
This year at the conclusion of the presentations, the students were required to go back and look at the pages they bookmarked for content. We reviewed the concepts of website authority, bias, content, and usability. The students reported on up to five websites they used in their research and listed the strengths and weaknesses of each. It gave me useful feedback on where the students are growing or needing practice in evaluating websites. This is a link to a PDF sample of a student's analysis.

Student-Created Project
This analysis led to a project request by a student. They thought it would be interesting to read the Terms and Conditions on a website and create their own terms and conditions. I selected Facebook, Tumbler, and Twitter since the students often have one or more of these types of accounts. First they chose to open a document with a copy of the terms and conditions. They worked with a partner to highlight sections they did not understand. They colored the font of those entries in red. They highlighted sections they wanted to include in their own terms and conditions and changed the color of the font of those words to green.

They really enjoyed creating their own terms and conditions document. The idea was to then have the eighth grade students read their terms and conditions and agree or disagree to them in order to "use" a website. We ran out of time to complete that part of the project. I will do this in September of the 2013-2014 school year. We will then analyze how many students really read the terms and conditions and how many just click agree. We will probably do it with a Google form masquerading as an actual terms and conditions page.

Overall Results
I do believe the students are becoming more critical thinkers in the selection of websites for research. I will continue to help them build their skills next year.

Image Citation:
Creative Commons Attribution-NonCommercial-ShareAlike
http://www.flickr.com/photos/32625013@N00/3312537516
Paula Bailey