my title isn't brilliant, but I don't know exactly how to put it, I lack some knowledge. If you have a better title, please let me know :)
But the question is simple. Let me tell you the story. I blog with Ghost, and as most of us, I put some images in my blog.
I don't use the native way to insert images in my blog, aka:
Doing it this way is too restrictive, it doesn't allow you to add a caption or to change the image width. Instead, I write the HTML directly, and it looks like that:
<figure>
<img src="https://ghost.org/assets/logos.png" alt="Ghost Logos" width="80%"/>
<figcaption>Here come the logos</figcaption>
</figure>
And it works great! My only concern is that I have to copy/paste this all the time, which a little bit tedious.
So I was wondering if there is any way to, say, define a kind of function or macro or whatever, so that I just have to call it with some arguments (image source, width, caption), and it's automatically replaced by the HTML.
I know there are plenty of technologies under the hood of Ghost (Markdown, Handlebars, and probably much more), and that it can do a lot of magic. But I don't know ho to invoke it...
So if you're this kind of wizard and know a way to achieve that, please let me know :)
Before apps come along I don't really see this being possible within Ghost.
Until then I would suggest using some extension for the browser, either a Macro extension or something like Auto Text Expander which allows you to define your own shortcuts. You could for example use the following as an expansion for your figure-element:
Input: !!
Output:
<figure>
<img src="<!--?atec?-->" alt="">
<figcaption>Caption</figcaption>
</figure>
Related
I really wonder how such websites like https://medium.com/ (on the home page) https://qz.com divide the page according to tags or the order is like : header, some news, some articles in same shaped boxes,video, then some more content and then footer... so in one page they are able to show many things.. is that done by dividing page with HTML div tags or is there something else used ? I am a newbie trying to learn Django. I appreciate any help
I think there is more than just div-tags, but in the end it is (only) html, css and javascript that creates the visual webside on the clients' side.
Frameworks like the "960 Grid System" or Bootstraps Grid System can help you to keep content in a common order. Create templates for your CMS to achive a common design (Ahhhh: Use a CMS). Maybe use Less, Saas, etc. instead of writing plain old css-files.
Short answer: Look at their code. Of course you can't see their server-side code, but you can look at the HTML and it clearly shows that medium uses divs, while qz uses sections.
Now as to what you can use, there really isn't anything else. Simply because there isn't any need for it. You might want to add an uniform height for each of those "sections", but you don't need to.
Now to the serverside part: they certainly didn't hardcode every single section, but created a template for it. Depending on what technology they use that will look different, but it will always have
A template (often called function, template or module depending on the technology used) that has everything ready as to the HTML and CSS. This designs the layout and design of those 'sections'. It also accepts content that it will then insert into that structure.
A 'main-page' that uses that template repeatedly, but gives it different information. For Medium this might be something like: MakeStreamItem("Audio", GetFirstFourAudioItems())
I'm using Wordpress and I need to display all sorts of coding examples within these posts, such as HTML, CSS, jQuery, PHP, C++, JavaScript, XML and a few others.
I have been looking around for plugins, but all the ones I can find, you have to insert the code in a separate page, choose the programming language, then paste the shortcode within your post which seems a bit time consuming. Is there any other way of displaying code for these languages so it uses the formatting and typical colours of the programming language.
At the moment, for speed I am just posting them as follows:-
<pre>
<div class="logo logo-image">
<h3>
<a href="http://url.co.uk">
<img src="http://url.co.uk/images/03_logo-dark.png" alt="Web-Tricks Logo" />
</a>
</h3>
</div>
</pre>
Using Postable to replace the special characters so it doesn't interpret the text as HTML and doesn't display.
If anybody has a way I can improve this, a decent plugin I may have missed or whether or not this could be achieved in CSS let me know!
Thanks in advance.
Found a nice plugin in the end:-
WP Code Prettify
This plugin enable syntax highlighting of code snippets in your post using Google Code Prettify - and supports quite a load of different languages!
Also, with this plguin, you no longer have to use Postable to replace the special characters as it escapes all of this for you, so you just have to paste the code as it is.
Both template engines use {{ }} tags. I'm trying to serve an HTML file dynamically in BottlePy so that I can dynamically source javascript files, but this HTML file has Handlebars templates all over it. Any ideas on how to get around this? I've heard of this problem with other frameworks (Like Angular and Django) but I'm not sure if the same fix applies here.
Some ideas I've come up with are:
Change the tag of one of the template engines (don't know if you can with these)
Split up the HTML file into multiple parts and dynamically include them (might work but isn't my first choice)
If I could accomplish #1 that would be awesome, but after a bit of googling I'm not sure it's possible. I am open to using a template engine other than SimpleTemplate, so long as bottlepy supports it. #2 sacrifices some loading speed which is the driving force of this whole problem anyway, so I'd rather not do that if possible.
Please let me know if the problem is unclear and I can explain it better. Thanks for your time!
Good question. I haven't found a way to do precisely what you're asking, but a simple (?) alternative might be to use jinja2 (or mako) templates instead of Bottle's SimpleTemplate.
I've used jinja2 for templating with much success, and it looks like it has decent escaping to help you:
http://jinja.pocoo.org/docs/templates/#escaping
(Plus, jinja2 templates have a much richer feature set without much more complexity, so in the long run you might benefit from the switch in other ways.)
Bottle supports jinja, in which you can escape {{
Is this the easiest way in an html doc to create a link to a page that has the same name as the url?
So basically it will say:
Please click the following link:
http://test.com.
That is all I want it to say.
The code I wrote for this is as follows:
http://test.com.
Or is there a more all inclusive way where you don't have to write the name of the url twice?
Obviously my code doesnt include the initial text, this is just for example purposes.
Unless you want to copy the URL from one place to another using JavaScript, you will have to write the URL twice.
I advise agains the JavaScript copying, because its performance and SEO costs are much worse than the cost of typing everything twice.
What you have got now is the easiest way.
If it's not an option for some reason you can use server side scripting to search the page content for URLs and wrap an <a> tag around them.
This will require some very complicated regex. Daring Fireball has a very good blog post instructing you how to do this, and explaining exactly why it's actually impossible for this to be perfectly reliable (which is probably why HTML doesn't allow it):
http://daringfireball.net/2010/07/improved_regex_for_matching_urls
I've done this sort of thing before (with emails actually) and it's very difficult and took years to get right. If at all possible, you should just do what you're already doing - manually type in the <a> tag yourself.
Alternatively, you could use something like smarty (for PHP. I don't know what the ASP equivalent would be) to write something along the lines of the following, to programatically generate the full <a> tag:
{link url='http://example.com'}
Why don't we just sidestep the issue by making our links more semantically-rich?
Instead of:
For more information on our delicious pizza, visit www.pizzasrawesome.com.
Use this:
Read more about our delicious pizza.
Suppose you're developing a web site and blind users will be a significant chunk of your target market. If the web site includes document editing functionality, what would be appropriate WYSIWYM tools? Are languages like Markdown, Textile and Wiki Formatting really accessible or are they inconvenient to blind users?
I'm a blind programmer and while I haven't used most of the languages you mention I've found that any markdown language is fairly easy to use if you have the desire to learn it. I've had no problem using either HTML or several markup languages for wiki's. Part of it will depend on how invested the users are in your site. If it's a site that will be visited infrequently or for short periods of time, it's much less likely that a user will take the time to learn the required markup whether they are blind or not. Unfortunately, I have not found an accessible JavaScript WYSIWYG editor but I find it easier to manually enter the markup so haven't looked very hard.
the first question is: how important is semantic structure? could you get away with plain text. You could do simple parsing like treating blank lines as paragraph markers, treating a series of lines which begin with * as a bulleted list, identify URLs and make them into links, etc.
As a blind developer myself, I have no problem in understanding languages like Markdown. But if it's a syntax I'm unfamiliar with, I'll only learn it if I expect to use the site very often, or care deeply about the content.
Two final thoughts come to mind: while I certainly experience some accessibility challenges using TinyMCE, you could develop something much simpler - provide less than 10 formatting options, like inserting hyperlinks, making lists, centering text, setting the style (such as heading) etc.
And lastly, when I talk to non-technical blind people, they often just write their content in Word and paste into a wiki or blog post. This sounded strange when I first heard it, but it does make sense. So an ideal solution would accept pasted in content.
In closing - it depends how important this is, and how much effort you want to expend. Maybe a Markdown editor with a live preview (like on this site), buttons for inserting simple formatting like URLs, and the ability to paste in rich text would tick all boxes :-)
On a web page, the most accessible embedded text editor for blind users is one that uses standard HTML, such as a <textarea> element, with a corresponding <label> element:
<label for="editor">Enter your text here using wiki markup:</label>
<textarea id="editor"></textarea>
If a WYSIWYM tool is built using standard accessible HTML, then blind users can easily enter text into it, with full confidence that they're entering text in the right place. Then the question becomes: Which is the better markup language? They all require memorization, but some may be more intuitive than others. One way to find out which is best would be to do some usability testing with a wide variety of target users. Also be sure to providing easy, accessible access to syntax help.
Picture yourself working in pure text 80x4 display (just open a console and resize appropriately), then use vi/emacs/ed and you'll soon realize what markup will get in the way.
Try to do as much work as possible to understand plain text, else use light markup like POD, finally things like AsciiDoc are very powerful but needs training.
I don't know about WYSIWYG/WYSIWYM tools, but I do know that complying with W3C standards (especially their HTML5 en CSS3 drafts) while writing your own editor code will help a lot.
In CSS you can specify speed and intonation of speech. In HTML you can specify alternative text (alt attribute in many elements) that screen readers are compatible with. Be sure to know when to use the abbr and the acronym elements. Use the former when you want the screen reader to read the meaning of an abbreviation and the latter when the acronym should be read as a word (e.g. ASAP, NATO and OS).
For the editor itself, I recommend creating a WYSIWYG editor that uses divs and spans. Screen readers will understand easily the structure of a document. For the current line, use a text box; for every other line that's not being edited, convert the contents immediately to valid HTML.
If you find a good tool, be sure to post it here. I'm looking for one too. :-)