iOS AND ANDROID
Topics:
Choose a tag
Another new feature on the future release of our company and work pages are buttons that individually fade in and out. Our designer always has ideas of how to add extra “wow” factors to our site and this was one of them. To see a preview of this effect, you can view the script’s demo – I’ll give you some time to play…
…pretty cool, huh? It’s help making our page look hot. So why not try it out on your page too? Below is the simple code to help you do this. The script for it is short – the part that should take you the most time is the styling to fit your own website – otherwise, everything is pretty basic.
Before I begin, I want to note that my method is actually fading a whole new div in and out instead of fading the background color itself. There are ways to animate the background color, but you have to download the jQuery color plugin in order to accomplish this. Hopefully this changes in a future release of jQuery.
As always, the javascript and link to jQuery are placed inside the <head> tag. The text highlighted in red are the id’s and classes of the code. These can be changed to whatever you want – if you do change them be sure to also change them in the CSS and HTML or nothing will work.
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$('#buttonDiv a').hover(function() {
$(this).children('.hoverButton').stop(true, true).fadeIn(700);
}, function() {
$(this).children('.hoverButton').stop(true, true).fadeOut(700);
});
})(jQuery);
</script>
The code is short; this leaves you plenty of time to style your actual buttons to match your own layout. To explain what the code is doing is pretty simple – when you hover over the individual button (#buttonDiv a) the hoverButton will fade in at a speed of 700 milliseconds (note that you can change this speed to be faster by using a lower number or slower by using a higher number). When you hover off of it, the hoverButton fades out. Hovering over a new button will not effect the hover of a previous button – creating the cool fading effect.
The HTML is pretty basic. All of the buttons are contained within one <div> with the id of buttonDiv. The <a> tags are the individual buttons. As long as the buttons are contained inside the buttonDiv, they will work. Feel free to move and style them as you please (CSS example is below).
<div id="buttonDiv">
<a href="#">
<span>Button Text</span>
<div class="hoverButton"></div>
</a>
<a href="#">
<span>Button Text</span>
<div class="hoverButton"></div>
</a>
(...continue to place more buttons...)
</div>
The javascript is small and simple.
While the CSS is used to style the buttons, there are some very important parts that help make these buttons position and size correctly. These parts of the code are highlighted in red and explained below.
<style type="text/css">
#buttonDiv {
margin:50px auto;
width:310px;
}
#buttonDiv a {
background-color:#444;
text-decoration:none;
color:#fff;
cursor:pointer;
display:block;
float:left;
height:35px;
margin:1px;
position:relative;
text-align:center;
width:150px;
}
#buttonDiv span {
color:#fff;
font:bold 11px/35px Arial, Helvetica, sans-serif;
position:relative;
z-index:1;
}
#buttonDiv div.hoverButton {
background-color:#00aef0;
display:none;
height:35px;
width:150px;
left:0;
position:absolute;
top:0;
z-index:0;
}
</style>
Once again, to view this demo click here (note that I also added rounded borders and shadows for you non-IE users).
If you have any questions, feel free to leave a comment. Or if you used this script, share the link. I’d love to see how you integrated it to your own website!
This is one of the cooler things ive come across lately. Now you can transform any site into a geocities site with the Geocities-izer. It even adds glorious MIDI music. Flaming torch gifs, nebulas, Im starting to feel sweaty. Im going to lay down .
Enjoy the catastrophes you create here…The Geocities-izer
Well that’s it. The floppy disk era is almost over. I know you’ re probably asking yourself, “didn’t the floppy disk die years ago?”. Well it seems that our buddies in Japan are still using those 3 1/2 -inch / 1.44 MB disks. Boy I don’t miss 15 disk software installs or bending that medal slider thing, getting the disk stuck in a computer and using a trusty paper clip to “hopefully” pop it out. So who do we have to thank for the moratorium on that old technology, well its Sony. Looks like they own a major chunk of the floppy disk market in Japan. Here is the article on on how Sony is putting an end to this technology.
Sony Delivers Floppy Disk’s Last Right
The days of the 3.5-inch floppy disk are now officially numbered.
Sony, which boasts 70 percent of the anemic market, announced Friday that it would end Japanese sales of the ancient storage medium in March 2011, according to a report in the Mainichi Daily newspaper.
The 3.5-inch floppy was a ubiquitous and necessary component for storing and transferring files between personal computers for nearly three decades. Sony pioneered the 3.5-inch floppy disk in 1981, eventually replacing the 5.25-inch floppy disk that had previously been the popular storage format.
However, as the size of files and programs grew, the floppy disk was pushed aside by inexpensive and larger-format storage medium. Thanks to the creation of storage methods such as CDs, DVDs, Zip, and USB drives, Sony saw its Japanese sales of floppies decline from a record 47 million disks in fiscal 2002 to 12 million in fiscal 2009.
Most other floppy disk manufacturers had long since pulled out of the market, and Sony itself has already ceased sales to most of its overseas markets.
Certainly the writing had been on the walls for years. With the release of the iMac in 1998, Apple was the first computer maker to take the plunge and eliminate the floppy completely. Dell followed suit in 2003 when it dropped the floppy as standard equipment on one of its Dimension desktops.
## Source Link: http://news.cnet.com
Our friends at Information is Beautiful have published a brilliant info graphic of the meaning of colors throughout the different cultures of the world. Great example of a simple and beautiful way to showcase a great deal of information without overwhelming or frustrating.
The Times of UK just posted an article that talks about how we can’t work properly amid a barrage of emails, texts and tweets.
We need to clear our minds and focus on what matters, but it’s a tough job when we are bombarded with 34 gigabytes of information a day. That’s about 8 to 9 full length movies.
Being a business owner doesn’t help there are so many tasks, decisions, distractions, priorities, procedues, and interactions that we must mentally manage. It feels like balancing a bunch of spinning plates.
Here are some of the habits that I do to help manage my mental:
Exercise
I try to hit the gym before work. In the book Brain Rules, John Medina talks about how our brains developed while our bodies were in a constant state of movement. Our ancestors used to hike an average of 12 miles a day.
Take breaks
The brain becomes retroactive after 20 minutes of focus. Take a break by getting up and walking around. Not by watching TV or browsing the Internet.
Give attention to people
Q: What’s more important than your laptop? A: The people you work with. We are inturrpted by co-workers quite often. It’s easy to passively interact with them continuing to work on the computer. Instead ask for a moment, get to a good place with what you were doing, then turn and talk to your co-worker.
More pencil and paper
Computer programs can help you with more than it really can. The truth is that the best way to be creative is with a paper and pencil. Those two simple tools are not bound by the rules of a program. Is I don’t use a computer to take notes, outline presentations, or brainstorm mindmapping.
Talk through things
Again bringing focus to people over computers: I’ll start an email, stop halfway, then either pick up the phone or walk over to someones desk to simply talk to them. I reserve emails for precursor conversations, simple questions and answers, scheduling time, and sharing files.
Check out the original article: Have we forgotten how to concentrate?
Thanks you Steve Rubel for the link.
If you have more tips for us/me that you use in your work/mental balance post a comment.
I’ve used this PSD a few times to get a quick “Site Down” up while we do maintenance or the site is just down due to servers going down. I had to refer to it so everyone can make use of it. Soh Tanaka shows how in a few short CSS lines and with his PSD you could get a nice looking Site Maintenance message up in a couple of minutes. The PSD is available here and the CSS code you can find here. Shoutout to Soh Tanaka!
Got a letter today about this and Shawn’s been wondering about how to check the data usage so here it is:
“Phone: Call 1-800-922-0204 or dial *611 from a Verizon Wireless handset. Enter your broadband device mobile number (can be found at VZAccess Manager), then press 1 to hear your data usage.
Laptop: Use VZAccess Manager. click on Update Usage button to display estimated unbilled usage for the current month.
Online: verizonwireless.com/myaccount to access the account info, there you can also check usage numbers”
One last cool thing that they give you is access to their hotspots:
“Visit verizonwireless.com/wifi to access support for Verizon Wifi which is now included with your Mobile Broadband plan and alllows you to access thousands of hotspots at no additional charge”
Microsoft Office 2010 is going to come out soon. You can download the beta here. One of the biggest features new in Word, PowerPoint, and Excel is co-authoring.
Co-authoring will allow people to share, edit, and collaborate on documents in real time. Yes, its like Google Docs but from your desktop. I was first fascinated by the concept when I learned about the operating system for the One Laptop per Child (OLPC) computers. The OLPC laptops allows children to work individually (home), within a selected number of people (groups), or publicly (neighborhood). The entire OS is build from a collaboration stand point allowing children to share anything they do on a computer with people around them. This is very similar to the way we work everyday in the office.
We’ve found ourselves in a situation a few times where we are brainstorming in the same room within the same shared Google Spreadsheet. Similar to how we would post stickies on the white board we posted words in cells. This made the act of documenting and organizing ideas very easy.
So, Microsoft 2010 seeks to take us a step further in that direction. Its not fully where I’d like it to be. To fully utilize the co-authoring system Microsoft says in a footnote:
“Instant messaging and presence requires one of the following: Microsoft Office Communications Server 2007 R2 with Microsoft Office Communicator 2007 R2; Windows Live Messenger, or another instant messaging application that supports IMessenger. Voice calls require Office Communications Server 2007 R2 with Office Communicator 2007 R2 or an instant messaging application that supports IMessengerAdvanced.”
I’m still interested to see how this pans out, but the real solution will be on the operating system level.
Was doing some research today on an IPad case as I still don’t have one. The guys at the office got the Apple one, but I don’t really like it as it’s very cheap feeling, but I do love that it converts into the stand for the IPad. So I looked at hard/soft cases, soft sleeves, folio, folio/book-stand cases and I’m leaning towards getting protection and the book-stand functionality with a few choices I’ll show here:
1. Incase convertible book jacket – protects the IPad all the time and gives 3 viewing angles when you’re at a table. It’s close to what Apple released, but from what I’m seeing in the reviews, it’s of much better quality and people like it.
2. Macally Bookstand – Very similar to Apple case, but I like the color more and it fully exposes the edges of the ipad. No reviews to speak of, so I’m hesitate to take on for the team and buy it. The note that the IPad isn’t included is from the legal department :)
3. Marware Eco-Vue - This one is the most interesting of the 3 as it’s very slick looking, gives you the 2 bookstand options, but also throws in a hand-sleeve where you can hold the IPad like it’s a glove, check it out below:
I think the glove sleeve sells me on the Marware one, but I’m going to sleep on this on. So these are the one’s I’m thinking about, let me know what you’ve found or what you’re using for the IPad protection dilemma. I also found this article at PC World that discuss a bunch of companies that are creating cases/sleeve/ bookstands for the IPad, most of which I’ve never heard of. The custom ones are pretty cool, and there’s one in there that does decals :)
Marketing your company is just as important as the quality of work you do. In fact, for companies like ours the quality of our work is a major component of marketing.
For a fast growing business where founders and owners are a part of the production process, it becomes difficult to continuously reach out to new potential customers.
I just asked Joe Zeff, owner of Joe Zeff Design, a 3D graphic design company located in new jersey, how he markets his company. He gave me 3 ideas:
1. Exposure through work – the magazine industry has really embraced 3D design as an alternative to photography and illustrated information design. Although there isn’t a big return from these projects, but they build credibility and relavence.
2. Email blast – Joe’s target customers are art directors, he has a list of thousands of them, each month he sends them a blast email showcasing his latest work.
3. Blogging/ social networking – this was surprising to Joe, but blogging has put him on the forefront of conversations and he’s able to contact many a bigwig through Twitter.
Thanks Joe!
:P
