We have recently created a tutorial to help the W&L community find and use free stock photography. Users will find this most useful as they further develop blogs and Facebook pages, but may also find themselves sprucing up their Ingeniux-hosted department pages. The full post can be found in our new Web Help section, or by going directly here.
Please let us know if you have any additional resources you think we should promote – Leave a comment or e-mail us today!
By now most of you know how to upload a pdf, Word, Excel or other documents to your department’s assets folder in Ingeniux. But how carefully do you name those documents? Developing a simple naming convention can save you a lot of time, and others a lot of frustration. Take for example a registration form. Chances are you have to update it from time to time, and when you do you might be tempted to name the latest version with the year so that people know it has changed. But by doing so, you break every link to that form elsewhere on our site. If it’s a form (or handbook, or policy) that lots of people use, that’s bad for usability.
Instead, take three simple steps to ensure that people can find the right document at the right link every time:
How many times have you seen a URL in a W&L publication with those confusing numbers (www.wlu.edu/x12345.xml)? While Ingeniux assigns each page you create an xID, that doesn’t mean it’s the only URL you can use to publicize your website.
If you’re creating a newsletter, a brochure or any other publication that references a website and want to include a unique, memorable website address, use our Web Tracking Form to request a “Go” address. We can quickly and easily create a custom URL for you that begins with “go.wlu.edu” and includes (gasp!) actual words!
Visit http://go.wlu.edu/webtrack to request one today.
Since launching the Web Tracking Form several years ago, we’ve been pleased with our ability to track user requests for web help. However, the tracking form doesn’t allow us to collect adequate detail on requests for new website projects.
Enter a new form! Beginning this fall, we ask that if you are interested in launching new website (or a significant redesign), you fill out our Web Project Intake Form. The form will give us basic information that will help inform our initial meeting as well as schedule your project for timely completion.
Prefer the personal touch? Feel free to give one of us a call to discuss your project in person. (But don’t be offended if we ask you to fill out the form anyway.)
As always, thanks for your cooperation and we look forward to working with you on your next project.
In March 2011, the Office of Communications and Public Affairs and Information Technology Services convened an ad-hoc workgroup to examine current modes of communication with the W&L community, specifically Campus Notices, the online calendar and dashboard pages for Current Students and Faculty/Staff, and determine how W&L can improve or augment these tools.
The workgroup began by considering the following questions:
One of the workgroup’s first actions was to design and distribute a campus communications survey, which was taken by over 275 members of the campus community.
Upon completion of the survey, members of the workgroup conducted focus groups with faculty/staff and current students, and presented the survey results to two Town Hall information sessions as well as the ITS’s Technology Liaison’s group, gathering additional, anecdotal feedback to augment the survey results.
After meeting to discuss the results of the survey, focus groups and information sessions, the workgroup made the following recommendations:
Campus Notices:
Audience Dashboards
Based on these recommendations, members of Web Communications and ITS will work this summer to create a new Campus Communications Hub (CCH) which will tie together the online calendar, campus notices, hours of operation and daily menus for on-campus dining facilities. Any information entered in this space will be distributed through multiple channels (online calendar, campus notices, audience dashboards, departmental websites, University homepage), which should both eliminate redundancies and ensure that the messages reach the widest audience. We hope to roll out the new system before the end of fall term.
As the new academic year gets underway, there are several items the Web team would like to draw your attention to. Below is a summary of issues and developments discussed during our Ingeniux Users’ Group meeting on Sept. 2, 2010.
Opportunities for Students: While the site officially launched last year, Associate Dean Alison Bell would like to make better use of our Student Opportunities site to promote grants, fellowships, internships and study abroad options for current students. If your department has information about a related opportunity and you’d like to get the word out beyond your website and a poster on a bulletin board, this is a resource you should consider. Details can be emailed to Michelle Rothenberger in the Dean’s Office. Your opportunity will be added to the database and you can simply link to it from your site in Ingeniux.
Academic Overview Pages: You may have seen the new Admissions site, which launched late last week. To complement the website your department already has and to drive more visitor traffic to it, we are creating a single page for each academic department or program that will be hosted on this new site. These pages will have a consistent look across all departments at W&L, and each will introduce a department and its salient points to prospective students and their parents in a scannable, at-a-glance format. This is in no way intended to replace the detailed content on your department website, but instead to provide an overview of the department geared specifically toward Admissions visitors.
See an example of the Philosophy Department overview page.
We have asked department and program heads to provide us with a short list of content for these pages, including:
The Web team will fill in all of the other information on the page, and going forward, you will be able to edit your department’s page in Ingeniux as necessary. We appreciate your help and support of this new initiative.
SiteCheck: Frustrated with spelling errors and broken links on your website? Never fear. We have recently signed up for a service called SiteCheck, which will help us to locate and correct these errors. Each department web editor will have an account to check their own pages, and we’ll have one of our Web Team work studies doing regular audits, as well.
Watch a quick (really–3 minutes) demo of the SiteCheck service. Training to come later this month.
Localist: Just when you were finally used to the new calendar, there’s a newer one coming down the pike, and quickly. We have contracted with Localist, an online event promotion service, to host and manage our online event promotion calendar beginning this academic year. We will do our best to keep the event entry process as similar to the old one as possible, and to integrate all of the features that you’re used to in our current calendar. More details and training to come later this month. Meanwhile, check out events.jhu.edu to see how Localist ties events to social media and shows calendar users what events are most popular on campus.
Publish Schedule: We have recently moved to a less frequent publish schedule, to allow windows where important content can be published off-cycle. The new publishes will take place at 10 am and 3 pm daily, as well as 3 am. If you need content published and can’t wait for the next scheduled publish, please contact David, Eric or Jessica.
Training: With a new academic year comes new Ingeniux users. If you are a new user or need a refresher in Faculty/Staff profiles, basic Ingeniux or image editing, please fill out a training request using our Web Tracking Form: http://go.wlu.edu/webtrack
We will let you know of upcoming training opportunities for Localist, SiteCheck and Ingeniux. Look forward to seeing you at one of them.
How do you caption images in the Ingeniux HTML editor? Table? Custom coded <div> tag? It’s not easy. And it generally requires you or your users to write code.
Well, we’ve come up with a pretty cool solution to use the standard Ingeniux style selector in the content editor and the alternate text of a specified image to create cleanly captioned images.
~~
Step 1: Create CSS Classes in the Editor:
To enable inline image captioning, you first need to add two styles to the “localstyles.css” file. The file can be found in your main XML directory under Custom > Editor. Add the following CSS references:
.caption_left {}
.caption_right {}
These are just placeholder classes, so there are no CSS attributes.
Step 2: Insert an Image in Ingeniux:
To insert a captioned image in the HTML editor, select the image as you always do using the built-in image selection tool. Make sure you give your image alternate text — this will become the caption. For the purposes of formatting text and images within the editor, go ahead and select an alignment for your image — either left or right — and, to make it easier to view in the editor, put in a border of 1px and vertical and horizontal padding of 5px. Click the insert button to add your image to the HTML editor.
Now if you want to add a fancy caption to this image, click on the image in the HTML editor and make sure the select handles are visible in the four corners of the image. With the image selected, choose from your styles dropdown list in the editor toolbar “caption_left” for images that should be floated left or “caption_right” for those that should be floated right.
IMPORTANT: Nothing will happen in the editor! Your image should look exactly like it did when you first inserted it. The magic doesn’t happen until you view your content in a browser.
Step 3: The Magic
In your default XSL stylesheet, add the following <script> tags:
<script type=”text/javascript” src=”http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js”></script>
<script type=”text/javascript”>
$(document).ready(function() {
$(“img.caption_left”).each(function() {
$(this).wrap(‘<div style=”width:’+($(this).width()+10)+’px”></div>’)
.after(‘<p>’+$(this).attr(“alt”)+’</p>’)
.removeAttr(‘alt’);
});
});
$(document).ready(function() {
$(“img.caption_right”).each(function() {
$(this).wrap(‘<div style=”width:’+($(this).width()+10)+’px”></div>’)
.after(‘<p>’+$(this).attr(“alt”)+’</p>’)
.removeAttr(‘alt’);
});
});
</script>
The first <script> block allows for the use of Google API’s JQuery library. The second block taps into that library to quickly scan the page on load and find any images that have been given the class “caption_left” or “caption_right.” For each such image, we’ll add some code before, after and around the image to build a nice little <div> that looks like this:
<div class=”figureRight” style=”width: 190px;”>
<img src=”images/news/graduate.jpg” style=”float: left; border: 1px solid black; margin: 5px;” width=”180″ height=”250″ />
<p class=”capText”>Cool Image Captioning</p>
</div>
The <div> is given a set width, which comes from the specified width of the image plus 10. The paragraph text (the caption) is pulled from the alternate text attribute of the image.
Step 4: Make the Magic Pretty
Earlier you created empty classes for use within the editor. Now you need to create the real CSS styles for the captioned images. The following CSS references need to go in the cascading stylesheet linked to your default XSL stylesheet:
.figureLeft {
position:relative;
float:left;
margin:0px 10px 10px 0px;
padding:5px;
background-color:#f1ece1;
border:1px solid #e3dac7;
visibility:visible;
text-align:center;
-moz-border-radius:5px;
-webkit-border-radius:5px;
}
.figureRight {
position:relative;
float:right;
margin:0px 0px 10px 10px;
padding:5px;
background-color:#f1ece1;
border:1px solid #e3dac7;
visibility:visible;
text-align:center;
-moz-border-radius:5px;
-webkit-border-radius:5px;
}
.figureLeft img, .figureRight img {
padding:0px;
}
.figureLeft p.capText, .figureRight p.capText {
clear:both;
display:block;
margin:0 auto;
padding:5px 5px 0px 5px;
color:#524833;
font-size:9px;
font-style:italic;
font-weight:normal;
text-align:center;
}
These will float the container <div> left or right, as appropriate, provide the soft background color and padding, and the font styling for the caption text. These styles will also round the corners of your container <div> in most non-IE browsers. These can be changed to better suit your site’s look and feel.
That’s it. You can create as many captioned images on a single page as your good taste will allow. I hope someone else finds this trick useful.
Web Services Events
