PDA

View Full Version : Graphics on the web



Lemur
01-31-2005, 08:14 PM
I am aware this is not a web design forum but I am having some serious problems with Internet Explorer (Who isn't.. am I right?) behaving extremely strangely with my web page that I'm designing with adobe go-live. I was wondering if anyone here knows about dealing with web design issues and might help me out or else could perhaps refer me to a helpful forum on the subject. I don't know any web designers who design on Macs in my real life. Thanks guys,

- Lemur

ricks
01-31-2005, 09:16 PM
Well, we do all our design with a Mac. Everyone I know uses a Mac. Most of us are using DreamWeaver for the actual page coding, and Photoshop for the photos.

What problems are you having with Exploder? We see many inconsistencies with designing for all the different browsers, you MUST test virtually all of them to know what works or how it looks on each since they will be so different. Almost always you can simplify and get things looking pretty good.

Rick

TZ
02-01-2005, 07:30 AM
Lemur,

Have you ever run your code through one of the web site/browser code checks? I use to have some links but haven't needed them in a long time. Some are free, some are fee-based. they can test a page for you with multiple platforms/browsers, and point out coding errors.

Some 'hand code" even today using BBEdit or something.

Considering all the risks in Explorer, even though it use to dominate the browser 'standards' by imposing NON-standard non-uniform practices, maybe that isn't a bad thing. Or maybe there is a better tool for crafting web pages.

TZ
02-02-2005, 10:23 AM
Found this on the Mozilla site.
http://www.mozillazine.org/

Feb 1, 2005

Nvu 0.80 has been released. Also known as Nvu 1.0 Beta pre-Release 3, this latest version has experimental XHTML support, line numbers in the HTML Source view, support for editing PHP code and HTML comments and fixes for many bugs.

For more information and download links, see developer Daniel Glazman's weblog post (http://www.glazman.org/weblog/dotclear/index.php?2005/02/02/852-nvu-080) about Nvu 0.80.

Nvu download page
http://www.nvu.com/download.html


Nvu (pronounced N-view, for a "new view") is a complete Web Authoring System that combines web file management and easy-to-use WYSIWYG (What You See Is What You Get) web page editing. Nvu is designed to be extremely easy to use, making it ideal for non-technical computer users who want to create an attractive, professional-looking web site without needing to know HTML or web coding.

Is Nvu a clone of Microsoft's FrontPage and/or Macromedia's Dreamweaver?

FrontPage and Dreamweaver are popular HTML editors for MS Windows. These programs have become popular because they make web design extremely easy, even for non-technical people. Nvu is not an exact clone of either of these products, but it does contain many of the same easy-to-use features which makes these programs so popular. Users familiar with either of these two products will feel right at home using Nvu.

Who is Nvu best suited for?

Nvu is designed to be extremely easy to use. This makes it ideal for non-technical computer users who want to create an attractive, professional-looking web site without needing to know HTML or web coding.

Nvu allows you to create web pages as easily as you would type a word processing document, and then publish them to your web site just by saving the document. This makes it ideal for home use, students, marketing professionals, general business use, and so on. Even though it's designed for the novice web designer, Nvu is also ideal for experienced web programmers who want to save time in creating content or web design.

Because you can quickly toggle between the WYSIWYG editing mode and the HTML code mode, just by changing tabs, Nvu is also ideal for those wishing to learn HTML programming, as they can easily observe the interaction between the HTML code and what a user will see in their web browser.

The bottom line is that Nvu is ideal for anyone who wants to quickly create web pages.

revi
02-02-2005, 09:25 PM
Macromedia makes a IDE called "Homesite".

For a bit of history, Homesite was bought by Allaire and then augented as ColdFusion Studio (and enhanced with CF tag support), Allaire was then bought by Macromedia which has returned the Homesite product name and markets it as either a $99.00 download or is bundled with the windows version of Dreamweaver.

Upshot is, Homesite is a windows app, but is, IMHO, _far_and_away_ the best HTML editor around. It has built in ColdFusion (CFML) and HTML tag support, but I also use it for writing PHP and Javascript. It's a great editor.

So, if you have a PC...get Homesite. If you are running VirtualPC, get Homesite.

The best IDE...actual code editing app...for Mac is still probably BBEdit. It's a d@mn shame that Homesite isn't made for the Mac as I think it would immediately become the favorite. It really is a great tool.

As regards browser compatibility and WYSIWYG editors...man, I think you're getting what comes with the turf. The sad thing is, IE on windows is still the 800 lb. gorilla....by far. Even with FireFox, IE is still top dog, simply because most people don't care or are too lazy to get informed or....well, you get the idea.

I guess my point is that, if you want your pages to be viewable by all visitors, you gotta worry about IE on windows. As such, I think you're best off getting the classic (IMHO) O'Reilly book by Chuck Musciano and Bill Kennedy: "HTML and XHTML" (4th edition...at least the 4th by now).

I bought that book in the fall of '96 and started teaching myself the stuff and have been working primarily as a web developer since '97. I'm not saying it's a magical book, it's just real basic, to the point and gets you to write _compatible_...across the board compatible...pages. I test things on windows with IE, Mozilla, FireFox and Opera and with IE, Opera, and Navigator on the Mac. IE is a dirtball in that microsoft continually tries to make their "version" of HTML the standard by introducing non-standard tags. But they're the gorilla, so you gotta make your stuff compatible.

Personally, I wind up writing a lot of my stuff on a PC, but do all graphics and multimedia on a Mac. I have to work with a lot of PC servers, so I'm motivated more there as well. I do wish Homesite were available on the Mac.

I don't like GUI editors and think it's best to write the stuff out. For some Javascript support, you have to be a bit careful, but even there, you're better off collecting a few scripts that you know work and learning how to edit them for a purpose at hand. IMHO, again, O'Reilly is by far the best publisher for anything Internet: code, networking, databases, etc.

If you have a Microcenter near you, they often have last year's O'Reilly books on sale at incredible discounts (and, frankly, HTML hasn't changed that much since the early-mid 90's).

wolfpweb
02-06-2005, 01:14 PM
Not quite sure how Ur posting came up... As a reply to something? Talking to 'Revi'... (Sorry, when I went to the link I didn't get the previous postings. My questions were answered when I went back to 'forum'.)
Anyhow, here's how I work... Design all my sites in the Shop, using OS 9 + a little bit of CS in X... Then give everything to a guy who translates my texts into HTML in Dreamweaver on his Windows laptop. Am frustrated with the procedure because he's always late. Also, when I need to correct something, even the slightest mis-spell, I have to give him a whole new file because he doesn't have ARDSI...
I am thinking of switching to Freeway where I would be in control in exchange for drawbacks like the 'look'... No 'bevel & emboss' support, etc.
Went to a site earlier, the Container Store; wow, everything comes right up. Faster than any I've seen. Is it the software or the server(s)..?
Me is WolfP + U know what. Feedback mucho appreciated. :)

revi
02-06-2005, 04:32 PM
Hello WolfP,

Quite a few subquestions! I'll try to hit everything, please let me know if I miss something.

1.) Not sure what ARDSI is...?

2.) As regards your guy with Dreamweaver...eh, you may be best off learning how to do a bunch of this stuff yourself:

a.) You don't have to deal with other people's lack of follow-through (man, do I know how that goes!)

b.) These would be meaningful skills to add to your repertoire, the amount that you'd actually need to learn is really not all that much, and this will likely enhance your understanding of how pages are put together and what really impacts a pages functionality.

Specifically, I'd recommend getting a good, thorough, but elementary book on HTML. I am not using the word "elementary" in a condescending or pejorative way...I mean a book that addresses the basic nuts-and-bolts foundational stuff in a no-nonsense, no-frills way. My favorite is the O'Reilly book by Musciano and Kennedy (I've been building commercial web sites since late 96/early 97 and I still keep that book around...in particular the updated version that covers XHTML...actually, XML is simpler and easier than HTML, but we'll get to that in a bit).

Now, I'm not telling you to necessarily go whole-hog and decide to become fluent with all things web (though it is fun stuff), what I am specifically recommending is that you get familiar with the foundational mechanisms for building a page: tables and div elements. Tables in particular, you can learn divs once you get tables down. Do _not_ feel like you have to understand all the bells-and-whistles stuff because you _don't_. If you get a handle on HTML tables, you're very well on your way to understanding page layout and construction.

Essentially all web pages, and in particular cross-browser compliant ones are built using tables. A table is a way of breaking a page down into "boxes"...boxes into which one can place content (e.g., pictures, graphics, even Flash movies, etc.). The basic idea is that a table consists of "rows" (with the "TR" tag...table row...I'm leaving out the angle brackets for the discussion at hand) and "cells" (with the "TD" tag...for table data).

Very meaningful hint: follow "indentation rules", in particular when getting started: it'll make your life a _lot_ easier when it comes time to finding errors...and you will likely make errors when first getting started...and silly, dumb basic typo errors can be infuriating to find and correct if you haven't taken the time to write a page neatly. I know, I've been there _too_ many times. ;-) Neatness does count and is its own reward in that you'll have much more easily edited and maintained pages.

Basically, you should create a new row...on your HTML _source_ page...each time you add a table element. That is, hit "return" after typing a table, table row or table cell and use a tab for the cells to indent. Here are some links that address style issues in writing code (and HTML doesn't really deserve to be called "code" in that it doesn't _do_ anything...it's a static mark-up language, but the same, or effectively the same, priniciples apply to writing C, Java, or any actual programming languages):

http://northonline.sccd.ctc.edu/offenback/CSC110-W05/Notes/WritingHTML.htm

http://www.builderau.com.au/webdev/scripting/0,39024692,20265911,00.htm

http://www.peachpit.com/articles/article.asp?p=24011

The table syntax...if you even want to call it that...is remarkably simple. As with everything, the more you do it, the more familiar you become and the better you get. In large measure, you just need to get used to looking at a page...or a page idea...and see how you can break it into rows, columns and cells....then build a table to realize this.

So, you ask, why do all this? Let's say a page that's almost all graphics, in that if it's largely text one doesn't even need to build the page in Photoshop, but rather just build the page directly in HTML.

Also, it should be noted that what I'm describing is _one_ way of doing things and that there are many other options as well. An advantage (IMHO) of the method I'm describing is that you'll wind up with page layouts that will work in basically any browser ever...with the possible exception of Lynx (heh, the text only browser from the age of antiquity ;-)

What I do when organizing a page in Photoshop is to first create the image/picture I want (duh ;-) and then add guide elements in Photoshop (i.e., by using the "move" tool and dragging a guide from the rulers on either the left or the top) at the pixel point where the cuts should be made.

Arguably, doing this with slices is the standard way of handling things _all_ in Photoshop, but I think there's value in learning how to do things "desert island" style where you do it all yourself.

Now, a consideration here is that the Photoshop will place the guides _approximately_ where you drop them, depending on the magnification you're using. That is, if you have your image at 100% viewing size and place a guide at the point "250 pixels from the left"...it'll likely be _near_ 250 pixels but not dead-on. If you're cutting up an image to create a page, you basically need pixel-accurate cuts. Hence, for placing guides, blow the image up to the maximum viewing size...1600%...and you'll be able to drop the guide _exactly_ where you want it. Upshot is, once you've made your cuts and potentially created subimages and then assemble the page for the web, things will fit...exactly, without an image being even a pixel off in size...you'll get seamless page graphics that way. Oh, here's another hint...make sure cellspacing and cellpadding are set to 0 if you use tables or there will be "air" around the images. Spacing and padding can be used creatively too.

Laborious? Maybe. Time-consuming? A bit. Educational? You better believe it...you'll learn a great deal about how things are assembled and how to maximize your page speeds and what graphical elements are potentially slowing things down. Not all of the things on a page need to be of the same file type (gif, jpg, png, whatever) nor of even the same quality or resolution (32-colors, 256-colors, etc.).

Additionally, your pages will not exhibit all that machine-generated stuff that can make manual editing of pages a real pain. It also, of course, makes the pages lighter in that there's less text/code.

Oh, and arguably the main reason I so dig Homesite is that it has all these pop-up sub-menus so that as you're building tables or divs or the like, as you start a tag, Homesite will provide all the appropriate options for the tag (e.g., align, width, etc.). Absolutely great editor. On another note,if you were writing Java, I'd say get the _free_ NetBeans IDE (i.e., editor). However it is the case too that you can just use a basic text editor (e.g., Notepad on windoze...which is what I used back in the mid-90's before I had any thing better, or TextEdit on a Mac). BBEdit is still probably the best text/HTML editor for the Mac that I'm aware of.

As you get more fluent...that is practiced..with the stuff, you can add more skills to your set. As noted above, XML can look berserk when you first see it, but once your used to the whole "tag" bit, you'll see that XML is even easier than HTML! BTW, HTML and XML are not really new...despite what you hear on the popular press...but are "children" of SGML (Standard Generalized Markup Language) which has been around since the 1970's! The first proposals for SGML were in the early-mid 60's!

3.) Finally as regards page "speed": man, there're are a bunch of different factors, as you alluded to. First, weight = size in (kilo) bytes.

Certainly document weight (just the amount of _text_ in the document), plus the weight of the images or other multimedia (e.g., Flash) will effect download speeds. But then also, so will the amount of Javascript and other scripting doo-hickies. A lot of commercial sites have pages that take a very long time to render because of all the little embedded (even in-line/in-page) ads and paid content...which makes a page seem slow and makes viewing the sites less pleasant. Also, all those scripting elements are just begging for browser compatibility problems too. However, business is business, and people want those ad revenues (Google's are the cleanest, IMO).

Network speed (e.g., where your site sits on the net...how many hops it takes to get to a backbone, as evidenced by traceroutes...there's another windoze app...shareware...that I dig called "Pingplotter" that's very useful in diagnosing network issues).

Finally, the machine itself, the web server, can be an issue if it has too much load for it's capacity: if you're running web _applications_, like shopping carts or other active things, the processor load might increase, but my experience is that it's typically I/O "bound"...that is, the machine's latency will be more of an issue of its ability to shovel data out the NIC, though if the thing doesn't have enough RAM, it'll page stuff to disk like crazy which can slow things down _and_ burn out your drives.

Machines tend to be cheap and have lots of capacity now-a-days. RAM is certainly something you want to have lots of and some kind of redundancy (e.g., mirrored drives) is essential too.

Whew! HTH!


Oh, PingPlotter and, in particular, Homesite may run under VirtualPC. I don't know if I'll have the opportunity to test that, but they work. Homesite is a $99.00 download from Macromedia.

wolfpweb
02-07-2005, 05:07 AM
Wow, Revi, almost a book's chapter by itself... Thank U!!! I hope that others here will get some insights from Ur posting as well.
1st; ARDSI is the top font of all the choices I get in my Macs. It comes through very clean on the web. Been using it a lot lately, especially on my website re the BirdClix...
2nd; I'll be 64 this year. No, I will not learn the table stuff nor HTML anymore. If U knew my daily work load and/or flow, U'd buy my argument. I hardly ever consult the reference guides for PhShp, it's intuitive. As I said, I am willing to design my pages, as I do currently in the Shop, without much further pains. And I do make enough money to pay someone to do 'the rest' for me. But I live in a region where qualified people are hard to find. 'My guy' recently got a fulltime job, assistant webmaster, + the wife & the kids... U get the picture.
So, why not 'Freeway'..? My websites live off their images mainly. Too bad for the 'fancies'. But at least I wouldn't have current frustrations anymore.
Again: Thank U!

revi
02-07-2005, 03:23 PM
Hello Wolfpweb,

I'll have to look into Freeway, I'm not familiar.

A quick note about fonts; for the web check out:

http://www.minifonts.com

Also, Jason Kottke's site has a free "mini" font for screen:

http://www.kottke.org/plus/type/silkscreen/index.html

I'm going to look into Freeway when I get back.

Best,

iw

wolfpweb
02-07-2005, 03:56 PM
Ok, to facilitate Ur search... It's a British software from 'softpress', probably similar to Frontpage except that it works on Macs (only).
As to the suggested font; it's certainly almost weightless. But, for me, it lacks some kind o'personality, almost like this here lettering. No offense.
Thanks for Ur interest. It's a never ending learning curve.

revi
02-14-2005, 02:32 PM
Hello wolfpweb,

I'll have to look into Freeway, thanks for the reference!

Two notes:

1.) I mistakenly used "API" when I meant "IDE" in the earlier post (I've corrected this)...IDE = "Integrated Development Environment", namely, a software tool that is built for editing the files being used (e.g., NetBeans is a Java IDE...free and excellent, BTW...I suspect my thinking, well, trying to understand, the Java API is maybe why I mis-spelled things so uniformly...sorry for any confusion ;-)

2.) The Mini-Fonts stuff is very handy for putting small fonts on the web...yes, I agree that a lot of the stuff doesn't have the character (heh, pun!) of traditional font design, but that's because they create the fonts on a strict, bit-mapped matrix. The upshot is that the mini-fonts don't suffer from the aliasing at small sizes that happens when you use "standard" postscript/true-type fonts at small sizes (e.g., 10 px or less). Certainly one wouldn't use the mini-fonts at larger sizes, for instance, for banner or key images.

Best,

revi

wolfpweb
02-14-2005, 04:30 PM
As U seem younger & more agile, U will probably check out Freeway sooner or later. It's available as a download on a trial basis. I've had the package for more than a year now. Just haven't gotten around... It's supposed to create HTML as U type. And it does accomodate image files from verious sources like the Shop.
Let us know, please.

Nicolas
02-14-2005, 05:19 PM
Hello,

some graphic designers use Freeway cuz it is frame based like QuarkXpress and pretty easy to use if you are familiar with QXP. A few years ago there was a free version of Freeway for OS8 or 9 (needs QuickdrawGX).
I am not up to date how the current version works.

The HTML code it produced was not the best, you had to edit things with BBedit before "going online".

Exploder for Macintosh ( :D I like that) has some problems with "nested" HTML GoLive (formerly known as GoLive CyberStudio) code and iFrames. The inner HTML frames have no scrollbars or simply don't appear and stuff like that.

Regards

Nicolas

wolfpweb
02-17-2005, 08:33 AM
Anyone know where ARDSI originated, please..? Mine either came with OS X or a Mac OS update. Or it came with CS. I like the font for my websites. Can't find its origins though via the usual web search... Need the same for Windows so that my HTML translator can make a text change for me, now & then, without the need for me to supply a fresh file.
There's a great deal 'out there' from macxware with a huge font collection; ARDSi isn't one of them... Inquired with there support people, great feedback, but no knowledge of the font...
Hm. :confused: