Re: sizing a picture on a webpage

  • From: "black ares" <matematicianu2003@xxxxxxxxxxx>
  • To: <programmingblind@xxxxxxxxxxxxx>
  • Date: Sun, 30 May 2010 13:54:11 +0300

gradient background means a color for background starting from a point ranging trough all spectrum for that color to an white end.
----- Original Message ----- From: "RicksPlace" <ofbgmail@xxxxxxxxx> 
To: <programmingblind@xxxxxxxxxxxxx>
Sent: Sunday, May 30, 2010 1:02 PM
Subject: Re: sizing a picture on a webpage
Hi Black: What do you mean that your wife made a gradient background? I thought gradients referred to either calculating the rate of change of something using Calculus or using relative vectors. If the former, couldn't you just use relative positioning and one or more factors based on something like user selected items and available unused screen space instead of the heavy math? In other words, before display factor everything based on how many things are visible so it all fits on the screen. Perhaps a script to even read and then factor everything based on the users resolution? That would require factoring font sizes as well I guess. Anyway, is that how the sighted University Grads with the math skills are doing it if they can see? Just a question so I understand how the concept of gradients is used in the real world in which you are applying them. 
Rick USA
Rick USADo you use the actual Calculus operations to do it, the Vector version of gradient ----- Original Message ----- From: "black ares" <matematicianu2003@xxxxxxxxxxx> 
To: <programmingblind@xxxxxxxxxxxxx>
Sent: Sunday, May 30, 2010 2:20 AM
Subject: Re: sizing a picture on a webpage



And how do you know to combain colors?
How do you make skins?
I see your point, but I see that is a simplistic aproach to webdesign.
To make all in grids.
I saw sighted designers at work and they can for example put a picture on top of the content and that picture is wide enough to cover your left column and a little part of the content. 
From this point you must develop such that the page does not look ugly.
My wife which is a grafic designer, has made for me an design where
The background of the site has an gradient, on that background, there are boxes with informations which are positioned randomly at a first look, but very well for a mind map. 
Also these boxes has a 3d efect as they are on top of other elements.
For this you must put the background of the boxes in same scheme with the rest of the site. 
How do you know to put pictures with color in same way with the site?
and from where do you know that x and y dimmensions are ok for a picture regarding the rest of the content of your site? 
May be is to big or to small.
----- Original Message ----- From: "Bryan Garaventa" <bgaraventa11@xxxxxxxxxxxxxx> 
To: <programmingblind@xxxxxxxxxxxxx>
Sent: Sunday, May 30, 2010 1:29 AM
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 



__________
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:

  1. Home
  2. programmingblind
  3. Archive
  4. 05-2010