Capturar webcam con VB.NET

¿Que haremos? Crearemos una aplicación en Visual Studio, la cual hará uso de una webcam para capturar el video en frames independientes y depositarlos en memoria para despues mostralos al usuario a través de un picturebox y un Timer para crear la ilusión de movimiento. ¿Porque lo haremos? Porque es justo y necesario ¿Que necesitamos? [...]

Envío de correo con JavaMail/Netbeans

JavaMail es una expansión de Java que facilita el envío y recepción de e-mail desde código java. JavaMail implementa el protocolo SMTP (Simple Mail Transfer Protocol) así como los distintos tipos de conexión con servidores de correo -TLS, SSL, autentificación con usuario y password, etc [Según SantaWikipedia] ¿Qué necesitamos? JavaMail 1.4.5 Java y Netbeans 6.9 [...]

Proyecto de base de datos Firebird VB

En este proyecto realizaremos una aplicación de base de datos Firebird con el lenguaje de programación de Visual Basic de Microsoft, este proyecto tendrá las funciones básicas de gestión INSERT, DELETE, UPDATE y una interfaz de usuario para utilizarlas. ¿Que necesitamos? Visual Studio 2008 o superior Firebird última versión Firebird ADO.NET Data Provider. Conocimientos básicos [...]

Imprimir imagen con Print

La siguiente clase hace uso de PRINT para imprimir una imagen que se encuentra en un variable de tipo FileInputStream, esta clase a su vez es implementada desde una interfaz que hace fácil su uso, la clase así como todo el proyecto esta comentado. import java.io.File; import javax.print.Doc; import java.io.IOException; import javax.print.DocFlavor; import javax.print.SimpleDoc; import java.io.FileInputStream; [...]

Code Army Bolivia
Mostrando entradas con la etiqueta Blogger. Mostrar todas las entradas
Mostrando entradas con la etiqueta Blogger. Mostrar todas las entradas

19/3/11

Agregar Twitter en Blogger

JAN29


Twitter :), hasta me habia olvidado que tenia cuenta, haber si ahora lo utilizo...

1. Cuando ingresemos a nuestra cuenta de Twitter, buscamos la opcion que dice "Recursos" y entramos en el enlace.
2. En esta nueva ventana, clic en la opcion "Widgets"
3. Ahora elegimos el tipo de Widgets, "Mi Stio web" y "Widgets de Perfil"

4. Ahora queda personalizar el Widgets:
Presionando el boton "Probar Configuración" podremos ver como queda nuestra Twitter
5. Cuando terminamos de personalizar nuestro Twitter, presionamos el boton "Terminar y Guardar Código", nos mostrara el codigo HTML para añadir a la web, tambien nos facilita con un boton "Add to blogger" para añadirlo mas facilmente a blogger.

continue reading

26/7/10

Colorear codigo en Blogger + programa portable

JAN29


Despues de buscar y probar muchas opciones para colorear codigo fuente en blogger sin tener que modificar la plantilla o arriesgarse a que post anteriores que tienen codigo con las etiquetas PRE Y CODE se alteren y queden ilegibles, encontre una alternativa que parece bastante sencilla de usar, es  
Highlight, este es un programa que convierte el codigo fuente en texto con formato, soporta varios lenguajes, esta disponible para windows como linux y lo mejor, es gratis. SI quieres saber mas, visita su web http://www.andre-simon.de

¿COMO USARLO EN BLOGGER?
Paso 1: bajate el programa e instalalo o si prefieres más abajo te dejo un portable que hice.
Paso 2: Con la aplicacion abierta, en la parte superior izquierda, tienes dos pestañas FILE y CLIPBOARD.
File: Esta opcion te permite cargar un archivo que tengas en tu pc, el programa detecta automaticamente el lenguaje.
Clipboard: esta opcion te permite realizar un copy/paste directamente de tu aplicacion IDE.

Configuraciones: esta opcion se encuentra en la parte inferior izquierda
En la pestaña GENERAL, habilita las opciones Add Line Numbers (agrega numeracion a las lineas de codigo), Pad with zeroes (coloca ceros en los numeros), validate input data (valida datos de entrada).
En OUTPUT FORMAT (formato de salida) escoge HTML.

En la pestaña OUTPUT SPECIFIC busca la opcion STYLESHEETS y habilita las opciones EMBED STYLE (CSS) e Inline CSS.

Por ultimo en la pestaña FORMATTING, puedes escoger el color del theme que utilizaras, eso ya depende de los gustos de cada quien, yo me quedo con el formato de visual studio 2008.
Tambien tiene otras opciones interesantes, TAB WIDTH te permite especificar que tamaño en caracteres tendra la tecla TAB, la opcion LINE WRAPPING  especifica el numero de columnas y tambien puedes modificar el tamaño de la fuene y el tipo.


Continuemos, cuando ya tengas el codigo cargado (paso 2), con la opcion FILE, presiona COPY FILE TO CLIPBOARD, si utilizaste la opcion CLIPBOARD, presiona COPY PREVIEW TO CLIPBOARD, abre el notepad y pega ese codigo, no lo pegues directamente en blogger.
Como se ve en la imagen, el programa crea todo el codigo fuente ya formateado, solo nos interesa lo que este entre las etiquetas PRE, borra el resto.

para personalizar un poco mas nuestro codigo, añade este contendor DIV, antes y despues de las etiquetas PRE,  dependiendo de la extension de tu codigo, puedes editar el tamaño HEIGHT de acuerdo a tus necesidades.

01 <div style="overflow: auto; height: 400px; background: none repeat scroll 0% 0% rgb(255, 255, 255);">
02 aqui el codigo
03 </div>
debes tener algo como:

Ahora si, ya puedes pegar este codigo en el editor de blogger

Ejemplos
PHP


01 <?php
02 echo "Hola Mundo";
03 ?>

C#


01 namespace HelloNameSpace
02 {
03       public class HelloWorld
04       {
05             static void Main(string[] args)
06             {
07                   Console.WriteLine("Hola Mundo!");
08 
09             }
10       }
11 }



Java


01 public class HolaMundo
02 {
03     public static void main (String [ ] args)
04     {
05         System.out.println ("Hola mundo");
06      }
07 }
¿Facil no?

La web del program es http://www.andre-simon.de/index.html

También te dejo el portable por si no quieres instalar nada en tu pc, no pesa nada

EXE Portable

Enlace actualizado 18 de enero de 2013

continue reading

27/11/09

Artículos Relacionados en blogger

JAN29

Para poder colocar este Widget en blogger que te mostrara una lista de "articulos relacionados" del post que este viendo, se debe modificar el codigo de blogger. La web donde encontre este truco es purplemoggy en ingles.

1. Ve a la Pestana Diseño - Edicion de HTML y busca la etiqueta "Head" yo la encontre por la linea 955. (No actives la casilla "Expandir plantilla de artilugios")


2. Cuando localices esa etiqueda debes pegar el siguiente codigo, encima de esa etiqueta.


<script type="text/javascript">
//<![CDATA[
    var relatedTitles = new Array();
    var relatedTitlesNum = 0;
    var relatedUrls = new Array();
    function related_results_labels(json) {
      for (var i = 0; i < json.feed.entry.length; i++) {
        var entry = json.feed.entry[i];
        relatedTitles[relatedTitlesNum] = entry.title.$t;
          for (var k = 0; k < entry.link.length; k++) {
            if (entry.link[k].rel == 'alternate') {
              relatedUrls[relatedTitlesNum] = entry.link[k].href;
              relatedTitlesNum++;
              break;
            }
          }
      } 
    }
function removeRelatedDuplicates() {
    var tmp = new Array(0);
    var tmp2 = new Array(0);
    for(var i = 0; i < relatedUrls.length; i++) {
      if(!contains(tmp, relatedUrls[i])) {
        tmp.length += 1;
        tmp[tmp.length - 1] = relatedUrls[i];
        tmp2.length += 1;
        tmp2[tmp2.length - 1] = relatedTitles[i];
      }
    }
    relatedTitles = tmp2;
    relatedUrls = tmp;
 }
function contains(a, e) {
  for(var j = 0; j < a.length; j++) if (a[j]==e) return true;
  return false;
}
function printRelatedLabels() {
  var r = Math.floor((relatedTitles.length - 1) * Math.random());
  var i = 0;
  document.write('<ul>');
  while (i < relatedTitles.length && i < 20) {
    document.write('<li><a href="' + relatedUrls[r] + '">' + relatedTitles[r] + '</a></li>');
    if (r < relatedTitles.length - 1) {
      r++;
    } else {
      r = 0;
    }
    i++;
  }
  document.write('</ul>');
}
//]]>
</script>

Es este codigo escrito en javascript, el que hace la mayor parte del trabajo. Consta de cuatro funciones que se encargan de buscar, depurar y presentar en pantalla los resultados.

3. Guarda la plantilla.

4.  Una ves que guardaste los cambios, activa la casilla "Expandir plantillas de artilugios", y busca el siguiente trozo de codigo:


<b:if cond='data:post.labels'>
<data:postLabelsLabel/>
<b:loop values='data:post.labels' var='label'>
<a expr:href='data:label.url' rel='tag'><data:label.name/></a><b:if cond='data:label.isLast != "true"'>,</b:if>
</b:loop>
</b:if>


Cuando lo encuentres, reemplazalo por este:

<b:if cond='data:post.labels'>
<data:postLabelsLabel/>
<b:loop values='data:post.labels' var='label'>
<a expr:href='data:label.url' rel='tag'><data:label.name/></a><b:if cond='data:label.isLast != "true"'>,</b:if>
<b:if cond='data:blog.pageType == "item"'>
<script expr:src='"/feeds/posts/default/-/" + data:label.name + "?alt=json-in-script&callback=related_results_labels&max-results=10"' type='text/javascript'/>
</b:if>
</b:loop>
</b:if>

Ahora vuelve a "guardar la plantilla" y dirigete a "Elementos de la Pagina", añade un nuevo gadget en el lugar que quieras de aparesca este gadget.

coloca el codigo:


<script type="text/javascript">
removeRelatedDuplicates();
printRelatedLabels();
</script>

Añadele un titulo como: "Post relacionados", "Articulos relacionados", "Entradas relaciondas" o cualquier otro nombre, guarda los cambios.

continue reading

15/11/09

Colocar un video de youtube en blogger

JAN29

Youtube te facilita la insercion de cualquier video de su servidor a blogger y a cualquier otra pagina web, ya que te brinda herramientas para tal fin.

1. Ingresa a youtube y escoge el video que quieras colocar en tu blog.
2. En la parte inferior derecha encontraras un pequeño boton azul con forma de "engrane"  presionalo y se extendera unas opciones para configurar el tamaño y color del reproductor

3. cuando tengas configurado el video, copia el enlace que se encuentra a lado del boton azul.
4. Si deseas colocar el video en una entrada de tu blog, solamente debes pegar el codigo en el "editor de entradas"

Si el video es demasiado grande o demasiado pequeño, puedes cambiar el tamaño modificando los valores "width" y "height", para eso ve a Edicion HTML y modificalos.


Si en cambio deseas añadir el video como parte de tu plantilla principal, debes ingresar a la opcion DISEÑO, en el lugar que escojas debes "añadir un gadget" y buscas la opcion HTML/Javascript
En la ventana que aparece pegas el codigo en "contenido" , si deseas le puedes dar un "titulo" (opcional) y finalmente clic en guardar

continue reading

14/11/09

Ocultar la Barra de Navegacion - navbar

JAN29



Estas lineas de codigo "ocultan" sin eliminarla la barra superior que tiene blogger llamada "navbar" o "barra de navegacion"

En la plantilla buscamos un lugar adecuado para colocar el codigo CSS


pegamos el siguiente codigo:

#navbar-iframe {
  opacity:0.0;
  filter:alpha(Opacity=0)
}

#navbar-iframe:hover {
  opacity:1.0;
  filter:alpha(Opacity=100,FinishedOpacity=100)
}




Explicacion:
  • navbar-iframe es el nombre con el cual blogger identifica a su barra de navegacion en el documento.
  • Opacity:determina la opacidad que se le agrega al iframe; 0=invisible; 100= totalmente visible
  • filter: esta etiqueta contiene las propiedades que se pueden agregar al canal de opacidad.
Una ves aplicados los cambios a la plantilla, la navbar no es eliminada, pero si permanece oculta hasta que se pase el puntero del mouse por esa posicion

continue reading

Cambiar de posicion la Sidebar

JAN29

Continuando con el tuneado de mi blog de prueba, me dio la gana de cambiar de lugar la SIDEBAR, pense que seria algo tan sencillo como cambiar atributos LEFT por RIGTH, pero ¡no los encontre! asi que  me puse a investigar y me entere que blogger en su afan de llegar a todo el mundo, cambio el uso de esas etiquetas por variables; teniendo entonces las equivalencias:

LEFT por $endSide y RIGTH  por $startSide
 

La gente que sabe un poco de programacion web entendera al pelo la logica utilizada.


1. Abrimos la plantilla y buscamos los valores "main-wrapper" y "sidebar-wrapper", una ves que los encontramos intercambiaremos los valores FLOAT
Antes

Despues


2. Ahora buscamos en el codigo la hubicacion de los contenedores "main-wrapper" y "sidebar-wrapper", y esta ves los cambiaremos de posicion
antes


despues


Esos son los pasos, solo debes "guardar la plantila" y ver los cambios, tenemos la sidebar cambiada de sitio


continue reading

Post más populares

JAN29

Para colocar una caja donde poder ver los post mas populares en blogger, entre muchas opciones existentes en internet, probare esta llamada Feedjit, no

Primero debes ingresar a la pagina de Feedjit y seguir los siguientes pasos:
1. Busca la opcion Page Popularity y clic en "Click here to Customize it!", te aparecera una pequeña ventana donde podras personalizar el recuadro de popularidad.
2. Cuando termines de darle el formato apropiado para agregaral a blogger click en "Click to add to blogger", sigue los pasos que te indica y eso es todo.

Captura de "Customize Popular Pages"

continue reading

13/11/09

Colocando una imagen como Cabecera

JAN29


Continuando con la manipulacion del codigo blogger, ahora le toco el turno a la "cabecera", en este corto videotutorial se vera como cambiara rapidamente la cabecera por defecto de "texto" a una mas atractiva presentacion de una "imagen", ademas de utilizar las herramientas que trae el editor de plantillas blogger, tambien modificaremos el codigo CSS a mano, esto nos da un mayor control para personalizar cualquier plantilla.

Esta es una captura de la plantilla original, los cambios son evidentes


pd: sip uso vista, nadie es perfecto :)

continue reading

11/11/09

Color de fondo y bordes con CSS

JAN29


En un tutorial anterior se añadio una imagen de fondo a nuestro blog de prueba (post anterior), pero este nos redujo un poco la visibilidad del texto, asi que ahora para corregir este pequeño defecto, añadiremos colores de fondo a los contenedores y tambien algunos bordes, todo esto solo modificando el codigo CSS.

blog solo con imagen de fondo

Lo primero que haremos sera cambiar el color de fondo y el borde del contenedor mas exterior OUTER-WRAPER

Buscamos el codigo correspondiente, (se encuentra en la linea 146 de la plantilla que utilizo), se puede ver que especifica el ancho del contenedor con la etiquata WIDTH asi como otros valores, pero no se encuentra la etiqueta "background" que es la que utilizaremos, entonces añadimos la etiqueta con un color blanco y tambien añadimos las etiquetas border-left y border-right las cuales añaden bordes a ambos lados de la plnatilla. el codigo debe quedar asi:
Antes

despues

Realizaremos similar acción con el contenedor MAIN-WRAPER, añadiendo un color de fondo y unos bordes con lineas partidas

La plantilla con los nuevos cambios

estas modificaciones tambien pueden realizarse con los otros contenedores solo es cosa de probar, no hay que olvidarese tener una copia de respaldo de la plantilla por si algo sale mal.


continue reading

9/11/09

Agregando una imagen de fondo a tu plantilla de blogger

JAN29

Ahora para familiarizarnos con el codigo de blogger y de paso divertirnos un poco despues de ver lineas y lineas de codigo, aremos algo sencillo, colocaremos una imagen de fondo en nuestro blog de prueba,esto nos ayudara a conocer un poco del codigo CSS (hojas de estilo).

Utilizaremos la cabeza de este oso panda, puedes usar cualquier otra, pero recuerda que este en formato JPG y que sea de dimensiones pequeñas como de 200x200 maximo. Puedes utilizar imagenes mas grandes pero eso puede relentizar la carga del blog en conexiones lentas.


Comenzemos.
En nuestro blog crearemos una nueva entrada a la que llamaremos "contenedor de imagenes", y podemos colocarle la etiqueta "Mis imagenes"esta entrada no sera publicada, hacemos esta para utilizar a blogger como un contendor de imagenes valga la redundancia, ya que los host gratuitos
que existen en internet no te garantizan que tu imagen no sera borrada, ese es un riesgo que mejor hay que prevenir.

Ahora subimos nuestra imagen , yo uso firefox asi que explicare la forma de sacar la URL de la imagen mas facilmente, presiona "Vista previa" en el editor de entradas y has clic derecho sobre la imagen y escoge copiar "ruta del enlace".

Abre un archivo de texto y pega el enlace, de este enlace buscamos y eliminamos los caracteres "-h", como se puede ver en la imagen:


Ya que tenemos la url de nuestra imagen, tenemos que añadirla en el codigo de la plantilla, dirigete a Diseño - Edicion HTML y por si algo sale mal lo mejor es realizar una copia de seguridad de tu plantilla. Descarga una copia y guardalo en tu pc.

Copia todo el codigo que tengas a la vista en tu plantilla presionando CTRL + A, por el momento no actives la opcion "expandir plantillas de artilugios", no es necesario. Abre el Notepad2  o tu editor de texto preferido y pega el codigo de la plantilla, busca la cadena "body", yo la encontre en la linea 61, sera esta linea de codigo la que modificaremos.

Lo que haremos sera reemplazar el color que tiene por una imagen, para eso modificaremos la etiqueta "background" usando la etiqueta URL, esta funciona de la manera siguiente
URL(Direccion_de_tu_Imagen) 
donde dice "Direccion_de_tu_Imagen" pues colocas la direccion de tu imagen :), que genio verdad ;).
Antes


despues


Ahora selecciona todo el contenido del notepad2 CTRL + A, y pegalo en blogger "editar plantilla". clic en GUARDAR PLANTILLA y ya tienes una imagen de fondo en tu blog. para ver el resultado clic en "ver blog".
Antes

Despues


continue reading

7/11/09

Lo que necesitas saber de CSS para blogger

JAN29


CSS o Lenguaje de Hojas de Estilo fue creada para controlar el aspecto y presentacion delos documentos HTML y XHTML.

Mientras que XHTML se ocupa de marcar las diferentes secciones de una plantilla, CSS se ocupa  de definirel aspecto del contenido, los colores, tamaños, tipo de letra, tabulado, parrafos y demas elementos de cada componente.


El uso de CSS en una pagina HTML es el siguiente

Esta es una de las formas de uso de CSS dentro de HTML

Para insertar CSS en documentos XHTML, nos ayudamos la etiqueta CDATA

CSS

Regla CSS: cada uno de los estilos que componen una hoja de estilos CSS. Cada regla está compuesta de una parte de “selectores”, un símbolo de “llave de apertura” ({), otra parte denominada “declaraciones” y por último, un símbolo de “llave de cierre” (}).

Selector: indica el elemento o elementos HTML a los que se aplica la regla CSS.
Declaración: la declaración especifica los estilos que se aplicarán a los elementos. Está compuesta por una o más propiedades CSS.
Propiedad: permite modificar el aspecto de una característica del elemento.
Valor: indica el nuevo valor de la característica modificada en el elemento.

Las variables

  • name: Nombre unico en todo el documento
  • description: Opcional, describe a la variable
  • type: El tipo de variable a la que corresponde (color, font, automatic)
  • default: valor por defecto
  • value: Valor de la variable
Las variables pueden o no ser utilizadas, mas que todo depende del creador de la plantilla

continue reading

Post recomendado