タグ: directsmile

DirectSmile User Conference 2014! #dsmuc14 #2014DSUC

投稿日: 投稿者: nogカテゴリー: Uncategorizedコメントをどうぞ

DirectSmile User Conference 2014

Thank you for all DirectSmile User who came Berlin at last week!
It was more than pleasure to meet you, and I really would like to tell big thank you for everyone, once again!

If you are unfortunately couldn’t come, please look forward next time, maybe next year? 😉

Twitter’s timelin on the Crossmedia Campaign

As side work of the User Conference, I made one small campaign based on my User Conference experience of “Jenkins User Conference 2014, Berlin”.
They had a multiple screen beside of main screen which showed presentation itself. With those extra screen, they have showed “Live Tweet” which has specific #Hashtag.

For me it was pretty nice, because I even can see other’s direct feedback at same time. And purely sure, this would be a kind of “must have thing” for the conference which you will invite lots of people. As you know, interactive communication is more important than 1 way presentation.

What was the result? You can just check all of direct feedback in below!

http://dsmuc14.nogtips.com/

Twitter Widget Campaign

So here is how you can very easily make such Crossmedia Campaign which just display specific tweet that has specific #Hashtag.

How to make it?

  1. Create Twitter Widget
  2. Set “Search Word” with specific #Hashtags
  3. Paste HTML code on the DSMX Campaign page
    –> You just need to place those code which you will see at the bottom of the timeline preview on Widget creation page.

That’s it!

This way, you can make such campaign in 5 min!
And you even can offer them as additional Conference tool! How much you will charge this for your client?

By the way, here is today’s nogtips 🙂

In the case you’d like to show “embedded Timeline” with much wider than default, you can control is by CSS.

.twitter-timeline {
min-width:800px!important;
}

Thank you everyone! and see you again at next time!

広告

Userfriendly jQuery for Input

投稿日: 投稿者: nogカテゴリー: ダイレクトスマイル、DirectSmile Crossmedia、jQueryコメントをどうぞ

man at hand
The blank input field sometime makes me confused what I should enter.

That’s why user-frendly website has some example text displayed by gray color.
It not so difficult to make, and I think almost all Crossmedia user already know how to implement it into the campaign.

Here is one example by using jQuery.

PreSet Text for Input fields

1. Layout items

Just drop some input fields, and assign them to the database column.
Item Layout

2. Check the name

Because this tip identify each input field by class name, so you need to check the exact name by display preview of the campaign page. Then add identical class name by using another jQuery,
To do so, you need to know the name of each input fields. You can check it by using FireBug with FireFox. or even you can simply check the code of preview page.
Check name of input field

 

3. Add script

Here is the main part of jQuery script you need to add.

$(".focus1").focus(function(){
          if(this.value == "Company Name"){
               $(this).val("").css("color","#000");
          }
     });
     $(".focus1").blur(function(){
          if(this.value == ""){
               $(this).val("Company Name").css("color","#969696");
          }
     });

It because this tip require to have default value for each input fields, so I give the value by script as well. Entire of script looks like below.

<script type="text/javascript">// <![CDATA[
$(function(){
	$('input[name="XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX"]').addClass('focus1');
	document.dsmf_form.XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX.value = "Company Name";
	$('input[name="XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX"]').addClass('focus2');
	document.dsmf_form.XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX.value = "Your Name";
	$('input[name="XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX"]').addClass('focus3');
	document.dsmf_form.XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX.value = "example@example.com";

     $(".focus1").focus(function(){
          if(this.value == "Company Name"){
               $(this).val("").css("color","#000");
          }
     });
     $(".focus1").blur(function(){
          if(this.value == ""){
               $(this).val("Company Name").css("color","#969696");
          }
     });
	 $(".focus2").focus(function(){
          if(this.value == "Your Name"){
               $(this).val("").css("color","#000");
          }
     });
     $(".focus2").blur(function(){
          if(this.value == ""){
               $(this).val("Your Name").css("color","#969696");
          }
     });
	 $(".focus3").focus(function(){
          if(this.value == "example@example.com"){
               $(this).val("").css("color","#000");
          }
     });
     $(".focus3").blur(function(){
          if(this.value == ""){
               $(this).val("example@example.com").css("color","#969696");
          }
     });
}); 
// ]]></script>

4. Add CSS

I also change the color of text by using CSS. Here is the code.

.focus1 {
    color: #969696
}

It will help visitor, and hopefully they won’t be confused.

NOG