Skip navigation.

My Opera News

Behind the scenes at My Opera community

Posts tagged with "changes"

Markup changes

By Fredrik Andersson. Monday, 18. May 2009, 15:34:57

, ,

Later this week we are planning to release a new batch of updates for My Opera. The updates contains some small HTML changes that might affect you if you have written your own custom CSS.

1. Changes have been made to the "view photo" page.

New buttons and image navigation have been added inside the #frame4 div. Default css for this is included for all designs. The star ratings div have also been moved below the photo.

HTML preview:

<p id="imgbtn">
<a href="#"><span>Share</span></a>
<a href="#"><span>Zoom</span></a>
</p>

<div id="imgnav">
<div>
<a href="#"><img src="#" width="44" height="29" alt="Previous"></a> 
Image x of x
<a href="#"><img src="#" width="44" height="29" alt="Next"></a>
</div>
</div>

2. Changes have been made to the comments markup.

There's a few changes to the comments markup. The new version looks like this (every second comment is called comment1 and comment2, just like before). Active users avatar have also been added to the "write a comment" form.

HTML preview:

<div class="comment1">
<div class="avatar"><a href="#"><img src="#" alt=""></a></div>
<p class="comment-by"><b><a href="#">username</a></b> <span class="comment-date"><a href="#">#</a> date</span></p>
<div class="text">text</div>
</div>

3. Avatar markup is standardized to having the class name on the div.

HTML preview:

<div class="avatar"><a href="#"><img src="#" alt=""></a></div>

22 comments

The new My Opera

By Fredrik Andersson. Tuesday, 18. November 2008, 07:36:00

, , ,

my opera screenshot

Hi! Today we're launching a new version of My Opera. We have a new fresh look, 1GB of free space, localized interface in 7 languages (and more coming soon), a friends activity feed, an API for embedding My Opera photos on other sites, slideshows for the photo albums and much more. :smile:

This time we also had a bit of beta testing along the way. Special thanks to dantesoft, Tamil, thobi, rose-marie, sgunhouse, remcolanting, coxy, BAMAToNE, WillYum and Ramunas for helping out.

Design

As the lead My Opera designer I wanted to give the new site a strong visual identity with that special Opera feeling. The goal was to make a simple and functional design that highligted the content rather than just beeing decorative. I also wanted to simplify the site and make it easier to access features such as Opera Link. The new design is also made to fit well with the upcoming launch of our new Opera.com site.

For those of you that write your own blog CSS, you might want to read about the HTML changes.

Mobiles

The new My Opera features many optimizations for mobiles and there's even a function where you can view the mobile optimized version by clicking a button at the bottom of each page. We hope that this will inspire those of you who have not yet tried out Opera's excellent mobile browsers! :smile:

If you are already using a mobile to browse My Opera you might notice that you will, in most cases, get the mobile optimized version by default. If you want the full version you can switch to it by clicking the button in the footer, but we recommend using the optimized version as it's not just mobile friendly CSS but also smaller images and less code to make it faster.

Localization

One of the main features of the new site is localization. I'll let our lead developer Cosimo say a few words about that:

We started working on localizing My Opera around March this year. Initially this was thought to be impossible very hard with the existing architecture, but we tried to build the internationalization engine to be as simple and standard as possible, planning and documenting even the limitations. It's based on gettext and PO files. We even worked ourselves on the translations, and of course the italian is mine. So you can complain to me for that one :smile:

In the long-term this has been a fairly good choice. In the meantime we also refined our internal tools. One is a command line application that converts the PO files that translators hand us into some ready-to-use code that is loaded at runtime by the application servers.

The integration with our templating engine has been a bit tricky, but now it works whatever templating system we will choose in the future. The most exciting thing about the I18N "layer" has been when I first saw My Opera translated in Japanese and Chinese. Really exciting!

Scalability

We have made a lot of front-end and back-end improvements to speed up the site and increase scalability. Cosimo:

Work on application code and backends has been frantic in the last months. Some of the improvements that we have introduced are:

  • the skins section is much faster now, because all skin thumbnails are served statically using our new static.myopera.com server.
  • we have a full-page cache now, so many of the most used My Opera pages are served statically now, with a fine-grained control of how/when a request can be cached. Basically we took the ~20 most used pages and we cached them completely. Then we update those cached version every now and then... :smile:

We know there's still a lot to do. We will concentrate on improving the database performance to avoid proxy errors. Specially since some of the new features (activities feed, etc) will stress the database even more!

We have good idea of what is failing and why, thanks to a cool ajax monitoring application we wrote in our "spare" time. If you are interested in our scalability challenges and how we plan to solve them, take a look at a talk I gave at the last Perl Workshop in Italy. It's slightly outdated, but you can get the basic ideas.

Friends feed

Another important goal for the new My Opera was to increase activity and make it easier for you to communicate with your friends and follow their activities on the site. One of the main features for this is the friends feed. The feed is activated when you and your friend have both added each other as friends on My Opera. It does not activate if it's just a one way friendship.

Looking ahead

We hope that you like the new My Opera. It might be a bit shaky the first few days, as we have released a lot of new code, but we are sure it will be great. A lot of work has gone into this release and we see this as a good platform to build on.

Finally, a big thanks to the entire My Opera team and all of you My Opera members that make this a great community! :cool::happy::cheers::hat:

26 comments

HTML changes

By Fredrik Andersson. Monday, 17. November 2008, 10:23:33

, , ,

We're about to release a new version of My Opera. The release contains some HTML changes. This might affect you if you have written your own custom CSS, but the changes are moderate and it should be fairly easy to adjust the CSS.

The first thing we did was to switch from XHTML to HTML. Yes, we believe that HTML is the way to go and we finally got rid of that xml prologue that caused "some old browsers" to go into quirks mode. You will also notice that it's now somewhat easier to read the code when you view the source.

You do not need to edit any XHTML content that you might have included in your old posts - it will automatically be transformed to HTML when the page is rendered.

For most blog themes we have also moved the #myo menu div inside the #wrap3 div. This means that the My Opera top menu will be as wide as your page, instead of stretching over the entire browser window. (there are a few blog themes that still have the #myo div outside the wrapping div's)

Blog sidebar

For the new My Opera we wanted to standardize the image sizes. We used to have 29 different sizes for each user photo! This was way too much and we now have only 4. This made us update the HTML/CSS to fit better with the new images.

The standard width for the sidebar is now 240 px.

The image sizes for the friends list in the sidebar used to be 102x77. It's now 104x78.

The images sizes for the latest comments used to be 45x43. It's now 40x30.

The images sizes for the recent visitors used to be 64x48. It's now 68x51.

Friends

The image sizes for the friends page used to be 169x127. It's now 104x78. The location field was also removed to simplify the page.

Photo albums

Changes have been made to the photo albums code. In essence we have made it into a list rather than just div's.

Photo albums overview. OLD code:

  1. <div class="albums">
  2. <div class="album1">
  3. <div class="albumthumb1">
  4. <a href="#">
  5. <img src="#" width="160" height="120" alt="" class="albumimage" />
  6. </a>
  7. </div>
  8. <div class="albumnfo">
  9. <h3><a href="#">Title</a></h3>
  10. <p class="imagecount"><b>Images:</b> xx</p>
  11. <div class="albdesc">Description</div>
  12. </div>
  13. <div class="clear"> </div>
  14. </div>
  15. <div class="album2">
  16. <div class="albumthumb2">
  17. <a href="#">
  18. <img src="#" width="160" height="120" alt="" class="albumimage" />
  19. </a>
  20. </div>
  21. <div class="albumnfo">
  22. <h3><a href="#">Title</a></h3>
  23. <p class="imagecount"><b>Images:</b> xx</p>
  24. <div class="albdesc">Description</div>
  25. </div>
  26. <div class="clear"> </div>
  27. </div>
  28. </div>

Photo albums overview. NEW code:

  1. <ul class="nobullets" id="albums">
  2. <li class="album1">
  3. <a href="#" class="albumimage">
  4. <img src="#" width="280" height="210" alt="">
  5. </a>
  6. <h3><a href="#">Description</a></h3>
  7. <p class="imagecount"><b>Images:</b> xx</p>
  8. <div class="albdesc">Description</div>
  9. </li>
  10. <li class="album2">
  11. <a href="#" class="albumimage">
  12. <img src="#" width="280" height="210" alt="">
  13. </a>
  14. <h3><a href="#">Description</a></h3>
  15. <p class="imagecount"><b>Images:</b> xx</p>
  16. <div class="albdesc">Description</div>
  17. </li>
  18. </ul>

Photo album view. OLD code:

  1. <div id="mypix">
  2. <div class="thumb1">
  3. <div>
  4. <a href="#"><img src="#" alt="" width="320" height="240" /></a>
  5. </div>
  6. <p class="photoinfo right photocomments">
  7. <a href="#">x comments</a>
  8. </p>
  9. <p class="photoinfo photoviews">
  10. xx views
  11. </p>
  12. </div>
  13. </div>
  14. <div class="thumb2">
  15. <div>
  16. <a href="#"><img src="#" alt="" width="320" height="240" /></a>
  17. </div>
  18. <p class="photoinfo right photocomments">
  19. <a href="#">x comments</a>
  20. </p>
  21. <p class="photoinfo photoviews">
  22. xx views
  23. </p>
  24. </div>
  25. </div>
  26. </div>

Photo album view. NEW code:

  1. <ul class="nobullets" id="mypix">
  2. <li class="pic1">
  3. <a href="#" class="thumb"><img src="#" alt="" width="320" height="240"></a>
  4. <p class="photoinfo right photocomments">
  5. <a href="#">x comments</a>
  6. </p>
  7. <p class="photoinfo photoviews">
  8. xx views
  9. </p>
  10. </li>
  11. <li class="pic2">
  12. <a href="#" class="thumb"><img src="#" alt="" width="320" height="240"></a>
  13. <p class="photoinfo right photocomments">
  14. <a href="#">x comments</a>
  15. </p>
  16. <p class="photoinfo photoviews">
  17. xx views
  18. </p>
  19. </li>
  20. </ul>

23 comments