Part 2.
Browser extensions helpful for web development.
Web development add-ons are browser extensions that allow you to edit and develop your webpages from within an online framework, without having to access local files to develop HTML and CSS code, etc. They essentially let you use online files for these functions, and can presumably make for a more convenient and efficient development process, but a lot of these extensions are more for tweaking certain aspects of your webpage rather than for the bulk of the development.
Mozilla has its own Web Developer's Toolbox, with a range of development add-ons.
Greasemonkey, for instance, allows you to work from the within the Firefox browser to tweak your webpages using small sections of JavaScript code. Firebug lets you "live-edit" using a wider range of coding tools.
The Web Developer extension, created by developer Chris Pederick, adds a range of development tools for browsers including Chrome, FF and Opera.
Thursday, 23 October 2014
Sunday, 19 October 2014
Lab3. 30SEP
Part 1 (Page Layout/Tables)
1. Tags for tables
<table> Codes for the table itself.
<tr> Codes a table row.
<td> Codes a cell, and provides a way to insert text into the cell.
<caption> Gives the table a title.
2.
colspan: Allows a cell to span a specified number of columns, so you can get a cell that's longer than the default for the table you're working in (i.e., within a grid where cells will have been specified to a given length and height).
rowspan: Like above except specifies "how many down", again, within a table with default and/or pre-specified cell properties and overriding these defaults.
4. I found coding tables absolutely fine and would have no aversion to using them in my webpages, though I accept that aesthetic or convenience concerns may become evident down the line as I develop more experience in coding pages. Tables seem very convenient in terms of coding for content that is to be laid out side by side.
Part 1 (Cognition)
5. Differences between Irish and Arabic web design.
1. RTL reading:
A lot of the difficulties in Arabic web design in general, of course, arise when switching a site from English (e.g.) to Arabic version. RTL vs. LTR is an obvious consideration in this regard. This is an issue even for images, which need to be chosen keeping RTL in mind (before and after photos come to mind).
2. Language:
Unfortunately, Arabic fonts still aren't supported overly widely in web media.
3. Cultural perception:
Interestingly, according to some Arabic designers, the internet is widely viewed as a sort of interactive tv in the Arabic world, which can cause difficulties in terms of scope for producing usable sites (Flash being seen as the default development medium was cited, with the obvious difficulties this causes in conjunction with slow internet speeds).
4. Cultural differences in terms of the profession:
Freelancing is reportedly rare in Arabic web development, with little communication in terms of freelance organisations and events being the case. Clients will often go to "Western" developers, while the ideal would clearly be having experienced and trusted Arabic developers availed of for Arabic web design.
6. Metaphors.
Metaphors relate to symbolism, basically. They denote things in a non-literal, symbolic manner. A very basic and common linguistic example coming to mind is the use of terms such as "dazzling", "brilliant", or "sparkling" to describe particularly impressive performances in something. Think Messi. The player or performance isn't literally luminous, but the metaphor helps relay a concept in an evocative and readily relatable manner.
In web design, visual metaphors can be used to get ideas across quickly. The following graphic symbols, for instance:
1. Chains to denote links, often in blogging sites.
2. Colours, such as red denoting "danger" or importance. Something expiring, potential viruses, etc.
3. Again often in blogging, thumb-tacks denoting posts.
4. Exclamation marks in road sign-like triangles relating that an error has occurred.
5. Thumbs-up icons on YT to show you where/how to like a vid.
One can of course also use whatever visual imagery might relay a feel for what a brand is about.
7. Skeuomorphism vs. Flat Design.
a. Skeuomorphism is a graphic UI design genre that involves making graphic features (pictures on webpages or icons on a system desktop, e.g.) look realistic, by using textured design (such as "stitching" to give the inpression of gradients). As well as there being an aesthetic rationale for its use, some feel that it makes things clearer to the user, for example by making it more obvious what's clickable by "raising" an icon from the background.
b. Flat design is often seen as being more typography-friendly, as well as conferring a cleaner, more modern feel to UI's. One argument for the use of FD vs. SM is that people are now familiar enough with computer interfaces that icons etc. <i>are</i> now realistic everyday objects, and that they don't need contrived realism.
c. In terms of possible disadvantages of FD, it has been cited as having less personality and being less user-engaging, and that it may also make it less clear what's clickable. FD has become more popular in recent times, with a significant change towards this genre being particularly notable in Apple's most recent iOS, so perhaps usability will further increase with increasing familiarity.
1. Tags for tables
<table> Codes for the table itself.
<tr> Codes a table row.
<td> Codes a cell, and provides a way to insert text into the cell.
<caption> Gives the table a title.
2.
colspan: Allows a cell to span a specified number of columns, so you can get a cell that's longer than the default for the table you're working in (i.e., within a grid where cells will have been specified to a given length and height).
rowspan: Like above except specifies "how many down", again, within a table with default and/or pre-specified cell properties and overriding these defaults.
4. I found coding tables absolutely fine and would have no aversion to using them in my webpages, though I accept that aesthetic or convenience concerns may become evident down the line as I develop more experience in coding pages. Tables seem very convenient in terms of coding for content that is to be laid out side by side.
Part 1 (Cognition)
5. Differences between Irish and Arabic web design.
1. RTL reading:
A lot of the difficulties in Arabic web design in general, of course, arise when switching a site from English (e.g.) to Arabic version. RTL vs. LTR is an obvious consideration in this regard. This is an issue even for images, which need to be chosen keeping RTL in mind (before and after photos come to mind).
2. Language:
Unfortunately, Arabic fonts still aren't supported overly widely in web media.
3. Cultural perception:
Interestingly, according to some Arabic designers, the internet is widely viewed as a sort of interactive tv in the Arabic world, which can cause difficulties in terms of scope for producing usable sites (Flash being seen as the default development medium was cited, with the obvious difficulties this causes in conjunction with slow internet speeds).
4. Cultural differences in terms of the profession:
Freelancing is reportedly rare in Arabic web development, with little communication in terms of freelance organisations and events being the case. Clients will often go to "Western" developers, while the ideal would clearly be having experienced and trusted Arabic developers availed of for Arabic web design.
6. Metaphors.
Metaphors relate to symbolism, basically. They denote things in a non-literal, symbolic manner. A very basic and common linguistic example coming to mind is the use of terms such as "dazzling", "brilliant", or "sparkling" to describe particularly impressive performances in something. Think Messi. The player or performance isn't literally luminous, but the metaphor helps relay a concept in an evocative and readily relatable manner.
In web design, visual metaphors can be used to get ideas across quickly. The following graphic symbols, for instance:
1. Chains to denote links, often in blogging sites.
2. Colours, such as red denoting "danger" or importance. Something expiring, potential viruses, etc.
3. Again often in blogging, thumb-tacks denoting posts.
4. Exclamation marks in road sign-like triangles relating that an error has occurred.
5. Thumbs-up icons on YT to show you where/how to like a vid.
One can of course also use whatever visual imagery might relay a feel for what a brand is about.
7. Skeuomorphism vs. Flat Design.
a. Skeuomorphism is a graphic UI design genre that involves making graphic features (pictures on webpages or icons on a system desktop, e.g.) look realistic, by using textured design (such as "stitching" to give the inpression of gradients). As well as there being an aesthetic rationale for its use, some feel that it makes things clearer to the user, for example by making it more obvious what's clickable by "raising" an icon from the background.
b. Flat design is often seen as being more typography-friendly, as well as conferring a cleaner, more modern feel to UI's. One argument for the use of FD vs. SM is that people are now familiar enough with computer interfaces that icons etc. <i>are</i> now realistic everyday objects, and that they don't need contrived realism.
c. In terms of possible disadvantages of FD, it has been cited as having less personality and being less user-engaging, and that it may also make it less clear what's clickable. FD has become more popular in recent times, with a significant change towards this genre being particularly notable in Apple's most recent iOS, so perhaps usability will further increase with increasing familiarity.
Saturday, 18 October 2014
Lab1. 16SEP
Part 1.
1. The World Wide Web Consortium.
a. The W3C was created to provide an open-source platform to allow web users to share knowledge and develop applications. The consortium's vision adheres to the Open Standards Principles, which outline a long-term commitment to improvement of users' web experience and to the harnessing of the web's capabilities for the benefit of society - to which ends the W3C develops guidelines and protocols.
b. It seems that any organisation (company, NGO, etc.) can join. Annual fees vary depending on the nature and profitability of the organisation, based on factors such as a company's parent location. W3C also generates revenue via research grants and philanthropy.
As an example, membership fees in Ireland range from €1,950 to €68,000 - the latter for large, high-revenue companies. An Irish govt. agency can join for €7,800, while the equivalent figure for Malawi is €975 (though companies generating similar revenue levels seem to be held to fairly consistent fees across locations).
c. Open-source software technologies mentioned on the W3C home page include:
W3C Validator Suite:
This tool is used to evaluate the quality of websites in accordance with W3C's own standards. It can be used by developers and site managers to evaluate all publicly available pages of a given site. It performs its functions by examining the pages' source code.
CSS Validator:
This CSS validation tool, also provided by W3C, can be used to evaluate and improve websites by locating errors occurring in CSS styling sheets linked to the pages' HTML code.
HTML Slidy:
I saw this by following the link to other software from the home page, but found it quite interesting anyway. This is an online tool for creating and organising presentations, as an alternative to systems applications such as Microsoft PowerPoint. In contrast to PPt and most blogs, it seems that the presentations are created entirely using HTML code.
d.
Three people/sites to follow who could help me during this course:
1. Webdesigntuts+ @wdtuts
This provides a vast array of tutorials and guides from different sources for web design tools including html and css. The site outlay is outrageously pretty, but a lot of the stuff is as of yet a bit more professionally oriented than what I currently need.
2. Nielsen Norman Group @NNgroup
These guys are famed for emphasising usability over aesthetics (in design in general). Don Norman's background in cognitive science would especially interest me. (For the record, from my initial impressions, I doubt very much that Norman is indifferent to aesthetic considerations; rather, I'd imagine that a minimalist style that provides visual clarity for the user is his preferred format, and that it's what he sees as unnecessary visual complexity that he dislikes).
3. http://learn.shayhowe.com/html-css/
Not following this guy on Twitter per se, but the site provides a good outline through the basic principles of html and css in a visually clear manner.
I also used Codecademy prior to starting this course, though mainly for Python, and will likely refer to it for this module at some stage as well. I've also found the YT channel Charmefis pretty helpful for the fundamentals - the guy's delivery is quite ponderous and monotonous, but he explains the material in a clear and methodical manner.
4. Observations from "Mobile & Multi-Device Design: Lessons Learned" by Luke Wroblewski.
1. Wroblewski refers to Just-In-Time functions, in the context of the need to use the small screen space of mobile devices as efficiently as possible, giving the example of the Down Keyboard function, which only appears when the virtual keyboard comes up. In general, the important of ensuring that only what is relevant at any given moment is on-screen is emphasised in the ibook.
2. The concept of how vital it is not to have password-entry steps being a usability killer ("small screens, imprecise fingers being the norm", and all that). Polar took the ostensibly audacious step of having passwords readable by default and being masked by option. (Personally, I've always found the dynamic readable-to-masked approach on the ipad etc good, but can appreciate how important it is not to have even brief dips in usability with so much digital media vying for users' attention these days).
3. I was very impressed with their evident stone-turning when RW mentioned how Polar had tested for one-thumb/one-eyeball usability, citing the split-attention situation that's often the case, e.g. catching a bus. (Personally I'm still really enjoying my pre-smartphone super-texting machine - the ultimate in one-thumbed usability!)
4. Showing gradually-appearing content as it loads as opposed to a spinning wheel and then the whole thing. Users had felt it was taking longer when the latter way used even though it wasn't. An interesting observation on the inalienable influence (often irrational) human psychology will have on design.
5. "Gradual Engagement": Engaging users from the outset in terms of how to use the app, rather than instantly presenting them with the formalities of a sign-up form when they go to download. Dire drop-off and sign-up completion rates were cited as evidence of the necessity of this.
Part 3
1. Analysing sites per potential requirements of over 70's.
a. WebMD:
There doesn't seem to be an option for vision-impaired people, though the site does seem to be visually clear. The symptom-checking aspect itself might be a bit difficult for less experienced users (LEU's, why not) to locate (you'd imagine most people use the site for this rather than for general medical news).
There are quite a few ads that could masquerade as primary content for LEU's, though they generally seem down-page a good bit and it's not the most ridiculously click-baity, spammy stuff anyway I guess.
b. Book Depository:
Navigability seems very nice on this site. Seems like it'd be a 'calm', welcoming site for LEU's. Genres and categories nicely laid out. Again, not sure if there's a resize option for vision-impaired people, but I guess people with this problem will be familiar with the browser's zoom function in any case.
c. Wired:
Like BD, very clearly and intuitively laid out and not too busy. One certainly can't just assume LEU's won't be interested in visiting this site, and if they do then they know what they're looking for among the categories, one has to assume. Might start visiting this site the odd time myself actually!
2. Give an example of a website that meets the specific needs of a certain group of people, yet gives all users a better experience.
Difficult one to answer, but the bbc probably have what would be my favourite website in many ways. Their site is visually clear and basic, with everything nicely delineated, without appearing anachronistic. In specific terms of getting football updates, in contrast with busier sites like uefa.com (with their bloody "match centres loading" and what not), everything is clearly locatable; and - though it might not be a pure web dev. issue - these updates arrive very fast indeed (with "as it stands" league tables, etc.). I've also just clicked on the bbc site's Accessibility Help link (requires a small bit of scrolling, to be fair), and they've catered for a wide range of ability issues indeed.
The bbc's website covers a huge range of news areas, with in-depth analysis in each area (also, podcasts, etc). All very clearly and simply presented, with easily navigable categories. I'd be interested to know what the likes of Don Norman would think of the site actually.
5. W3 Mobile Validator analysis of sites mentioned in no. 1.
(Very interesting to read through the failure reports actually).
a. They all scored 0%
Observations: _____________________________.
b. I haven't as yet been able to find a site that ranks higher than 60%.
Is the issue not fairly unimportant for sites that market and provide mobile apps efficiently? I mean, even Google scores only 25%.
6. WebAIM analysis
To be honest, I'm not sure WebAIM's analysis of the sites always involved a very nuanced take on things (probably quite difficulty to assess accessibility automatically, to be fair). For example, a lot of the alerts for Wired didn't seem to point to anything that'd pose any inconvenience in practice. A lot of the images seemed to be "error'd" as empty links, though they worked fine and as intended in practice.
Having said that, perhaps the flagging of images for not having alternative text (which occurred across sites) is pointing out that there should be an option to have all images appear as descriptive sentences instead, which I guess could be helpful in the context of vision impairment.
I was surprised to see so many contrast errors come up, though looking at Webmd I can see how some of the text is perhaps a bit unnecessarily grey. Wired fared a lot better in this regard, as I would have predicted.
1. The World Wide Web Consortium.
a. The W3C was created to provide an open-source platform to allow web users to share knowledge and develop applications. The consortium's vision adheres to the Open Standards Principles, which outline a long-term commitment to improvement of users' web experience and to the harnessing of the web's capabilities for the benefit of society - to which ends the W3C develops guidelines and protocols.
b. It seems that any organisation (company, NGO, etc.) can join. Annual fees vary depending on the nature and profitability of the organisation, based on factors such as a company's parent location. W3C also generates revenue via research grants and philanthropy.
As an example, membership fees in Ireland range from €1,950 to €68,000 - the latter for large, high-revenue companies. An Irish govt. agency can join for €7,800, while the equivalent figure for Malawi is €975 (though companies generating similar revenue levels seem to be held to fairly consistent fees across locations).
c. Open-source software technologies mentioned on the W3C home page include:
W3C Validator Suite:
This tool is used to evaluate the quality of websites in accordance with W3C's own standards. It can be used by developers and site managers to evaluate all publicly available pages of a given site. It performs its functions by examining the pages' source code.
CSS Validator:
This CSS validation tool, also provided by W3C, can be used to evaluate and improve websites by locating errors occurring in CSS styling sheets linked to the pages' HTML code.
HTML Slidy:
I saw this by following the link to other software from the home page, but found it quite interesting anyway. This is an online tool for creating and organising presentations, as an alternative to systems applications such as Microsoft PowerPoint. In contrast to PPt and most blogs, it seems that the presentations are created entirely using HTML code.
d.
Three people/sites to follow who could help me during this course:
1. Webdesigntuts+ @wdtuts
This provides a vast array of tutorials and guides from different sources for web design tools including html and css. The site outlay is outrageously pretty, but a lot of the stuff is as of yet a bit more professionally oriented than what I currently need.
2. Nielsen Norman Group @NNgroup
These guys are famed for emphasising usability over aesthetics (in design in general). Don Norman's background in cognitive science would especially interest me. (For the record, from my initial impressions, I doubt very much that Norman is indifferent to aesthetic considerations; rather, I'd imagine that a minimalist style that provides visual clarity for the user is his preferred format, and that it's what he sees as unnecessary visual complexity that he dislikes).
3. http://learn.shayhowe.com/html-css/
Not following this guy on Twitter per se, but the site provides a good outline through the basic principles of html and css in a visually clear manner.
I also used Codecademy prior to starting this course, though mainly for Python, and will likely refer to it for this module at some stage as well. I've also found the YT channel Charmefis pretty helpful for the fundamentals - the guy's delivery is quite ponderous and monotonous, but he explains the material in a clear and methodical manner.
4. Observations from "Mobile & Multi-Device Design: Lessons Learned" by Luke Wroblewski.
1. Wroblewski refers to Just-In-Time functions, in the context of the need to use the small screen space of mobile devices as efficiently as possible, giving the example of the Down Keyboard function, which only appears when the virtual keyboard comes up. In general, the important of ensuring that only what is relevant at any given moment is on-screen is emphasised in the ibook.
2. The concept of how vital it is not to have password-entry steps being a usability killer ("small screens, imprecise fingers being the norm", and all that). Polar took the ostensibly audacious step of having passwords readable by default and being masked by option. (Personally, I've always found the dynamic readable-to-masked approach on the ipad etc good, but can appreciate how important it is not to have even brief dips in usability with so much digital media vying for users' attention these days).
3. I was very impressed with their evident stone-turning when RW mentioned how Polar had tested for one-thumb/one-eyeball usability, citing the split-attention situation that's often the case, e.g. catching a bus. (Personally I'm still really enjoying my pre-smartphone super-texting machine - the ultimate in one-thumbed usability!)
4. Showing gradually-appearing content as it loads as opposed to a spinning wheel and then the whole thing. Users had felt it was taking longer when the latter way used even though it wasn't. An interesting observation on the inalienable influence (often irrational) human psychology will have on design.
5. "Gradual Engagement": Engaging users from the outset in terms of how to use the app, rather than instantly presenting them with the formalities of a sign-up form when they go to download. Dire drop-off and sign-up completion rates were cited as evidence of the necessity of this.
Part 3
1. Analysing sites per potential requirements of over 70's.
a. WebMD:
There doesn't seem to be an option for vision-impaired people, though the site does seem to be visually clear. The symptom-checking aspect itself might be a bit difficult for less experienced users (LEU's, why not) to locate (you'd imagine most people use the site for this rather than for general medical news).
There are quite a few ads that could masquerade as primary content for LEU's, though they generally seem down-page a good bit and it's not the most ridiculously click-baity, spammy stuff anyway I guess.
b. Book Depository:
Navigability seems very nice on this site. Seems like it'd be a 'calm', welcoming site for LEU's. Genres and categories nicely laid out. Again, not sure if there's a resize option for vision-impaired people, but I guess people with this problem will be familiar with the browser's zoom function in any case.
c. Wired:
Like BD, very clearly and intuitively laid out and not too busy. One certainly can't just assume LEU's won't be interested in visiting this site, and if they do then they know what they're looking for among the categories, one has to assume. Might start visiting this site the odd time myself actually!
2. Give an example of a website that meets the specific needs of a certain group of people, yet gives all users a better experience.
Difficult one to answer, but the bbc probably have what would be my favourite website in many ways. Their site is visually clear and basic, with everything nicely delineated, without appearing anachronistic. In specific terms of getting football updates, in contrast with busier sites like uefa.com (with their bloody "match centres loading" and what not), everything is clearly locatable; and - though it might not be a pure web dev. issue - these updates arrive very fast indeed (with "as it stands" league tables, etc.). I've also just clicked on the bbc site's Accessibility Help link (requires a small bit of scrolling, to be fair), and they've catered for a wide range of ability issues indeed.
The bbc's website covers a huge range of news areas, with in-depth analysis in each area (also, podcasts, etc). All very clearly and simply presented, with easily navigable categories. I'd be interested to know what the likes of Don Norman would think of the site actually.
5. W3 Mobile Validator analysis of sites mentioned in no. 1.
(Very interesting to read through the failure reports actually).
a. They all scored 0%
Observations: _____________________________.
b. I haven't as yet been able to find a site that ranks higher than 60%.
Is the issue not fairly unimportant for sites that market and provide mobile apps efficiently? I mean, even Google scores only 25%.
6. WebAIM analysis
To be honest, I'm not sure WebAIM's analysis of the sites always involved a very nuanced take on things (probably quite difficulty to assess accessibility automatically, to be fair). For example, a lot of the alerts for Wired didn't seem to point to anything that'd pose any inconvenience in practice. A lot of the images seemed to be "error'd" as empty links, though they worked fine and as intended in practice.
Having said that, perhaps the flagging of images for not having alternative text (which occurred across sites) is pointing out that there should be an option to have all images appear as descriptive sentences instead, which I guess could be helpful in the context of vision impairment.
I was surprised to see so many contrast errors come up, though looking at Webmd I can see how some of the text is perhaps a bit unnecessarily grey. Wired fared a lot better in this regard, as I would have predicted.
Tuesday, 23 September 2014
Lab2. 23SEP
Part 1: Head of a HTML
1. <title>(Required). Codes for webpage (i.e., a html document) title as seen on browser tab. E.g., "Inbox (1,038) - whoever@gmail.com".
2. <base>
Specifies the default url for all links on a page.
3. <meta>
Provides info (metadata) about a page (author, etc.). Doesn't affect page display.
One example is the outlining of the most apt keywords for a page (this particular tag is generally used by SE's I think). E.g. = <meta name="keywords" content="Ireland News Local International" />, from IrishTimes source. This helps in terms of SE output for searches by target users.
4. <style>
Codes for layout style such as background colour. Not specific to <head>.
5. <link>
Links to external context. E.g., to icons/images stored externally to the page, feeds and online comments management software for IrishTimes. Not specific to <head>.
This tag often links to external css styling sheet files.
Can also be used to specify that SE's will direct to only one particular page even if it's accessible via more than one url.
Links also seem to code for things that appear in drop-downs when certain parts of the page are scrolled over. E.g., when the News (or Sport, etc) tab on the IT main page is scrolled to, the drop down menu that appears with different subsections and the main items.
These also enable widgets to be included.
6. <script>
" ... either contains scripting statements, or it points to an external script file through the src attribute." Presumably usually JavaScript.
7. <noscript>
" ... defines an alternate content for users that have disabled scripts in their browser or have a browser that doesn't support script."
Part 3a: SEO-related advice for developers (from reading of Google SEO Starter Guide, and general personal understanding)
1. In terms of SE output, use a relevant and catchy title - one that will be most likely to fire for terms entered by your target web users. Results will also be based on pages other than your site's main page, so use relevant terms in the titles for these pages as well.
2. Once you've got your site coming up in for relevant searches, make it more visitable (more 'click-desirable'). Meta description HTML tags (in conjunction with the "content" attribute) can be used by SE's to provide additional info below the main site title in their output.
I'm not yet too sure if meta data is what's used to get non-main site pages to also be directly clickable in search results (e.g., Contact, Services), but this is a nice feature relevant to this entry too.
3. Make your site as interesting, aesthetically-pleasing, and navigable as possible. This, for me, seems to be separate to pure SEO-related advice, but it's still of course salient advice in web development.
4. Ensure your site works on a mobile platform, both in terms of searchability and navigability. Also increase presence on social media sites and on sites like GoogleMaps.
Bonus: Where applicable, make your opening hours clearly visible! No one seems to do this!
3b. How to use above advice to improve the Fish Creek website exercise
I could use keywords in conjunction with the meta tag's keywords attribute to make sure the site is better crawled by SE's.
I could also ensure a description of the site comes up under SE results using the meta tag's content attribute.
I haven't as yet implemented these changes as I wouldn't be able to see the outcomes in a real world sense. (I'm assuming I can only see the site from the local system if the site isn't hosted etc.)
Subscribe to:
Posts (Atom)