Archive for November 2005

29/Nov/2005 — Add a Flickr Photo to Y!360°   14 comments

Flickr to Y!360° Integration

You asked for it.

If you have a picture on Flickr and you want to include it in your Yahoo! 360° blog, it’s pretty easy if you know HTML and only moderately painful if you don’t. Really, though, it is nothing more than a copy and paste exercise. I touched on this in my entry, “Blog Layout Tutorial.”

First, find the picture on Flickr that you want to link to. Open it to its own page and look for the “All Sizes” button along the top edge of the image. Click on that and then click on the “Small” size option. Good.

At the bottom of the page (you may need to scroll down,) you will see some code that looks like this:

Paris Vacation, Day 6

Select all that code and copy it.

Next, open up your Y!360° blog and compose an new entry. Click on “View HTML Source” below the edit window. Now, paste your copied Flickr code into the edit window and click “Post This Entry” (You might have to add some text for it to actually save.) Here is what Y!360° does to your code, which was perfectly valid as it was:

Paris Vacation, Day 6

You might not see the mangling right away so I marked the broken bits in red. The second alt atribute is freaky, but not damaging. The shredded href in the a (anchor,) however, is fatal. The URL is no longer valid and, though the image loads and looks okay, the link won’t work.

You’ll be happy to learn that the workaround is pretty simple. After you paste the Flickr code—which, I say again, is already perfectly fine, even though Y!360° messes it up—into the edit box, make one change. Move the title attribute up to the front of the a tag, like so:

Paris Vacation, Day 6

Y!360° will not mangle the href attribute (although the redundant alt attribute still appears for some reason.) Now, the image will load and the link will work.

Advertisements

Posted Tuesday, November 29, 2005 by Grant in Random

24/Nov/2005 — Blasts and Feeds   20 comments

My Blast

My blast, which will change [Update: has changed] when I think of a better one… well okay, a different one, is a quote from a song, “Breakfast in America” by Supertramp. (Somebody out there got it… thank you!) I heard it in the car the other day and, as I was embarrassing myself by singing along (oh, and you don’t?) I thought the lyric would make a good blast.

Having gotten so much attention recently because of appearing on “Interesting Pages on Yahoo! 360°,” the line resonated with me. A lot more people have become interested in my blog, my thoughts, or my bird (which isn’t mine, remember) but I am still just me. I’m the same guy I was before the Yahoo spotlight found me. I’m just a sinner, who would want my autograph?

If I haven’t said it yet today, I am totally impressed, astounded, and in awe of all your compliments and kudos. By the way, there are no autographs… sorry.

My Feeds

The views expressed in my feeds are those of the respective authors. On occasion, both you and I will disagree with those views. I like Ned’s blog, because he is a computer geek and he keeps his eyes out for unusual stuff. Of course, since it’s his blog, he can post whatever he wants, personal or political or whatever. If you like his stuff or disagree with him, he accepts comments on his blog.

By the way, he doesn’t know me, so telling him I sent you won’t carry any weight… sorry, again.

I hope that, whatever you did today, you had fun and were safe doing it.

Peace.

— Grant

Posted Thursday, November 24, 2005 by Grant in Random

23/Nov/2005 — Blog Layout Tutorial   53 comments

Heads up: this post is fairly technical. If that excites you about as much as watching paint dry, then there are other blogs to read. Have fun.

Yahoo! 360° Blog Layout

Including table borders and images with links

Paris Vacation, Day 4

Do you want to impress your friends with a sleek layout for your blog entries? Do you want to link to images that you have uploaded to Flickr or some other image hosting service?

Well, hopefully, this post will help. Just follow the excruciating steps below to create a blog entry that will make your friends say, “Ooooo” and/or “ahhhh.”

What do you need? Besides a computer and online accounts, which I will assume you have already, a little — a tiny bit — of HTML awareness will come in handy, but really, you will be okay without it.

Of course, I must disclaim that I am not to be held responsible if you do what I say here, use any of this code, or follow my advice and your computer blows up, leaves home, causes an international crisis, or any other bad thing befalls you or yours.

<td colspan="2"bgcolor="#CCFFFF">

Yahoo!360° Blog Layout

Including table borders and images with links

<tbody align="left" valign="top">


<td bgcolor="#ffffff">
<a title
="Photo Sharing"href="http://www.flickr.com/photos/glindsay65/62488882/">
<img src
="http://static.flickr.com/26/62488882_dc3d8bcd31_m.jpg"width="160"height="240"alt="Paris Vacation, Day 4">


<td bgcolor="#ffffff">

Do you want to impress...

First, to make things a little easier for you, I have posted the source file for this tutorial on my website, so you can download it and do with it as you please. (How often do you get an offer like that?) Feel free to use, modify, and/or distribute it as long as you (1) give me credit for what I did and (2) do not charge for it, since I didn’t charge you. What’s fairer than that, I ask you?

Here are the basic steps. I will expand on them below, but some of you might only need the high-level outline. And here it is:

  1. Open the template that you downloaded from my site
  2. Edit to suit your post
  3. (optional) Save it with a different name
  4. Copy the table piece of code from the template
  5. On Yahoo! 360°, compose a “New Blog Entry”
  6. Give it a Title, but skip the photo upload bit
  7. Turn on View HTML Source
  8. Paste in the code copied from the template
  9. (optional) Click “Preview”
  10. Click “Post This Entry”

Here is the simplified source code for the blog layout template. I find that, when venturing into unknown territory, if someone has given me a head start, I can learn as I go. I make a few changes, experiment, and all without having to first know every detail of the subject. Maybe that approach will serve you here.


<table summary="Basic blog layout" align="center" bgcolor="#3399FF" border="0" cellpadding="10" cellspacing="1">
<thead align
="left">

Now, that HTML code looks either straight forward, like Egyptian hieroglyphics, or somewhere in between. Not to worry. You can just copy ‘n paste the code above (or use the file from my site.) But, if you want to dig deeper, I will explain each piece right now. Take your time with this, it gets pretty thick for the average Joe/Jane:


This is simply a comment, a little note inserted into the HTML for the human reader. The browser ignores all the text between <!-- and -->.

<table ...>

This is the start of the table that forms the basic container of our blog post. The table holds the bits in line and even let’s us put a border around it. But, just so you realize, nowadays, savvy Web Developers prefer to use tables for layout control very sparingly, in favor of positional CSS. Now let’s look at each attribute of the table tag to see what it does:

<... summary="Basic blog layout" ...>

The summary attribute is optional, but nice to include. It is used by screen readers for the visually impaired to describe the contents of the upcoming table, which lets the user decide if they want to view it or not.

<... align="center" ...>

The align attribute tells the browser to place the table in the horizontal center of either the screen or, as with Yahoo! 360°, the containing HTML element. Other options for this attribute are "left" and "right".

<... bgcolor="#3399FF" ...>

We will use the bgcolor (background color) attribute in an unusual way. Since we can’t use CSS borders in Y!360° (for some reason, however I haven’t tried it recently,) we will do three things to simulate a border.

First, we will set the background color of the table to the color we would like for our simulated border. Here, I chose "#3399FF" for my background color. Do you know that color? Neither do I, that’s why I look it up. Second, we will add a bit of spacing between the table edge and the cells’ edges inside the table. This will let some of the table’s background color leak out to give the illusion of a border. Finally, we will specify a background color for each cell to mask out the table’s background, except for that little space all around the cell’s edge. All clear as a foggy night, right? Super. Let’s contnue.

<... border="0" ...>

Seems strange, doesn’t it, that we are going through all this trouble for the border, when here we have a border attribute. Yes, well, the typical display of this attribute, if we were to use it, looks—I’m just going to say it—ugly. We won’t use it, so we’ve set it to 0 (zero.)

<... cellpadding="10" ...>

The cellpadding attribute controls how much space there is between the cell edge and the content within the cell. I use "10" here to give a bit of white space. Keep in mind that you can play with all these values and see the results for yourself. That will help you learn the effect of each attribute on the table’s appearence.

<... cellspacing="1" ...>

The cellspacing attribute, as we are using it, will define the thickness of the table border. The value of "1" give a clean, thin line. On your blog, make it thicker, if you’d prefer. Have fun.

Whew, we’re done describing the table’s attributes and that’s a big part of this. The next tag, <thead align="left">, marks the start of the table header and specifies that the content will be left justified.

Then come the start of the row,

, and the only cell in the row, <td colspan="2" bgcolor="#CCFFFF">, which will span 2 columns, have a "#CCFFFF" background color, and form the title bar.

The next two lines describe the content of the title bar. First, the title as a level 3 heading,

Yahoo!360° Blog Layout

and the subtitle as a paragraph,

Including table borders and images with links

.

To finish the title bar, we close the cell

, row

, and head

tags in that order:

Done with the table head, we move to the body, <tbody align="left" valign="left">, with content tucked to the left and top of each cell.

Again we will start a row,

, but this time we will have two cells, each to form one of the columns. The first column, <td bgcolor="#ffffff">, will be on the left with a white background (I know that color) and will hold our image (or images in your version, if you choose.)

Inside the left cell, you might notice that the image tag is wrapped by an achor tag, <a ...><img ...>. Flickr provides a convenient tool for copying all this HTML to paste right in here, which I will show you below.

We’ll come back to the anchor tag in a minute. For now, let’s examine the image tag. In a nutshell, the image tag tells the browser details about the image and where to place it on the page. Here are the attributes:

<... src="http://static.flickr.com/26/62488882_dc3d8bcd31_m.jpg" ...>

The src (source) attribute tells the browser where the image is, it’s address or URL.

<... width="160" height="240" ...>

The width and height attributes tell the browser the dimensions of the image.

<... alt="Paris Vacation, Day 4" ...>

The alt (alternative) attribute specifies the text to display for nonvisual screen readers or in the event that the image is unavailable. All four of these attributes are required.

As promised, lets look at the anchor tag. This tag gets a lot of use on the Internet. It wraps around text or, as in our case, an image to make it a clickable link to another place on the Internet. By wrapping the image with the anchor tags, the user can click on the image and open, in this case, the picture’s Flickr page. There are two attributes.

<... title="Photo Sharing" ...>

The title attribute should provide some information about the link. I like to say something like, "Link to a larger version in my Flickr photostream" or something that tells the user where the link will take them, if they click on it. Usually, the browser will display this text to the user as a pop-up “tool tip”.

<... href="http://www.flickr.com/photos/glindsay65/62488882/">

The href (hypertext reference) attribute is the destination of the link. If the user does click on the link, the browser will load the page at this address or URL.

Now, I said that Flickr provides an easy way to grab all this HTML code for an image. It does. To get it do this:

  1. Open Flicker to the picture you want to insert
  2. At the top of the picture, find the “All Sizes” button and click it
  3. On the next page, find the “small” link and click it
  4. At the bottom of the page, there is the code for inserting this image and the link back to the Flickr page for this image.
  5. Select it and copy it

How sweet is that? But let me point out one little gotcha. In the Flickr code, the anchor’s href attribute appears first, followed by the title attribute. While this is perfectly valid HTML, Y!360° dosen’t like it. Here’s what to do, once you’ve pasted the code into your table template, just cut and past the title attribute to precede the href attribute, like I have shown above. Other than that, the code is good to go.

Do you feel like you just drank from a firehose? Well, then, my job here is done. Feel free to leave feedback, corrections, better ideas, questions… the lot.

— Grant

Posted Wednesday, November 23, 2005 by Grant in Random

22/Nov/2005 — Ping “The Crew”   7 comments

The Crew wrote:

How did u put the photstream

i have made a flickr account how can i add it to my blog?

Good question. In fact, I have been meaning to post a “How To” on that very subject. This will be tonight’s project. Stay tuned.

BTW, I replied here (1) since others may be wondering the same thing and (2) I could not reply to the message.

— Grant

Posted Tuesday, November 22, 2005 by Grant in Random

21/Nov/2005 — More “Me” Stuff   43 comments

More “me” stuff

So, how’s it going with you?

Screen shot of a blank Yahoo 360 profile

Would you accept a connection request from someone with this profile?

Howdy, all you Y!360° guys and gals.

What’s going on with me? Why, I’m tickled you asked. Let’s take a little look-see.

Are my fifteen minutes up, yet?

Celebrity, such as it is, is not going to my head, I assure you. What’s this? No no, I ordered a low-fat, soy, decafe latte. This has dairy. Take it back and get it right this time!

Ha, just kidding… I love dairy.

“I Love Your Bird”

Isn’t he a great mascot? He’s a Hyacinth Macaw, but I don’t own him, only his picture. He lives at the National Aviary, in Pittsburgh’s beautiful North Side and he posed for me during a fund-raising event called “A Night in the Tropics.” He has a name, but do you think I could remember it?

Nope, got nothing.

Maybe Lydia can recall. [Update: Yep, she got it. His name is BONITO. Now, we can all get some sleep.]

To Be In Paris

If you read my blog entries about Paris, it might sound like I am writing from there… Yeah, I wish!

Lydia and I visited Paris from the 14th through the 24th of October this year. We are back home now and I am just way too slow transcribing my hand-written travel journal into legible, coherent blog food.

“Progress, not perfection,” as they say. I promise to keep at it.

I’m Not Ignoring You

Did you send me a message and I never replied? Here’s why. You have your message settings tuned to not allow me to reply (likely, since we are not connected.) Here’re some options to consider:

  • Open up your message settings to allow any 360 user to send messages.
  • Send an “Add” invitation. If I see that, I’ll accept the invitation (most likely) and then reply to your message.
  • Include a reply email address in your message.
  • Accept that I won’t be able to reply to you.


I read (and try to reply to) all my messages.

I will not connect to blank profiles.

Folks who are into stuff that weirds me out, may not get replies. (And they shouldn’t take that personally. It’s not a judgment of them as people. We just don’t share the same tastes and that’s totally cool, right?)

Other than that, be good, eat your veggies, call your mom/ dad/ brother/ sister/ son/ daughter/ cousin/ best friend, and smile.

— Grant

Posted Monday, November 21, 2005 by Grant in Random

Paris Vacation, Day 5   5 comments

La Défense, Arc de Triomphe, Champs-Élysées, and the Louvre
Image of Lydia on the steps in front of La Grande Arche

A better indication of the scale of La Grande Arche. That’s Lydia on the steps.

Image of the glass elevator riding its futuristic steel frame from the observation deck of La Grande Arche

The glass elevator riding its futuristic steel frame from the observation deck of La Grande Arche.

Image of commuters on a Metro train

On this trip, I had my eye out for interesting people shots. I like this one.

Image of the Eiffel Tower from the Arc de Triomphe with other visitors in the foreground

Shot of the Eiffel Tower from the Arc de Triomphe with other visitors whose stamina permitted the 280-something step climb.

Image of the inside of the Sephora store on Champs-Élysées

Sephora on Champs-Élysées—Euros were exchanged.

Image of an art class at the Louvre

Art class at the Louvre. Interesting age profile among the students.

Grant’s Flickr page

Wednesday, October 19

We had breakfast at the same place as yesterday—it might become the default place for the rest of our stay. Wow, we are halfway through the trip! After morning fuel, it’s on to the Metro for La Défense. This is modern Paris—skyscrapers, big business—just outside the old city.

Previous failed experiments at mixing old and new architecture have taught Paris city planners to keep them separate. (Case in point: Tour Montparnasse, which I saw described as a black, glass dagger stabbed into the heart of Paris.) Safely sequestered out of harm’s way, La Grande Arche is here, which stands in line with the Arc de Triomphe and, way out there, Place de la Concorde and beyond even that, the Louvre. The French love those straight lines.

La Grande Arche is immense and, as such, must be scaled for photographic advantage. Lydia went on ahead to buy the tickets while I lingered to take pictures. We had a little adventure as we arrived at the top. A young, French-speaking, Asian woman approached us about our tickets. She asked us to follow her, but then told us there was no problem. I was thinking, you might have started with that reassurance. I had been wondering what we had done, but we were innocent.

As it turns out, the cashier who sold Lydia our tickets had been skimming the till. She would take the correct money for two adult tickets (€15,) but ring in one adult and one student ticket. She would pocket the €1.50 difference. The company was on to her and was building a file against her. The young woman and her manager had Lydia fill out an official complaint and refunded us €1.50 (I suppose since the value of our tickets was only €13.50, even though we were charged €15.) What drama!

After our foray into international justice, we walked out to the roof observation deck to check out the view of Paris and take some shots. It was hazy and the photos suffered for that. After some strolling around the top of the Big Arch, we took the glass elevator back down to the plaza.

We walked around the whisks and the Thumb. (Is everything big out this way?) Then, we made our way over to another arch, the Arc de Triomphe, via—say it with me, now—the Metro.

No elevator for this arch, just 280-some steps, but it’s a great view once you catch your breath (or restart your heart, depending on your fitness level.) Up here we took lots of pictures, walked around and then descended back down to the street. The crazy traffic circle (round about) here has so many accidents that insurance companies simply split the cost fifty-fifty with the driver, if the diver is covered at all. We had driven around this on our taxi ride in from the airport.

The Arc de Triomphe is at the top of the Avenue des Champs-Élysées. This is the Fifth Avenue or Rodeo Drive of Paris. All the high-end shops and cafés are here. Rick Steves says that it is here where you get the “pinch me, I’m in Paris” moment. Personally, I had that moment when I saw the Eiffel tower in the “flesh” for the first time.

We did pull into a few shops and part with some Euros, but not too many of either. We also had a lunch just off the main drag that was so good I was left to wonder how I would eat “regular” food again back home. One of our stops was the Peugeot showroom. If you are serious about selling cars in France, you must have a showroom on Champs-Élysées. I picked up some gifts for friends and family here. No cars, well yes, but they were matchbox-style ones and some chocolate.

Farther along, we stopped in at Sephora for a look-see. Though it was Lydia’s idea to pop in, I ended up as the big shopper. I picked up some shaving oil for myself and some bath oil for my mother. I had never tried shaving oil before, but I did the next morning and it works wonderfully. We took a rest in a café inside the Renault showroom. From there, it was a short walk to the Metro and a couple of stops to the Louvre.

The Louvre is the largest museum in the world. There is no way you could see it all and, quite frankly, you don’t need to. We used Rick Steves’s guidebook and it took us turn by turn to key pieces and explained why they are important. We saw the Venus de Milo, the Winged Victory of Samothrace, and, of course, the portrait of Lisa del Giocondo, which we know as “my lady Lisa” or Mona Lisa. No pictures, please. In addition, we saw lots of other paintings and statues by Leonardo da Vinci.

We headed over to the Mesopotamia exhibit, but it was closed. In hindsight, it was a blessing, since we were exhausted by that point. You’d never guess what that led to. We returned to out hotel for a nap. Après nap, we headed across the street to a packed, young, hopping restaurant. Lydia ate and we both had wine.

Read more about day 5 on Lydia’s blog.

< Day 4 | Day 5 | Day 6 >

Posted Sunday, November 20, 2005 by Grant in Myself, Travel

Tagged with ,

19/Nov/2005 — It’s Just Me   38 comments

Tip: If you leave me a message and would like a reply, make sure that your settings allow messages or, alternatively, leave your email address in the message. There have been a few folks to whom I could not respond for this reason. I’m not being rude and ignoring you. It’s just that you haven’t given me any way to reply.

featured on Yahoo
brings new friends to 360
what’s expected now?

Hey, it’s just me.

Despite Yahoo’s opinion that this site (blog, what have you) is “interesting,” I can’t promise that you will think so, too. I’m flattered, though, that you at least are taking a look.

If you do find this place interesting and want to connect up with me in the Y!360° way, keep some things in mind. Fill out your profile a little before you make the invitation. You don’t have to get too personal, but a little basic information will help me know to whom I’m connecting. I am pretty tolerant, but I won’t connect either to blank profiles or to ones that make me feel uncomfortable.

A bit about this site

I am trying my hand at writing and photography. I have much to learn and you pros out there may see my efforts as amateurish. That’s okay. I’d love to learn from your experience. If you offer a constructive suggestion for improving my stuff, I will thank you for it.

I write honestly. I am open, but not without secrets. I keep some opinions to myself, yet, what I write is sincere. My writing reflects what I feel, what I believe, and what I think at the time I write it. It is my opinion, my point of view. You may disagree with what I write. In fact, I hope some of you do.

I welcome dissent here. However, if you wish to express that disagreement on my blog, please do so with respect for others who have commented and for me. Simply express yourself with the respect that you would wish extended to you. Inflammatory, rude, or violent posts will be deleted without explanation.

And if you agree with me, like what I’ve written, or think I’m the tops, well don’t keep that to yourself. I can handle a little ego-stroking now and then, too.

Welcome and thanks,

— Grant

Posted Saturday, November 19, 2005 by Grant in Random