Posts Tagged 'Web 2 0'

September 16, 2014

CSS3 Tips and Tricks – Generated Content Without jQuery

If you guys have read any of my past blogs, you know how much I LOVE jQuery, but every good developer knows that if there’s an easier or more efficient way of doing something: DO IT. With all the new developments with CSS3, HTML5, etc. etc., sometimes we have to get back to basics to relearn how to do things more efficiently, so here it goes!

Nearly every website has some form of 2.0/dynamic/generated content nowadays, and if your site doesn’t… well, it probably should catch up! I’ll show you how with some new CSS tricks and how it can reduce a lot of overhead of including the entire jQuery library (which would save you approximately 84kb per page load, assuming you have no other asynchronous/client side functionality you need).

I’ll start off with an easy example, since I know most of you take these examples and let your creativity run wild for your own projects. (Note to self: start a “Code Gone Wild” series.)

Usually this is the part where I say “First, let’s include the jQuery library as always.” Not this time, let’s break the rules!

FIRST, start off your document like any other (with the basic structure, set your DOCTYPE appropriately, i.e. strict vs transitional):

<!DOCTYPE html>
<html>
<head>
</head>
<body>
</body>
</html>

Wow, you can already tell this generated content’s going to be a TON easier than using jQuery (for those of you whom aren’t already jQuery fans).

Now let’s add in a div there; every time we hover over that div, we’re going to display our generated content with CSS. Inside of our div, we’re going to place a simple span, like so:

<!DOCTYPE html>
<html>
<head>
</head>
<body>
     <div class=”slisawesome”>
          <span data-title="Hello Cassandra!">What’s my name?</span>
     </div>
</body>
</html>

As you can see, the span content contains a simple question and the data-title attribute contains the answer to that question.

Now let’s just make this div a little bit prettier before we get into the fancy stuff.

Add some style to the <head> section of our document:

<style>
     .slisawesome  {
          /* Will TOTALLY be making another blog about the cool CSS gradients soon */
          background:linear-gradient(to bottom, #8dd2d9 , #58c0c7);
          padding: 20px;  /* give the box some room to breathe */
          width: 125px;  /* give it a fixed width since we know how wide it should be  */
          margin: 100px auto;  /* move it away from the top of the screen AND center it */
          border: 1px solid black;  /* this is just a little border */
          position: relative;  /* this is to help with our generated content positioning */
     }
</style>

Now you should have something that looks like this:

This is good; this is what you should have. Now let’s make the magic happen and add the rest of our CSS3:

<style>
     .slisawesome  {
          /* Will TOTALLY be making another blog about the cool CSS gradients soon */
          background:linear-gradient(to bottom, #8dd2d9 , #58c0c7);
          padding: 20px;  /* give the box some room to breathe */
          width: 125px;  /* give it a fixed width since we know how wide it should be  */
          margin: 100px auto;  /* move it away from the top of the screen AND center it */
          border: 1px solid black;  /* this is just a little border */
          position: relative;  /* this is to help with our generated content positioning */
     }
     .slisawesome span::before {
          content:attr(data-title); /* assigning the data-title attribute value to the content */
          opacity: 0; /* hiding data-title until we hover over it */
          position: absolute; /* positioning our data-title content */
          margin-top: 50px; /* putting more space between our question and answer */
 
          /* Fancy transitions for our data-title when we hover over our question */
          /* which I’m TOTALLY going to write another blog for ;) If you guys want, of course */
          -webkit-transition:opacity 0.4s; /* determines the speed of the transition */
          transition:opacity 0.4s; /* determines the speed of the transition */
     }
</style>

Now, right now, your page should still look like this:

That’s okay! We still have ONE more step to go:

<style>
     .slisawesome  {
          /* Will TOTALLY be making another blog about the cool CSS gradients soon */
          background:linear-gradient(to bottom, #8dd2d9 , #58c0c7);
          padding: 20px;  /* give the box some room to breathe */
          width: 125px;  /* give it a fixed width since we know how wide it should be  */
          margin: 100px auto;  /* move it away from the top of the screen AND center it */
          border: 1px solid black;  /* this is just a little border */
          position: relative;  /* this is to help with our generated content positioning */
     }
     .slisawesome span::before {
          content:attr(data-title); /* assigning the data-title attribute value to the content */
          opacity: 0; /* hiding data-title until we hover over it */
          position: absolute; /* positioning our data-title content */
          margin-top: 50px; /* putting more space between our question and answer */
 
          /* Fancy transitions for our data-title when we hover over our question */
          /* which I’m TOTALLY going to write another blog for ;) If you guys want, of course */
          -webkit-transition:opacity 0.4s; /* determines the speed of the transition */
          transition:opacity 0.4s; /* determines the speed of the transition */
     }
     /* Drum Roll --------- Here’s our hover magic */
     .slisawesome span:hover::before{
          opacity:1;
     }
     /* Okay… that was a little anticlimactic… losing cool points */
</style>

Despite my anticlimactic adding of “the magic,” we just added a :hover that will show full opacity when we hover, so refresh your page and try it out! You should see something like this when you hover over THE QUESTION:

Of course you could REALLY start getting fancy with this by adding some php variables for the logged in user, or perhaps make it dynamic to location, time, etc. The possibilities are endless, so go… go and expand on this awesome generated content technique!

-Cassandra

October 17, 2007

ISPCON Update: Blogging/Social Marketing Impact

ISPCON Update: Blogging/Social Marketing Impact – Do ya Digg?

With ISPCON starting today I thought it would be interesting to hear what companies and individuals in the ISP space are talking about when it comes to social medias, blogging and any other real user experience methods that are taken to attain and retain a customer base in the ISP world. After all, Softlayer is a cousin (be it distant cousin) of the ISP world and most of our executive management team has all lived the ISP experience at one time in our careers.

The session "using social networking and Web 2.0 to market your business" started off with an extremely interesting video that can be seen here:


Since it was voted one of the more famous YouTube videos, I might be one of the only ones that had not seen it yet, but nevertheless it is a cool look at Web 2.0 (and much more).

There are a few key themes that were driven home during the discussion.

Web 2.0 in its simplest form is user-generated and manipulated content. In technical terms its AJAX, Feeds and Simplicity. The Myspace, Facebook and Youtube phenomenon are drivers of this and we are seeing a huge influx of follow-on companies that are utilizing the common theme of user-generated content to monetize applications throughout the internet. An example of this would be the Facebook open API being used to build gadgets. One gadget cited is a whiteboard application allowing multiple users to collaborate in Facebook and through ad-generated monetization, an obscene number of nearly $100,000USD per month was being attributed to the creator.

Blogging is the real Search Engine Optimization (SEO). Living in the world of Buzz words, it's hard to read any tech publications these days without stumbling across SEO. What is it? Well, no one really knows, but it's some magic that companies are buying into which get them to the front of the search line, so to speak. The concept that blogging is the real SEO is because blogging is very close and very niche to the topics that are being blogged about. If I am a used car dealership in Dallas and I blog about my weekend sale in Dallas, it would make sense that when someone searches for used cars in Dallas, that you cannot get more directly connected. It all makes sense, now it's just how the information is dispersed which leads me to the last point that was driven home.

Tagging is critical to all socialization, blogging, and web 2.0 applications that you may be trying to publish for mass consumption. Since the eyeballs are critical it is key that the use of tagging and linking are used to increase the reach of your user generated-content. For example, the use of Digg, Reddit, and Del.icio.us are key drivers of eyeballs to your content. Tag it all, Tag it often and the eyeballs will follow.

So, when I publish this blog I am sure to Tag it with; Softlayer, Webhosting, Web 2.0, etc. Let's see if my social experiment will pay off and someone out there will Digg this!

-Sean

August 1, 2007

Web 2.D'oh!

What in the world is going on? There are people out there who are always determining that we must be labeled something. The Early 2000s was the dot.com era, then there was the bubble bursting era and it seems now that we live in the "Web 2.0 Era". Whatever label is put on any era there are always head-scratchers out there who catch someone's eye and this has definitely caught mine. In a recent article on webware.com, one of the brightest, high-flying Web 2.0 companies is now up for sale oneBay. Per the listing, these are the following attributes that make Xcellery an excellent Acquisition target (outside of the "buy on the cheap from ebay" thing):

  • The startup was ranked among the Top 5 at the Office 2.0 conference.
  • Approx. 10,000 subscriptions include paying customers on SalesForce.com/AppExchange
  • Huge waiting list for Xcellery Enterprise Edition (XEE) customers
  • State of the art technology: C#, ASP.NET 2.0, AJAX, MySQL/SQL server
  • Two years development time was invested to build Xcellery
  • Xcellery is integrated into SalesForce.com/AppExchange including a payment system with PayPal
  • www.xcellery.com has reached a PR five and is in the top three when searching for "Online Excel" and others
  • The founder team is interested to stay on board and help continue the venture

What this tells me is that no matter how technology changes our lives and how optimistic we are about conquering the world, underlying fundamentals of business are the key to any company's success. We (Softlayer) host a tremendous number of web 2.0 firms and are excited to see the growth and opportunities that are presented to many of these companies. After all, our customers' successes equate to a long-term relationship with us, so we are rooting for all of you.

So Web 2.0'ers, as we all set our sights for greatness, don't forget -- old school business-fundamentals drive a lot of the abilities for us to be innovative and ground breaking!

Keep thinking!!

-Sean

Categories: 
Subscribe to web-2-0