Demos

• Tema ‘Twitter ticker’ como shortcode
• Tema ‘Twitter little ticker’ como shortcode

Características:

• Puedes crear tus propios temas para el plugin a los que puedes asignar recursos CSS, JavaScript, imágenes y personalizar completamente.
• Se puede usar el plugin como widget desde donde se pueden configurar muchas de las opciones disponibles para cada tema.
• Se puede usar el plugin como shortcode, para poder integrarlo desde el editor de WordPresss o desde el php del tema.
• Uso de la versión 1.1 de la API de Twitter.
• Uso de iconos de fuentes para que se pueda modificar el color de los mismos desde CSS.

Campos del widget:

A continuación, describiré cada uno de los campos del widget. Hay que tener en cuenta que no todos los campos aparecen en cada tema.

• Título: se corresponde con el título del widget. Atributo del shortcode: title; valor: texto (opcional).  
• Nombre de usuario: nombre de usuario de Twitter. Atributo del shortcode: screen_name; valor: texto (obligatorio).
• Tiempo de refresco: número de minutos que se guardará en cache la información recogida de Twitter. Atributo del shortcode: cache_time; valor: número (opcional).
• Seleccionar tema: nos servirá para seleccionar el tema que usaremos en el widget. En el selector también aparecerán los temas personalizados creados por el usuario. Atributo del shortcode: theme; valor: nombre del archivo PHP usado para ese tema. Los temas que vienen con el plugin son twitter_ticker_theme.php y twitter_little_ticker_theme.php, pero espero ir ofreciendo nuevos temas de vez en cuando. Se pueden usar también los temas creados por el usuario (opcional).
• Mostrar imagen de perfil: nos permite seleccionar un tamaño de la imagen del perfil de usuario. Atributo del shortcode: profile_image; valor: false, mini, normal, bigger, original (opcional).
• Número de Tweets: número de tweets que se mostrarán en el widgets. El número total incluye los retweets y respuestas, por lo que si se configura para que estas no se muestren el número total que se mostrará será menor que el valor definido. El número máximo de tweets que se puede solicitar a Twitter será 200 tweets. Atributo del shortcode: tweets_count; valor: número (opcional).
• Mostrar acciones de Tweets: al seleccionar esta opción se mostrarán los botones de acción sobre un tweet, responder, retwittear y favorito. Atributo del shortcode: tweet_actions; valor: true or false (por defecto) (opcional).
• Incluir retweets: Si se selecciona esta opción se mostrarán dentro del timeline también los retweets realizados por el usuario. Atributo del shortcode: show_retweets; valor: true or false (por defecto) (opcional).
• Incluir respuestas: Si se selecciona esta opción se mostrarán dentro del timeline también las respuestas realizados por el usuario. Atributo del shortcode: show_replies; valor: true or false (por defecto) (opcional).
• Mostrar aplicación de envío: Se mostrará la aplicación desde la cual se ha realizado el envío del tweet. Atributo del shortcode: sending_app; valor: true or false (por defecto) (opcional).
• Mostrar fecha: Si se selecciona esta opción se mostrará la fecha de creación del tweet con el formato usado por Twitter. Atributo del shortcode: date; valor: true or false (por defecto) (opcional).
• Mostrar enlaces: Si se selecciona esta opción se mostrarán los diferentes enlaces del tweet. Atributo del shortcode: hyperlinks; valor: true or false (por defecto) (opcional).
• Abrir enlaces en una nueva ventana: Los enlaces se abrirán en una ventana nueva al seleccionar esta opción. Atributo del shortcode: target_blank; valor: true or false (por defecto) (opcional).
• Añadir atributo “nofollow” a enlaces: con esta opción seleccionada se añadirá rel=”nofollow” al código de los enlaces para decir a los buscadores que no sigan las URL’s de los mismos. Atributo del shortcode: no_follow; valor: true or false (por defecto) (opcional).
• Mostrar botón Seguir: Esta opción mostrará el botón oficial seguir de Twitter. Atributo del shortcode: follow_button; valor: true or false (por defecto) (opcional).
• Mostrar nombre de usuario: Se mostrará el nombre de usuario en el botón seguir. Atributo del shortcode: follow_show_screen_name; valor: true or false (por defecto) (opcional).
• Mostrar contador de seguidores: Se mostrará el contador de seguidores en el botón seguir. Atributo del shortcode: follow_show_count; valor: true or false (por defecto) (opcional).
• Botón Seguir grande: Se mostrará el tamaño grande del botón seguir. Atributo del shortcode: follow_size; valor: true or false (por defecto) (opcional).
• Alineación a la izquierda del botón: Nos permite seleccionar alinear a la izquierda el botón seguir. Atributo del shortcode: follow_data_align; valor: true or false (por defecto) (opcional).
• Mostrar enlace a PoseLab: Es un pequeño enlace a mi página web. Si has instalado este plugin en tu web y quieres agradecérmelo de alguna forma puedes hacerlo mostrando este enlace a mi página web o con cualquier otra mención. Atributo del shortcode: poselab_link; valor: true or false (por defecto) (opcional).

En la siguiente imagen se muestra a qué corresponde cada campo del widget con lo que se mostrará en la web, para que sea más fácil reconocer cada control al que no esté familiarizado con cada uno de los componentes del timeline de Twitter. Hay que tener en cuenta que el widget no mostrará siempre los mismos controles y que estos variarán en función de los elementos que se usen en el tema.

Sintaxis de shortcode:

En el siguiente ejemplo se encuentran todos los atributos que se pueden usar con el shortcode y que se explican más arriba:

La entrada Twitter themes aparece primero en PoseLab.

• Looks very promising: Macaw, an upcoming tool for writing semantic HTML and succinct CSS by... drawing code: http://t.co/ZdbZ2WKUAN. 22s.
• Really getting tired of linking to @codrops / @crnacura's articles: Beautiful Caption Hover Effects with CSS: http://t.co/rPkF1jlU9F. 3h.
• New on Smashing Mag: Adapting To A Responsive Design (Case Study) by @DuckyMatt - http://t.co/RdezILcDf8. 4h.
• Useful: HTML inspector is a code quality tool for writing a better, and cleaner markup: http://t.co/JZyqpIY66W. 6h.
• @vtardia Unfortunately we are sold out already. We don't have any tickets left, but you can join the waiting list: http://t.co/8bgkY7wVfx. 8h.
• Need to choose terms and labels for your UX design? Check out Five Ways To Prevent Bad Microcopy by @writebeard - http://t.co/QXW4N8tBQd. 9h.
• Looks very interesting: Disconnect extension lets you browse the Web faster and safer: https://t.co/YRfNYA2WFV (via @codepo8). 22h.
• It was about time: European roaming charges will end in July 2014 - http://t.co/1qPAjee4KB. 23h.
• Five Ways To Prevent Bad Microcopy by @writebeard - http://t.co/QXW4N8tBQd. 17 Jun.
• New on SmashingMag: A Free Set Of Food Icons (200 Icons in AI, EPS and vector format!) - http://t.co/oTsMsoR60g #freebie #icons #free. 17 Jun.
• A fantastic case-study: Yes, you really can make complex webapps responsive - http://t.co/nH97do6qnd. 17 Jun.
• So what's going on with responsive images? Unfortunately, not much: http://t.co/Ka1Tzd7nz9 - We have to just keep heavily optimize images.. 17 Jun.
• "“I have read and agree to the Terms” is the biggest lie on the web. We aim to fix that." TS;DR: http://t.co/U2bIIpoUss. 17 Jun.
• A great article on presenting case-studies in your portfolio: Rethinking the Case Study, by @chrbutler: http://t.co/IuTJDsO4JV. 17 Jun.
• An interesting idea of making infield form labels not take too much space, yet remain visible: http://t.co/t6xDCfEOgz #ux. 16 Jun.
• Very useful: Make lossless optimisation of images part of your automated build process - https://t.co/aXx5aXIjC3. 16 Jun.
• An interesting service: a T-Shirt printing and fulfillment service, accessible by a simple API call: https://t.co/n37OUe85xk. 16 Jun.

Además, he añadido el siguiente CSS para mostrar que puede personalizarse el diseño mediante los diversos class que se generan:

.twitter_themes {
	margin: 0 auto;
	padding: 5px;
	width: 300px;
	border: 1px solid #CCC;
}

El shortcode usado es el siguiente:

La entrada Twitter themes. Tema ‘Twitter little ticker’ como shortcode aparece primero en PoseLab.

• Get a new interactive “carousel” of local results when you search Google for restaurants, bars, etc. on desktop http://t.co/hcpTbF02PD. 1h.
• Happy birthday @AdSense! 10 years after launch, more than 2 million publishers earn money from AdSense http://t.co/IAVeeBvkxl. 3h.
• "Dear Girls of the World, the technology industry needs you." Susan Wojcicki's open letter for @CNN's Girl Rising: http://t.co/y1KN67M2l0. 21h.
• This summer, find Chromebooks in 6,000+ stores worldwide, including Walmart & Staples in the US & Tesco in the UK http://t.co/ecyF3YfLiW. 23h.
• To the builders, bakers & bear-resistant cooler makers: Happy Small Business Week. Tips for your business: http://t.co/6agMFaY5Pw #SBW2013. 17 Jun.
• Our continued commitment to combating child exploitation online http://t.co/UBjwswup0o. 17 Jun.
• Happy Father's Day! Visit http://t.co/ePnBWE8l0J today for an interactive salute to dads of all kinds http://t.co/eOL9uqGW6r. 16 Jun.
• Our request is clear: to publish national security requests separately. http://t.co/PfSr4zJJfd. 15 Jun.
• Announcing the latest from Google[x]—Project Loon, an experimental technology for balloon-powered Internet access http://t.co/PLsOfRDu20. 15 Jun.
• Getting healthy just got a little easier using Google tools: http://t.co/CALyD3rxHZ. 13 Jun.
• Play with a friend. Play with a bear. Play new @chromeexp Cube Slam: http://t.co/6Nhe0Z9jwl. 12 Jun.
• Partnering w/ @Burberry on a beautiful experience that lets you send kisses around the world from any device http://t.co/MXGGBWROKJ. 12 Jun.
• Breaking news. For the first time ever. @Microsoft agrees with Google. http://t.co/hPmyGt08yp. 11 Jun.
• Google Journalism Fellows hit the NPR airwaves covering local startups on @WLRN in Miami, hosted by @knightfdn http://t.co/iEAIR4UZT6. 11 Jun.
• For help getting ready for wedding season, turn to #googlesearch http://t.co/NPFNZISNfq. 11 Jun.
• Live now: watch @AlGore discuss ways to combat climate change in a Google+ Conversation http://t.co/Y9CqblfDmi. 11 Jun.
• Asking the U.S. government to allow Google to publish more national security request data http://t.co/UR8KKCeF5u. 11 Jun.
• Meet the 90 regional finalists for the 2013 @googlescifair: http://t.co/iKYrFPwz5o. 11 Jun.

Además, he añadido el siguiente CSS para mostrar que puede personalizarse el diseño mediante los diversos class que se generan:

.twitter_themes {
	margin: 0 auto;
	width: 300px;
	border: 1px solid #CCC;
}
.profile_all {
	padding: 10px;
}
.twitter_themes .tweet_list {
	height: 300px!important;
}
.tweet_list .odd {
	background: #ECF4FC;
}
.twitter_themes .tweet_list .tweet_content {
	padding: 5px 10px!important;
}
.twitter_themes .tweet_list_all {
	margin: 0!important;
	padding: 0!important;
	border-bottom: none!important;
}

El shortcode usado es el siguiente:

La entrada Twitter themes. Tema ‘Twitter ticker’ como shortcode aparece primero en PoseLab.

En un principio, la puse en una cuenta de Google Drive pero el acceso como página web era tan lento que era poco útil, así que finalmente lo he pasado todo a Dropbox y lo he configurado para acceder como web. Lo he publicado en un servicio gratuito de alojamiento porque este material es de Maxon y no quiero sacar ningún tipo de beneficio de él. No creo que haya ningún problema por dejar accesible este material vía web ya que lo puedes descargar desde la web de Maxon, pero en caso de que alguno de sus autores me solicitara eliminarlo sería eliminado inmediatamente.

Es un material que me será de mucha utilidad para consultar desde el tablet ya que muchas veces estoy viendo screencasts o tutoriales sobre Cinema 4D y me gustaría tener a mano la ayuda para complementar o resolver dudas. La ayuda de Cinema 4D es el material de consulta más completo para aprender a trabajar con Cinema 4D por lo que espero que sea de ayuda también para otras personas que, como yo, se están iniciando en el 3D con Cinema 4d. Hay que recordar, sin embargo, que la mejor forma de usar la ayuda es con el programa ya que desde cualquier parte del programa podremos acceder a la ayuda que necesitemos pulsando con el botón derecho del ratón sobre el elemento de la interfaz sobre el que deseamos ampliar información. Para el que no conozca esta característica de Cinema 4D le recomiendo el screencast de GreyscaleGorilla The Best Cinema 4D Tutorial Ever!!!. Este funcionamiento de la ayuda es algo que me gustaría ver en los programas de Adobe.

Además, he creado una versión en pdf de la ayuda que permitirá la consulta de la ayuda desde el tablet cuando estemos sin conexión a Internet. Un aspecto negativo de esta ayuda es que tanto la versión web como el pdf carecen de índice ya que no lo he encontrado entre los archivos de la aplicación. De todas formas, la ayuda está tan bien organizada que se puede acceder a cualquier tema sin necesidad del índice, aunque si alguien localiza el índice estaré encantado de configurarlo para poder adjuntarlo a la ayuda. En lo que respecta al pdf, el JavaScript no funciona por lo que las lupas que hay para ampliar las imágenes darán error al pulsar.

Cinema 4D R14 Ayuda web         Cinema 4D R14 Ayuda pdf

La entrada Ayuda de Cinema 4D R14 aparece primero en PoseLab.

Fullscreen mode is initiated in response to a mouse click or key press by the user; the movie cannot change Stage.displayState without user input. Flash runtimes restrict keyboard input in Fullscreen mode. Acceptable keys include keyboard shortcuts that terminate Fullscreen mode and non-printing keys such as arrows, space, Shift, and Tab keys. (Use Fullscreen interactive mode to support input from additional keys.) Keyboard shortcuts that terminate Fullscreen mode are: Escape (Windows, Linux, and Mac), Control+W (Windows), Command+W (Mac), and Alt+F4.

Supongo, que esta es la razón por la que YouTube no ofrece ningún método en la API para mostrar a pantalla completa el reproductor. Por ello, la única solución sería colocar un botón en el Flash.

Toda la documentación sobre el uso de AS3 con YouTube la tenemos en YouTube ActionScript 3.0 Player API Reference y será la guía que usaré para realizar los ejemplos. La AS3 API permite insertar en una aplicación Flash el reproductor de YouTube con controles, chromeless player, o sin controles, embedded player. Si usamos el chromeless player el único control que se cargará es el botón play que se superpone sobre la miniatura de vídeo que aparece antes de la reproducción del mismo. Para cargar el chromeless player tendremos que usar la siguiente URL para cargar el player en nuestro Flash:

http://www.youtube.com/apiplayer?version=3

Para cargar el embedded player la URL que tendremos que usar será la siguiente. Tendremos que sustituir el string VIDEO_ID con el id del vídeo de YouTube:

http://www.youtube.com/v/VIDEO_ID?version=3

Para usar la API de JavaScript con los reproductores de Flash tendremos que añadir enablejsapi=1 a la URL del reproductor:

http://www.youtube.com/apiplayer?version=3&enablejsapi=1

Veamos ahora un ejemplo de uso básico en el que cargamos el chromeless player y añadimos un control con el que podemos hacer play o pause usando la API AS3. De la misma forma que hemos usado la API AS3 para crear los botones Play y Pause podríamos crear el resto de botones para crear una barra de controles personalizada.

El código del ejemplo es el siguiente:

package {
	import flash.display.*;
	import flash.net.*;
	import flash.system.*;
	import flash.events.*;
	import flash.external.ExternalInterface;
	import flash.text.*;

	public class ChromelessYouTubePlayer extends Sprite {
		Security.allowDomain("www.youtube.com");

		private var player:Object;
		private var loader:Loader = new Loader();
		private var _state:String;
		private var tf1:TextField;
		private var textPlayed:String = "<a href='event:null'><u>Pause</u></a>";
		private var textPaused:String = "<a href='event:null'><u>Play</u></a>";

		// CONSTRUCTOR
		public function ChromelessYouTubePlayer() {
			loader.contentLoaderInfo.addEventListener(Event.INIT, onLoaderInit);
			loader.load(new URLRequest("http://www.youtube.com/apiplayer?version=3"));

			//Button;
			tf1 = createCustomTextField(5,330,50,22);
			tf1.htmlText = textPaused;
			tf1.addEventListener(MouseEvent.CLICK, playOrPauseVideo);
		}

		private function onLoaderInit(event:Event):void {
			addChild(loader);

			loader.content.addEventListener("onReady", onPlayerReady);
			loader.content.addEventListener("onError", onPlayerError);
			loader.content.addEventListener("onStateChange", onPlayerStateChange);
		}

		private function onPlayerReady(event:Event):void {
			// Event.data contains the event parameter, which is the Player API ID 
			trace("player ready:", Object(event).data);
			player = loader.content;
			// Set appropriate player dimensions for your application
			player.setSize(580, 326);
			player.cueVideoByUrl("http://www.youtube.com/v/9BaFnsvKAiA?version=3");
		}

		private function onPlayerError(event:Event):void {
			// Event.data contains the event parameter, which is the error code
			trace("player error:", Object(event).data);
		}

		private function onPlayerStateChange(event:Event):void {
			// Event.data contains the event parameter, which is the new player state
			var state:Number = Object(event).data;

			// update our status
			switch ( state ) {
				case -1 :
					_state = "unstarted";
					break;
				case 0 :
					_state = "ended";
					break;
				case 1 :
					_state = "playing";
					tf1.htmlText = textPlayed;
					break;
				case 2 :
					_state = "paused";
					tf1.htmlText = textPaused;
					break;
				case 3 :
					_state = "buffering";
					break;
				case 5 :
					_state = "video cued";
					break;
			}
		}

		private function playOrPauseVideo(event:Event):void {
			if (_state == "playing") {
				player.pauseVideo();
			} else {
				player.playVideo();
			}
		}

		private function createCustomTextField(x:Number, y:Number, width:Number, height:Number):TextField {
			var result:TextField = new TextField();
			result.x = x;
			result.y = y;
			result.width = width;
			result.height = height;
			result.selectable = false;

			var format:TextFormat = new TextFormat();
			format.font = "Arial";
			format.size = 12;
			format.color = 0xFF0000;
			result.defaultTextFormat = format;

			addChild(result);
			return result;
		}
	}
}

Ahora voy a poner un ejemplo del embedded player pero sólo con la programación necesaria para mostrar lo sencillo que es incrustar un vídeo de YouTube en nuestra aplicación Flash.

El código de este ejemplo sería:

package {
	import flash.display.*;
	import flash.net.*;
	import flash.system.*;
	import flash.events.*;

	public class embeddedYouTubePlayer extends Sprite {
		Security.allowDomain("www.youtube.com");

		private var player:Object;
		private var loader:Loader = new Loader();

		// CONSTRUCTOR
		public function embeddedYouTubePlayer() {
			loader.contentLoaderInfo.addEventListener(Event.INIT, onLoaderInit);
			loader.load(new URLRequest("http://www.youtube.com/v/9BaFnsvKAiA?version=3"));
		}

		private function onLoaderInit(event:Event):void {
			addChild(loader);
			loader.content.addEventListener("onReady", onPlayerReady);
		}

		private function onPlayerReady(event:Event):void {
			player = loader.content;
			player.setSize(580, 360);
		}
	}
}

Ahora vamos a crear un botón que no permita poner en Fullscreen mode nuestra aplicación Flash con el reproductor de YouTube.

La función para poner en Fullscreen mode sería la siguiente. Además podríamos utilizar la API AS3 de YouTube para cambiar la resolución del vídeo al poner éste en Fullscreen mode.

		private function toggleFullScreen(event:MouseEvent):void {
            switch(stage.displayState) {
                case "normal":
                    stage.displayState = "fullScreen";
					tf1.htmlText = textNormalScreen;
                    break;
                case "fullScreen":
                default:
                    stage.displayState = "normal";  
					tf1.htmlText = textFullScreen;  
                    break;
            }
        }

Pero el problema no es usar Fullscreen mode en un flash sino poner el Flash en este modo desde HTML, ya que, como vimos anteriormente sólo es posible a través de un click o pulsación de una tecla por parte del usuario. Por ello, la única solución posible sería simular un botón en HTML que no se pudiera pulsar y que estuviera sobre el botón que nos muestra el Flash en Fullscreen mode para que fuera éste el que pulsara el usuario. Si quisiéramos crear nuestros propios controles en los que se incluyera el botón de pantalla completa deberíamos comprobar si el navegador soporta la API Fullscreen de HTML5. Si no la soportara cargaríamos nuestra versión Flash del reproductor si el navegador dispone de Flash.

La entrada YouTube player, AS3 y Fullscreen aparece primero en PoseLab.

Uso de símbolos para crear reflejos

Una técnica que me gusta más es la utilización de símbolos, aunque quizás más que una técnica sea un consejo. Para mostrar este ejemplo usaré el logotipo de Google Chrome y los pasos para usar esta técnica son los siguientes:

1. Convertimos el objeto en símbolo pulsando en el botón “Nuevo símbolo” de la ficha “Símbolos”.
   
2. Creamos un duplicado del símbolo debajo del objeto y seleccionamos en el menú Objeto > Transformar > Reflejo… y en la ventana que aparece seleccionamos la opción Horizontal y pulsamos el botón OK para aplicar los cambios.
   

Al haber convertido nuestro objeto en símbolo los cambios que hagamos dentro del símbolo se reproducirán en todas sus instancias. Podemos cambiar colores, formas o todo el contenido del símbolo y el reflejo se actualizará sin que tengamos que hacer nada. Podemos pensar que duplicar y reflejar el objeto no es tanto trabajo como para justificar el uso de símbolos, pero si tenemos un gran proyecto con muchas imágenes evitaremos que durante las variaciones del proyecto se nos olvide modificar sus reflejos.

Pero hay una justificación más para usar símbolos al crear reflejos, que podemos aplicar múltiples filtros y variaciones a nuestro objeto y reflejo desde fuera del símbolo que serían muy difíciles de volver a reproducir. En la siguiente imagen, he aplicado al objeto y al reflejo perspectiva, pero además, al reflejo le he aplicado un filtro de desenfoque gaussiano, un resplandor interior y una máscara de opacidad. Imaginemos la tarea que nos supondría volver a reproducir todo ello si tuviéramos que hacer una pequeña modificación en nuestro logotipo.

Efecto Transformar

Existe otra técnica en Illustrator para hacer reflejos que aunque es bastante vieja creo que es poco conocida. Se trata de usar el efecto Transformar, y en esta ocasión vamos a usar el logotipo de Firefox para mostrar su funcionamiento.

1. Con nuestro objeto seleccionado, seleccionamos el menú Efecto > Distorsionar y transformar > Transformar… y aparecerá el cuadro de diálogo Efecto Transformar que vemos en la siguiente imagen.
   
2. Lo primero que hacemos es activar la opción de Previsualizar para ver el resultado de los cambios que vamos haciendo.
3. Después ponemos el valor 1 en el campo Copias, ya que deseamos que se genere un único duplicado del objeto. Todavía no vemos el duplicado porque está en la misma posición que el original.
4. En la opción Vertical del grupo Mover ponemos un valor similar a la altura del objeto.
5. Finalmente activamos la opción Reflejar Y y pulsamos OK.
   

Si deseamos aplicar una máscara de opacidad, podremos aplicarla sin problemas pero no podremos crear efectos que sólo afecten al duplicado, como en el caso de la utilización de símbolos. En la siguiente imagen podemos ver el resultado final con la máscara de opacidad. Otro ejemplo de uso del efecto transformar podría ser la creación de una sombra. Para ello añadimos un relleno al grupo al que aplicaremos el efecto transformar y el efecto desvanecer.

La entrada Reflejo de un objeto en Illustrator, otra forma de crearlo aparece primero en PoseLab.

Funcionamiento

La entrada Thumbnail Crop Position aparece primero en PoseLab.

ul.vmgallery li.vmccell-4 {margin-right:0}

El shortcode usado es el siguiente:

Beeple

La entrada Vimeo Channel Gallery de tipo usuario aparece primero en PoseLab.

ul.vmgallery li.vmccell-4 {margin-right:0}

El shortcode usado es el siguiente:

Essent

La entrada Vimeo Channel Gallery de tipo álbum aparece primero en PoseLab.

ul.vmgallery li.vmccell-4 {margin-right:0}

El shortcode usado es el siguiente:

Short Films

La entrada Vimeo Channel Gallery de tipo grupo aparece primero en PoseLab.