1. This site uses cookies. By continuing to use this site, you are agreeing to our use of cookies. Learn More.

Channel Chart Test Pages

Discussion in 'General DISH™ Discussion' started by BobaBird, Jul 28, 2007.

Thread Status:
Not open for further replies.
  1. BobaBird

    BobaBird EKB Editor

    4,022
    0
    Mar 30, 2002
    While TNGTony has been otherwise occupied, I have used the time to do some heavy cleaning of the main channel chart and also apply some techniques to substantially reduce the size.

    This mainly involved weeding out 7 years of accumulated "left behind" code fragments, removing font colors from images, and removing 7 extra pairs of <body></body> tags. The biggest change was replacing most of the <font color= size=> tags with CSS classes. (CSS = Cascading Style Sheets)
    Code:
    <TD bgcolor="purple"><font color="yellow">61.5°</font></TD>
    <td bgcolor="#800080"><font color="#FFFF00">E*3</font></td>
    is now
    <td class="s615">61.5°</td>
    <td class="e3">E*3</td>
    When I noticed the last 3 columns were always getting set to tiny font, I looked for a way to strip that out too and learned just enough about a new tag that I think it works :sure:. Right after the <table> tag I added
    Code:
    <col><col><col><col><col><col><col><col><col class="pkg"><col class="pkg"><col class="pkg">
    That allowed class="pkg" to be taken off 3000+ <td>s.

    The file is now just about valid HTML 4.01 Transitional (still has 3 table attributes that I suspect are IE-specific and should be otherwise harmless) and works fine in IE7. Tony uses FrontPage and has found how to use it to set classes from its WYSIWYG mode. What I'm looking for is some reaction from a wider user base with other browsers. The new test files should look the same as the original. None have the last few weeks of updates applied, this is just for formatting.

    Original dishlist (1,250,225 bytes)
    Classes test (1,035,069 bytes)
    Classes and columns (1,017,154 bytes / .97MB)

    My goal was under 1,000,000 bytes, but I'll settle for under 1MB. NO MORE CHANNELS! :grin: .
     
  2. James Long

    James Long Ready for Uplink! Staff Member Super Moderator DBSTalk Club

    45,324
    914
    Apr 17, 2003
    Michiana
    The graphical channel type descriptions in column one turned out "interesting" ... "Music Video Nets" is super stretched making the column wider (width="187"), "Children's, Family and Educational Programming is shrunk to a couple pixel width (height="32"). The HDTV logos are odd sized. If you run through and delete all the height/width statements it will likely get the graphics back to size (and save a few bytes).

    (The only problem would be is if any of the graphics NEED resizing ... if they do they should be resized on the server and not with height/width statements. Why send pixels that will never be displayed? I've seen that on some websites where someone will upload a 5 megapixel photo and set height/width to 300 pixels in HTML ... it makes the page slow loading! It looks like none of the images on the original dishlist need resizing, so you should be safe removing all height/width from img tags.)

    Another bytesaver would be placing the images in the root directory with the dishlist HTML file. Then you wouldn't have "dishlist_files/" (15 characters each) in every image tag. 15 bytes times all those images adds up! (Or create a shorter directory name such as "dl/" or "img/". Less bytes saved but still a savings.)

    It is a decent reduction ... and if you can get your editor software to respect the reductions when you next open the file it's a great idea. I hand code nearly all of my HTML because all of the garbage that is added by fancy editor software. :)
     
  3. James Long

    James Long Ready for Uplink! Staff Member Super Moderator DBSTalk Club

    45,324
    914
    Apr 17, 2003
    Michiana
    FYI: Without img height/width = 951,874 bytes or 930KB.
    Without "dishlist_files/" = 907,594 bytes (44,280 bytes = 2,952 references).
    Modifying to "dl/" would save 35,424 bytes.
     
  4. CABill

    CABill Hall Of Fame

    2,114
    1
    Mar 20, 2005
    Of the 2952 "dishlist_files/" references, 2249 are /dishlist_files/TV.gif" and 255 "dishlist_files/hdtv.gif" so duplicating/renaming the directory to DL gets you under a meg. Just duplicating TV.gif and hd.gif to the main directory and leaving all the other dishlist_files/ their long name gets you even smaller. Probably do the same for the Radio.gif image too, but I didn't try it.

    Code:
    07/28/2007  09:04 AM           981,730 dishlist-columns-DL.htm
    07/28/2007  08:57 AM           979,594 dishlist-columns-TV-HD.htm
    07/28/2007  08:50 AM           983,419 dishlist-columns-TV.htm
    07/28/2007  08:46 AM         1,017,154 dishlist-columns.htm
    
    The 2249 TV.gif references can shrink if you drop the 22 characters of size:
    width="15" height="18"
    or hd.gif's
    width="30" height="17"

    Oops, there are TV.gif and hd.gif references just to height, and they look goofy.
    KLFY's
    Code:
    <td><img src="TV.gif" alt="TV" width="49"></td>
      <td><a href="http://www.klfy.com/">KLFY TV</a> 10 (CBS)</td>
    
    W/O the Height and Width for TV.gif and hd.gif
    07/28/2007 09:37 AM 925,041 dishlist-columns-TV-HD-HnW.htm

    maybe 4-5K smaller w/o H & W on Radio.gif


    Looks OK in Firefox as well, I won't even try with an old version of Netscape that has issues with Tables to begin with. Not going to try lynx either. ;)
     
  5. CABill

    CABill Hall Of Fame

    2,114
    1
    Mar 20, 2005
    Why not change the "type" column to be "Other than SD TV" and replace all
    Code:
    <td align="left"><img src="dishlist_files/TV.gif" alt="TV" width="15" height="18"></td>
    with
    <td></td>
    
    If you did nothing else, leaving the column blank instead of the TV image saves 175k. Seems like plain text "HDTV", "Audio", "Data" would convey more than the current images and also save characters. Just use the alt= text as text.

    If you'd fix the (width="187") James mentioned, it might be easier to compare before and after.
     
  6. FTA Michael

    FTA Michael Hall Of Fame

    3,474
    4
    Jul 21, 2002
    My two cents:

    IMHO, the main landing page (dishchannelchart.com) ought to include the change notes, the individual satellite links, and a prominent link to the master list with a warning about its size. So pretty much everything the way it is, except that it's a link to the master list instead of including the master list. And then your master list page would be just that, plus navigation links to the other lists.

    For extra credit, you could add links reflecting the most common Dish dishes: 500, 1000, 1000.2, etc. And those new pages would explain and include links to the satellites they include.

    But in general, anything Tony does is okay in my book. He's done such a great job for so many years that I'd rather the layout be comfortable for him than the users.
     
  7. BobaBird

    BobaBird EKB Editor

    4,022
    0
    Mar 30, 2002
    James,
    Got the size of those side banners fixed. Don't know how it happened, gonna blame my editor program. Might have been from using the program without the images being available (worked off a separate directory, so path was broken).

    I don't see any large images being re-sized by the browser. The largest is 9K with most being 4K or less.

    I think we need a separate directory for those images because once you add up the type icons and side banners there are 219 of them. We'll see what Tony wants to call it.

    I also use hand-coding. My fancy editor adds very little garbage, but I like the HTML editor's typing assistant (auto-addition of end tags, list of attributes, optional auto-indent). The WYSIWYG mode also has its benefits, and the site manager has been essential for fixing broken links in a site with 286 files at the root level alone.

    CABill,
    Moving those 2 or 3 type icons to the root level is a good idea. I don't know if Tony would want to use plain text instead. The icons are a minor nice touch, but generate a lot of repitition. I'm thinking there might be a way to also define the images, or at least some of their attributes, in a CSS class. Will check on that during slow time at work tonight, maybe tomorrow.

    James & Bill,
    Went through and fixed several other instances of altered image sizes.

    FTA Michael,
    I really like your idea of a menu or overview page. Many people point others to the full main chart when the question was "What is on this one satellite?"

    Can I claim the extra credit now for the Dish Types page?

    Absolutely agree on your last point :biggthump . It's a massive on-going effort, one I don't think I could keep up with (as evidenced by the equipment side of the EKB house :eek:). This project started with Tony's knowledge, and wasn't shared with anyone until he thought he could fairly easily use it.

    What I'm doing here is seeing if the changed files are still usable, to help decide which to go with. That may well be the original if there are other problems or if Tony finds the method to edit classes to be too cumbersome. If so, that's fine and this will still have been a good learning experience.

    All,
    The edited test files are now available.
     
  8. FTA Michael

    FTA Michael Hall Of Fame

    3,474
    4
    Jul 21, 2002
    Not yet. I was thinking of pages that would be a cross between the single-satellite pages and the master list. In other words, each would be a list of the channels available with just that dish. So the 500 page would list all the channels on 110 and 119, for example.

    Thanks for the feedback. Good luck!
     
  9. kckucera

    kckucera Legend

    176
    0
    Jul 31, 2005
    BobaBird,
    What a great effort, I certainly puts the complexity of the business in perspective and a very useful tool for us users. Agree with a menu tool wish, would like to just sort on certain categories by radio check box if possible. Thanks again for all your work on our behalf.
    Ken
     
  10. CABill

    CABill Hall Of Fame

    2,114
    1
    Mar 20, 2005
    http://www.w3schools.com/css/pr_background-image.asp

    I'd try
    Code:
    [td class=TV] </td>
    
    and in .CSS
    TV
    { 
    background-image: url(dishlist_files/TV.gif); 
    }
    
    Not sure you need the nbsp to force the background. Didn't try any of this myself though.
     
  11. BobaBird

    BobaBird EKB Editor

    4,022
    0
    Mar 30, 2002
    It's Tony's work. I'm just taking advantage of a few weeks when he's too busy to make the usual near-daily updates to try out a few things. Change the oil, new filters, clean out the trunk, replace the Bondo, the sorts of things that can hard to do with a daily driver. Hopefully we can keep it easy to maintain and reduce the size enough to have a noticeable benefit for viewers.

    On that note, would you believe 889,076 bytes!?

    New test version Types is based on the columns version. All of the image links in the "type" column are now shown as a background image of the <td> via CSS currently still in the <head>. The alt= text is no longer available so I added a little legend near the bottom of the page below the notes and index. Is that cheating? :slowgrin: Now that I've completed it, I realize those by default won't be printed. I assume everyone is wanting to re-print the list after each update? :D
    I think these would require a total change in how the lists are generated. Currently the list is maintained as a web page, and the satellite sub-lists as well as all the package and LIL pages are separately maintained. What I think may eventually simplify all the maintenance is to have all the channels in a database. Update the channel once and have all those pages built dynamically by the db app. Beyond that we could add advanced queries that could be predefined (a link from the Dish1000 page shows all the channels available with that dish) or from a form (AT250 channels on 110°). One slight problem, or rather two. I'm really not sure where to begin and Tony hasn't gotten very far when he's looked into it.
     
  12. BobaBird

    BobaBird EKB Editor

    4,022
    0
    Mar 30, 2002
    CABill, that's very close to what I did.

    CSS
    td.tv {background: url(dishlist_files/TV.gif) white center no-repeat}

    Background is short-hand combining 5 properties (5th is scroll/fixed). The color is shown in case the image is unavailable. Guess adding it here was redundant since the body is also white and the table didn't set a color.

    HTML
    <td class="tv"> </td>

    Just also needed to make the bg image "center" and "no-repeat" because it defaults to upper left and tiling. Not sure if the is needed for the background, but I put it in to have some content to have cell borders.
     
  13. CABill

    CABill Hall Of Fame

    2,114
    1
    Mar 20, 2005
    Not much you can do about this, but after the client loads the .htm, there is a lot of http request and response headers for the 200+ images. The responses are 304 (server doesn't have anything newer than your cached image). I logged the headers & responses in Firefox:

    HTTP/1.x 304 Not Modified
    07/29/2007 12:37 PM 210,277 dishlist-types-headers.txt

    So there is 200k of chitchat to verify no images have changed. Different IE versions seem to display the image countdown differently. So even if you request dishlist.htm and save 900+k because it hasn't changed, you still have the 200k of traffic to verify the images haven't changed (assumes you have the browser configured in a rational manner).

    Cell borders - I knew in the back of my head there was a reason to type in a td but drew a blank on why.

    Reno is under two hours from my place so I may have to trek to SBE 2007 too!
     
  14. joblo

    joblo Godfather

    484
    0
    Dec 10, 2003
    In IE6.0, the new versions now look the same as the old, except that:

    1. The text in the change list now responds to the “View > Text Size” setting, which seems unarguably an improvement.

    2. The background color is now forced to white instead of my Windows default, which many probably like, but I do not.
     
  15. BobaBird

    BobaBird EKB Editor

    4,022
    0
    Mar 30, 2002
    joblo,

    1. There was a statement "body { font-size:10pt }" that I commented out because it had been placed between the <head> and <body>, so I wasn't sure if browsers were using that setting or not. This way browsers render the page in the user's default size except for the notes and package columns which are set to "1" in HTML or "xx-small" in CSS. Anyone else having problems with the size, before or after?

    2. The bgcolor is set in the .css file which is being added to pages as I have time. Once done, it will be one simple edit to change the look of the site. I've heard it's possible to set up a user style sheet, at least for Firefox, but haven't felt the need to look into it myself. I've also read that many think blk on whi is too harsh. What do you suggest for bgcolor?
     
  16. CABill

    CABill Hall Of Fame

    2,114
    1
    Mar 20, 2005
    Types Legend at the end has alt="TV" for all four images.

    The "type" column could be a little wider and the HDTV image wouldn't be cropped. The column may be wide enough now, depending on the Text size the user has selected. Just a transparent image with a manual height=1 width= the HDTV width plus some padding would work to set a minimum column witdh.
     
  17. BobaBird

    BobaBird EKB Editor

    4,022
    0
    Mar 30, 2002
    On my screen it didn't looked cropped, but the cell borders were right up against it. I had added before and after "type" in the <th>. That gave enough space but likely varies depending on the user's font. hd.gif is 30 wide. I wouldn't have thought of using a transparent image, but setting <th width="34"> seems to do nicely. Not valid for 4.01 Strict, but not an issue on a legacy or Transitional page. dishlist-types now has that change.

    edit: forgot to fix the Types Legend. It's done locally, will upload when there's another fix.
     
  18. joblo

    joblo Godfather

    484
    0
    Dec 10, 2003
    I use a light blue as my Windows default. Works for me, but others’ mileage may vary. I would think there would be a way to set bgcolor to the user’s default, though, and I would suggest that because it would maintain the current behavior.

    Still, it’s not a big enough deal for me to learn/create my own css, so I’ll probably just live with whatever you decide.

    Thanks for asking, though. And thanks for all the effort. I know this stuff is a lot of work. :)
     
  19. TNGTony

    TNGTony Hall Of Fame

    5,345
    0
    Mar 23, 2002
    Hi all. Thanks for all your input and great info. I sent BobaBird an e-mail asking him to either post the changed page with a few of your suggestions thrown in (like moving the TV, HDTV, Data and Audio icons to the root directory) to save more kbs.

    As soon as I get the new updated files I will beging to update the charts again.

    I have been unavailable for a while since I took a vacation where i had no internet access (and didn't miss it) on the first week, and I was moving to my new old house the second week. I am still in the process of moving so I do not have loads of time, but I am settlled enough now that I can start catching up.

    Thank you all for your input. And a million thanks to BobaBird for updating all the code. When it comes to that I am aweful! :D

    Now if I could only have some one implant the knowledge of SQL in my head I could do pages like the "dish 500" and "Dish 1000" pages. Until then... sorry Michael.

    See ya
    Tony
     
  20. BobaBird

    BobaBird EKB Editor

    4,022
    0
    Mar 30, 2002
    Discovered the RSN side banner height also got re-sized. Also got Firefox and found it isn't recognizing the <col><col class="pkg"> trick, so the last 3 columns are all displaying in the default size rather than smallest. Even at 800x600 the whole chart is still readable (to me, and no one complained), so I don't think that fix is worth pursuing.

    I've got e-mail out to Tony asking which changes to keep, then we go live and I apply them to the individual satlist pages.
     
Thread Status:
Not open for further replies.

Share This Page