DOCSLIB.ORG

<Title>Creative Coding</Title>

<Title>Creative Coding</Title>

<title>Creative Coding</title> Get More from Your Library Website Jeremy Hall SENYLRC Workshop February 6, 2020 W hat is code? ● Basis for the World Wide Web & Internet - plus video gaming, audio/video streaming, apps on your phones...Everything exists in code now! ● Languages for the web include HTML, Java, JavaScript, Python, Perl, PHP, SQL, and XML/XSLT ● Binary Code = 0s and 1s or ON vs OFF ● Everything digitally encoded uses sequences of these ONs and OFFs to represent information/data that can be processed. A = 01000001 HT M L/ CSS Basics H T M L i s... HTML Editors HyperText Markup Language Straight Code ● Structural Language Text Edit (as plain text) Notepad ● Define structure of HTML Sublime Text (Recommended) documents using predefined tags https://www.sublimetext.com/ ● HTML elements (represented by tags) WYSIWYG & Code are the building blocks of HTML Dreamweaver pages. MSWord Google Sites, WordPress, etc. Code a Sim ple W ebpage <!DOCTYPE ht ml> <html lang="en"> <head> <title>Stevenson Library - Home</title> </head> <body> <h 1>Stevenson Library</ h 1> <p>Welcome to the library website!</p> </body> </ht ml> S i d ht l d i i b M or e H T M L t ag s... <he a d> <title>My Website</title> <meta name=”keywords” Head Tags content=” Bard College, Library”> ● - metadata about our Meta Tags <meta name=”description” HTML document content=”Website for the Charles. ● ***Style Tags*** P. Stevenson Jr. Library at Bard ● Javascript, etc. can also be placed College”> in head section. <st yle> h1 {color:red;} p {color:blue;}Save and refresh in browser </st yle> CSS = Cascadin g St yle Sh eet s ● Style Tags allow us to define how <style> specific HTML elements will look on h1 {color:red;} our website! p {color:blue;} body { ● Change text color, font size, font background-color: face, background colors, text #CCC; decoration, link colors, etc. font-family: Arial; font-size: 12pt; ● Advanced: visibility of content, } scrolling, navigation, headings, etc. </style>... Save and refresh in browser M or e CSS Hexadecimal Colors ● Numerical & Letter codes to ● Can be embedded in an HTML represent RGB colors (Red, document or linked as a Style Sheet Blue, Green). (.css) file. ● RRGGBB ● <link rel="stylesheet" type="text/css" href="style.css"> ● 000000 (black) FFFFFF (white) ● Syntax 990000 (dark red) selector { FFCC00 (yellow) property: value; 004953 (dark teal) } + millions more... M ore HTM L tags to know ... ● <div> tags create divisions or main sections for your HTML elements Selectors for CSS: ● Specific HTML tag ● <ul> t ags create unordered lists with <li> list item for each entry. ● Class <div class=”main”> ● <ol> create ordered lists with <li> for items. ● ID <div id=”header”> ● <span> allows to set styles for a small section of text. CSS-ify our HTM L document …<body> <div class=”logo”> Our HTML structure is Stevenson Library</div> divided into 2 sections now. <div class=”main”> A “logo” section to <p>Welcome to the style as the top logo for Library our page. Website!</p> <ul> And a “main” section to put in our content. <li>Catalog</li> <li>Databases</li> A d d CSS st y l es... .logo { .main { width: 900px; width: 900px; color: #FFF; Height: 500px; background-color: color: #666; #004953; background-color: #CCC; margin-left: auto; margin-left: auto; margin-right: auto; margin-right: auto; padding: 10px; padding: 10px; margin-bottom: 5px; } font-weight: bold; font-size-adjust: +1; List of CSS Styles text-align: center; } Adding links Links = Anchors in HTML ● External Link: <a href=”http://www.bard.edu”>Text on Page</a> ● Internal Link: <a href=”content/contact.html”>Contact</a> ● Email Link: <a href=”mailto:[email protected]”>Email Us</a> ● Jump Links a { <a name=” t op” > color: #FCO; …[page content]... font-weight: <a href=# t op” >Back t o Top</a> bold; } M or e Anchor St yles a:link, a:visited { color: #FC0; The four links states are: font-weight: normal; text-decoration: none; a:link - a normal, unvisited link } a:hover { a:visited - a link the user has visited color: #00F; font-weight: bold; a:hover - a link when the user mouses text-decoration: underline; over it } a:active { a:active - a link the moment it is clicked color: black; Text-decoration: underline; } CSS Select or s A dv an ced You can be even more focused with .main li { selectors by targeting specific tags float: left; within those div classes… list-style: none; text-align: center; color: #FFF; This targets the List Items for our site background- navigation within the “main” class div color: #999; that holds content for our page. margin-right: 20px; width: 150px; line-height: 30px; } Comm enting out to debug... ● These DO NOT display on the page. /* .main li { float: left; ● <!-- Add a single line comment --> list-style: none; text-align: center; ● /* Add a multiple line comment or color: #FFF; “comment out” a section of code to background- debug. */ color: #999; margin-right: ● You can use these to hide bits of 20px; code to find problems. Or to add width: 150px; comments and labels for sections of line-height: 30px; code. } */ Adding Images and Embedded Content Images Videos ● <img> tag ● <iframe> code ● Properties to set for images… ● YouTube provides this… ○ width & height (px or %) https://www.youtube.com/watch? ○ alt=alternative text* v=bT 3 R tghMyL k ○ src=source* ● Code to copy under ● File names are case sensitive Share > Embed <iframe width="560" height="315" ● Pathway must be correct src="https://www.youtube.com/embed/bT3RtghMyLk" ● File Types: JPG, PNG, GIF frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe> Linking to a .CSS file ● Copy your CSS code Why? ● Paste into a new blank ● Can reuse selectors (classes or document IDs) on multiple pages from one ● Save as styles.css location! ● Add at the top of your HTML file ● Makes updating easy. in the head section: ● Online Databases Providers and Content Management systems <link rel="stylesheet" can link to your style sheet! type="text/css" href="style.css"> HT M L sour ce code of ot her w ebsit es... Inspect Element Inspector Lear n HT M L, CSS an d m or e… ● W 3Schools.com ○ HTM L ○ CSS ○ XML Accessible W ebsit es Univ er sal Design Universal Design is working to blend accessibility standards and usability principles together in order to create technology that is usable for everyone. (https://accessibility.arl.org/standards-best-practices/#universaldesign-def) Basic Steps: ● Make sure content is easy to read and clearly written ● Avoid jargon and acronyms/initialisms ● Do not rely on color or visual content alone to convey information ● Avoid using images as part of site navigation M edia Cont ent (Im ages/Audio/Video) ● Alt tags or Alternative Text for images and visual content are required! ● Caption and provide transcripts for video and audio content ○ YouTube can provide “ok” captioning/transcription (better than nothing) ○ Google Docs Voice Typing (Chrome browser only) 1. Open a blank Google Doc 2. Make sure the microphone is working 3. Listen to small sections of your audio or video...or read the content you need to transcribe. 4. Speak clearly into the computer’s microphone and it will auto-type what you say. Docu m en t Desi g n ... ● Document structure is key… Headings, lists, and other structural elements provide meaning and facilitate keyboard navigation. Use the Headings tags (H1-H4). ● Pay attention to forms! Make sure that form elements (text field, checkbox, dropdown list, etc.) have appropriate labels (w/<label> tag) and they are ordered for navigating with the space bar. ● Ensure accessibility of non-HTML content: PDFs, MS Word, and PowerPoint presentations. (Acrobat & MS Word have accessibility functions built in) Acrobat & M S W ord Acrobat allows you In MS Word use To do a full check the “Check of your document Accessibility” and “autotag” function! documents. You can also set “reading order” And more... Fon t s... ● 12 pt or more for font sizing (depending on the font) ● Sans Serif is preferred for readability - some simple Serif fonts are ok but cursive and other specialized fonts should be avoided ● The best fonts to use include: Arial, Verdana, Times New Roman, etc. (experts argue this!) ● Avoid white text on black backgrounds - even black text on white backgrounds can be hard for low visibility readers...High contrast is just as bad as low contrast ● Italics and ALLCAPS should be avoided if possible. Use of Bold is questionable too (although I still use it for visual emphasis). M or e Recom m endat ions... ● Do not have text and images next to each other that go to the same link! This confuses screen readers and accessibility software. ● Use Text and CSS to design logos and visual content ● Declare the DOCTYPE and language in your code ● Give your links clear names - a link should explain clearly what information the reader will get by clicking on that link. ● Use Accessibility Checkers (next page) Accessibilit y Check er s ● WAVE Web Accessibility Evaluation Tool** https://wave.webaim.org/ ● AC Checker https://achecker.ca/checker/ ● Google Accessibility Tools https://www.google.com/accessibility/ ● W3Schools - HTML Accessibility https://www.w3schools.com/html/html_accessibility.asp W orking with CMS CM S = Cont ent M anagem ent Syst em s Software or web apps designed to help manage and create digital content. Examples: Cloud-based editing and management ● LibGuides of content provides easier storage and ● WordPress backup. Plus it’s easier to access for ● Drupal editing and customization. ● Google Sites ● Wix/Weebly/etc. ● Classroom Software: Moodle, Blackboard, etc. LibGuides Using code in guides..

View Full Text

Details

  • File Type
    pdf
  • Upload Time
    -
  • Content Languages
    English
  • Upload User
    Anonymous/Not logged-in
  • File Pages
    53 Page
  • File Size
    -

Download

Channel Download Status
Express Download Enable

Copyright

We respect the copyrights and intellectual property rights of all users. All uploaded documents are either original works of the uploader or authorized works of the rightful owners.

  • Not to be reproduced or distributed without explicit permission.
  • Not used for commercial purposes outside of approved use cases.
  • Not used to infringe on the rights of the original creators.
  • If you believe any content infringes your copyright, please contact us immediately.

Support

For help with questions, suggestions, or problems, please contact us