Archive for the 'web' Category Grouped Archives

    I have now, finally, succeeded to get into working with the twitter API - one of the most popular around. I am impressed by the possibilities and will try more. This is a little script that I startes following an introduction printed in German PHP Magazin.
    The layout needs some finetuning, but it works really well. I will keep you updated when I modify it.
    This post might be interesting for you...

    • if you are an beginner or intermediate php developer looking for a base where to start coding your own twitter display.
    • if you are already experienced in copy & pasting php code into your wordpress blog, for example, expanding the functionality of your sidebar or your page template

    The Twitter API provides JSON technology and can be accessed by the cURL command. The PHP version you therefore need is 5.2 and above.
    I you like to work with this code, copy and paste it into a page on your blog or other php enabled website.
    Caution: You need to have the Exec-PHP plugin installed in order for the code to be executed. The additional CSS definitions might scramble the display of your website layout, so consider to modify it if needed.
    Does anyone know a workaround for this?
    To get the plain php code, click on "view plain" above the code display.


    Notice: Twitter only allows 100 updates per hour, so the timeline display might be empty during heavy traffic.
    Now have fun with the code:

    <?php
    // functions
    function gradientHexBGcolor($k=6){
    return sprintf("%02X%02X%02X", 29+$k*18, 9+$k*20,9+$k*20);
    }
    function gradientHexFGcolor($k=6){
    return sprintf("%02X%02X%02X", 260-$k*5, 260-$k*5,260-$k*5);
    }
    
    // Init Data
    $fill = '';
    $thisPage = $_SERVER['REQUEST_URI'];
    
    //Enter your Twitter data here:
    $twitName = "MyTwitterUsername";
    $twitPass = "MyTwitterPassword";
    $twitUserDataURL = "http://twitter.com/users/show/MyTwitterUsername.json";
    $twitGetURL = "http://twitter.com/statuses/friends_timeline.json";
    
    // Check if a hashtag was given?
    
    if (!$_POST['hashtag']) {
    		$fill = 'Enter hashtag here...';
    		}
    		else {
    		$tag = $_POST['hashtag'];
    		$twitGetURL = "http://search.twitter.com/search.json?q=%23".$tag;		
    		}
    
    // cURL 1: get Userdata:
    // Init cURL
    $curl = curl_init();
    // set Userdata URL
    curl_setopt($curl,CURLOPT_URL,$twitUserDataURL);
    // prepare for return values
    curl_setopt($curl,CURLOPT_RETURNTRANSFER,1);
    // set authentification
    curl_setopt($curl,CURLOPT_USERPWD,"$twitName:$twitPass");
    // get + decode return values
    $returnUser = json_decode(curl_exec($curl));
    // close cURL
    curl_close($curl);
    
    // cURL 2: get timeline or tag search data:
    // Init cURL
    $curl = curl_init();
    // set URL
    curl_setopt($curl,CURLOPT_URL,$twitGetURL);
    // prepare for return values
    curl_setopt($curl,CURLOPT_RETURNTRANSFER,1);
    // set authentification
    curl_setopt($curl,CURLOPT_USERPWD,"$twitName:$twitPass");
    // get + decode return values
    $return = json_decode(curl_exec($curl));
    // close cURL:
    curl_close($curl);		
    
    // define & output css style definitions:
    echo '<style type="text/css"> 
     					div, .twitapi a, p, span, table, td, input, textarea, b, blockquote, th, form {font-family:Tahoma,Trebuchet MS,Arial,sans-serif;font-size:8pt;border:0;margin:0;padding:0;line-height:140%;}				
    					div.twitapi {width:540px;background:#CDCDCD;padding:6px 0;}	
    					.twitapi p, .twitapi br {display:none;}	
    					.twitapi hr {border:0;border-top:1px dotted #FFF;}		 	
    					.twitapi table {#position:relative;border:0;border-collapse:collapse;width:100%;}	
    					.twitapi table td {width:50%;border:0;padding:0;overflow:hidden;}
     					pre {color:#000;text-decoration:none;border:0;margin:0;padding:0;} 		
    					.twitapi a, .twitapi img,.twitapi span,.twitapi div {color:#FFF;text-decoration:none;border:0;margin:0;padding:0;} 
    					div.outer {margin:6px 3%;padding:0;width:94%;}					
    					div.wrap {#position:relative;display:table;height:48px;text-align:left;margin:6px 3%;padding:0;width:94%;}
    					div.text {#position:absolute;#top:50%;display:table-cell;vertical-align: middle;padding:0;}	
    					.twForm {color:#FFF;padding:0;}									
    					.twForm span {display:block;height:24px;margin:0;padding:0;overflow:hidden;}	
     					.twForm input, button, textarea, select {width:100%;height:100%;border:0;padding:5px;color:#FFF;overflow:hidden;}
     					.twForm .button {text-align:right;}	
     					.twForm .button:hover {color:#'.gradientHexBGcolor(7).';}	 					
     					.twForm textarea {font-weight:bold;}					 				 				 													
    					div.inner {#position:relative;#top:-50%;overflow:auto;margin:0 10px;}		
    					a.img {display:inline;float:left;width:48px;height:48px;overflow:hidden;}
    					a.img img {width:48px;height:48px;border:0;}
    					
      		</style>';
    
    
    // output twitter container & headline & buttons
    echo '<div class="twitapi">
    		<div class="wrap" style="background-color:#'.gradientHexBGcolor().';">
    		<table><tr><td>
    			<a class="img" href="'.$returnUser->profile_image_url.'"><img src ="'. $returnUser->profile_image_url.'"></a>
    				
    				<form class="twForm"  action="" method="POST"><input name="line" value="" type="hidden">		 
    					<span><textarea readonly style="background-color:#'.gradientHexBGcolor(6).';">'.$twitName.'\'s timeline</textarea></span>	
    					<span>														
    					<input class="button" style="background-color:#'.gradientHexBGcolor(2).';" value="Refresh now!" type="submit">
    					</span>				
    				</form>	
    				</td>	
    				<td>					
    				<form class="twForm" action="'.$thisPage.'" method="POST">	
    					<span>	
    					<input class="text" style="background-color:#'.gradientHexBGcolor(8).';" name="hashtag" value="'.$tag.$fill.'" type="text">
    					</span>
    					<span>								
    					<input class="button" style="background-color:#'.gradientHexBGcolor(4).';"value="Search now!" name="submit" type="submit">
    					</span>				
    				</form>	
    				</td>					
    				</tr></table>								
    		</div>
    		<hr>';
    	
    
    // output tweets
    // output friends' timeline if no hashtag given, else tweets with hashtag
    if (!$tag) {
    			foreach($return as $key=>$tweet) {
    			if ($key<=10) {		
    					$text = $tweet->text;
    					// Add links to URLS
    					$text = ereg_replace("[[:alpha:]]+://[^<>[:space:]]+[[:alnum:]/]","<a href=\"\\0\" rel=\"nofollow\">\\0</a>", $tweet->text);
    					// Add links to Twitterprofiles with @	
    					$text = preg_replace("#(^|[\n ])@([^ \"\t\n\r<]*)#ise", "'\\1<a href=\"http://www.twitter.com/\\2\" >@\\2</a>'", $text); 
    					// Add links to hashtags #	
    					$text = preg_replace("#(^|[\n ])\#([^ \"\t\n\r<]*)#ise", "'\\1<a href=\"http://hashtags.org/search?query=\\2\" >#\\2</a>'", $text); 	 		 
    					echo '<div class="wrap" style="background-color:#'.gradientHexBGcolor($key).';">
    					<a class="img" href="http://twitter.com/'. $tweet->user->screen_name.'"><img src ="'. $tweet->user->profile_image_url.'"></a>		
    					<div class="text">	
    						<div class="inner" color="#'.gradientHexFGcolor($key).'">					
    					<a href="http://twitter.com/'. $tweet->user->screen_name.'">'. $tweet->user->screen_name.'</a>: 
    					'.$text.' >>'. $tweet->source.'</div></div></div>';
    					}
    			}
    		} 		
    		else {
    			foreach($return->results as $key=>$tweet) {	
    			if ($key<=10) {				
    						$text = $tweet->text;
    						// Add links to URLS
    						$text = ereg_replace("[[:alpha:]]+://[^<>[:space:]]+[[:alnum:]/]","<a href=\"\\0\" rel=\"nofollow\">\\0</a>", $tweet->text);
    						// Add links to Twitterprofiles with @	
    						$text = preg_replace("#(^|[\n ])@([^ \"\t\n\r<]*)#ise", "'\\1<a href=\"http://www.twitter.com/\\2\" >@\\2</a>'", $text); 
    						// Add links to hashtags #	
    						$text = preg_replace("#(^|[\n ])\#([^ \"\t\n\r<]*)#ise", "'\\1<a href=\"http://hashtags.org/search?query=\\2\" >#\\2</a>'", $text); 	 		 
    						echo '<div class="wrap" style = "background-color:#'.gradientHexBGcolor($key).';">
    						<a class="img" href="http://twitter.com/'. $tweet->from_user.'"><img src ="'. $tweet->profile_image_url.'"></a>				
    
    						<div class="text">	
    						<div class="inner" color="'.gradientHexFGcolor($key).'"><a href="http://twitter.com/'. $tweet->from_user.'">'. $tweet->from_user.'</a>: 
    						'.$text.' at '. date('M d,Y',strtotime($tweet->created_at)).'</div></div></div>';
    						}
    			}			
    		}		
    
    
    echo '</div>';
    ?>
    

    I found this video at WIRED. MIT students build a prototype of a wearable computer that projects any information on any surface, anywhere you are.

    Although I am not a friend of omnipresent technology, I must admit these are faszinating applications for future technology. Read more at the Wear ur World project website

    Wired quotes Pattie Maes, the project manager of Wear ur World:

    In the tactile world, we use our five senses to take in information about our environment and respond to it [...]. But a lot of the information that helps us understand and respond to the world doesn’t come from these senses. Instead, it comes from computers and the internet. Maes’ goal is to harness computers to feed us information in an organic fashion, like our existing senses.

    This might be right. But in my opinion, the organic fashion Mae is aiming at will rather leed to excessive Nerdism. Early adopters and grown-up-childs will refer to this technology as gadgets and will use it to impress their surrounding – just like we they do today with iPhones and Netbooks.

    That’s OK with me. I just want the ePaper thingy because that’s real hot shit.
    via Timo Heuer.

    More then 20000 users have contributed to the growth of the project OpenStreetMaps. Using wiki principles the project collects information about streets, buildings, rivers, landscapes and everything that is usually displayed on maps. The agency Itoworld has created a video that animates the coverage of the gathered data. Really beautiful:

    So you say: What do I need another free map service for? Is Google Maps not enough?.
    Check out this comparison by Bodenseepeter [in German, illustrated]. He analyzed the extend of the two map services usinng ten examples worldwide. For example Cape Town:

    Right in OpenStreetMaps
    Left in Google Maps

    null

    Wikipedia:

    OpenStreetMap (OSM) is a collaborative project to create a free editable map of the world. The maps are created using data from portable GPS devices, aerial photography and other free sources. Both rendered images and the vector dataset are available for download under a Creative Commons Attribution-ShareAlike 2.0 licence.

    via T3N magazine Germany

    So this is what communication mania is making out of us and web2.0 creatives:

    Complete idiots.

    Somehow we -consumers and deciders- are totally horny of being part of the bigbuzz communities we simply forgot about security.

    So this happened:
    A hacker gained access to several Twitter accounts by brut force – among them Barack Obamas and Britney Spears’. Twitter was already known for having security isuues do to unencrypted password transmission. Well, here’s a video that explains what he did:

    Official Twitter feeds belonging to Barack Obama’s campaign, Fox News and Britney Spears were hijacked to send out fake messages on Monday, two days after a password-stealing phishing attack targeted the microblogging service.

    “A number of high-profile Twitter accounts were compromised this morning, and fake/spam updates were sent on their behalf,” the company acknowledged on its website Monday. “We have identified the cause and blocked it. We are working to restore compromised accounts.”


    Picture from wired.com

    Read on at wired.com

    Warning: This video is nerdy and technical.
    But you will learn something if you make it to minute 6:47. You will understand the most important relations in the evolution of web technologies – from the first remote connection 1957 to the world-changing TCP/IP protocol.



    It’s a diploma by Melih Bilgil.

    History of the internet is an animated documentary explaining the inventions from time-sharing to file-sharing, from arpanet to internet.
    The history is told with help of the PICOL icons, which are also a part of my diploma. The icons are soon available for free on picol.org

    Information Aesthetics has already written about that thing in February, me clumsy lamard has discovered it just now. Me like that wable table, but me will not buy it. Afraid of my fastfood and longdrinks being spilled on my bearskin imitation.

    The personal feeds from webapplications like Plazes, Flickr, and Last.fm tell much about the activity of an individual on the internet. In this project we aim to explore how you can visualize the changes of your web identity over time and create a physical link between your virtual and real identity. The interface consists of both a physical table and a web application. This direct feedback from your web identity is customizable and can be connected to any RSS feed.

    Sweetcron is a service that brings you the features of friendfeed and tumblr. Apart from the fact that it’s build for being hosted at your own web server. Kind of a wordpress for feeds. Check the developers site yongfook.com for a working demo blog.

    Update: Sweetcron Beta is out for evaluating:

    It’s closed beta right now, but the developer, Yongfook, promises to launch it soon. It is going to be 100% open source and offers some more features:

    • Automated Imports: Uploaded a photo to flickr? Bookmarked a new site? In a few minutes it will show up on your blog, thanks to the power of RSS feeds
    • Easily Customisable: Edit simple templates to change your Sweetcron look.
    • Self Hosted: You can keep alll the data safely on your own server and run Sweetcron on your own domain.
    • Fully extensible: Write your own php classes and slot them right in!

    Check the Interview with Yongfook on Lifestreamblog.com

    via t3n

    Que privilegio: I am on soundcloud.com now! This platform is a great way to share your music with the world. Not onlyfor downloading the files: In soundcloud, any member can comment directly to his favorite passages of a track. There are more common community functions inside.
    Drop me a line if you like to join: I have two invites left.

    Check out this mouthwatering Remix by TJ Kong:
    Ben Mono – Jesus Was A B-boy [TJ Kong & Nuno Dos Santos Remix]:

    Sounds great? Here’s a TJ Kong Promo DJ set:



    Read this statement of the Soundcloud scientists, Alexander Ljung & Eric Wahlforss:

    As you might expect, over the years we’ve grown tired of getting emails with YouSentIt links or FTP log-ins just to be able to check out our friends latest soon-to-be released tracks. Not to mention how annoying it is to try and email a reply with some comprehendible feedback. Music is just kind of tricky to deal with over email. So, we thought we’d change that. SoundCloud is our way of doing it.

    '