RE: [WSG] Today's Google home page (1 May)
Hi Grant!
This was a brilliant Google logo...as usual.
However, the technologies, though awesomely implemented, are not that new.
It's plain HTML for the structure, CSS for the display and effects and
Javascript for the interaction.
Oh, and the four animations that only show on the magnifying glass are plain
old animated .gifs (you gotta love this ;) )
This is the HTML code:
div id=lga style=height:171px;padding-top:22px
style
#hplogo{background:url(logos/2011/worldsfair11-hp.jpg) top left
no-repeat;cursor:pointer;height:168px;width:421px}#hplogot{-webkit-box-shado
w:5px 5px 10px #ddd;-moz-box-shadow:5px 5px 10px #ddd;box-shadow:5px 5px
10px #ddd;-webkit-transition:opacity 0.5s ease-out;-moz-transition:opacity
0.5s ease-out;-o-transition:opacity 0.5s ease-out;transition:opacity 0.5s
ease-out;background-color:#ca;border:1px solid
#b5b5b5;display:none;font:normal 10pt arial,sans-serif;opacity:0;padding:1px
3px;position:absolute;white-space:nowrap}#loupe{-webkit-transform:scale(.25)
rotateZ(0);-moz-transform:scale(.25)
rotateZ(0);-webkit-transition-delay:200ms, 0;-moz-transition-delay:200ms,
0;-webkit-transition:opacity 400ms, -webkit-transform
400ms;-moz-transition:opacity 400ms, -moz-transform
400ms;-webkit-user-select:none;-moz-user-select:none;user-select:none;opacit
y:0;overflow:hidden;position:absolute;visibility:hidden;z-index:2000}#loupe.
visible{-webkit-transform:scale(1) rotateZ(0);-moz-transform:scale(1)
rotateZ(0);-webkit-transition-delay:0, 100ms;-moz-transition-delay:0,
100ms;-webkit-transition:opacity 400ms, -webkit-transform
400ms;-moz-transition:opacity 400ms, -moz-transform
400ms;cursor:none;opacity:1}.loupe-canvas{background:white;overflow:hidden;p
osition:absolute;z-index:3000}.loupe-canvas
div{height:503px;left:0;position:absolute;top:0;width:1263px}.loupe-canvas
img{position:absolute}#loupe-canvas-top{height:19px;left:51px;top:22px;width
:100px}#loupe-canvas-mid{height:119px;left:23px;top:41px;width:155px}#loupe-
canvas-bottom{height:18px;left:51px;top:159px;width:100px}.hplogoh{height:50
3px;left:0;top:0;width:1263px;z-index:4000}.hplogoc{height:38px;left:440px;t
op:273px;width:38px;z-index:5000}.hplogod{height:48px;left:1108px;top:353px;
width:34px;z-index:5000}.hplogof{height:167px;left:519px;top:250px;width:132
px;z-index:5000}.hplogos{height:51px;left:122px;top:236px;width:51px;z-index
:5000}
/style
div id=hplogo
div id=loupe class= style=margin-left: -100px; margin-top: -100px;
width: 200px; height: 200px; visibility: visible; left: 372px; top: 177px;
div id=loupe-canvas-mid class=loupe-canvas
div style=left: 92px; top: -268px;
img class=hplogoc src=logos/2011/worldsfair11-hp-1.gif
img class=hplogod src=logos/2011/worldsfair11-hp-2.gif
img class=hplogof src=logos/2011/worldsfair11-hp-3.gif
img class=hplogos src=logos/2011/worldsfair11-hp-4.gif
img class=hplogoh src=logos/2011/worldsfair11-hr.jpg
/div
/div
div id=loupe-canvas-top class=loupe-canvas
div style=left: 64px; top: -249px;
img class=hplogoc src=logos/2011/worldsfair11-hp-1.gif
img class=hplogod src=logos/2011/worldsfair11-hp-2.gif
img class=hplogof src=logos/2011/worldsfair11-hp-3.gif
img class=hplogos src=logos/2011/worldsfair11-hp-4.gif
img class=hplogoh src=logos/2011/worldsfair11-hr.jpg
/div
/div
div id=loupe-canvas-bottom class=loupe-canvas
div style=left: 64px; top: -386px;
img class=hplogoc src=logos/2011/worldsfair11-hp-1.gif
img class=hplogod src=logos/2011/worldsfair11-hp-2.gif
img class=hplogof src=logos/2011/worldsfair11-hp-3.gif
img class=hplogos src=logos/2011/worldsfair11-hp-4.gif
img class=hplogoh src=logos/2011/worldsfair11-hr.jpg
/div
/div
img
style=height:200px;left:0;position:absolute;top:0;width:200px;z-index:6000
src=logos/2011/worldsfair11-hp.png
/div
div id=hplogot style=display: block; opacity: 0;160-årsjubileet av den
första Världsutställningen/div
/div
script
(function(){try{if(!google.doodle)google.doodle={};var
d=[webkitTransition,MozTransition,OTransition,transition],f,g=null,h
=!1,i=!1,j=!1,k=!0,l=!1,m,n,o,p,q,r,s,t,u=!1,v=!1,w=function(a,b,c){a.remove
EventListener?a.removeEventListener(b,c,!1):a.detachEvent(on+b,c)},x=funct
ion(a,b,c){if(!google.doodle.a)google.doodle.a=[];google.doodle.a.push(argum
ents);var
e=a,C=b,D=c;e.addEventListener?e.addEventListener(C,D,!1):e.attachEvent(on
+C,D)},y=function(){h=ki;p.className=h?visible:;if(!u)p.style.visibili
ty=h?visible:hidden;var
a=ji;if(a)t.style.left=m+289+px,t.style.top=n+10+px;v?t.style.opacity=
a?1:0:t.style.display=a?block:none},z=function(a,b){var
c=a-m,e=b-n;i=c-10e-10c 431e
167;if(ki)p.style.left=a-(l?100:0)+px,p.style.top=b+px,c=-(c*3-100),e=
-(e*3-100),r.style.left=c-23+px,r.style.top=e-41+px,q.style.left=c-51+p
x,q.style.top=e-22+px,s.style.left=c-51+px,s.style.top=e-159+px;y()},
B=function(a){f=[(a.clientX||a.targetTouchesa.targetTouches[0].clientX||0)
+(document.body.scrollLeft||document.documentElement.scrollLeft||0),(a.clien
tY||a.targetTouchesa.targetTouches[0].clientY||0)+(document.body.scrollTop
RE: [WSG] HELP WITH SETTING UP A CMS PROJECT
Hi Mark, In a normal state I would probably second your thoughts, but Marvin is NO spammer. Hes a blind coder, so its very probably that he didnt notice he was writing in Caps. Hes also been working on the Star Trek project for quite a while and besides, hes quite active on this list. So before assuming the obvious search for the user and youll see that hes no spammer. Cheers Raul _ De: li...@webstandardsgroup.org [mailto:li...@webstandardsgroup.org] En nombre de Mark Host Enviado el: miércoles, 15 de septiembre de 2010 18:31 Para: wsg@webstandardsgroup.org Asunto: Re: [WSG] HELP WITH SETTING UP A CMS PROJECT Does nobody see that this email is spam? The email makes no sense. Why would someone write a formal document for a star trek site they are writing themselves? Here's your first tip starvin Marvin. TURN CAPS LOCK OFF. -- Mark Host On 9/15/2010 7:42 AM, Marvin Hunkin wrote: HI. THINKING ABOUT REWRITING MY STAR TREK SITE AND THINKING ABOUT USING A CMS. LIKE JOOMLA, WORD PRESS, AND DROOPLE 7 WHEN IT COMES OUT. SO DOWNLOADED WAMP SERVER 2, AND GOT JOOMLA. BUT HAVING A BIT OF TROUBLE SETTING IT UP WITH JAWS. ANY ONE HAD EXPERIENCE WITH A CMS SYSTEM. AND WHAT DO I NEED TO SET IT UP. WILL BE WRITING A FORMAL REQUIREMENTS DOCUMENT OF THE PROJECT, AND THE TECHNICAL SPECIFICATIONS AND OUTLINING WHAT I WANT FOR THE PROJECT. THEN WHICH TOOL TO USE FOR THIS PROJECT. SO NO NEED TO BANG MY HEAD FOR CODING, USING SQL, AND GOT STUCK WITH THE CURRENT PROJECT. GOT WRITERS BLOCK, OR CODERS BLOCK. SO WAS THINKING OF MAYBE GOING WITH THIS APPORACH. IF ANY ONE HAS DONE THIS BEFORE. SO DO I JUST THEN TAKE MY TEXT, LINKS, AND MAYBE SET OUT WHAT NAVIGATION I WILL USE. ETC. ANY HELP WOULD BE GRATEFULLY APPRECIATED. MARVIN. PS: A LBIND COMPUTER USER, USING THE JAWS FOR WINDOWS SCREEN READER FROM HTTP://WWW.FREEDOMSCIENTIFIC.COM *** List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm Help: memberh...@webstandardsgroup.org *** *** List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm Help: memberh...@webstandardsgroup.org *** *** List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm Help: memberh...@webstandardsgroup.org ***
RE: [WSG] skip links
I've been always under the impression that sighted users surfing with a keyboard, have it easier to realize if there's a Skip Navigation link (since nothing gets on focus) and it's easier for them to navigate with tab key, so it's not such a burden. I mean, suffering the navigation on a screen reader on every page is painful, but a sighted user can work himself better on the page with a keyboard. That's why I always put a div with the skip to links on top of the document and then move them to the left off the site. Keyboards find them first (though they don't show) and screen readers see them. It's better not to make Skip to navigation visible, since most users won't understand what's that for, and on many cases, they won't even realize what's happening, since the page won't change if you click on it. Anyway, my 2c ;) Cheers Raul www.raulferrer.com http://www.raulferrer.com/ webdesign development _ De: li...@webstandardsgroup.org [mailto:li...@webstandardsgroup.org] En nombre de Steve Green Enviado el: jueves, 29 de octubre de 2009 2:17 Para: wsg@webstandardsgroup.org Asunto: RE: [WSG] skip links Understood. I was addressing the common misconception that skip links are only for screen reader users. Bob may have had a reason for phrasing the question the way he did, but it probably should have been phrased differently. _ From: li...@webstandardsgroup.org [mailto:li...@webstandardsgroup.org] On Behalf Of Mark Huppert Sent: 29 October 2009 00:19 To: wsg@webstandardsgroup.org Subject: RE: [WSG] skip links Thanks for that Steve - but I was trying answer the question: Can anyone point me to the best way of providing a 'skip nav' procedure which is invisible to sighted readers regards Mark _ From: li...@webstandardsgroup.org [mailto:li...@webstandardsgroup.org] On Behalf Of Steve Green Sent: Thursday, 29 October 2009 11:01 AM To: wsg@webstandardsgroup.org Subject: RE: [WSG] skip links A 1-pixel image works for screen reader users but it is no use for sighted people who use keyboard navigation. _ From: li...@webstandardsgroup.org [mailto:li...@webstandardsgroup.org] On Behalf Of Mark Huppert Sent: 28 October 2009 23:37 To: wsg@webstandardsgroup.org Subject: RE: [WSG] skip links spot the typo regards Mark _ From: li...@webstandardsgroup.org [mailto:li...@webstandardsgroup.org] On Behalf Of Mark Huppert Sent: Thursday, 29 October 2009 10:34 AM To: wsg@webstandardsgroup.org Subject: RE: [WSG] skip links Steve One way to do it is make a transparent gif of 1px x 1px. Then embed that in your link with no text. Have an ALT or a TITLE with 'skip navigation' a href=#top img title=Skip navigation alt=Skip navigation src=/screens/dot/gif //a regards Mark Mark Huppert Library Systems and Web Coordinator Division of Information R.G. Menzies Building (#2) The Australian National University ACTON ACT 0200 T: +61 02 6125 2752 F: +61 02 6125 4063 W: http://anulib.anu.edu.au/about/ CRICOS Provider #00120C _ From: li...@webstandardsgroup.org [mailto:li...@webstandardsgroup.org] On Behalf Of Steve Green Sent: Thursday, 29 October 2009 12:52 AM To: wsg@webstandardsgroup.org Subject: RE: [WSG] skip links I always point people to http://blackwidows.co.uk/. The links are accessible to screen readers and are displayed when they have focus so they are accessible to sighted users who use keyboard navigation. _ From: li...@webstandardsgroup.org [mailto:li...@webstandardsgroup.org] On Behalf Of designer Sent: 28 October 2009 13:37 To: wsg@webstandardsgroup.org Subject: [WSG] skip links Can anyone point me to the best way of providing a 'skip nav' procedure which is invisible to sighted readers but is picked up by screen readers? It seems a can of worms - I've searched and read about it, but (of course) it is impossible to find out which way is recommended by real world web designers who have actually used a bullet-proof approach. I'd be really grateful . . . Thanks, Bob *** List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm Help: memberh...@webstandardsgroup.org *** *** List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm Help: memberh...@webstandardsgroup.org *** *** List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm Help:
RE: [WSG] Online shop package recommendations please.
I wanted to point out that Zencart is NOT a table based HTML. Yes, theres a lot of old templates that use tables, but theres lot of templates that are fully css driven, and obviously if you create your own (as I did) youre not restricted at all. The learning curve (to have it beautiful and shiny) is a bit steep, but shouldnt take to much effort to set up a simple webshop. Cheers Raul _ De: li...@webstandardsgroup.org [mailto:li...@webstandardsgroup.org] En nombre de ja...@flexewebs.com Enviado el: sábado, 17 de octubre de 2009 23:14 Para: wsg@webstandardsgroup.org Asunto: Re: [WSG] Online shop package recommendations please. Magento isn't easy but it is probably most flexible from UI perspective compared to zencart (table based HTML) and jshop (also table based HTML), so theoretically it is easier to knock up templates for Magento than other two. I used both zencart and jshop and they are a pain to work with visually speaking. Sent from my BlackBerry® wireless device _ From: Frederick Matzen frederic...@gmail.com Date: Sat, 17 Oct 2009 15:01:05 -0600 To: wsg@webstandardsgroup.org Subject: Re: [WSG] Online shop package recommendations please. Magento is great but has a high learning curve and not a lot of template options, free or commercial, at this point. If you need a very full featured cart, I'd use it anyway. If you need a basic cart use Zencart. If you only have a couple of items I'd use Paypal buttons. Frederick On Sat, Oct 17, 2009 at 2:47 PM, ja...@flexewebs.com wrote: Magento is an option also possibly Sent from my BlackBerry® wireless device _ From: hed...@digitalessence.net hed...@digitalessence.net Date: Sat, 17 Oct 2009 21:34:16 +0100 To: wsg@webstandardsgroup.org Subject: [WSG] Online shop package recommendations please. Hi, I'm in the process of quoting a few ecommerce packages/websites and currently looking at opencart (for a free and non supported solution) and JShop for a more pro supported version. Does anyone have any packages that they recommend? http://www.opencart.com/ http://www.jshop.co.uk/index I'm not requiring bar codes or EPOS integration so need to keep it simple. thanks. Hedley Phillips Digital Essence T: 01306 627 128 M: 07940 508 417 E: hed...@digitalessence.net *** List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm Help: memberh...@webstandardsgroup.org *** *** List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm Help: memberh...@webstandardsgroup.org *** *** List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm Help: memberh...@webstandardsgroup.org *** *** List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm Help: memberh...@webstandardsgroup.org *** *** List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm Help: memberh...@webstandardsgroup.org ***
RE: [WSG] My Site
Hi there! I have experience building sites for blind people, but have absolutely no idea how a blind person builds a website. As for your website, the first thing I'd do is reduce the image of the mango because that's 3264 x 2448 pixels worth of mango and it's way too much. Secondly I'd try to get rid of all tables for the code. I don't know if you're using a program or you're coding by hand, but screen reader don't deal perfectly (and even less equally) with tables, so it'd be a great idea to try using XHTML and CSS for presentational purposes. And finally, colorwise, you should think of changing the links colors, because you have green over green and it doesn't validate the AAA WCAG2 specification. Other than that, it should be fine. Congrats, 'cause I can't believe I could do any of this without my vision. Cheers Raul -Mensaje original- De: li...@webstandardsgroup.org [mailto:li...@webstandardsgroup.org] En nombre de Marvin Hunkin Enviado el: miércoles, 07 de octubre de 2009 14:06 Para: wsg@webstandardsgroup.org Asunto: [WSG] My Site my site still errorshi. take a look at http://startrekcafe.alacorncomputer.com still errors. and okay will go and download the vision australia color tester and see what colors they say for the background. okay will go and vallidate the hoem page. did fix the table reading problem. it was the screen reader table setting for ie, which was giving me grief on the home page. did not set my table layout settings to screen layout. now the table reads fine. and also what other changes i should make to make this a slicker site. any good, bad or ugly feedback would be fine and making final changes. I am blind and use a screen reader, and want this to be tarted for blind and sighted users. looking forward to your feedback. cheers Marvin. *** List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm Help: memberh...@webstandardsgroup.org *** *** List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm Help: memberh...@webstandardsgroup.org ***
RE: [WSG] CSS list-style
Hi Rich,
You can always get rid of the list-style-type and add the disc as an image
in whichever color you want.
I think that on CSS2.1 the disc (or letters or numbers for that matter) will
always be the same color of the list element or as you say, having to add a
span, which is ugly.
Cheers
Raul
_
De: li...@webstandardsgroup.org [mailto:li...@webstandardsgroup.org] En
nombre de Richard Mather
Enviado el: martes, 06 de octubre de 2009 19:48
Para: wsg
Asunto: [WSG] CSS list-style
Hi all,
I'm wondering about colouring bullet points in a ul and wanted to know if
there was a way of having the list-style: a different colour to the text
within the li without having to resort to putting it all within a span
as per my example:
ul
lispancontent/span/li
/ul
ul {
color:#380;
list-style-type:disc;
}
ul li span {
color:#000;
}
Many thanks
Rich
***
List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm
Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm
Help: memberh...@webstandardsgroup.org
***
***
List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm
Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm
Help: memberh...@webstandardsgroup.org
***
[WSG] new site review
Hi guys! It's been quite a long time since I last contributed to this list but I've been busy making my own website. It's built on Expression Engine (my first one with this CMS) and I'd really would like to know what you guys think. http://www.raulferrer.com Things to keep in mind: the portfolio and services are there but they're not completely finished, 'cause I want to develop each service and each client more deeply. Other than that is more or less done. I'm working on the multiple languages (it's going to be in 5 languages), so it's still needs some work to do. Thanks in advance! Cheers Raul PD: I've tested it with FF2 FF3, IE6, 7 8, Opera 9, Safari 4 and Chrome 3. *** List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm Help: memberh...@webstandardsgroup.org ***
[WSG] RE: new site review
Hi guys! Thanks for your comments! @Sarah: Thanks :) That's really nice to hear, and yes, I wanted to put more thinking on the text so that it would look a bit friendly yet not too geeky :P @Chris: Thanks, it's great to get some criticism. However, it's the first time I get a reply on problems with readability. Could you please tell me if there's some specific text (grey, blue or brown?) that's unreadable? Also could you tell me which platform and browser were you using (I'm really interested on this...) @Rick: Thanks a lot! Both for comments and testing on a CRT monitor (I no longer can test on those and that's a pity). I had a home link on the menu but dropped it because it looked way too crammed. And since the home doesn't hold much more info I thought I'd just leave the logo link. @Danny: that might be a semantic problem. I'm not a native English speaker, so to me it makes sense to bring to life because that's a noun, while live it's the verb, but if you say it's the other way round, I'll change that :) @Elliot! Nice program. I didn't know about it. I normally use a few other tools and then the Total Validator to comply with the WCAG2.0 (AAA) standard. I already used it and yay, it validates the contrast of both background and three colors and passes all except for the brown headings...so I'll have to look into that, too. Thanks a lot. Thanks guys. I welcome other to pinpoint other errors (nice comments accepted, too ;) ) Cheers Raul *** List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm Help: memberh...@webstandardsgroup.org ***
