Whether you have a bit of experience or you're brand new to code, this webinar is right for you. Walk away with:
Valuable resources that will save you time during the holiday season
The ability to update your email design like a veteran developer
Tips on how to to update your HTML more efficiently
A decrease in daily frustrations when making web updates and more!
Copycat Site BluePrint - make money online fastEdward806784
In the Copycat Site Blueprint I will tell you exactly how to prepare your copycat sites from the premade templates. Just follow up my exact steps and you should be fine. I will also give some explanation about the free program you can use if you don’t have a program like dream weaver running yet.
When should you use cache and when not. Is memcached fit your needs? Should you use Read Through? How to overcome Geo Loadbalancing and invalidation. Another great presentation by Moshe Kaplan
Slideboom as a service is excellent but unfortunately the embed code that provided is not in <iframe ... So it must be modified in order the new Twinspace accept it. Look at this step by step guide how to do this.
Copycat Site BluePrint - make money online fastEdward806784
In the Copycat Site Blueprint I will tell you exactly how to prepare your copycat sites from the premade templates. Just follow up my exact steps and you should be fine. I will also give some explanation about the free program you can use if you don’t have a program like dream weaver running yet.
When should you use cache and when not. Is memcached fit your needs? Should you use Read Through? How to overcome Geo Loadbalancing and invalidation. Another great presentation by Moshe Kaplan
Slideboom as a service is excellent but unfortunately the embed code that provided is not in <iframe ... So it must be modified in order the new Twinspace accept it. Look at this step by step guide how to do this.
Have you ever wondered how website designers create dazzling websites? This is your chance to dive into the wonderful world of web design. Come learn the basics of HTML and CSS. You'll even get to do a little coding! By the end of the session, you'll launch a customized website about the topic of your choice!
Batra Computer Centre is An ISO certified 9001:2008 training Centre in Ambala.
We Provide Dreamweaver Training in Ambala. BATRA COMPUTER CENTRE provides best training in C, C++, S.E.O, Web Designing, Web Development and So many other courses are available.
Bruce Lawson HTML5 South By SouthWest presentationbrucelawson
"Tales from the development trenches": my talk about development of HTML5 and developing with HTML5, including new intelligent forms, canvas and open video.
Play it Again, Sam: Monthly Giving Programs for Sustaining Donations "As Time...hjc
Speakers: SPEAKERS: Wendy Marinaccio Husman, Donordigital, Drew Seman, Senior Manager of Fundraising and Outreach, Ocean Conservancy
This session will highlight efforts you can take to grow your organization's monthly donor program. We’ll feature examples from The Ocean Conservancy, No Kid Hungry, and other nonprofits representing a variety of organization and sustainer program sizes. Learn strategies for monthly donor recruitment, upgrades, retention, and reinstatement; gather ideas for sustainer campaigns and conversion tactics; and come away with some information you can put to use right away.
Have you ever wondered how website designers create dazzling websites? This is your chance to dive into the wonderful world of web design. Come learn the basics of HTML and CSS. You'll even get to do a little coding! By the end of the session, you'll launch a customized website about the topic of your choice!
Batra Computer Centre is An ISO certified 9001:2008 training Centre in Ambala.
We Provide Dreamweaver Training in Ambala. BATRA COMPUTER CENTRE provides best training in C, C++, S.E.O, Web Designing, Web Development and So many other courses are available.
Bruce Lawson HTML5 South By SouthWest presentationbrucelawson
"Tales from the development trenches": my talk about development of HTML5 and developing with HTML5, including new intelligent forms, canvas and open video.
Play it Again, Sam: Monthly Giving Programs for Sustaining Donations "As Time...hjc
Speakers: SPEAKERS: Wendy Marinaccio Husman, Donordigital, Drew Seman, Senior Manager of Fundraising and Outreach, Ocean Conservancy
This session will highlight efforts you can take to grow your organization's monthly donor program. We’ll feature examples from The Ocean Conservancy, No Kid Hungry, and other nonprofits representing a variety of organization and sustainer program sizes. Learn strategies for monthly donor recruitment, upgrades, retention, and reinstatement; gather ideas for sustainer campaigns and conversion tactics; and come away with some information you can put to use right away.
Unlock the true potential of your event participantshjc
The donor journey doesn’t end at the finish line with event participants. With limited resources, every nonprofit organization has to maximize their Return on Investment (ROI) with every fundraising endeavor – including pledge events. That’s why hjc is beginning to obsess about a key question connected to the lifetime value (LTV) of an event participant: How much are they worth?
Do you know the Lifetime Value of your event participants? You should.
View this webinar to learn:
- Why stewardship is a vital investment that will lead to greater LTV of your event participants
- How to measure success of ROI
- Best practices on stewardship methods that will work for your nonprofit
Using best practices and up-to-date case studies, learn how two best-of-breed organizations with large annual pledge events step up to begin to answer that key questions of LTV for loyal fundraising event participants.
SPEAKERS: Heather McLean, hjc, Brian Walsh, Oracle
Is your nonprofit struggling to get your donor to make a second gift? Has your nonprofit thought about integrating a multi-channel presence to reach your donors? You can’t ignore it: a one-channel touch point just isn’t cutting it anymore and donor communication preferences are becoming more complex and demanding. This exciting session will explore a new and innovative way of thinking when it comes to attracting, motivating, and retaining your donor base through different touchpoints. Using best practices and up-to-date case studies that introduce the new Oracle methodology, Heather McLean, Senior Fundraising Advisor of hjc, and Brian Walsh, CX Architect North American Applications of Oracle, will show you how your organization can tap into your donor base and build deeper relationships through a multi-channel presence.
The Donor Journey: A Step-by-Step Guide to Lifecycle Marketing for your Nonpr...hjc
Join hjc and Oracle where we'll explain the importance of integrating a multi-channel presence to build stronger and long lasting relationships. You will walk away with:
hands on examples of everything from customer experience to personalizing donor journeys
a fool proof system for uncovering, cultivating, and soliciting existing and new donors
how to implement a multi-channel presence
best practices on the do's and donts' of creating a good supporter survey
how to measure success of breakthrough fundraising results
Heather McLean, Senior Fundraising Advisor of hjc, and Brian Walsh, CX Architect North American Applications of Oracle, will show you how your organization can tap into your donor base and build deeper relationships through a multi-channel presence. Using the latest data and riveting case studies, you’ll learn how to maximize your organization’s fundraising potential.
WordCamp Greenville 2018 - Beware the Dark Side, or an Intro to DevelopmentEvan Mullins
Crash course introduction to web development for WordPress covering acronyms, buzzwords and concepts that often leave outsiders mystified. Overview of primary development processes and what software and tools are needed to play the game. We’ll cover what you need to go from zero to developer and hopefully how to have fun on the way. WordPress development tools explained for beginners: ftp, git, svn, php, html, css, sass, js, jquery, IDEs, themes, child themes, the Loop, hooks, APIs, CLI, agile, bootstrap, slack, linting, sniffing … etc.
oin this hands-on tutorial for an introduction to Stitch (MongoDB's serverless platform) and Atlas (MongoDB's database-as-a-service). Upon completing this session, you will have created an Atlas cluster and created your first stitch app. You will have a clear picture of how to rapidly develop and iterate on apps using MongoDB. In 90 minutes we will walk through three real-world prototypes and leave you with a number of learns you can apply to your own projects. Come learn about DBaaS, database triggers, and serverless applications with MongoDB!
Requirements
Laptop
Wifi Connection
Chrome or Firefox Browser
Text Editor
More than 90 questions we have solved. This is an exam preparation guide for fiverr.com. Solution links are provided there so that you can check every answer. We uploaded scripts to sololearn.com as well. My students getting 9 and above with the help of this guide. If you find any error on my document please let me know. Hope for the best.
How to Create a College Website Page Using HTMLYahyaMemon2
Creating a college website page using HTML involves several steps to ensure it is informative, visually appealing, and user-friendly. Here's a brief overview:
1. Planning: Determine the purpose of the page and what content you want to include. Consider sections like About Us, Programs Offered, Faculty, Admissions, Campus Life, etc.
2. **HTML Structure**: Start with the basic structure of HTML. Use tags like `<html>`, `<head>`, and `<body>` to define the structure of your webpage.
3. **Head Section**: Inside the `<head>` tag, include metadata such as the title of the page, meta descriptions, and links to CSS stylesheets for styling.
4. **Navigation**: Include a navigation bar to help users easily navigate through different sections of your website. Use `<nav>` and `<ul>` tags for creating a list of navigation items.
5. **Content Sections**: Use appropriate HTML tags to structure different sections of your page. For example, use `<section>` for each major part of the page like About Us, Programs, Admissions, etc.
6. **Text Content**: Use `<p>` tags for paragraphs of text and headings `<h1>` to `<h6>` for different levels of headings. Add images or videos using `<img>` and `<video>` tags.
7. **Links**: Include links to external resources, such as social media profiles, application forms, or other relevant websites using `<a>` tags.
8. **Forms**: If needed, include forms for inquiries, applications, or feedback using `<form>` tags.
9. **Footer**: Include a footer section with copyright information, contact details, and links to important pages.
10. **Validation**: Ensure your HTML code is valid by using online validators. This helps in ensuring compatibility across different browsers.
11. **Testing**: Test your webpage across different browsers and devices to ensure it displays correctly and is user-friendly.
Remember, HTML provides the structure of your webpage, but for styling and interactivity, you'll also need to use CSS and possibly JavaScript.
Presentation to TriDUG on April 16, 2013 about how to set up a secure and user friendly WYSIWYG editor environment while maintaining site stylistic guidance. Note, this features the TinyMCE editor but this can be used with any editor that the WYSIWYG module supports.
What is Wordpress | What is HTML | Wordpress vs HTMLdevbhargav1
WordPress is a popular and widely-used content management system (CMS) and website-building platform. It allows individuals, businesses, and organizations to create and manage websites without requiring advanced technical skills or coding knowledge.
Welcome to IE8 - Integrating Your Site With Internet Explorer 8Lachlan Hardy
Damian Edwards (http://damianpedwards.spaces.live.com/) and I delivered a presentation on IE8 at Remix Australia. We took the opportunity to outline the whys and wherefores of standards-based design as well.
Giving Days & the Great Canadian Fundraising Landscape hjc
This week, hjc and Kimbia presents Giving Days & the Great Canadian Landscape webinar. Register for this webinar to learn:
- What is a Giving Day, and why your nonprofit should start now
- The state of the Canadian Fundraising landscape
- Real life case studies and how to benchmark yourselves
Speed Dating the Data Geeks: What you need to know about Nonprofit Analytic T...hjc
Speakers: Richard Becker, Blackbaud, John Blackwell, INtegral, Joe Churpek, Analytical Ones, John Ernst, Integral, Julie Wilson, Integral
With more nonprofits investing in advanced measurement technologies and analytics to drive their multi-channel fundraising programs, the need to understand what to measure, what to model and what to expect from an analytic partner is greater than ever. Join leaders from some of the nonprofit industry’s top analytic consulting firms for a candid panel discussion on how programs at every maturity level should approach analytics.
Let it Go! Let it Go!: Adapting Fundraising and Engagement Messaging to Today...hjc
Speakers: Madeline Stanionis, M+R Strategic Services
Your work belongs to everybody now, and that's cool. Remember the good ol' days when you could pretty much hold your whole direct response program on a couple floppy disks and great big file cabinet -- and nobody commented on Facebook how much they hate your new logo? Well, that world is loooong gone and it's time to let go of all our outdated notions about controlling your message and your brand. In fact, letting go and watching how your supporters and volunteers and activists take your message, your work, and your brand out for a spin is totally awesome. In this session, we'll take a look at how the best and the bravest organizations have adapted their fundraising and engagement to this crazy new world and thrived (and how you can too)
Integrated Direct Response: Basics From the On and Offline Sides of the Marke...hjc
Speakers: Andrew Magnuson, American Heart Association Sherry Minton, American Heart Association
Do you work in digital fundraising and have no idea what your offline direct response colleagues mean when they talk about nickel packages and lot splits? Are you a direct mail guru who can’t figure out why your digital counterpart is obsessing over canonical tags and concatenation? Join us for this integrated direct marketing session and find out what really happens on the other side of the aisle. The leads of the on and offline direct response fundraising programs for the American Heart Association will take us through what they’ve learned about the similarities and differences of fundraising in their respective channels. We’ll examine whether the goals, planning cycles, metrics, donor life cycles, creative approaches, etc. are all that different, or is it, as the saying goes, “the more things change the more they remain the same"?
View this webinar to learn:
- How crowdfunding can find you new supporters
- How to use what’s working in the commercial world and bring the right elements over to make your charitable crowdfunding successful
- How to benchmark for success in crowdfunding
Using best practices and up-to-date case studies, learn how to do more than just raise money to make potato salad – learn how to raise money, find new supporters, build brand and make your organization stronger with crowdfunding.
Using examples and data from the Blackbaud 2013 benchmark study; we’ll challenge your strategic thinking and help you understand how to be more successful as fundraisers, marketers and industry leaders.
A Critical Conversation after the launch of the new Blackbaud Index Canadahjc
Using examples and data from the new Index, and adding data from last year's major study of generational giving in Canada, we’ll challenge your strategic thinking and help you understand how to be more successful as fundraisers, marketers and industry leaders.
We will cover the following topics:
• how the new Blackbaud Index for Canada will transform the use of data for charities in Canada
• strategic and tactical takeaways now, and in the future, of this ever-fresh Blackbaud Index
• how to think critically about your Foundation, and how to remain at the forefront of fundraising excellence in Canada
How to leverage mobile technology and crowdfunding to engage more effectively with four generations of Canadian donors.
In this session, Michael Johnston, Founder and President at hjc, and Ken Kuhler, Interactive Strategy Manager at Blackbaud, cover the following topics:
• Mobile phone preferences and engagement habits of four generations of Canadian donors
• What crowdfunding is, and how it can help you fund your organization’s next big project
• Can’t-miss data, real-world examples, and useful tips for engaging with Canadian donors
Fundraising Trends and the Next Generation of Canadian Giving hjc
Fundraising Trends in 2013
Michael and Danielle focussed on fundraising trends such as social media, mobile, and crowdfunding and other can’t-miss insights from the 2013 Next Generation of Canadian Giving study.
Monthly Giving and The Next Generation of Givinghjc
Monthly Giving and the Next Generation of Giving
Lynne Boardman, Managing Director, Harvey McKinnon Associates, lead us through the data on how different generations of donors engage differently with monthly giving and what you can do to ensure success with your monthly giving program.
It's and Not or
Danielle Johnson Vermenton, Senior Interactive Consultant, Blackbaud, on the latest trends of online philanthropy and the impact on nonprofits. Learn how online philanthropy is the pipeline for all your fundraising goals - and tips on how to get started.
Fundraising Today and Tomorrow and the Next Generation of Canadian Givinghjc
Canadian Fundraising Today and Tomorrow
Michael Johnston, Founder and President, hjc, gives a profile of four generations of Canadian donors: how do they give, where do they give, and how can you build the most effective relationship with them.
Toronto Seminar, October 22 2013
Essentials of Automations: Optimizing FME Workflows with ParametersSafe Software
Are you looking to streamline your workflows and boost your projects’ efficiency? Do you find yourself searching for ways to add flexibility and control over your FME workflows? If so, you’re in the right place.
Join us for an insightful dive into the world of FME parameters, a critical element in optimizing workflow efficiency. This webinar marks the beginning of our three-part “Essentials of Automation” series. This first webinar is designed to equip you with the knowledge and skills to utilize parameters effectively: enhancing the flexibility, maintainability, and user control of your FME projects.
Here’s what you’ll gain:
- Essentials of FME Parameters: Understand the pivotal role of parameters, including Reader/Writer, Transformer, User, and FME Flow categories. Discover how they are the key to unlocking automation and optimization within your workflows.
- Practical Applications in FME Form: Delve into key user parameter types including choice, connections, and file URLs. Allow users to control how a workflow runs, making your workflows more reusable. Learn to import values and deliver the best user experience for your workflows while enhancing accuracy.
- Optimization Strategies in FME Flow: Explore the creation and strategic deployment of parameters in FME Flow, including the use of deployment and geometry parameters, to maximize workflow efficiency.
- Pro Tips for Success: Gain insights on parameterizing connections and leveraging new features like Conditional Visibility for clarity and simplicity.
We’ll wrap up with a glimpse into future webinars, followed by a Q&A session to address your specific questions surrounding this topic.
Don’t miss this opportunity to elevate your FME expertise and drive your projects to new heights of efficiency.
Epistemic Interaction - tuning interfaces to provide information for AI supportAlan Dix
Paper presented at SYNERGY workshop at AVI 2024, Genoa, Italy. 3rd June 2024
https://alandix.com/academic/papers/synergy2024-epistemic/
As machine learning integrates deeper into human-computer interactions, the concept of epistemic interaction emerges, aiming to refine these interactions to enhance system adaptability. This approach encourages minor, intentional adjustments in user behaviour to enrich the data available for system learning. This paper introduces epistemic interaction within the context of human-system communication, illustrating how deliberate interaction design can improve system understanding and adaptation. Through concrete examples, we demonstrate the potential of epistemic interaction to significantly advance human-computer interaction by leveraging intuitive human communication strategies to inform system design and functionality, offering a novel pathway for enriching user-system engagements.
"Impact of front-end architecture on development cost", Viktor TurskyiFwdays
I have heard many times that architecture is not important for the front-end. Also, many times I have seen how developers implement features on the front-end just following the standard rules for a framework and think that this is enough to successfully launch the project, and then the project fails. How to prevent this and what approach to choose? I have launched dozens of complex projects and during the talk we will analyze which approaches have worked for me and which have not.
Connector Corner: Automate dynamic content and events by pushing a buttonDianaGray10
Here is something new! In our next Connector Corner webinar, we will demonstrate how you can use a single workflow to:
Create a campaign using Mailchimp with merge tags/fields
Send an interactive Slack channel message (using buttons)
Have the message received by managers and peers along with a test email for review
But there’s more:
In a second workflow supporting the same use case, you’ll see:
Your campaign sent to target colleagues for approval
If the “Approve” button is clicked, a Jira/Zendesk ticket is created for the marketing design team
But—if the “Reject” button is pushed, colleagues will be alerted via Slack message
Join us to learn more about this new, human-in-the-loop capability, brought to you by Integration Service connectors.
And...
Speakers:
Akshay Agnihotri, Product Manager
Charlie Greenberg, Host
UiPath Test Automation using UiPath Test Suite series, part 3DianaGray10
Welcome to UiPath Test Automation using UiPath Test Suite series part 3. In this session, we will cover desktop automation along with UI automation.
Topics covered:
UI automation Introduction,
UI automation Sample
Desktop automation flow
Pradeep Chinnala, Senior Consultant Automation Developer @WonderBotz and UiPath MVP
Deepak Rai, Automation Practice Lead, Boundaryless Group and UiPath MVP
Dev Dives: Train smarter, not harder – active learning and UiPath LLMs for do...UiPathCommunity
💥 Speed, accuracy, and scaling – discover the superpowers of GenAI in action with UiPath Document Understanding and Communications Mining™:
See how to accelerate model training and optimize model performance with active learning
Learn about the latest enhancements to out-of-the-box document processing – with little to no training required
Get an exclusive demo of the new family of UiPath LLMs – GenAI models specialized for processing different types of documents and messages
This is a hands-on session specifically designed for automation developers and AI enthusiasts seeking to enhance their knowledge in leveraging the latest intelligent document processing capabilities offered by UiPath.
Speakers:
👨🏫 Andras Palfi, Senior Product Manager, UiPath
👩🏫 Lenka Dulovicova, Product Program Manager, UiPath
Neuro-symbolic is not enough, we need neuro-*semantic*Frank van Harmelen
Neuro-symbolic (NeSy) AI is on the rise. However, simply machine learning on just any symbolic structure is not sufficient to really harvest the gains of NeSy. These will only be gained when the symbolic structures have an actual semantics. I give an operational definition of semantics as “predictable inference”.
All of this illustrated with link prediction over knowledge graphs, but the argument is general.
GraphRAG is All You need? LLM & Knowledge GraphGuy Korland
Guy Korland, CEO and Co-founder of FalkorDB, will review two articles on the integration of language models with knowledge graphs.
1. Unifying Large Language Models and Knowledge Graphs: A Roadmap.
https://arxiv.org/abs/2306.08302
2. Microsoft Research's GraphRAG paper and a review paper on various uses of knowledge graphs:
https://www.microsoft.com/en-us/research/blog/graphrag-unlocking-llm-discovery-on-narrative-private-data/
PHP Frameworks: I want to break free (IPC Berlin 2024)Ralf Eggert
In this presentation, we examine the challenges and limitations of relying too heavily on PHP frameworks in web development. We discuss the history of PHP and its frameworks to understand how this dependence has evolved. The focus will be on providing concrete tips and strategies to reduce reliance on these frameworks, based on real-world examples and practical considerations. The goal is to equip developers with the skills and knowledge to create more flexible and future-proof web applications. We'll explore the importance of maintaining autonomy in a rapidly changing tech landscape and how to make informed decisions in PHP development.
This talk is aimed at encouraging a more independent approach to using PHP frameworks, moving towards a more flexible and future-proof approach to PHP development.
Kubernetes & AI - Beauty and the Beast !?! @KCD Istanbul 2024Tobias Schneck
As AI technology is pushing into IT I was wondering myself, as an “infrastructure container kubernetes guy”, how get this fancy AI technology get managed from an infrastructure operational view? Is it possible to apply our lovely cloud native principals as well? What benefit’s both technologies could bring to each other?
Let me take this questions and provide you a short journey through existing deployment models and use cases for AI software. On practical examples, we discuss what cloud/on-premise strategy we may need for applying it to our own infrastructure to get it to work from an enterprise perspective. I want to give an overview about infrastructure requirements and technologies, what could be beneficial or limiting your AI use cases in an enterprise environment. An interactive Demo will give you some insides, what approaches I got already working for real.
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
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
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
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
Emma
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)
Emma
Francis
Emma
Emma
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
Emma
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
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>
Emma – usually links to external style sheet – shouldn’t touch it as it may affect more than just the page you’re working with
Francis – this is an example from an email template
Francis
Emma
Emma
Francis
Francis
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
Conquer_Code_Webinar_Example_1
-Go into LO
-Update button text
-Update hyperlink
Conquer_Code_Example
../images/content/pagebuilder/webinar-banner.jpg
-go into LO
-Update banner image
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).
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.