RE: sizing a picture on a webpage
- From: "D!J!X!" <megamansuperior@xxxxxxxxxxx>
- To: <programmingblind@xxxxxxxxxxxxx>
- Date: Sat, 29 May 2010 23:28:56 -0400
I definitely agree, and reiterate, it's all about learning the languages
that you are using and how they alter/affect your content. It's not just
learning the css syntax and lanugae, it's about knowing what each of those
things does, which to use for what purpose, how to apply hacks that will
work cross browser, so on and so forth.
D!J!X!
-----Original Message-----
From: programmingblind-bounce@xxxxxxxxxxxxx
[mailto:programmingblind-bounce@xxxxxxxxxxxxx] On Behalf Of Bryan Garaventa
Sent: Saturday, May 29, 2010 6:29 PM
To: programmingblind@xxxxxxxxxxxxx
Subject: Re: sizing a picture on a webpage
Yes, it is possible for a fully blind developer to create a visually
appealing site design.
The way to do this, is to examine the live offset positioning coordinates of
each element during the design phase.
I used this method to program the new site design for GutterStar.net . For
instance, though I've never visually seen my site, I know that the left
navigation bar is 20% of the body width, and that all body content is
approximately 70%; Additionally, the body content has a left margin of 25%
to prevent the left navigation bar from overlapping the body content; The
Search link is actually within a floating box in the top right corner of the
screen, and the Top link is in a floating box in the bottom left corner,
both of which are fixed so that they are always visible regardless of
scrolling.
These are just a few examples to demonstrate the point.
When designing a visual layout for a site, I use BX to examine the offset
positioning of each element within the browser to examine the width and
height of the object, the top and left positioning relative to the width and
height of its parent element, and so on. In this manner, I construct a grid
in my mind that represents the visual viewport. For example, on a typical
standard size monitor, the viewport (meaning the portion of the page that is
currently visible) is approximately 1200 pixels in width and slightly less
than 600 pixels in height. The width values change when a wide screen
monitor is used, yet these differences can easily be dealt with by using
percentages instead of exact pixel values when configuring container
elements.
So if the view port is approximately 1200 by 600, I have an accurate
representation of the actual screen real estate at any given time for
sighted users. I can use this information to position elements at various x
y coordinates to ensure that the visual display exactly matches the element
positions within my mind.
The same technique reflects font sizing, padding, and all of the other
visual effects that can be applied using CSS.
I won't lie and say that this was easy; It took me several years of studying
HTML/XHTML, CSS, JavaScript, and JQuery before I was able to create fully
dynamic site designs that are cross-browser compatible and work correctly in
mobile devices such as the iPhone and Ipad as well, but it definitely is
possible for a blind developer to accomplish.
----- Original Message -----
From: "The Elf" <inthaneelf@xxxxxxxxxxxxxx>
To: <programmingblind@xxxxxxxxxxxxx>
Sent: Saturday, May 29, 2010 12:06 PM
Subject: Re: sizing a picture on a webpage
>I didn't keep track of him myself, he was invited to talk to one of the
>lists after a rather heated discussion between Octavian and a number of
>other persons on that list over weather or not a blind person can function
>in the website design industry.
>
> and since he does, and does it professionally as in his only source of
> income, then the answer is yes!
>
> elf
> proprietor, The Grab Bag,
> for blind computer users and programmers
> http://grabbag.alacorncomputer.com
> Owner: Alacorn Computer Enterprises
> Specialists in customized computers and peripherals
> - own the might and majesty of a Alacorn!
> www.alacorncomputer.com
>
> ----- Original Message -----
> From: "black ares" <matematicianu2003@xxxxxxxxxxx>
> To: <programmingblind@xxxxxxxxxxxxx>
> Sent: Saturday, May 29, 2010 11:24 AM
> Subject: Re: sizing a picture on a webpage
>
>
>> where is that blind who does webdesign professionaly,
>> to explain what and how!
>> :p
>> Always you must have a sighted help to be sure that all things are ok.
>>
>> ----- Original Message -----
>> From: "D!J!X!" <megamansuperior@xxxxxxxxxxx>
>> To: <programmingblind@xxxxxxxxxxxxx>
>> Sent: Saturday, May 29, 2010 9:08 PM
>> Subject: RE: sizing a picture on a webpage
>>
>>
>>> There's a hack, use em measurements, and the picutre will always resize
>>> to
>>> fit it's context, even when people resize the text which is something
>>> that
>>> for us developers is a big deal, getting the site to look the same and
>>> work
>>> the same if and when somebody resizes the page or zooms in or out.
>>> Percentages do work for this as well, because you are letting the
>>> browser do
>>> the calculating, you just have to do it right; like I explained last
>>> night,
>>> there are many things that could prevent this from working flawlessly,
>>> so
>>> you have to know how to do it...
>>>
>>> HTH, D!J!X!
>>>
>>> -----Original Message-----
>>> From: programmingblind-bounce@xxxxxxxxxxxxx
>>> [mailto:programmingblind-bounce@xxxxxxxxxxxxx] On Behalf Of Humberto
>>> Rodriguez
>>> Sent: Saturday, May 29, 2010 7:59 AM
>>> To: programmingblind@xxxxxxxxxxxxx
>>> Subject: Re: sizing a picture on a webpage
>>>
>>> I believe it refers to the picture's original size. Pictures are sized
>>> in
>>> pixels and screens could have different resolutions,, therefore you
>>> would
>>> have to know the resolution of the screen of the visitor in order to
>>> resize
>>> the image in relationship to the screen, which may be possible only
>>> using a
>>> browser-side script, such as Java Script.
>>>
>>> I am not sure that if you put the image inside a div that is a certain
>>> percentage of the screen, the image will adjust proportionally -without
>>> distortion- to it.
>>>
>>> Images sizes are something hard for us blind people to do. What I
>>> normally
>>> do to display images is to get their size with PHP and then adjust both
>>> height and width to the percentage required to make them a certain size,
>>> normally with a width of 640 and a proportionate heighth. In your case,
>>> you
>>> could make it have a width of 160 and a proportionate height and that
>>> way it
>>> would fit more or less correctly in the most common screen size of
>>> 640x480.
>>>
>>> I'd be interested in learning more about resizing images, for this is
>>> always
>>> a difficult matter.
>>>
>>> Humberto
>>>
>>> ----- Original Message -----
>>> From: "qubit" <lauraeaves@xxxxxxxxx>
>>> To: "bprogramming" <programmingblind@xxxxxxxxxxxxx>
>>> Cc: "bwebbers" <blindwebbers@xxxxxxxxxxxxxxx>
>>> Sent: Friday, May 28, 2010 11:41 PM
>>> Subject: sizing a picture on a webpage
>>>
>>>
>>> | Hi all --
>>> | I asked this on blindwebbers but no one who knows the answer seems to
>>> be
>>> | online there tonight. I am putting up my personal webpage and want to
>>> put
>>> a
>>> | picture on it so that it is sized to fit in a space that occupies 24%
>>> ov
>>> the
>>> | width of the screen. I read about the css and xhtml for images and
>>> still
>>> | can't find anywhere that says what the % means when used in the
>>> context of
>>> | the height or width of a picture. If I say
>>> |
>>> | <img src="whatever.jpg" height="90" width="110">
>>> |
>>> | I assume the numbers refer to pixels, as according to the spec, it can
>>> be
>>> | either pixels or percent. But if I say width="20%" -- what am I
>>> saying?
>>> Does
>>> | that mean 20% of the whole screen? or the immediately enclosing div?
>>> or
>>> 25%
>>> | the picture's normal size?
>>> |
>>> | The docs tell you to experiment, which is fine if you can see the
>>> outcome.
>>> | I'm trying to do this without sighted help.
>>> | So does anyone have an answer?
>>> | And how do I determine the normal size of this picture?
>>> |
>>> | TIA and happy holidays.
>>> | --le
>>> |
>>> |
>>> | __________
>>> | View the list's information and change your settings at
>>> | //www.freelists.org/list/programmingblind
>>> |
>>> |
>>>
>>> __________
>>> View the list's information and change your settings at
>>> //www.freelists.org/list/programmingblind
>>>
>>>
>>> __________
>>> View the list's information and change your settings at
>>> //www.freelists.org/list/programmingblind
>>>
>>
>> __________
>> View the list's information and change your settings at
>> //www.freelists.org/list/programmingblind
>>
>
> __________
> View the list's information and change your settings at
> //www.freelists.org/list/programmingblind
>
__________
View the list's information and change your settings at
//www.freelists.org/list/programmingblind
__________
View the list's information and change your settings at
//www.freelists.org/list/programmingblind
Other related posts:
