November 6, 2015 at 7:54 am #301718
Again, someone asked me this question and I wanted to reply publicly so more people can weigh in.
Is this a personal preference over the Header Scripting type for JS and Cascading Style Sheet type for CSS or do you find there is a specific Inspire related benefit? I am so ingrained in doing things a certain way I don’t want to miss out on anything.
My way of working with JS/CSS is to create an external HTML object, set it to Meta tags, edit it and paste the following code:
<style> /* whatever quick styles I want to add */ </style> <link rel="stylesheet" type="text/css" href="/custom/custom.css"> <script> //whatever quick JS I want to add here </script> <script src="/custom/custom.js"></script>
The above setup allows me to quickly edit CSS and JS inside Lectora if I need to (e.g. for debugging). It also links two (or more) files that are attached to the title. The files contain 99% of my custom code and I edit them outside of Lectora, directly in my favourite text editor (which is Sublime on Mac and Notepad++ on Windows).
I find linking external CSS files via the Ext HTML Object set to CSS is too cumbersome. This way I have ONE ext HTML object on title level and I always know where to look for adding/removing/editing my code.November 6, 2015 at 8:09 am #301719
Darrel SomozaMember192 pts@Klaatu
Ok, so you use meta tags like this as a personal preference. It might not be a big point but keep in mind this does not follow W3C standards and may, if checked, not validate properly. It’s not too much of a big deal because if it works cross-browser, it works.
Thanks for sharing.November 6, 2015 at 10:35 am #301723
No. Let me re-phrase. Anything you write in Lectora’s HTML Object set to META tags is included in the HTML HEAD tag. It is absolutely 100% fully entirely W3C compliant to include SCRIPT tags, STYLE tags and LINK tags inside HEAD. In fact, that is probably the right way to do that. This is where they should be.
What’s confusing is that Lectora actually calls this “META tags”. Yes, meta tags should be placed in this title using this feature but it isn’t exclusively for meta tags.
To make things a bit more confusing, Lectora has Ext HTML Object’s mode called “HEADER SCRIPTING”, which allows you to type in some scripts that will be executed after most (not all of) Lectora scripts run. And of course, it is also placed inside a SCRIPT element in the HEAD element.November 8, 2015 at 4:21 am #301749
In case anyone is interested, I took time to refresh W3C spec in my memory (see http://www.w3.org/) and here’s what I found:
QUOTE: The SCRIPT element places a script within a document. This element may appear any number of times in the HEAD or BODY of an HTML document. (http://www.w3.org/TR/html401/interact/scripts.html#edef-SCRIPT)
QUOTE (on LINK tag): This element defines a link. Unlike A, it may only appear in the HEAD section of a document. (http://www.w3.org/TR/html401/struct/links.html#edef-LINK)
QUOTE: 14.2.3 Header style information: the STYLE element. The STYLE element allows authors to put style sheet rules in the head of the document.
Since using Ext HTML Object set to META TAGS is the only way in Lectora to place anything inside HEAD, it is THE place for adding SCRIPT, LINK, STYLE and of course META tags.
I highly recommend anyone interested in the subject of adding custom code to Lectora to play with it:
1. Create Ext HTML Object set to Meta Tags
2. Add any text inside it (e.g. type zzz)
3. Publish the page, open its source in Notepad and see where zzz appears.
Some time ago I did this for all types of Ext Objects to find out where exactly the content goes and what it is wrapped in.November 8, 2015 at 4:41 am #301750
And this is the video for the above experiment 🙂
November 8, 2015 at 11:04 pm #301867
- This reply was modified 3 years, 1 month ago by Sergey Snegirev.
Darrel SomozaMember192 pts@Klaatu
“Since using Ext HTML Object set to META TAGS is the only way in Lectora to place anything inside HEAD, it is THE place for adding SCRIPT, LINK, STYLE and of course META tags.”
I respectfully disagree with this statement. Add an external JS file using Header Script and add a CSS sheet using the Cascading Style Sheet and you will see that they both are included in the Head of the exported HTML. “Only” is incorrect. I’m too lazy to make a movie.
While it is true that when you select the Inspire Meta tag type HTML Object and either type in it or point to a text file it will place whatever it finds in the head of the compiled HTML page, coming from a web and application development background, I do not recommend it for JS or CSS. I’m not saying it is wrong or won’t work, I am saying I do not recommend it personally. Here’s why. When you keep the CSS and JS* separate from the HTML you can use the same file for any number of web sites (or eLearning lessons). This is an incredibly powerful feature and should not be overlooked. For example, let’s say you develop a website with 20 different pages or you have 20 different Inspire lessons. If you keep their CSS separate and have all link to the one file then if you need to make a style change you only have do it once on the linked CSS. If you put the CSS in each HTML page, as what happens using the Meta tag, you would have to make 20 changes to Meta data and re-publish each! Additionally, keeping styling separate makes it simple to maintain the clients desired look (colors, font style, sizes, etc) across multiple projects. The time savings alone make it worth it.
There are usually many ways to accomplish a similar goal. How you go about it is a personal preference. Sergey’s use of the Meta tag is quite clever. My preference is to keep things separate. I guess I’m lazy. I like to do things once and reuse.
By the way, W3C and “standards” was mentioned a few times. W3C stands for World Wide Web Consortium (3 W’s and a C) and they develop the standards that all web browsers are supposed to follow. You can “validate” your web application by running the file through a web markup validation service. This will tell you if what you wrote meets the W3C standard and, therefore, will work on all browsers.
Like Sergey pointed out, Inspire doesn’t put the information you insert using the Meta tag HTML Object type inside a <meta> tag even though the User guide indicates it’s for meta data. If you actually want to include meta data (some LMS may make use of it) you need to begin the meta data with a <meta> tag. No closing tag required.
DRSNovember 9, 2015 at 10:13 am #301982
I guess what is great about Lectora is its ability to achieve the same result in multiple ways so everyone can fine-tune it to their exact needs.
You must be logged in to reply to this topic.