Difference between revisions of "Week Fourteen (MGDP2050)"

From Wiki @ Karl Jones dot com
Jump to: navigation, search
(Created page with "Lecture notes and exercises for '''Week Fourteen''' of Web Design and Development II (MGDP2050). See also Week Thirteen (MGDP2050) - Week Fifteen (MGDP2050). ==...")
 
 
(32 intermediate revisions by the same user not shown)
Line 1: Line 1:
−
Lecture notes and exercises for '''Week Fourteen''' of [[Web Design and Development II (MGDP2050)]].
+
Lecture notes for '''Week Fourteen''' of [[Web Design and Development II (MGDP2050)]].
  
−
See also [[Week Thirteen (MGDP2050)]] - [[Week Fifteen (MGDP2050)]].
+
See also [[Week Thirteen (MGDP2050)]] - [[Week Fifteen (MGDP2050)]] - [[Project (MGDP2050)]] - [[Exercises (MGDP2050)]].
  
−
== Review ==
+
== HTML and CSS ==
  
−
...
+
=== Conditional CSS ===
  
−
== Exercises: in class ==
+
[[External style sheets]] can be made conditional for [[Internet Explorer]], targeting only certain versions of Internet Explorer. 
  
−
...
+
[[External JavaScript files]] can also be made conditional.
  
−
== Exercises: for next week ==
+
See [[Conditional CSS]] and [[Conditional JavaScript]].
  
−
...
+
=== CSS frameworks ===
  
−
== Reading ==
+
When creating a [[web page]], start with [[Bootstrap framework]], or some other [[CSS framework]], or [[CSS reset]].
  
−
...
+
=== CSS grid system ===
 +
 
 +
Most [[CSS frameworks]] provide a [[Grid (graphic design)|grid]] system for [[web page layout]].
 +
 
 +
Use grids to create containers, rows, and columns.
 +
 
 +
Grids are typically implemented by adding specific classes to your [[HTML elements]].
 +
 
 +
See also [[Bootstrap grid]].
 +
 
 +
== Cross-browser compatibility ==
 +
 
 +
See [[Cross-browser compatibility]].
 +
 
 +
=== CSS reset ===
 +
 
 +
[[CSS reset]] is the practice of setting CSS styles to a baseline state, before writing custom CSS, in order to minimize browser incompatibility.
 +
 
 +
CSS frameworks such as [[Bootstrap (framework)|Bootstrap]] have CSS reset built in.
 +
 
 +
=== JavaScript libraries for compatibility ===
 +
 
 +
Various [[JavaScript libraries]] are available to help reduce browser incompatibility, including:
 +
 
 +
* [[Modernizr]]
 +
 
 +
== Text editors ==
 +
 
 +
A text editor is a tool for editing [[text files]].
 +
 
 +
=== Source code editors ===
 +
 
 +
A [[source code editor]] is a text editor which has features such as [[syntax highlighting]], which are useful for editing [[source code]].
 +
 
 +
=== HTML editors ===
 +
 
 +
An [[HTML editor]] is a [[source code editor]] which has features such as [[WYSIWYG]], which are useful for editing [[HTML]].
 +
 
 +
[[Adobe Dreamweaver]] is an HTML editor.
 +
 
 +
=== Word processors ===
 +
 
 +
Avoid using [[word processors]] such as [[Microsoft Word]] as [[HTML editors]].
 +
 
 +
Word processors typically add non-text formatting.  HTML must be text-only.
 +
 
 +
=== Popular text editors ===
 +
 
 +
* [[Atom (text editor)]]
 +
* [[Brackets (text editor)]]
 +
* [[Notepad++]]
 +
* [[Sublime Text]]
 +
 
 +
See also [[:Category:Text editors]].
 +
 
 +
== Web design generators ==
 +
 
 +
A [[web design generator]] generates [[HTML]], [[CSS]], [[JavaScript]], [[typefaces]], or other resources relating to web design.
 +
 
 +
See also [[:Category:Web design generators]].
 +
 
 +
=== Bootstrap generators ===
 +
 
 +
* [[Bootstrap generator]]
 +
** [[Pingendo]] - [[application software]], generates Bootstrap-based web pages
 +
** [http://work.smarchal.com/twbscolor/css/e74c3cc0392becf0f1ffbbbc0 Bootstrap navbar generator] - online resource, generates [[Bootstrap navigation bars]]
 +
 
 +
=== HTML Table generators ===
 +
 
 +
[[HTML tables generators]] produces [[HTML tables]].
 +
 
 +
=== Favicon generators ===
 +
 
 +
A [[Favicon generator]] produces [[favicons]].
 +
 
 +
=== SVG generators ===
 +
 
 +
A [[Scalable Vector Graphics generator]] produces [[Scalable Vector Graphics]] (SVG) images.
 +
 
 +
=== Typeface generators ===
 +
 
 +
See [[Typeface generator]].
 +
 
 +
== Favicons ==
 +
 
 +
A '''[[favicon]]''' (short for Favorite icon), also known as a shortcut icon, Web site icon, tab icon or bookmark icon, is a file containing one or more small icons, most commonly 16×16 pixels, associated with a particular [[website]] or [[web page]].
 +
 
 +
See [[Favicon]] and [[Favicon generator]].
 +
 
 +
== Freelancing, job search, etc. ==
 +
 
 +
Open discussion about jobs, searching for jobs, freelancing, etc.
 +
 
 +
See [[Learning freelancing (1)]].
 +
 
 +
== For next week ==
 +
 
 +
No new exercises.
 +
 
 +
* Work on your [[Project (MGDP2050)|project]]
 +
* Finish or improve previous [[Exercises (MGDP2050)|exercises]]
 +
 
 +
=== Final class session ===
 +
 
 +
Next week is the final class session.
 +
 
 +
It will be a short class session featuring guest lecturers.
 +
 
 +
Optional: students are free to make a presentation to the class -- non-credit, for the experience as a public speaker.
 +
 
 +
[[Category:MGDP2050 weekly pages]]

Latest revision as of 11:53, 17 May 2016

Lecture notes for Week Fourteen of Web Design and Development II (MGDP2050).

See also Week Thirteen (MGDP2050) - Week Fifteen (MGDP2050) - Project (MGDP2050) - Exercises (MGDP2050).

HTML and CSS

Conditional CSS

External style sheets can be made conditional for Internet Explorer, targeting only certain versions of Internet Explorer.

External JavaScript files can also be made conditional.

See Conditional CSS and Conditional JavaScript.

CSS frameworks

When creating a web page, start with Bootstrap framework, or some other CSS framework, or CSS reset.

CSS grid system

Most CSS frameworks provide a grid system for web page layout.

Use grids to create containers, rows, and columns.

Grids are typically implemented by adding specific classes to your HTML elements.

See also Bootstrap grid.

Cross-browser compatibility

See Cross-browser compatibility.

CSS reset

CSS reset is the practice of setting CSS styles to a baseline state, before writing custom CSS, in order to minimize browser incompatibility.

CSS frameworks such as Bootstrap have CSS reset built in.

JavaScript libraries for compatibility

Various JavaScript libraries are available to help reduce browser incompatibility, including:

Text editors

A text editor is a tool for editing text files.

Source code editors

A source code editor is a text editor which has features such as syntax highlighting, which are useful for editing source code.

HTML editors

An HTML editor is a source code editor which has features such as WYSIWYG, which are useful for editing HTML.

Adobe Dreamweaver is an HTML editor.

Word processors

Avoid using word processors such as Microsoft Word as HTML editors.

Word processors typically add non-text formatting. HTML must be text-only.

Popular text editors

See also Category:Text editors.

Web design generators

A web design generator generates HTML, CSS, JavaScript, typefaces, or other resources relating to web design.

See also Category:Web design generators.

Bootstrap generators

HTML Table generators

HTML tables generators produces HTML tables.

Favicon generators

A Favicon generator produces favicons.

SVG generators

A Scalable Vector Graphics generator produces Scalable Vector Graphics (SVG) images.

Typeface generators

See Typeface generator.

Favicons

A favicon (short for Favorite icon), also known as a shortcut icon, Web site icon, tab icon or bookmark icon, is a file containing one or more small icons, most commonly 16×16 pixels, associated with a particular website or web page.

See Favicon and Favicon generator.

Freelancing, job search, etc.

Open discussion about jobs, searching for jobs, freelancing, etc.

See Learning freelancing (1).

For next week

No new exercises.

Final class session

Next week is the final class session.

It will be a short class session featuring guest lecturers.

Optional: students are free to make a presentation to the class -- non-credit, for the experience as a public speaker.

Retrieved from "http://wiki.karljones.com/index.php?title=Week_Fourteen_(MGDP2050)&oldid=15537"