martes, 28 de mayo de 2013

Blogger: Cómo insertar vídeos de YouTube

Si dispones de un blog (en

Blogger

,

Wordpress

,...) o web seguramente has pensado en alguna ocasión añadir un

vídeo

de

YouTube

. ¿Cómo hacerlo? Es realmente sencillo, os detallo los pasos:

  1. Entra en

    YouTube

    y localiza el

    vídeo

    que quieres insertar, yo por ejemplo he elegido éste del blog de Eduardo Campos Jiménez, "Recuperando el botón de inicio en Windows 8".

  2. Una vez tengas el

    vídeo

    localizado en

    YouTube

    , en los enlaces inferiores, selecciona la opción "Compartir" y luego "Insertar".

  3. Selecciona el tamaño del

    vídeo

    y las diferentes opciones que se nos presentan: Mostrar sugerencias de vídeos cuando finalice la reproducción del vídeo, Utilizar HTTPS, Activar el modo de mejora de la privacidad,...


  4. Selecciona el código resultante de la caja de texto, cópialo y pégalo en la entrada de tu blog correspondiente. El código será algo del estilo:
    <iframe width="560" height="315" src="http://www.youtube.com/embed/KGeVCSze-RI?rel=0" frameborder="0" allowfullscreen></iframe>
    
  5. Guardas la entrada de tu blog, recargas y listo, ya tienes tu

    vídeo

    de

    YouTube

    insertado en la entrada de tu blog.
Es importante tener en cuenta que el

vídeo

es una herramienta didáctica muy potente y que los contenidos en

YouTube

juegan a favor del posicionamiento (

SEO

) de tu blog... es una de las asignaturas pendientes de

areaTIC.net

, prometo trabajar el tema del

vídeo

los próximos meses, je je je... El resultado sería el siguiente:



Y hasta aquí el artículo de hoy, la verdad que no tiene ninguna dificultad y mejorará los contenidos de vuestro blog, ya sean con vídeos de YouTube propios o de otras personas. Recordad también que dentro de

areaTIC

podéis encontrar otros artículos, no dudéis en consultar nuestro archivo, también podéis seguirnos por RSS o las principales redes sociales (twitter, facebook, linkedin...) 


martes, 21 de mayo de 2013

Windows 8 / Windows Phone - Programar un FlipView

Hoy veremos un ejemplo sobre como realizar un

FlipView

en una aplicación

Windows 8

con

javascript y css

. En primer lugar abriremos Visual Studio Express 2012 para Windows 8 y crearemos un nuevo proyecto de tipo 'Aplicación de navegación'.

Por defecto se nos creará una serie de archivos en nuestro proyecto, vamos a la carpeta 'pages', pulsamos botón derecho y luego añadimos una carpeta que llamaremos flipView.

El siguiente paso es situarnos en la carpeta

flipView

que acabamos de crear y pulsamos de nuevo botón derecho para añadir un control de página.

areaTIC, Windows 8 / Windows Phone - Programar un FlipView, Tipo de Proyecto


Veréis que se han creado 3 archivos (html, css y js). Antes de empezar a diseñar el

flipView

editaremos el archivo html principal del proyecto para indicar que al iniciar la aplicación se cargue como página "home" el archivo flipView.html que acabamos de crear. Hemos de añadir esta linea al cuerpo de default.html.
<body>
     <div id="contenthost" data-win-control="Application.PageControlNavigator" data-win-options="{home: '/pages/flipView/flipView.html'}"></div>
<body>
Antes de editar los archivos que hemos creado deberíamos ubicar las imágenes que queremos mostrar en nuestro

flipView

en la carpeta images del proyecto (o crearnos una carpeta nueva si lo preferimos). Una vez tenemos estos pasos previos, empezaría por editar flipView.js. Hemos de añadir una variable pública de tipo lista que contendrá las imágenes y textos que queremos mostrar en el

flipView

. Veamos como hacerlo:
// Para obtener una introducción a la plantilla Control de página, consulte la siguiente documentación:
// http://go.microsoft.com/fwlink/?LinkId=232511
(function () {
    "use strict";

    var dataArrayFlipView = [
            { type: "item", title: "AreaTIC flipView 1", picture: "/images/flipView_01.jpg" },
            { type: "item", title: "AreaTIC flipView 2", picture: "/images/flipView_02.jpg" },
            { type: "item", title: "AreaTIC flipView 3", picture: "/images/flipView_03.jpg" }
    ];

    var dataListFlipView = new WinJS.Binding.List(dataArrayFlipView);

    WinJS.UI.Pages.define("/pages/flipView.html", {
        // Se llama a esta función cuando un usuario navega a esta página. Esta
        // rellena los elementos de la página con los datos de la aplicación.
        ready: function (element, options) {
            // TODO: Inicializar la página aquí.
        },

        unload: function () {
            // TODO: Responder a las navegaciones fuera de esta página.
        },

        updateLayout: function (element, viewState, lastViewState) {
            /// 

            // TODO: Responder a los cambios en viewState.
        }
    });
})();
Ahora veremos los elementos necesarios que hemos de incluir en la página flipView.html que será la que contendrá el

flipView

. Al añadir un control de página desde Visual Studio vemos que ya incorpora por defecto una serie de elementos Html, nosotros hemos de editar la parte donde se muestra la siguiente etiqueta:
<p>Aquí se debe incluir el contenido.</p>
Añadiremos 2 elementos tipo div, uno ejercerá el rol de plantilla (id="simple_ItemTemplate") para uno o varios controles flipView y la segunda capa será nuestro flipView en sí (id="FlipView"). Veamos como queda el código de flipView.html:
<body>
    <div class="flipView fragment">
        <header aria-label="Header content" role="banner">
            <button class="win-backbutton" aria-label="Back" disabled type="button"></button>
            <h1 class="titlearea win-type-ellipsis">
                <span class="pagetitle">Esto es flipView</span>
            </h1>
        </header>
        <section aria-label="Main content" role="main">
            <div id="simple_ItemTemplate" data-win-control="WinJS.Binding.Template">
                <div class="overlaidItemTemplate">
                    <img class="image" src="#" data-win-bind="src: picture; alt: title" />
                    <div class="overlay">
                        <h2 class="ItemTitle" data-win-bind="innerText: title"></h2>
                    </div>
                </div>
            </div>

            <div id="FlipView" 
                data-win-control="WinJS.UI.FlipView"
                data-win-options="{ itemDataSource : FlipViewData.listaFlipView.dataSource, itemTemplate : select('#simple_ItemTemplate') }">
            </div>
        </section>
    </div>
</body>
Es importante fijarse en el elemento "itemDataSource" ya que en estos momentos si pulsamos F5 la aplicación devolverá una excepción con el siguiente mensaje

No se puede obtener la propiedad 'dataSource' de referencia nula o sin definir

.

Esto sucede porque hemos definido un objeto de tipo WinJS.Binding.List dentro flipView.js pero no lo hemos registrado en WinJS.Namespace correspondiente, para hacerlo dentro del mismo archivo flipView.js definiremos un objeto "FlipViewData" y sus atributos públicos que podremos referenciar en componentes

WinJS

de nuestras páginas.
 WinJS.Namespace.define("FlipViewData", {
        listaFlipView: dataListFlipView
 });
En este caso sólo necesitamos acceder a la variable dataListFlipView así que definimos el objeto FlipViewData con un atributo público que contiene nuestra lista de tipo WinJS.Binding.List.

Llegado a este punto la aplicación ya debería compilar y mostrar un

flipView

que a efectos prácticos funciona... faltaría aplicar estilos para las diferentes vistas que se pueden dar en una aplicación de este tipo. Para esto editaremos el archivo flipView.css del siguiente modo:
.flipView p {
    margin-left: 120px;
}

#basicFlipView
{
    width: 480px;
    height: 270px;
    border: solid 1px black;    
}

.overlaidItemTemplate
{
    display: -ms-grid;
    -ms-grid-columns: 1fr;
    -ms-grid-rows: 1fr;
    width: 480px;
    height: 270px;
}

    .overlaidItemTemplate img
    {
        width: 100%;
        height: 100%;
    }
    
    .overlaidItemTemplate .overlay
    {
        position: relative;
        -ms-grid-row-align: end;
        background-color: rgba(0,0,0,0.65);
        height: 40px;
        padding: 20px 15px;
        overflow: hidden;
    }

        .overlaidItemTemplate .overlay .ItemTitle
        {
            color: rgba(255, 255, 255, 0.8);
        }
Para controlar la vista usamos ms-grid de WinJS y aplicamos el alto y ancho que queremos para cada vista.

El resultado sería este.

areaTIC, Windows 8 / Windows Phone - Programar un FlipView, Resultado


Se puede cambiar fácilmente el estilo del flipView y sus botones jugando con el archivo css.

Espero os resulte interesante el contenido del artículo de hoy... más la semana que viene. Recordar como siempre que podéis participar en

areaTIC

enviando valoraciones/comentarios/dudas y también podéis seguirnos en las redes sociales. Anímate a participar!

martes, 14 de mayo de 2013

SQL Server: Columnas de las tablas de una base de datos

En alguna ocasión os puede resultar interesante obtener todas las

columnas

de todas las

tablas

de una

base de datos

junto a su información asociada: nombre de

tabla

, nombre de

columna

, tipo de datos, si permite valores NULL, intercalación... ¿algún caso donde pueda sernos útil? Por ejemplo, tanto en SQL Server 2008 como en SQL Server 2012 se nos informa que en próximas versiones de

SQL Server

desaparecerán los tipos de datos TEXT, NTEXT e IMAGE y que en su lugar deberemos usar VARCHAR(MAX), NVARCHAR(max) o VARBINARY(MAX). Si queremos comprobar los tipos de datos de las

columnas

de las

tablas

de una determinada

base de datos

podemos usar el stored procedure sp_columns (podéis ver detalles sobre sp_columns en el MSDN):

-- Obtenemos info sobre columnas de las tablas
sp_columns '%'

La información que nos devuelve el stored procedure sp_columns es muy completa pero claro, el número de filtros es limitado por sus parámetros y no podemos ordenar el conjunto de resultados; siguiendo con el ejemplo anterior, podría interesarnos ordenar por la

columna

DATA_TYPE (nombre del tipo de datos). ¿Y cómo lo hacemos? Podemos utilizar en su lugar la vista INFORMATION_SCHEMA.COLUMNS que está basada en las tablas de sistema sysobjects, spt_data_type_info, systypes, syscolumns, syscomments, sysconfigures y syscharsets:

-- Obtenemos info sobre columnas de las tablas
SELECT *
FROM INFORMATION_SCHEMA.COLUMNS
ORDER BY DATA_TYPE

Si observamos los resultados que nos devuelve la consulta anterior podemos ver que para la

columna

"DocumentSummary" de la

tabla

"Document" la longitud máxima del campo (CHARACTER_MAXIMUM_LENGTH) es -1... eso significa que dicha

columna

es del tipo NVARCHAR(MAX). La longitud MAX viene representada como -1 para los tipos VARCHAR, NVARCHAR y VARBINARY; para el tipo de datos XML la

columna

CHARACTER_MAXIMUM_LENGTH también tendrá valor -1.


Y hasta aquí el artículo de hoy, espero que os sirva para tener "controladas" vuestras

columnas

y sus tipos, je je je... Recordad también que dentro de

areaTIC

podéis encontrar otros artículos, no dudéis en consultar nuestro archivo, también podéis seguirnos por RSS o las principales redes sociales (twitter, facebook, linkedin...) 


LECTURAS RELACIONADAS RECOMENDADAS POR AREATIC.NET

martes, 7 de mayo de 2013

Windows 8 / Windows Phone - Tutoriales para iniciarse en el desarrollo

El artículo de hoy servirá como pequeña introducción al desarrollo de aplicaciones Windows 8 y

Windows Phone

. Como seguramente ya sabéis Windows 8 comparte kernel con

Windows Phone

de modo que si realizamos una aplicación estilo

metro

y la subimos a la tienda podemos descargarla desde una tableta con

Windows 8

o un dispositivo móvil con

Windows Phone

. Aún así podemos seguir desarrollando aplicaciones de escritorio Windows Form o Xaml como hasta ahora, pero sin duda resulta interesante investigar un poco esta nueva linea de desarrollo. No esperéis un articulo muy profundo porque estoy simplemente divagando un poco por este nuevo mundo, para iniciarse este es vuestro articulo ya que veremos los primeros pasos y recomendaré algún tutorial que he ido leyendo estos días.

En primer lugar es importante saber que para desarrollar una aplicación de este tipo necesitaremos:

  • Una máquina con sistema operativo Windows 8.
  • Microsoft Visual Studio Express para Windows 8 (o una versión del IDE superior a la express).
  • Una cuenta outlook a la que asociaremos una licencia de desarrollador.

Una vez tenemos esto, al abrir Visual Studio por primera vez nos solicitará crear una licencia de desarrollador para poder ejecutar nuestras aplicaciones en la máquina. En caso que no se lance automáticamente la pantalla que indico ejecutar la consola Windows Power Shell con privilegios de administrador e introducir el siguiente comando:
PS C:\Windows\system32> Show-WindowsDeveloperLicenseRegistration
Vale pues ya podemos desarrollar aplicaciones en nuestra máquina, lo primero es escoger la linea de desarrollo que vamos a seguir para este tipo de aplicaciones se plantean 2 opciones:

  • C#/XAML
  • Javascript/HTML5

Aquí hemos escogido

javascript

por variar de C# y refrescar un poco

javascript

y

css

.

Si venimos de lineas anteriores de desarrollo windows veremos que cambia bastante como organizar las clases, la navegación, acceso a datos, vistas, etc... el mejor modo de irse metiendo en mi opinión en siguiendo tutoriales básicos que nos ayudarán a controlar bien lo que hacemos desde la base.

Os paso varios enlaces de MSDN donde se exponen tutoriales rápidos que si nos ponemos las pilas podemos completarlos en una mañana y una vez realizados entenderemos como navegar y gestionar los eventos básicos de control de la aplicación. También se hace un pequeño inciso sobre como dominar las vistas y el funcionamiento de

Windows Library para JavaScript

.


Si os han gustado los tutoriales aquí podéis acceder al resumen y descargar el código fuente de completo de estos y más tutoriales. Espero os haya servido como introducción, más adelante en

areaTIC

subiremos algunos ejemplos de acceso a datos en servidor, como publicar aplicaciones en el store, implementar contratos de búsqueda, barras de navegación, etc.

Hasta aquí el artículo de hoy, que vaya bien la semana! Recordaros como siempre que se agradecen vuestras aportaciones ya sea vía comentarios, emails o participando a través de redes sociales!