Courses/all-in-one publishing - Revision history

Lucia Dossin: /* Suggestions for making it responsive */

2015-06-24T12:34:29Z

Suggestions for making it responsive

← Older revision		Revision as of 12:34, 24 June 2015
Line 61:		Line 61:
	* Test on several real devices! Browsers may be able to imitate the looks of mobile devices, but how it actually ‘feels’ may be very different!		* Test on several real devices! Browsers may be able to imitate the looks of mobile devices, but how it actually ‘feels’ may be very different!

	~~A preview of the website can be found here: [http://headroom.pzwart.wdka.hro.nl/~ldossin/all-in-one-publishing/]~~		== Output previews ==

	~~A preview of the epub can be found here~~: [[file:all-in-one-publishing-epub.zip]]		{\| class="wikitable"
			\|+ All-in-one Publishing
	~~A preview of the pdf can be found here:~~ [[file:all-in-one-publishing-pdf.pdf]]		\|-
			\|WEBSITE
			\|EPUB
			\|PRINCE pdf
			\|WEASYPRINT pdf
			\|-
			\|[http://headroom.pzwart.wdka.hro.nl/~ldossin/all-in-one-publishing/ VISIT]
			\|[[file:all-in-one-publishing-epub.zip]]
			\|[[file:all-in-one-publishing-pdf.pdf]]
			\|[[File:Weasybook_final.pdf]]
			\|}

Lucia Dossin: /* Suggestions for making it responsive */

2015-06-24T11:16:42Z

Suggestions for making it responsive

← Older revision		Revision as of 11:16, 24 June 2015
Line 51:		Line 51:
	== Suggestions for making it responsive ==		== Suggestions for making it responsive ==

	* Set the default viewport (<meta name="viewport" content="width=device-width, initial-scale=1.0" />		* Set the default viewport (<meta name="viewport" content="width=device-width, initial-scale=1.0" /> )
	* Add media queries for several widths, test at what width your design breaks.		* Add media queries for several widths, test at what width your design breaks.
	* Use a browser with device emulation for testing (Chrome for example)		* Use a browser with device emulation for testing (Chrome for example)

Lucia Dossin at 12:05, 19 June 2015

2015-06-19T12:05:23Z

← Older revision		Revision as of 12:05, 19 June 2015
Line 61:		Line 61:
	* Test on several real devices! Browsers may be able to imitate the looks of mobile devices, but how it actually ‘feels’ may be very different!		* Test on several real devices! Browsers may be able to imitate the looks of mobile devices, but how it actually ‘feels’ may be very different!

	A preview of the website can be found here: [http://~~student~~.hro.nl/~~0880506~~/all-in-one-publishing]		A preview of the website can be found here: [http://headroom.pzwart.wdka.hro.nl/~ldossin/all-in-one-publishing/]

	A preview of the epub can be found here: [[file:all-in-one-publishing-epub.zip]]		A preview of the epub can be found here: [[file:all-in-one-publishing-epub.zip]]

	A preview of the pdf can be found here: [[file:all-in-one-publishing-pdf.pdf]]		A preview of the pdf can be found here: [[file:all-in-one-publishing-pdf.pdf]]

Arjensuijker at 07:49, 5 June 2015

2015-06-05T07:49:01Z

← Older revision		Revision as of 07:49, 5 June 2015
Line 24:		Line 24:

	* Recognize and utilize each medium’s unique aesthetics and features		* Recognize and utilize each medium’s unique aesthetics and features
	* The different outputs ~~can~~ complement each other ~~instead of competing~~		* The different outputs should complement each other, not compete

	== Semantic HTML ==		== Semantic HTML ==

Arjensuijker at 07:37, 5 June 2015

2015-06-05T07:37:27Z

← Older revision		Revision as of 07:37, 5 June 2015
Line 49:		Line 49:
	* Add interactive elements like tooltip footnotes <- be creative!		* Add interactive elements like tooltip footnotes <- be creative!

	== Suggestions for ~~the~~ responsive ~~website~~ ==		== Suggestions for making it responsive ==

	* Set the default viewport (<meta name="viewport" content="width=device-width, initial-scale=1.0" />		* Set the default viewport (<meta name="viewport" content="width=device-width, initial-scale=1.0" />

Arjensuijker at 07:30, 5 June 2015

2015-06-05T07:30:49Z

← Older revision		Revision as of 07:30, 5 June 2015
Line 30:		Line 30:
	After the intro we take a look at what we made, just to show what can be done. After this, the focus is on semantic HTML. Our first order of business is to introduce semantic html and why we need it. HTML tags should indicate structure, not mark-up! We could even say that the name shouldn't be HyperText Markup Language, but rather HyperText Structure Language.		After the intro we take a look at what we made, just to show what can be done. After this, the focus is on semantic HTML. Our first order of business is to introduce semantic html and why we need it. HTML tags should indicate structure, not mark-up! We could even say that the name shouldn't be HyperText Markup Language, but rather HyperText Structure Language.

	=== The basic advantages of semantic html: ===		=== The basic advantages of semantic html ===

	* It looks cleaner, which makes working with it easier.		* It looks cleaner, which makes working with it easier (especially as a team).
	* ~~Screen~~ readers and similar devices for people with disabilities ~~work much better~~		* It works much better for screen readers and similar devices for people with disabilities
	* ~~You'll rank~~ higher in search engines		* It ranks higher in search engines
	* ~~Your HTML is~~ much easier to restyle or use for different purposes		* It makes your content much easier to restyle or use for different purposes

	== Suggestions for the ‘regular’ website ==		== Suggestions for the ‘regular’ website ==

Arjensuijker at 07:25, 5 June 2015

2015-06-05T07:25:13Z

← Older revision		Revision as of 07:25, 5 June 2015
Line 28:		Line 28:
	== Semantic HTML ==		== Semantic HTML ==

	~~All credits for this chapter go to [http://webdesignfromscratch.com/html-css/free-semantic-html-ebook/ Ben Hunt]~~		After the intro we take a look at what we made, just to show what can be done. After this, the focus is on semantic HTML. Our first order of business is to introduce semantic html and why we need it. HTML tags should indicate structure, not mark-up! We could even say that the name shouldn't be HyperText Markup Language, but rather HyperText Structure Language.

	After the intro we take a look at what we made, just to show what can be done. After this, the focus is on semantic HTML. ~~First~~ order of business is to introduce semantic html and why we need it. HTML tags should indicate structure, not mark-up! ~~The~~ name ~~should really not~~ be HyperText Markup Language, but rather HyperText Structure Language.

	=== The basic advantages of semantic html: ===		=== The basic advantages of semantic html: ===

	* ~~Ease of use~~		* It looks cleaner, which makes working with it easier.
	* ~~Accessibility~~		* Screen readers and similar devices for people with disabilities work much better
	* ~~Search Engine Optimisation~~		* You'll rank higher in search engines
	* ~~Repurposing~~		* Your HTML is much easier to restyle or use for different purposes

	~~==== Ease of use ====~~

	~~First of all, semantic~~ HTML is ~~clean HTML. It’s~~ much easier to ~~read and edit markup that’s not littered with extra tags and inline styling. A corollary benefit is that your HTML files are also smaller, so they load quicker.~~

	~~==== Accessibility ====~~

	Unless you’ve had to interact with HTML markup through media other than your web browser, it doesn’t seem obvious to imagine that your web pages have a life outside the browser window, but they very often do. Web pages can be consumed by humans and machines in lots of different ways! When you separate visual aspects (i.e. style) from the actual meaning of a document, you end up with a document that always means the same thing. The way it’s presented or ~~consumed can vary. One common technique web designers~~ use ~~is to apply different style sheets~~ for different media. For example, you can apply a certain stylesheet only when a document is printed to paper, another one when it’s viewed on screen, and yet another when it’s accessed by a text-to-speech aural browser.

	~~==== Search Engine Optimisation ====~~

	The pages will be easier to be found in search engines. They are much easier to understand for machines, because machines read structure, not markup. Also, your pages are lighter which makes them easier to digest.

	~~==== Repurposing ====~~

	Clearly, it’s easier to grab and re-use content from any source, and apply it to any medium, when it does not contain any hard-coded style information, and also when it does contain semantic markup that can help a computer program understand the meaning and structure of the content.



	== Suggestions for the ‘regular’ website ==		== Suggestions for the ‘regular’ website ==

Arjensuijker at 07:14, 5 June 2015

2015-06-05T07:14:13Z

← Older revision		Revision as of 07:14, 5 June 2015
Line 29:		Line 29:

	All credits for this chapter go to [http://webdesignfromscratch.com/html-css/free-semantic-html-ebook/ Ben Hunt]		All credits for this chapter go to [http://webdesignfromscratch.com/html-css/free-semantic-html-ebook/ Ben Hunt]

	After the intro we take a look at what we made, just to show what can be done. After this, the focus is on semantic HTML. First order of business is to introduce semantic html and why we need it. HTML tags should indicate structure, not mark-up! The name should really not be HyperText Markup Language, but rather HyperText Structure Language.		After the intro we take a look at what we made, just to show what can be done. After this, the focus is on semantic HTML. First order of business is to introduce semantic html and why we need it. HTML tags should indicate structure, not mark-up! The name should really not be HyperText Markup Language, but rather HyperText Structure Language.

Arjensuijker at 07:13, 5 June 2015

2015-06-05T07:13:49Z

← Older revision		Revision as of 07:13, 5 June 2015
Line 28:		Line 28:
	== Semantic HTML ==		== Semantic HTML ==

			All credits for this chapter go to [http://webdesignfromscratch.com/html-css/free-semantic-html-ebook/ Ben Hunt]
	After the intro we take a look at what we made, just to show what can be done. After this, the focus is on semantic HTML. First order of business is to introduce semantic html and why we need it. HTML tags should indicate structure, not mark-up! The name should really not be HyperText Markup Language, but rather HyperText Structure Language.		After the intro we take a look at what we made, just to show what can be done. After this, the focus is on semantic HTML. First order of business is to introduce semantic html and why we need it. HTML tags should indicate structure, not mark-up! The name should really not be HyperText Markup Language, but rather HyperText Structure Language.

Line 53:		Line 54:
	Clearly, it’s easier to grab and re-use content from any source, and apply it to any medium, when it does not contain any hard-coded style information, and also when it does contain semantic markup that can help a computer program understand the meaning and structure of the content.		Clearly, it’s easier to grab and re-use content from any source, and apply it to any medium, when it does not contain any hard-coded style information, and also when it does contain semantic markup that can help a computer program understand the meaning and structure of the content.

	~~Original text found on [[http://webdesignfromscratch.com/html-css/free-semantic-html-ebook/]]~~

	== Suggestions for the ‘regular’ website ==		== Suggestions for the ‘regular’ website ==

Arjensuijker at 07:06, 5 June 2015

2015-06-05T07:06:36Z

← Older revision		Revision as of 07:06, 5 June 2015
Line 52:		Line 52:

	Clearly, it’s easier to grab and re-use content from any source, and apply it to any medium, when it does not contain any hard-coded style information, and also when it does contain semantic markup that can help a computer program understand the meaning and structure of the content.		Clearly, it’s easier to grab and re-use content from any source, and apply it to any medium, when it does not contain any hard-coded style information, and also when it does contain semantic markup that can help a computer program understand the meaning and structure of the content.

			Original text found on [[http://webdesignfromscratch.com/html-css/free-semantic-html-ebook/]]

	== Suggestions for the ‘regular’ website ==		== Suggestions for the ‘regular’ website ==