I am excited to share what I have been doing with students to build their knowledge of searching the Internet.
I have my resources on a wiki page: http://smsteacher.wikispaces.com/InternetSkills
My personal website is: http://www.mrsoro.com/
If you would like to contact me via email, please see the link on the left side of this page.
You can find me on Twitter @njtechteacher and Google Plus.
Thursday, October 31, 2013
Monday, October 21, 2013
Connected Educator's Month 2013
A Tweet Pulled Me In
I was taking a quick look at the hashtag for #ce13 and saw a message from Eric Sheninger
Join the FREE Leadership 3.0 community @edwebnet http://buff.ly/19KW5w1 #cpchat #ce13
As it happened, I was waiting for the laundry to finish so I poked around the site and found an archive of a Leadership 2.0: Essential Skills for Innovative Principals webinar. It was well worth my time. I had heard Eric speak online and in person a number of times. The webinar also featured Joe Mazza and I enjoyed hearing his perspective as a lead learner (principal) of an elementary school.
Daily Emails
I signed up for Connected Educator Month last year. As a result, I have been receiving daily emails detailing the events of the day. I followed a link to get in a drawing for books from Solution Tree. After filling in the form, I decided to look a little closer at the website and thought I would learn more about the "badges" event that is running this year. I am not sure if it is the first year they are doing it. The actual reason I am writing this post is that it is required for one of the badges.
The badges led me to a Connected Educator's Starter Kit. I downloaded the PDF for use at school with the local teachers.
All in all, I am looking forward to completing more badges and being able to give first hand knowledge to teachers that are just starting on the connected educator journey.
Image Credit:
http://badges.connectededucators.org/
Sunday, October 20, 2013
Superhero Theme for 2013-2014
I have had different themes in my classroom over the years. This year I have been thinking about how I used ClassDojo and Sokikom Classroom Management in my room. I chose a Superman/Super Hero theme to explain our work together in the computer class.The Student as a Super Hero
My first task this year had a duel purpose: understanding the student perspective and checking on their word processing skills. I posed the following: What super power do you wish you had and how would it make God proud of you? What is your everyday super power in class?
The responses I received were well thought out and often times highlighted great behaviors I have observed in the students over time.
The Classroom Management Tools
Last year I tried to use classroom management tools to track positive behaviors, like helping others with a project. I tracked behaviors that hindered others indirectly as areas to improve, such as forgetting to log off a web site or leaving an untidy workspace at the end of the session.
The reason I didn't use Class Dojo the entire year was that they required a student email address for accounts. I did not think that was appropriate. ClassDojo no longer requires an email address for the student. I next used Sokikom through Edmodo. It was a little better because it worked right through the student's Edmodo account. No extra sign on was required.
My current biggest problem with the ClassDojo is that it is still not perfect. Students can't see a range of data only what happened the current week. This hinders my students. I only see them once or twice a week. If they do not get to sign on at home, they lose their data at the beginning of a new week. The program has "parent" comments which I use to give further explanation such as the fact that the program they were logged on to was Diigo. The students do not get to see those comments unless I or a parent show it to them. I know these systems are improving. They are very responsive to teachers. I received an email to let me know that they are continuing to add features to the program. It seems like a date range is close to the top of the list.
Students Recognizing Other Students
It is working. Students are pointing out the help they are receiving from others. Not only that, but close to 100% of the students students logging out of web sites, fully closing out programs, and leaving behind a clean work area.
In an attempt to help them see the big picture, I took a screen shot of their points earned individually and as a class at the end of September. One class, with a positive rating of 92%, wanted to see how they measured up against the rest of the classes in the school. They were disappointed to find out that they were actually the lowest scoring. As a group they decided to try to top everyone next month.
Finding the Genius in Students
I read a post by Bob Sprankle this weekend. He is setting up the equivalent of the Apple Genius in his classroom. The more I think about it - the more I like it. I had created a printout (see left without names) of the super heroes in class who have mastered the ability to set and use tabs. The students really like to see their name up on the printout. I am going to tie it into the Genius concept. I am going to stop at the local store and get some tags and create my own Genius badge. When we revisit a skill, those students will don their badge and be the experts in class.Every Student Has Something Special to Offer
Image Credit:
Ann Oro. Images and printouts from around the classroom.
Tuesday, September 3, 2013
Editing Wikipedia
Learning to Edit Wikipedia
Last spring, I decided to give the seventh grade students the opportunity to understand what it takes to edit Wikipedia. The reasons were two-fold. First, they get to learn the wiki markup language. Second, they experience how easy it is for anyone to edit the Wikipedia.
I started by having the students edit in the Wikipedia sandbox in anonymous mode. We, sadly, found that anyone - near and far - could modify what the students were doing. Wikipedia has a tutorial that uses a public sandbox that is erased on a fairly frequent basis.
I ended up creating an account for each of my students using the standard username and password they have for other accounts such as Edmodo, Diigo, and Google Docs. Each account has a personal sandbox. It is very unlikely that a stranger will happen upon the student sandbox page. The work is much more private and protected. Additionally, the updates are not deleted automatically by the system.
I had the students complete the Wikipedia: Editing Tutorial to learn the basics of the markup language. They followed directions in a simple handout and submitted screen shots of their edits to Edmodo.
Modifying the School Entry
After learning the markup language, the students compared our school entry which is very sparse with another more robust school page that covers the same grade levels as our school.
Each student proposed an entry for our page and wrote a potential entry in a word processor document. We ran out of time at the end of the school year, but we will make the edits early in the new school year.
The students were really excited to learn this new skill.
New at Wikipedia
As I was beginning to think about the lessons for the new school year, I had to edit our Wikipedia entry to update the link to our new school domain. There was a new link "Edit Beta". It seems that over the summer Wikimedia has been building a visual editor. It will give me something new to talk about as we head back to the project as an eighth grade class.
Image Source:
Screenshot of Wikipedia page.
Tuesday, August 13, 2013
Making Sample WordPress Pages Private
First Thoughts
I know I have to back up the WordPress site, so my first thought was to back up the files and restore files as I needed them. Then I began to think about simply making the pages drafts. As I was going to do that I noticed the option to make pages private. This will have three benefits. I can get to them easily, if someone at the school goes to change pages they will be able to just look at our published files, and I can quickly go to the private files to see the codes used in sample pages.
Making a Page Private
Step 1: Go to the WordPress Dashboard and choose Page - All Page.
Step 2: Select the page you want private, for example Animated Counters, and edit the page.
Step 3: On the right side of the WordPress page, locate the Publish options. Click the Edit button next to the word Public.
Step 4: Changed the radio button from Public to Private, then click OK, then click the Update button.
Step 5: When you go back to the Dashboard and look at All Pages the page (Animated Page) will now have the word Private following the name. In addition at the top of the list of pages you can filter the list by clicking Published, Draft, or Private.
Making the Website Domain Show the WordPress Page
I try to force myself to do what appears to be hard as the first project I attack in the day. To date, I have registered a new domain for my school, found and installed a WordPress theme, and customized the information. When I typed the domain name http://www.smscranford.com into the browser the HostGator temporary screen appeared. I had to type http://www.smscranford.com/wp to see the school page. I was ready to make the main domain display the WordPress page.
Google Search
I performed a search to redirect domain to WordPress home page and found the following page as a result: http://codex.wordpress.org/Giving_WordPress_Its_Own_Directory . This set of directions was fairly simple to follow. I wanted to document the steps with images.
I knew that I did not want to move the entire WordPress installation to a new directory so I followed the steps for Using a pre-existing subdirectory install. I am using HostGator so the commands may look a little different for other domain hosting companies. The CPANEL for HostGator does look like the one I am used to for A2 Hosting and others I have seen.
Steps 1-3 are completed in WordPress. I had to go to the WordPress General Settings section. Initially the WordPress Address (URL) and Site Address (URL) were the same.
I changed the Site Address (URL) to http://smscranford.com. Step 3 does say not to worry about errors or try to see the domain at this point. I did look and got an error message. Step 4 fixes those problems.
Be Smart Backup or Rename Files
From many years of working with computers, I knew that I needed to make sure I could easily undo anything I did that would completely destroy the website. It was better seeing the HostGator temporary home page than trying to undo damage on my own.
In the CPANEL for my HostGator account I scrolled down to the Files section and chose the File Manager icon.
If you are at all familiar with working with copying and pasting files on a PC, Mac, or other computer you will be comfortable with the following steps.
Step 4 in the WordPress directions that I was following says to copy NOT move the index.php and .htaccess files from the WordPress directory to the root directory of the website. Clicking the File Manager icon brought up a window.
I knew the main files were in the Web Root (public_html/www) because from past experience I had installed index.html in that directory, public means the world can see it, HTML is the basis for web pages, www is world wide web files. The directions in step 4 noted that I might need to look at hidden files, so I made sure to check the Show Hidden Files check box.
On the left side of the screen are a list of all the subfolders for the entire website domain. I was viewing the entries in public_html/www. In addition to the cgi_bin and wp folders were a few files:
Since I would be replacing .htaccess and index.php I decided to rename them. In this
way, if anything looked really bad I would just rename them back to the original names and it would be as if nothing ever changed. To rename the file, I clicked the file name (for example htaccess) and at the top of the screen I found and clicked the Rename icon.
It was handy to have some facility with website domain file names. There was not an existing index.php file. It was originally named default.html. I renamed the file with the word old following the period. So .htaccess became .oldhtaccess and default.html became default.oldhtml.
Next I double clicked the wp folder in the directory. I located the index.php file and chose the Copy icon at the top of the screen and changed the entry at the bottom of the Copy box from /public_html/wp to /public_html. I did the same for the .htaccess file. When I tested www.smscranford.com, I still did not get the right page to display but confidently moved on to step 5.
As I read step 5 my confidence sunk a bit for a minute. It said I was going to have to use a text editor to change the index.php file in the root directory. I went back to the public_html folder clicked on index.php and noticed two icons at the top of the screen. One said Edit and one said Code Editor. I decided to try Edit. It gave me a slightly disconcerting message that said I could cause many problems by editing the file but decided that the worst that would happen would be that I would need to delete the file and copy it again from the WordPress directory. When I clicked Edit, my confidence returned again.
The php file looked a lot like HTML. Step 5 said to change the require('./wp-blog-header.php'); to the folder that contained my WordPress files. I knew my WordPress folder was wp so I changed the line to require('./wp/wp-blog-header.php'); and clicked the Save Changes button in the upper right corner of the screen.
This time, when I typed www.smscranford.com I received the new web site's correct home page! I did not need steps 6 or 7 since I did not set any Permalinks for the school website.
Doing the Hard Things First Makes Sense
It actually took longer to document this than to actually perform all the steps the first time. I always like to document things here in my blog. Someday I will want to do this again and I won't have to reinvent the wheel.
Google Search
I performed a search to redirect domain to WordPress home page and found the following page as a result: http://codex.wordpress.org/Giving_WordPress_Its_Own_Directory . This set of directions was fairly simple to follow. I wanted to document the steps with images.
I knew that I did not want to move the entire WordPress installation to a new directory so I followed the steps for Using a pre-existing subdirectory install. I am using HostGator so the commands may look a little different for other domain hosting companies. The CPANEL for HostGator does look like the one I am used to for A2 Hosting and others I have seen.
Steps 1-3 are completed in WordPress. I had to go to the WordPress General Settings section. Initially the WordPress Address (URL) and Site Address (URL) were the same.
I changed the Site Address (URL) to http://smscranford.com. Step 3 does say not to worry about errors or try to see the domain at this point. I did look and got an error message. Step 4 fixes those problems.
Be Smart Backup or Rename Files
From many years of working with computers, I knew that I needed to make sure I could easily undo anything I did that would completely destroy the website. It was better seeing the HostGator temporary home page than trying to undo damage on my own.
In the CPANEL for my HostGator account I scrolled down to the Files section and chose the File Manager icon.
If you are at all familiar with working with copying and pasting files on a PC, Mac, or other computer you will be comfortable with the following steps.
Step 4 in the WordPress directions that I was following says to copy NOT move the index.php and .htaccess files from the WordPress directory to the root directory of the website. Clicking the File Manager icon brought up a window.
I knew the main files were in the Web Root (public_html/www) because from past experience I had installed index.html in that directory, public means the world can see it, HTML is the basis for web pages, www is world wide web files. The directions in step 4 noted that I might need to look at hidden files, so I made sure to check the Show Hidden Files check box.
On the left side of the screen are a list of all the subfolders for the entire website domain. I was viewing the entries in public_html/www. In addition to the cgi_bin and wp folders were a few files:
It was handy to have some facility with website domain file names. There was not an existing index.php file. It was originally named default.html. I renamed the file with the word old following the period. So .htaccess became .oldhtaccess and default.html became default.oldhtml.
Next I double clicked the wp folder in the directory. I located the index.php file and chose the Copy icon at the top of the screen and changed the entry at the bottom of the Copy box from /public_html/wp to /public_html. I did the same for the .htaccess file. When I tested www.smscranford.com, I still did not get the right page to display but confidently moved on to step 5.
As I read step 5 my confidence sunk a bit for a minute. It said I was going to have to use a text editor to change the index.php file in the root directory. I went back to the public_html folder clicked on index.php and noticed two icons at the top of the screen. One said Edit and one said Code Editor. I decided to try Edit. It gave me a slightly disconcerting message that said I could cause many problems by editing the file but decided that the worst that would happen would be that I would need to delete the file and copy it again from the WordPress directory. When I clicked Edit, my confidence returned again.
This time, when I typed www.smscranford.com I received the new web site's correct home page! I did not need steps 6 or 7 since I did not set any Permalinks for the school website.
Doing the Hard Things First Makes Sense
It actually took longer to document this than to actually perform all the steps the first time. I always like to document things here in my blog. Someday I will want to do this again and I won't have to reinvent the wheel.
Friday, July 12, 2013
Why I Write These Posts
This morning I was explaining to my son the reasons behind writing these posts. It's really for me. When I teach a lesson, or build a web page, and I forgot how to do something I turn to my blog.
Updating the WordPress Footer
I was unhappy with the way the PNG image of Saint Michael lined up on the page. This is the before picture:
I did not like how the top of the large Saint Michael was uneven next to the words School News. I knew why it happened. In Gimp, the words were in the center of a 194x44 pixel transparent rectangle. I needed to drag the words so that they touched the first pixel horizontally and vertically in the transparent box.
I took the time to make the adjustment and re-saved the Gimp file as a .PNG image. I couldn't remember where I needed to add the image. My first instinct was to go to Theme Options - Footer options. There was no place for an image; although I found out where the Copyright words for Avada are located.
My next instinct was the Widgets. I was correct. I uploaded the new image file and was slightly surprised that it did not overwrite the original.
I went to Media - Library and clicked on the new image. The information window on the right side of the screen contained the Permalink URL.
The new file had a 1 appended to the file name. My footer HTML read:
I added the number 1 to the file name.
I clicked the Save button, refreshed the website, and had the look I was hoping for. Everything is neat and tiny and I can refer back here if I ever need to fix the footer again.
Updating the WordPress Footer
I was unhappy with the way the PNG image of Saint Michael lined up on the page. This is the before picture:
I did not like how the top of the large Saint Michael was uneven next to the words School News. I knew why it happened. In Gimp, the words were in the center of a 194x44 pixel transparent rectangle. I needed to drag the words so that they touched the first pixel horizontally and vertically in the transparent box.
I took the time to make the adjustment and re-saved the Gimp file as a .PNG image. I couldn't remember where I needed to add the image. My first instinct was to go to Theme Options - Footer options. There was no place for an image; although I found out where the Copyright words for Avada are located.
My next instinct was the Widgets. I was correct. I uploaded the new image file and was slightly surprised that it did not overwrite the original.
I went to Media - Library and clicked on the new image. The information window on the right side of the screen contained the Permalink URL.
The new file had a 1 appended to the file name. My footer HTML read:
I added the number 1 to the file name.
I clicked the Save button, refreshed the website, and had the look I was hoping for. Everything is neat and tiny and I can refer back here if I ever need to fix the footer again.
Wednesday, July 10, 2013
New Home Page and Menus
Today is home page and menu day. I am relying on the power of the ThemeFusion documentation and videos. Today I am also documenting as I do things. Take a peek.
Home Page
I had already created the file for the page that I wanted to be my home page. I needed to now show it instead of the Avada template. A quick check in the documentation and I navigated within WordPress to Settings - Reading. I set the Front page display to static page with the Front page being the page I created and named Saint Michael School - Cranford NJ. The posts page is called Recent Work. It is a blog that will work as our news page. Now when I type the URL smscranford.com/wp I see my school page. I still need to go over to HostGator to set smscranford.com to show the WordPress page instead of the HostGator menu.
Retina Ready Image
This morning the menu was the sales pitch menu for Avada. I created an SMS Overview page. It will be part of the About Us drop down. For this page, I uploaded an image that is twice the size I need it. I hope I am doing this the right way. I want the image to be 903x305 so I made the original 1806x610.
While viewing the Avada Retina Ready video, I learned about the WP Retina 2x plugin. It checks to see if the images you upload are retina ready. When I did the check it showed that my image was still too small for large or portfolio full sizes. I still have to think more about this. It seems for large the image needs to be at least 2049x1054 and for portfolio-full it should be 1800x800. These numbers are hard to attain with cropping.
When I put the image on the WordPress page, I brought in the full size image and dragged it down to 903x305. I am not sure if this is what I should be doing, but now the full image is there in the file.
Menu Structure
I knew what I wanted the menu to look like. I was able to make it happen. The Appearance - Menus section has the structure of the sales menu that came with the theme. I did not want to delete those items immediately for fear of losing the menu structure all together. I started by dragging my personal Recent News under the existing word Home. Then I removed the sample drop down entries for Home Version 1 through 15. I created three sample pages for the About Us section yesterday: SMS Overview, Brochure, and Philosophy. I quickly and easily changed the word Slider to About Us and continued on. At this point, I got brave, I deleted all the submenu items from the sample data and changed all the drop down headings to my wording.
This is where I ran into a problem. I had, potentially, 12 menu entries and the theme had nine. By looking through the ThemeFusion documentation, I learned that there is a custom links section. By typing # in the URL entry and a label I could create a menu entry that is not an existing web page on the site. I then added my pre-created pages to that choice.
The 12 entries wrapped around and made two rows of menu choices. This did not look elegant. We were really happy with the Header Version 1 and it is what I initially chose. I ended up switching Header Version 4. We did not want that version initially because of the social icons in the header, but in true Avada style I found a check box in Theme Options - Header Options and was able to restrict it from showing. We will have those options at the bottom of the page.
Tomorrow I will be madly creating most of the content for the remaining pages. This has been a great experience overall!
Home Page
I had already created the file for the page that I wanted to be my home page. I needed to now show it instead of the Avada template. A quick check in the documentation and I navigated within WordPress to Settings - Reading. I set the Front page display to static page with the Front page being the page I created and named Saint Michael School - Cranford NJ. The posts page is called Recent Work. It is a blog that will work as our news page. Now when I type the URL smscranford.com/wp I see my school page. I still need to go over to HostGator to set smscranford.com to show the WordPress page instead of the HostGator menu.
Retina Ready Image
This morning the menu was the sales pitch menu for Avada. I created an SMS Overview page. It will be part of the About Us drop down. For this page, I uploaded an image that is twice the size I need it. I hope I am doing this the right way. I want the image to be 903x305 so I made the original 1806x610.
While viewing the Avada Retina Ready video, I learned about the WP Retina 2x plugin. It checks to see if the images you upload are retina ready. When I did the check it showed that my image was still too small for large or portfolio full sizes. I still have to think more about this. It seems for large the image needs to be at least 2049x1054 and for portfolio-full it should be 1800x800. These numbers are hard to attain with cropping.
When I put the image on the WordPress page, I brought in the full size image and dragged it down to 903x305. I am not sure if this is what I should be doing, but now the full image is there in the file.
Menu Structure
The 12 entries wrapped around and made two rows of menu choices. This did not look elegant. We were really happy with the Header Version 1 and it is what I initially chose. I ended up switching Header Version 4. We did not want that version initially because of the social icons in the header, but in true Avada style I found a check box in Theme Options - Header Options and was able to restrict it from showing. We will have those options at the bottom of the page.
Tomorrow I will be madly creating most of the content for the remaining pages. This has been a great experience overall!
Tuesday, July 9, 2013
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.
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.
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
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.
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
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
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.
Tuesday, June 18, 2013
EBSCO Search and Jersey Clicks
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.
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
Subscribe to:
Posts (Atom)