Creating websites and leading librarians to a new level of project engagement
•Download as PPTX, PDF•
0 likes•75 views
The 90-min workshop presented at ER&L Annual Conference covers the main website components and some fundamental tools for static web design. The session has a practical component with hands-on activities - during that part the participants can actively build a custom WordPress website. The session is divided as follows: - Part I (45 min) features 20 min presentation of basic web design concepts, tools and technologies and 25 min demo of the back-end of 2 static WordPress websites (free and paid versions) - Part II (45 min) features hands-on guided activities to design a new WordPress website from scratch Attendees will learn web design fundamentals and some important practical skills. The session aims to spark creativity and inspiration, and the hands-on activities will teach the attendees how to design a custom static WordPress website. They will also learn tips and tricks how to get out of the framed templates and customize them according to their taste/needs by applying HTML and CSS coding. What Will You Learn - basic web design concepts such as navigation, information architecture, user experience; project needs assessment, graphic design and graphic layout - fundamental tools for web design - main web design technologies - WordPress How You Will Learn - presentation - demonstration - hands-on activities Link to workshop activities: http://bit.ly/WPactivities Link to workshop hands-on flyer: http://bit.ly/WPhandson
Recommended
More Related Content
What's hot
What's hot (20)
Similar to Creating websites and leading librarians to a new level of project engagement
Similar to Creating websites and leading librarians to a new level of project engagement (20)
More from Marina Georgieva
More from Marina Georgieva (20)
Recently uploaded
Recently uploaded (20)
Creating websites and leading librarians to a new level of project engagement
- 1. Creating 1 < WordPress websites > 1 for librarians March 6, 2019 Marina Georgieva | Visiting Digital Collections Librarian
- 2. Who am I? • Digital librarian • Research interest • Metadata management and remediation • Digitization efficiency • Project management • Team management and training • Outsourcing and vendor relations What helped me succeed in the web design project? • Trail and error • Online tutorials and community help • A bit of preparation from graduate school
- 3. Librarians code and design! • Coding in 2019 is like writing in 1800s • MLIS programs include coding and web design
- 4. Agenda 20 min theory web design concepts tools technologies 20 min demo backend of 2 WordPress website versions free paid 45 min activities hands-on activities with HTML, CSS and WP administration 8 min break
- 5. Static Types of websites Features HTML | CSS driven Browsing only Basic and easy to create No database | no web programming Pages with fixed content Updates happen manually Great for Small websites Rigid content Small team Novice Features Database driven Searching feature Require team of developers Require web programming HTML | CSS | PHP | JavaScript Dynamic (interactive) pages Automated updates Great for Large websites Constantly changing content Change design easily Easier to manage Dynamic
- 6. Website elements header button button button button button button button button content content FOOTER logo jumbotron www.yoursite.com favicon topnavigationsidenavigation
- 7. Website elements Logo Favicon Jumbotron Color palette Consistent style Header Container for site identity elements Main navigation Search bar Footer Contact details Quick links Main navigation Side navigation Landing pages Sitemap All site pages All unique site content Most updated section Site identity Header | Footer Navigation Site body
- 8. Information architecture meaningfully structured information improves usability how users search for information IA Content organization Labelling systems Navigation systems Search systems explicit category labels to improve browsing experience how users interact w/ content and move thru information
- 9. Tools Notepad ++ Oxygen SublimeText TextMate WordPress Drupal Joomla Wix | web-builder Photoshop Corel Photo Paint Affinity Photo Pixlr | free browser-based Coding Graphic design CMS Select coding software that finds syntax errors and hints syntax punctuation Prepare web friendly graphics to optimize your storage space on server Select CMS that offers community help and you are comfortable using
- 10. Technologies for static websites Hypertext Markup Language Markup language for creating websites HTML describes each content element Text Audio Graphics Links Video HTML tells the browser how to render the web page so it displays correctly Formatting the webpage layout Defines how HTML elements are displayed on the website Text styles (typography) Element size Layouts Content placement Responsive design Cascading Style Sheets
- 11. Syntax <p> </p> paragraph <div> </div> container, for placement <table> </table> table <img> </img> image <span> </span> empty, for styling <audio> </audio> recording Opening tag declares beginning of element Closing tag declares the end style="color:blue; font-size:30px;" Inline CSS is always placed in the element! code <p style="color:blue; font- size:30px;"> This is a paragraph </p> displays as This is a paragraph
- 12. Millions of free tutorials! Community support! WordPress advantages Easy to start Quick results No programming skills to start designing Built-in layout templates and themes Built-in features for website key elements site identity, navigation, content organization Customizable on all levels navigation, pages, site identity 2018 https://websitesetup.org/popular-cms/
- 13. WordPress flavors No fee WordPress hosting limited storage space 3 GB WordPress.com sub- domain yoursite.wordpress.com Limited templates | themes Standard plug-ins no option to add custom plug-ins Great option to start can upgrade to paid WP plan Paid WP website Personal hosting | domain .com, .edu, .net, .org …. Sub-domain options Skills to set up WP on C- Panel Storage space size of your choice Custom plug-in install what works best for you Direct access to CSS modify the theme remove features you dislike Paid WordPress plans Personalized hosting | domain purchased from WP .com, .edu, .net …. All perks that come with the selected plan https://wordpress.com/pricing Direct support from WordPress Start FREE! Go PRO! Use WP plan
- 14. Demonstration Paid Hosting Domain Cost Benefits Set up Plug ins Elementor Styling options w/o coding Modal windows (pop-up) No tables for placement Media Library Categories Responsive design Global CSS access Modify theme Paid website (PRO) Free website (WP hosted) Tables to escape template Irresponsive design (tables) No modal windows to enlarge image Landing page Sitemap Media library – chronological arrangement
- 15. <span style=“text-transform: capitalize; font-size: 28pt;”> WELCOME TO THE HANDS-ON PART </span> <span style=“color: #800080;”> fun is guaranteed </span>
- 16. Let’s get started! • Download from the shared folder http://bit.ly/WPactivities (1) Handout with activities (2) Graphics (unzip folders if you download as package) (3) Text (4) Code • Log in to your WordPress account • Helpful resources for future reference W3Schools Online Web Tutorials https://www.w3schools.com/ Stack Overflow – community help, ready solutions https://stackoverflow.com/ Lynda video tutorials https://www.lynda.com
- 17. 1. Create WP account and log in with your credentials https://wordpress.com 2. Set up a website | name, category, etc. 3. Create a domain | select free domain name 4. Select and activate template | Hemingway theme The top navigation of Hemingway makes it good for professional websites 5. Upload favicon | a.k.a. site icon 6. Create a tagline 7. Upload header image 8. Publish/launch website Activity 1 Set up a new website Work with WordPress administrator page Activity folder http://bit.ly/activityOne
- 18. Work with WordPress editor and administrator page Activity 2 Customize the website 1. Create Home page for the website | Admin page > Pages 2. Add text to Home page using WordPress editor 3. Add external links to open in new tabs using WordPress editor 4. Add logos | UNLV, NEH, LC 5. Publish Home page 6. Make Home page a static page | Appearance > Customize > Home settings 7. Page URL customization Activity folder http://bit.ly/activityTwo
- 19. Work with custom HTML / CSS code | tables and image placement Activity 3.1 Design top level page 1. Create and publish new page with full width setting | Nevada History 2. Add it to main navigation menu | Appearance > Menus 3. Create a simple HTML table Activity folder http://bit.ly/activityThree <table> <tbody> <tr> <td colspan="3" > </td> </tr> <tr> <td></td> <td></td> <td></td> </tr> </tbody> </table>
- 20. Work with custom HTML / CSS code | tables and image placement Activity 3.2 Design top level page 4. Customize the table | expand top row across all cells 5. Insert images | use CSS to specify dimensions 6. Customize the table appearance | use inline CSS Activity folder http://bit.ly/activityThree NV History-1 image NV History-2 image NV History-3 image NV History-4 image colspan="3" for stretching a cell across table background-color:#282828 for changing cell color border-top:solid 20px white for having a divider between rows width="986" height="260" for NV History-1 file width="300" height="239" for NV History-2; -3; -4 files
- 21. Work with custom HTML / CSS code | tables, text and image placement Activity 4.1 Design sub-level page Activity folder http://bit.ly/activityFour 1. Create and publish new page with full width setting | Carson City 2. Add it to main navigation menu as a sub-page | Appearance > Menus 3. Create a simple HTML table <table> <tbody> <tr> <td rowspan=“2" > </td> <td> </td> <td> </td> <td> </td> </tr> <tr> <td></td> <td></td> <td></td> </tr> </tbody> </table>
- 22. 4. Customize the table | expand first column across all rows 5. Insert images | use CSS to specify dimensions 6. Customize the table appearance | use inline CSS 7. Add image captions 8. Add essay text Work with custom HTML / CSS code | tables, text and image placement Activity 4.2 Design sub-level page Activity folder http://bit.ly/activityFour Text Carson City 1 image Carson City 2 image Carson City 3 image Carson City 4 image Carson City 5 image Carson City 6 image rowspan=“2" for stretching a column across rows background-color: transparent for changing cell color vertical-align: middle for centering images in a cell width="440" height="283“ for image dimensions width: 31% for text column width: 23% for first image cell
- 23. Thank you! Visiting Digital Collections Librarian University of Nevada - Las Vegas University Libraries Tel: 702-895-2310 marina.georgieva@unlv.edu www.marina-expertise.com QUESTIONS
Editor's Notes
- Hello everyone! Welcome to the session that will bring you a step closer to designing sleek websites on your own! When I was invited to become the Project manager of the Nevada’s largest newspaper digitization project, I was not aware that designing a website would fall in the scope of my responsibilities. I accepted the challenge and embraced learning, and eventually my efforts paid off – the Nevada Digital Newspaper Project has a fabulous website and I added a new skill set to my toolbox! I’m eager to debrief my experience and share some tricks and tips to make your work easier. I hope what you learn today will add value to your daily job.
- So who am I? I’m a digital librarian in an academic library. My research interest is far from web design and coding, but coding has become such a significant part of my professional live that we need to constantly learn and be prepared for various projects that take me outside my comfort zone. What helped me be successful in the web design project is learning, trying, failing and a little bit of preparation from graduate school. As a student I took a web design class and it was very well-structured. Most resources were Linda.com tutorials, and for those of you who are brand new to web design, I’d highly recommend checking out some tutorials. Linda is such an accessible learning tool that will teach you the fundamentals of coding in several weeks. And you don’t need to commit much time to design a simple website.
- Coding is essential! It’s the modern literacy – increasing number of MLIS programs offer coding and web design classes to graduate students so they are better prepared for the profession. Most technology librarians (archivists, digital librarians, project managers, even subject librarian) have to design or maintain WordPress or Drupal websites or use simple coding to accomplish their tasks. I work closely with archivists, metadata librarians and digital librarians and they have to write code to accomplish different tasks of their job. Some professional organizations also offer continuing education classes to support this transition to the new technologies and new roles we embrace as librarians.
- So what’s the plan for out session today? We’ll start with some THEORY – a brief overview of basic web design concepts, tools and technologies, followed by a DEMO of the backend of a static WordPress website. For the demo I’ll be using 2 static WordPress websites to compare and contrast the difference between free and pro version. Then we’ll have a short break and will dig in the HANDS-ON ACTIVITIES to create custom WordPress web pages.
- There are 2 types of websites: static and dynamic. We use dynamic websites every single day. They are everywhere – online retails websites, social media sites, conference registrations sites, airline websites. Generally, they allow users to interact with them in a way to add content, to register, to make transactions. They are complex websites which have all constantly changing content and a team of developers and designers who work on them. They are database driven, all changes happen globally and they require programming. Static websites are simple websites, the content is manually entered and they don’t require any database or programming to exist. They are simple web pages and great for small teams, rigid content and browsing only. All changes in static website happen manually.
- Here’s a visual illustration the website elements. These are the main components and they may vary from site to site. Navigation improves the user experience and it deserves careful consideration during the web design process. Navigation is tightly related to the website content and the user experience.
- All websites have some or all of the following elements. They make the website unique and stylish, provide the content to users and allow users to navigate through the content. Websites designed from scratch (no CMS used) have more freedom when it comes to designing and positioning elements and selecting color scheme. Websites created on a template such as WordPress or Drupal also allow some customization, but they generally are more rigid when it comes to moving identity elements and changing navigation elements. Especially with the free version of WordPress template modification is impossible. You can easily switch templates, but once in a template you cannot override its global features such as position of logo, tagline, main navigation, etc. Site identity and header/footer elements relate to the appearance of your site. Take some time to design graphic and take advantage of these elements are they make your website unique and stand out so users can remember it. Navigation is extremely important for your site as it allows user to navigate through your content and find what they need. When selecting a template, make sure that it can display all your sections and sub-sections in a clean, unambiguous way and also all sections are labeled with meaningful and easy-to-read labels. Don’t make too deep navigation with 3-4 layers – instead think of a way to make the categories shallow even if you’ll have more top level categories. This is much more user-friendly. Don’t skip the landing pages –use them to introduce a new category. Site body is the most dynamic part of your website. This is where all your content goes and the section you’ll update most often.
- Information architecture is very important as it allows user to interact with the website content. Big websites have information architects (usually librarians) who do only that – review content, use consistent metadata, assign categories, label those categories, organize content in meaningful structure, and assign subjects, keywords and synonym rings for searching. When working with a WordPress template, you’ll skip most of these steps. Templates come with build-in features and you need to do labelling, assign categories and depending on the website and its content, some faceting. Let’s looks at the main IA elements and what are their features.
- Whether you decide to design from scratch or use a content management system, you need to know what are the tools available. Just to name a few of the most popular ones. You’ll need coding tools if you design from scratch. Graphic design tools are always necessary – even if you use a CMS. You need to prepare your graphic outside the CMS, make them web-friendly and save them in appropriate format.
- Let’s mention the types of CSS – it comes in 3 flavors inline CSS (code applied directly to elements); internal CSS (code applies style to all elements on a webpage); external CSS (governs the style of all elements globally – in all pages). In WordPress we work on a smaller scale, so we apply style to the elements directly by using inline CSS The inline CSS is the most labor-intensive CSS as you have to write a piece of code in each element and you can’t globally apply the same code to all similar elements as you could do in external CSS. But for free WordPress templates, this is the only way to customize the layout of your pages. Also, the cascading order of the CSS makes the inline CSS of highest priority as it is closest to the element. Inline CSS is great if you have a legacy website with external stylesheet but you want to quickly change several elements in one page. You just type the code and it overrides the main stylesheet.
- We need to remember that syntax is very important for coding. Even the tiny punctuation error can break your code. If you write a code and it doesn’t work, check your punctuation first. When copy-pasting code from another source, esp. Word, sometimes formatting breaks the code. If you need to copy-paste, first paste in Notepad to clear all formatting, then place the clean code in your page. If you use WordPress, the most of the elements are coded for your, except for tables. Even if you never plan to design from scratch and always stick to a content management system, learning basic HTML code is important so you know what you want to modify and how you can modify it by applying CSS.
- Why we selected WordPress? Because it’s very easy to start and also customizable and requires no skills to get started! All official UNLV websites run on Drupal 7 and Drupal has a much steeper learning curve and requires more dedication. For the Nevada Newspaper Project we didn’t have time and resources to invest in creating Drupal website, so we decided to take the shortcut and we don’t regret our choice. The simplicity of WordPress and the abundance of tutorial allows continuity in a sense that new people can easily get trained and keep up with the website.
- I’d like to show you some of the features that come with the paid PRO version of a self-hosted WordPress website.
- Now it’s time for some activities! This is the fun part. In WordPress we have 2 options - either to use the built-in WordPress editor which is similar to Word or Google Doc, but has very limited formatting features, or to override it and do more elaborate design and have more control over placing the elements. If we choose to have more control we should write HTML and CSS coding to achieve the results we want. So let’s dig in! Now those let’s create WordPress accounts!
- marina.georgieva@unlv.edu | Librarian2018 nvdigitalnewspaperproject@gmail.com Newspapers2018
- I’d like to point your attention to the skeleton code of a simple HTML table. The open tags must always be closed. The code starts with declaring we are making a table and then specifying how many rows we need. The <td> stands for table data which equals to what we know as table cells. Table cells how the data.