Conquering Code with hjc
Download as PPTX, PDF0 likes983 views
The document discusses the basics of coding for individuals who work with online content but do not need to be full developers. It covers the importance of learning HTML and CSS for saving time and making website edits with confidence, along with tips on using different editing tools and avoiding common pitfalls with WYSIWYG editors. Additionally, it provides a variety of resources for learning and improving coding skills, including tutorials and online tools.
![Tips!
For Luminate Clients:
Turn off WYSIWYG in your profile to prevent
opening content in WYSIWYG (go to your profile to
change your preference).
WYSIWYG has a tendency to mess up code by
inserting code and tags that are not required.
Click Cancel to exit a content editor if you happen
to open the page in WYSIWYG. If you toggle back to
Text editor it will commit the change.
WYSIWYG often add <p> tag in blank row in the
code
Runaway “]]” angle brackets in the bottom of the
website caused by <script> element comment
added by the LO system. Clean up
10/2/201
5
proprietary and confidential 28](https://image.slidesharecdn.com/conquecodefinal-151002204922-lva1-app6891/85/Conquering-Code-with-hjc-28-320.jpg)
Conquering Code with hjc
- 1. Conquer Code Featuring Francis Lim and Emma Nguyen
- 2. Agenda proprietary and confidential 2 Who, What, When, Why The Basics Demo and Resources FinalTips
- 3. Who are we? proprietary and confidential 3
- 4. Don’t be Afraid! Fear not - it’s just a bunch of alphabets, numbers, and funny characters. The cool kids are doing it. proprietary and confidential 4
- 5. Who should learn? You don’t have to be a developer or programmer. You don’t have to build a website from scratch. If you work with online content or email marketing: Content Management System (CMS) like WordPress, Drupal Nonprofit software like Blackbaud-Luminate, Salesforce, Engaging Network, Salsa EMS like Constant Contact or Mailchimp proprietary and confidential 5
- 6. Why you should learn some basic code? It will save you time in the long run and you can easily make simple edit to your website content and email with confidence. proprietary and confidential 6
- 7. What you should learn? Start with basic HTML and CSS. Working with images. Just know what JavaScript and jQuery looks like and not to mess it up. (Unless you are feeling more inspired). proprietary and confidential 7
- 8. What is HTML? <html xmlns="http://www.w3.org/1999/xhtml"><head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <title>hjc email template</title> </head> <body><table width="500" border="0" align="center" cellpadding="0" cellspacing="0"> <tbody><tr> <td valign="top" style="padding:10px;"><p align="center" style="margin:0; padding:0; font-family:Arial, Helvetica, sans-serif; font-size:12px; line- height:18px; color:#6b6b6b;">Replace this text with any preview pane text you might have.<br><a href="#" style="color:#9fb12a">View online</a></p></td> </tr> <tr> <td valign="top"><table width="500" border="0" cellspacing="0" cellpadding="0"> <tbody><tr> <td height="98" valign="top"><img src="../images/content/pagebuilder/hjc- kimbia-givingday-appeal-header.jpg" width="500" height="98" alt="hjc - Kimbia" border="0" style="display:block;"></td> </tr> <tr> proprietary and confidential 8
- 9. Let’s break it down The basic structure of an HTML document includes tags, which surround content and apply meaning to it. proprietary and confidential 9
- 10. What is CSS? Cascading Style Sheet – this is the code that tells your web browser what colours, fonts, sizes, spacing to apply to content. Styling can be added to HTML elements in 3 ways: proprietary and confidential 10
- 11. 3 Ways to Add CSS #1 Inline - using a style attribute in HTML elements <h1 style="color:blue">This is a Blue Heading</h1> Inline style is especially common in email content because it ensures compatibility with all email clients 10/2/201 5 proprietary and confidential 11
- 12. #2 Internal - using a <style> element in the HTML, usually in the <head> section, be added inside the <body> of the page proprietary and confidential 12 3 Ways to Add CSS
- 13. #3 External - using one or more external CSS files usually in a wrapper template controlled by developers that should not edit proprietary and confidential 13 3 Ways to Add CSS http://www.w3schools.com/html/html_css.asp
- 14. Real Life Example – From Email <TABLE> <TBODY> <TR> <TD BGCOLOR="#FFFFFF"> <A HREF="http://hjcnewmedia.com"><IMG SRC="http://hjcnewmedia.com/clients/hjc/bridge_email/image s/header.jpg" ALT="hjc: leadership + innovation for the non- profit sector" WIDTH="600" HEIGHT="174" BORDER="0" STYLE="display:block;"></A> </TD> </TR> </TBODY> </TABLE> proprietary and confidential 14
- 15. What does they mean? Code Definition <a href=“..”> Specifies the URL (web address) for a link <p>..</p> Signifies a paragraph <br> or <br /> Signifies a line break <img src=“..”> Image source – this is what to look out for when adding new images <table>.. </table> In emails - whenever you start creating content it needs to start with a table, it allows the browser to understand how to lay things out <td>..</td> This is where the content of the table takes place ALT Specifies an alternative text for an image for screen readers Width= and height= When found with an image – this describes the width and height – they may not always be there (optional) 15
- 16. Anatomy of a Webpage Most nonprofit software operate on similar principles. They try to take the heavy lifting out of your hands and provide some content editors for you to edit your content, typically code and WYSIWYG editor. proprietary and confidential 16
- 17. 17
- 18. What is WYSIWYG Editor? proprietary and confidential 18 In Luminate Online:
- 19. Tips: For using the WYSIWYG Turn off WYSIWYG in your profile to prevent opening content in WYSIWYG (go to your profile to change your preference). WYSIWYG has a tendency to mess up code by inserting code and tags that are not required – ever wonder why your paragraphs had too much space….this is why. Click Cancel to exit a content editor if you happen to open the page in WYSIWYG. If you toggle back to Text editor it will commit the change. proprietary and confidential 19
- 20. Updating Website Content Demo! proprietary and confidential 20
- 21. Resources Chrome/Firefox Browser - Inspect Element Tutorial: https://www.youtube.com/watch?v=vkC OfmqG6ys proprietary and confidential 21
- 22. Resources Photo Editing Tools Pixlr - similar to Photoshop: https://pixlr.com/editor/ Webresizer - Basic as the name suggests: http://webresizer.com/resizer/ Tips: Minimize image “file size”. The size-dimension is one thing - bigger the image dimension - bigger the file size. Always keep the file size as small as possible and that’s done by optimizing the “image quality” to the lowest number without visible deterioration Most photo editing app use the same Image Quality optimization. File format: PNG, JPEG/JPG, GIFproprietary and confidential 22
- 23. proprietary and confidential 23 Let’s change some buttons!
- 24. Let’s change some buttons! What to look out for when changing links or names of buttons: <a href= points to the hyperlink – you can replace the existing URL with a new one and it will update the button. Be sure to keep your URL in quotation marks to complete the link. The name of the button is after the URL and before the <a href is closed with the symbol </a> <a href="https://secure3.convio.net/hjcnm/site/TRR/Eve nts/Express20;jsessionid=F50D80A42FD210EB92FD0C E9EB2E2255.app316b?pg=tfind&fr_id=1432&fr_tm_op t=none" class="regButton" >Register as Individual</a> 10/2/201 5 proprietary and confidential 24
- 25. Let’s Update an Image in Email! proprietary and confidential 25
- 26. Tables in Email Tables are defined with the <table> tag. Tables are divided into table rows with the <tr> tag. Table rows are divided into table data with the <td> tag. Table data <td> are the data containers of the table. They can contain all sorts of HTML elements like text, images, lists, other tables, etc. proprietary and confidential 26
- 27. Tips! Hjc often develops templates for emails or pages with the goal of our clients being able to copy and reuse – when we do we add HTML Comment Tags: Comment tags <!-- and --> are used to insert comments in HTML. <!-- Write your comments here --> Note: Comment in CSS and JavaScript uses different syntax HTML Reference: http://www.w3schools.com/html/html_basic.asp proprietary and confidential 27
- 28. Tips! For Luminate Clients: Turn off WYSIWYG in your profile to prevent opening content in WYSIWYG (go to your profile to change your preference). WYSIWYG has a tendency to mess up code by inserting code and tags that are not required. Click Cancel to exit a content editor if you happen to open the page in WYSIWYG. If you toggle back to Text editor it will commit the change. WYSIWYG often add <p> tag in blank row in the code Runaway “]]” angle brackets in the bottom of the website caused by <script> element comment added by the LO system. Clean up 10/2/201 5 proprietary and confidential 28
- 30. Resources Learn Basic HTML and CSS W3C School is a great place to start: http://www.w3schools.com/html/default.asp http://www.w3schools.com/css/default.asp CodeAcademy: https://www.codecademy.com/ TutorialVideos: Free (Search “Basic HTML & CSS”): https://www.youtube.com/watch?v=GwQMnpUsj8I Your First HTML File: https://www.youtube.com/watch?v=Pq08fNMOn7s An IntroductionTo Styling Websites With CSS: http://leveluptuts.com/tutorials/css- tutorials PaidTraining Providers: http://www.lynda.com/HTML-tutorials/HTML-Essential-Training/170427-2.html https://teamtreehouse.com/ 10/2/201 5 proprietary and confidential 30
- 31. Resources HTML Tools Online Editors: CodeAcademy (Learning and make quick edit to email) https://www.codecademy.com/en/tracks/web http://htmledit.squarefree.com/ proprietary and confidential 31
- 32. Resources Basic Editors: Notepad (Windows built-in) TextEdit (Mac built-in) Tip: Before you start - set the format to “PlainText” (Usually under Format menu, also check your App preference to default to plain text mode and file opening/saving mode.) 10/2/201 5 proprietary and confidential 32
- 33. Resources More Advanced Text Editors: Notepad++ (Windows, https://notepad-plus- plus.org/download/v6.8.3.html) TextWrangler (Mac, http://www.barebones.com/products/textwrangler/) 10/2/201 5 proprietary and confidential 33
- 34. Resources Other Web Development Tools: SublimeText (Mac, PC, free to try - $, Developers Favourite, Advanced Tools) http://www.sublimetext.com Tutorials: https://www.youtube.com/watch?v=04gKiTiRlq8 https://www.youtube.com/watch?v=zVLJfrIwEP8 Adobe Dreamweaver (Win & Mac, $$$) http://www.adobe.com/products/dreamweaver.html Coda2 (Mac, $) https://panic.com/coda/ Microsoft Expression Web 4 (Win, Free,) http://www.microsoft.com/en-us/download/details.aspx?id=36179 iweb (Mac, Free) https://support.apple.com/kb/DL1413?locale=en_US 10/2/201 5 proprietary and confidential 34
- 35. Resources Test Email https://putsmail.com/ Send test emails to your test accounts to quickly test you code for layout compatibility in various email clients and devices/Apps. Litmus.com Paid service with more extensive testing 10/2/201 5 proprietary and confidential 35
- 36. Resources Email Clients Market Share (with some discrepancies) https://emailclientmarketshare.com/ Test your page for mobile https://www.google.com/webmasters/tools/mobile- friendly/ Page Speed https://developers.google.com/speed/pagespeed/insi ghts/ 10/2/201 5 proprietary and confidential 36
Editor's Notes
- #3: Emma
- #5: Francis – Article from Globe and Mail - Before we being, let’s calm all your fears – coding is not scary! It looks complicated but with the lessons you will learn today you’ll feel more comfortable going in and making some updates. This webinar isn’t for advanced web developers – it’s for average people just like me (Emma)
- #6: Emma
- #7: Francis
- #8: Emma
- #9: Emma
- #10: Francis –Most of you don’t have to edit content outside of the BODY tag. You website developer should have created anything outside of the body or template you’re working with
- #11: Emma
- #12: Emma – Francis to jump in when needed – this is the most common type – found in email especially. E.g. developer creates the stationary, I can then go into this area and update my fonts and colours if I need to repurpose the original stationary
- #13: Emma – usually on a webpage sometimes in responsive emails. Typically found in the head, but it can be inserted anywhere in content area – looking for <style>
- #14: Emma – usually links to external style sheet – shouldn’t touch it as it may affect more than just the page you’re working with
- #15: Francis – this is an example from an email template
- #16: Francis
- #17: Emma
- #18: Emma
- #19: Francis
- #20: Francis
- #21: Conquer_Coding_webinar_ContentPage_example -Go into LO -Show how to comment out -Show styling -Show where to change image -Show where to change text -Go into live version and inspect element -Talk about massive image size
- #24: Conquer_Code_Webinar_Example_1 -Go into LO -Update button text -Update hyperlink
- #26: Conquer_Code_Example ../images/content/pagebuilder/webinar-banner.jpg -go into LO -Update banner image
- #28: Important Email Tips: Use ALT text, as some clients outside of Gmail still disable images, such as Outlook and some Android clients, and it’s good for accessibility. Use absolute link for image source: <IMG src="http://myorg.com/images/banner.jpg" alt="Support the Children"> (not src=".../images/banner.jpg"). Use <TABLE >based layout not <DIV> (DIV is good for website layout).
- #34: Colour coded HTML tags helps make it easy to find and edit the code you are looking for. Tip: Save the code/file with the “.HTML” extension to make the file a webpage that you can then open in browser for quick preview.