lunes, 27 de mayo de 2013

Añade a tu blog las Tabview o pestañas ideal para las redes sociales

5/27/2013

Las Tabview o pestañas están diseñadas para agrupar un sin numero de widgets o gadgets de blogger con el fin de ahorrar espacio en la plantilla

Instalaciónen blogger

Paso 1) Añadir el CSS y el script

Nos dirigimos a Plantilla--Editar HTML-- y damos un clic dentro del editor de blogger, luego realice la combinación de teclas CTRL-F esto es para abrir el buscador dentro del editor y busque la etiqueta de cierre/b:skin justo arriba de ella pegue el siguiente código CSS.


.tabviewcont{
margin:15px 0;
padding:0;
clear:both;
list-style:none;
}
.tabviewnav {
margin: 0;
padding: 0;
font-size:14px; /* Tamaño de la fuente en las pestañas */
font-weight:bold;
}
.tabviewnav li {
float: left;
margin: 0 -15px 0 0;
list-style:none;
}
.tabviewnav li a {
float: left;
position: relative;
padding: 0 40px;
height: 0; 
line-height: 30px;
text-transform: uppercase;
text-decoration: none;
color:#fff;
border-right: 30px solid transparent;
border-bottom: 30px solid #3D3D3D;
border-bottom-color: #0597db;


}
.tabviewnav li a:hover {
color:#fff;
border-right: 30px solid transparent;
border-bottom: 30px solid #dba105;
border-bottom-color: #b4fc60;
text-decoration:none;
}
.tabviewnav li.tabviewactive a,
.tabviewnav li.tabviewactive a:hover {
border-right: 30px solid transparent;
border-bottom: 30px solid #3D3D3D;
border-bottom-color: #a11bd2;
color:#fff;
}
.tabviewcont .tabviewtab {
padding:5px;

}
.tabviewcont .tabviewtab h2,
.tabviewcont .tabviewtabhide {
display:none;
}
.tabviewtab .widget-content ul{
list-style:none;
margin:0 0 10px 0;
padding:0;
}
.tabviewtab .widget-content li {
border-bottom:1px solid #ccc;
margin:0 5px;
padding:2px 0 5px 0;

}


Terminado de copiar el codigo CSS , buscamos la etiqueta/head y justo arriba de ella pegamos el siguiente código javascript(este código nos agrupa los gadgets).

script type='text/javascript' 
// Tabview para agrupar gadgets
//![CDATA[ 
document.write('style type="text/css".tabview{display:none;}/style');function tabviewObj(argsObj){var arg;this.div=null;this.classMain="tabview";this.classMainLive="tabviewcont";this.classTab="tabviewtab";this.classTabDefault="tabviewtabdefault";this.classNav="tabviewnav";this.classTabHide="tabviewtabhide";this.classNavActive="tabviewactive";this.titleElements=['h2','h3','h4','h5','h6'];this.titleElementsStripHTML=true;this.removeTitle=true;this.addLinkId=false;this.linkIdFormat='tabviewidnavtabnumberone';for(arg in argsObj){this[arg]=argsObj[arg]}this.REclassMain=new RegExp('\b'+this.classMain+'\b','gi');this.REclassMainLive=new RegExp('\b'+this.classMainLive+'\b','gi');this.REclassTab=new RegExp('\b'+this.classTab+'\b','gi');this.REclassTabDefault=new RegExp('\b'+this.classTabDefault+'\b','gi');this.REclassTabHide=new RegExp('\b'+this.classTabHide+'\b','gi');this.tabs=new Array();if(this.div){this.init(this.div);this.div=null}}tabviewObj.prototype.init=function(e){var childNodes,i,i2,t,defaultTab=0,DOM_ul,DOM_li,DOM_a,aId,headingElement;if(!document.getElementsByTagName){return false}if(e.id){this.id=e.id}this.tabs.length=0;childNodes=e.childNodes;for(i=0;ichildNodes.length;i++){if(childNodes[i].className&&childNodes[i].className.match(this.REclassTab)){t=new Object();t.div=childNodes[i];this.tabs[this.tabs.length]=t;if(childNodes[i].className.match(this.REclassTabDefault)){defaultTab=this.tabs.length-1}}}DOM_ul=document.createElement("ul");DOM_ul.className=this.classNav;for(i=0;ithis.tabs.length;i++){t=this.tabs[i];t.headingText=t.div.title;if(this.removeTitle){t.div.title=''}if(!t.headingText){for(i2=0;i2this.titleElements.length;i2++){headingElement=t.div.getElementsByTagName(this.titleElements[i2])[0];if(headingElement){t.headingText=headingElement.innerHTML;if(this.titleElementsStripHTML){t.headingText.replace(/br/gi," ");t.headingText=t.headingText.replace(/[^]+/g,"")}break}}}if(!t.headingText){t.headingText=i+1}DOM_li=document.createElement("li");t.li=DOM_li;DOM_a=document.createElement("a");DOM_a.appendChild(document.createTextNode(t.headingText));DOM_a.href="javascript:void(null);";DOM_a.title=t.headingText;DOM_a.onclick=this.navClick;DOM_a.tabview=this;DOM_a.tabviewIndex=i;if(this.addLinkId&&this.linkIdFormat){aId=this.linkIdFormat;aId=aId.replace(/tabviewid/gi,this.id);aId=aId.replace(/tabnumberzero/gi,i);aId=aId.replace(/tabnumberone/gi,i+1);aId=aId.replace(/tabtitle/gi,t.headingText.replace(/[^a-zA-Z0-9-]/gi,''));DOM_a.id=aId}DOM_li.appendChild(DOM_a);DOM_ul.appendChild(DOM_li)}e.insertBefore(DOM_ul,e.firstChild);e.className=e.className.replace(this.REclassMain,this.classMainLive);this.tabShow(defaultTab);if(typeof this.onLoad=='function'){this.onLoad({tabview:this})}return this};tabviewObj.prototype.navClick=function(event){var rVal,a,self,tabviewIndex,onClickArgs;a=this;if(!a.tabview){return false}self=a.tabview;tabviewIndex=a.tabviewIndex;a.blur();if(typeof self.onClick=='function'){onClickArgs={'tabview':self,'index':tabviewIndex,'event':event};if(!event){onClickArgs.event=window.event}rVal=self.onClick(onClickArgs);if(rVal===false){return false}}self.tabShow(tabviewIndex);return false};tabviewObj.prototype.tabHideAll=function(){var i;for(i=0;ithis.tabs.length;i++){this.tabHide(i)}};tabviewObj.prototype.tabHide=function(tabviewIndex){var div;if(!this.tabs[tabviewIndex]){return false}div=this.tabs[tabviewIndex].div;if(!div.className.match(this.REclassTabHide)){div.className+=' '+this.classTabHide}this.navClearActive(tabviewIndex);return this};tabviewObj.prototype.tabShow=function(tabviewIndex){var div;if(!this.tabs[tabviewIndex]){return false}this.tabHideAll();div=this.tabs[tabviewIndex].div;div.className=div.className.replace(this.REclassTabHide,'');this.navSetActive(tabviewIndex);if(typeof this.onTabDisplay=='function'){this.onTabDisplay({'tabview':this,'index':tabviewIndex})}return this};tabviewObj.prototype.navSetActive=function(tabviewIndex){this.tabs[tabviewIndex].li.className=this.classNavActive;return this};tabviewObj.prototype.navClearActive=function(tabviewIndex){this.tabs[tabviewIndex].li.className='';return this};function tabviewAutomatic(tabviewArgs){var tempObj,divs,i;if(!tabviewArgs){tabviewArgs={}}tempObj=new tabviewObj(tabviewArgs);divs=document.getElementsByTagName("div");for(i=0;idivs.length;i++){if(divs[i].className&&divs[i].className.match(tempObj.REclassMain)){tabviewArgs.div=divs[i];divs[i].tabview=new tabviewObj(tabviewArgs)}}return this}function tabviewAutomaticOnLoad(tabviewArgs){var oldOnLoad;if(!tabviewArgs){tabviewArgs={}}oldOnLoad=window.onload;if(typeof window.onload!='function'){window.onload=function(){tabviewAutomatic(tabviewArgs)}}else{window.onload=function(){oldOnLoad();tabviewAutomatic(tabviewArgs)}}}if(typeof tabviewOptions=='undefined'){tabviewAutomaticOnLoad()}else{if(!tabviewOptions['manualStartup']){tabviewAutomaticOnLoad(tabviewOptions)}}
// 
/script


Paso 2) Añadir los Gadgtes

Culminado el paso 1, busque el sidebar de su preferencia donde va a ubicar los Tabview o las pestañas y dentro de este pegar el siguiente codigo.

div id='sidebar-wrapper'!--el sidebar--
!--INICIO DE PESTAÑAS--
div class='tabview'
    !--INICIO DE PESTAÑA1--
    div class='tabviewtab' id='Pestaña1' title='Facebook'
      b:section class='sidebar-social' id='widget-pestana-1' maxwidgets='1' showaddelement='yes'/
    /div
   !--FIN--
   !--INICIO DE PESTAÑAS2--
   div class='tabviewtab' id='Pestaña2' title='Twitter'
      b:section class='sidebar-social' id='widget-pestana-2' maxwidgets='1' showaddelement='yes'/
    /div
   !--FIN--
   !--INICIO PESTAÑAS3--
   div class='tabviewtab' id='Pestaña3' title='Google +'
      b:section class='sidebar-social' id='widget-pestana-3' maxwidgets='1' showaddelement='yes'/
   /div
   !--FIN--
/div
!--FIN--
/div!--fin del sidebar--


si tienen algun problema diganmelo para realizar la respectiva correcion

Intrega en tu Blog las cajas de comentarios de Facebook y de Blogger fácil y rápidamente

5/27/2013

A petición de un usuario . Hoy les presento una forma de como integrar o agrupar las cajas de comentarios de Facebook y de Blogger de manera sencilla y rapida.

Paso 1) Añadir el CSS y el script
nos dirigimos a Plantilla--Editar HTML-- damos un clic dentro del editor de blogger y realizamos la siguiente combinación de teclasCTRL-F , esto es para abrir el buscador dentro del editor de bloggger y buscamos la etiqueta/head , una vez encontrada justo arriba de este pegamos el siguiente codigo.

style
    .comments-page { 
      background-color: rgba(255, 255, 255, 0.6);/*colo de fondo del contenedor*/
      background-image: -webkit-linear-gradient(rgba(255,255,255,.5), rgba(255,255,255,0));
      background-image: -moz-linear-gradient(rgba(255,255,255,.5), rgba(255,255,255,0));
      background-image: -ms-linear-gradient(rgba(255,255,255,.5), rgba(255,255,255,0));
      background-image: -o-linear-gradient(rgba(255,255,255,.5), rgba(255,255,255,0));
      background-image: linear-gradient(rgba(255,255,255,.5), rgba(255,255,255,0));
      width:100%;
      box-shadow: 0px 0px 8px #000; /* Sombra */
   } 
    #blogger-comments-page {  padding: 0px 5px;  display: none;} 
    .comments-tab { 
     float: left;
     font-size:14px; /* Tamaño de la fuente en las pestañas */
     padding: 0 40px;
     height: 0; 
     line-height: 30px;
     text-transform: uppercase;
     cursor: pointer;
     color: #ffffff;
     border-right: 30px solid transparent;
     border-bottom: 30px solid #3D3D3D;
     border-bottom-color: #d50ee7;
     } 
    .comments-tab-icon { height: 14px;  width: auto;  margin-right: 3px;} 
    .comments-tab:hover {   
     color: #ffffff;
     border-right: 30px solid transparent;
     border-bottom: 30px solid #3D3D3D;
     border-bottom-color: #8ef44b; 
    } 
    .inactive-select-tab { 
     color: #ffffff;
     border-right: 30px solid transparent;
     border-bottom: 30px solid #3D3D3D;
     border-bottom-color: #346de3; 
    }
    /style
    script src='http://connect.facebook.net/en_US/all.js#xfbml=1'/ 
    script src='http://code.jquery.com/jquery-latest.js'/
    script type='text/javascript' 
 //![CDATA[
    function commentToggle(selectTab) { 
       jQuery('.comments-tab').addClass('inactive-select-tab'); 
       jQuery(selectTab).removeClass('inactive-select-tab'); 
       jQuery('.comments-page').hide(); 
       jQuery(selectTab + '-page').show(); 
    } 
 //
    /script


Paso 2) Añadir las Cajas de Comentarios
Terminado el paso uno buscamos con el buscador la siguiente linea de código.

b:includable id='comments' var='post'


una vez encontrada seleccione todo asta el cierre de del includable/b:includable ,y reemplace por el siguiente código.

b:includable id='comments' var='post'
 div class='comments' id='comments'
!--INICIO COMENTARIOS--
center
tabletbodytr
tddiv class='comments-tab' id='fb-comments' onclick='javascript:commentToggle("#fb-comments");' style='float:left;' title='Comentarios Facebook' img class='comments-tab-icon' src='http://cdn1.iconfinder.com/data/icons/WPZOOM_Social_Networking_Icon_Set/32/facebook.png'/ fb:comments-count expr:href='data:post.url'/ Facebook Comentarios /div/td
tddiv class='comments-tab inactive-select-tab' id='blogger-comments' onclick='javascript:commentToggle('#blogger-comments');' title='Comentarios Blogger'img class='comments-tab-icon' src='http://cdn1.iconfinder.com/data/icons/new_google_product_icons_by_carlosjj-dwke/32/blogger.png'/data:post.numComments/ Blogger Comentarios/div/td
/tr/tbody/table
div class='comments-page' id='fb-comments-page'
b:if cond='data:blog.pageType == "item"'
div id='fb-root'/div id='fb-root'/script(function(d){var js, id = 'facebook-jssdk'; if (d.getElementById(id)) {return;}js = d.createElement('script'); js.id = id; js.async = true;js.src = "/script
fb:comments colorscheme='light' expr:href='data:post.url' expr:title='data:post.title' expr:xid='data:post.id' width='740px'//b:if/div
div class='comments comments-page' id='blogger-comments-page' style='display:none; '
!--FIN DE ESTILO--
   div id='mbt-form'
!--FIN DE ESTILO--
    a name='comment-form'/
    b:if cond='data:mobile'
      h4 id='comment-post-message'
        a expr:id='data:widget.instanceId + "_comment-editor-toggle-link"' href='javascript:void(0)'data:postCommentMsg//a/h4
      pdata:blogCommentMessage//p
      data:blogTeamBlogMessage/
      a expr:href='data:post.commentFormIframeSrc' id='comment-editor-src'/
      iframe allowtransparency='true' class='blogger-iframe-colorize blogger-comment-from-post' frameborder='0' height='410' id='comment-editor' name='comment-editor' src='' style='display: none' width='100%'/
    b:else/
      h4 id='comment-post-message'data:postCommentMsg//h4
      pdata:blogCommentMessage//p
      data:blogTeamBlogMessage/
      a expr:href='data:post.commentFormIframeSrc' id='comment-editor-src'/
      iframe allowtransparency='true' class='blogger-iframe-colorize blogger-comment-from-post' frameborder='0' height='410' id='comment-editor' name='comment-editor' src='' width='100%'/
    /b:if
    data:post.friendConnectJs/
    data:post.cmtfpIframe/
    script type='text/javascript'
      BLOG_CMT_createIframe('data:post.appRpcRelayPath/', 'data:post.communityId/');
    /script
  /div
/div
/center
 !--FIN--
/div
/b:includable


una vez reemplazado el codigo busque la siguiente linea.

b:includable id='threaded_comments' var='post'

realizamos el mismo procedimiento que en el anterios seleccione todo asta el cierre del includable/b:includable yreemplace.

b:includable id='threaded_comments' var='post'
  div class='comments' id='comments'
    
 center
tabletbodytr
tddiv class='comments-tab' id='fb-comments' onclick='javascript:commentToggle("#fb-comments");' style='float:left;' title='Comentarios Facebook' img class='comments-tab-icon' src='http://cdn1.iconfinder.com/data/icons/WPZOOM_Social_Networking_Icon_Set/32/facebook.png'/ fb:comments-count expr:href='data:post.url'/ Facebook Comentarios /div/td
tddiv class='comments-tab inactive-select-tab' id='blogger-comments' onclick='javascript:commentToggle('#blogger-comments');' title='Comments from Blogger'img class='comments-tab-icon' src='http://cdn1.iconfinder.com/data/icons/new_google_product_icons_by_carlosjj-dwke/32/blogger.png'/data:post.numComments/ Blogger Comentarios/div/td
/tr/tbody/table
div class='comments-page' id='fb-comments-page'
b:if cond='data:blog.pageType == "item"'
div id='fb-root'/div id='fb-root'/script(function(d){var js, id = 'facebook-jssdk'; if (d.getElementById(id)) {return;}js = d.createElement('script'); js.id = id; js.async = true;js.src = "//connect.facebook.net/en_US/all.js#xfbml=1";d.getElementsByTagName('head')[0].appendChild(js);}(document));/script
fb:comments colorscheme='light' expr:href='data:post.url' expr:title='data:post.title' expr:xid='data:post.id' width='740px'//b:if/div
div class='comments comments-page' id='blogger-comments-page' style='display:none; '
  
    a name='comments'/
    h4
      b:if cond='data:post.numComments == 1'
        1 data:commentLabel/:
      b:else/
        data:post.numComments/ data:commentLabelPlural/:
      /b:if
    /h4

    div class='comments-content'
      b:if cond='data:post.embedCommentForm'
        b:include data='post' name='threaded_comment_js'/
      /b:if
      div id='comment-holder'
         data:post.commentHtml/
          !--INICIO DE LIKE EN COMENTARIOS--
            script type='text/javascript'
var likeurl='data:blog.url/';
//![CDATA[
for(i=0;iitems_copy.length;i++){a=document.getElementById('c'+items_copy[i].id);gl="'"+items_copy[i].id+"'";b=a.innerHTML+'div class="like-cm" onmousemove="likecom('+gl+')"div id="like-cm'+items_copy[i].id+'"/div/div';a.innerHTML=b}function likecom(i){var a=document.getElementById('like-cm'+i);if(a){a.innerHTML='iframe style="margin:-6px 0 0 -13px" frameborder="0" allowtransparency="true" scrolling="no" height="20" src="http://www.blogger.com/blog-post-reactions.g?options=[Like]&textColor=%23666666#'+likeurl+i+'" width="100"/iframe'}}
//
/script
         !--FIN--
      /div
    /div

    p class='comment-footer'
      b:if cond='data:post.allowNewComments'
        b:include data='post' name='threaded-comment-form'/
      b:else/
        data:post.noNewCommentsText/
      /b:if
    /p

    b:if cond='data:showCmtPopup'
      div id='comment-popup'
        iframe allowtransparency='true' frameborder='0' id='comment-actions' name='comment-actions' scrolling='no'
        /iframe
      /div
    /b:if

    div id='backlinks-container'
    div expr:id='data:widget.instanceId + "_backlinks-container"'
       b:if cond='data:post.showBacklinks'
         b:include data='post' name='backlinks'/
       /b:if
    /div
    /div
  /div

/center
/div
/b:includable


terminado el paso 1 y el paso 2. guarde los cambios y ahora tendra integrado en su blog la caja de comentarios de Facebook y Blogger, se llegara a tener algun problema haganmelo saber para hacer la respectiva correccion

Descargate este video tutorial sobre Twitter Bootstrap mas ejemplos (Idioma Ingles)

5/27/2013
Bootstrap de Twitter es un excelente conjunto de elementos cuidadosamente elaborados de interfaz de usuario, diseños yherramientas de javascript, libremente disponibles para ser utilizados en tus proyecto de diseño web. Bootstrap es modular y se compone esencialmente de una serie de hojas de estilo que implementan los diversos componentes de la caja de herramientas y también es compatible con las técnicas de diseño de páginas web sensibles. aprendera a usar los componentes para la construcción de un sitio web completo Bootstrap-based. Así que si usted se ha preguntado cómo usar Bootstrap en sus proyectos de diseño web, entonces este curso le llevará directamente a velocidad.

Contenido


  • Introducción
  • Resumen del curso
  • Un primer vistazo a Bootstrap
  • Descripción Bootstrap e instalación
  • Andamiaje
  • El Sistema Grid
  • Presentaciones y diseño de respuesta
  • La Base Css
  • Tipografía
  • Tablas
  • Botones, imágenes e iconos
  • Controles de formulario, tallas y estados
  • Extendiendo controles de formulario y diseños opcionales
  • Componentes
  • Menús desplegables
  • Grupos de botones y menús desplegables
  • Aquí, píldoras y listas
  • El Navbar
  • Pasos para la navegación y la paginación
  • Etiquetas, escudos y componentes tipográficas
  • Alertas y barras de progreso
  • Componentes generales
  • Javascript
  • Modal de Windows
  • Scrollspy
  • Tooltips y Popovers
  • Acordeones e Carruseles
  • Resumen de diseño

DESCARGAR



Descargate este video tutorial sobre ASP.Net Web API OData Services (Idioma Ingles)

5/27/2013

Con este curso aprenderas a utilizar el API Web ASP.NET para crear servicios de datos basados, en el protocolo OData, incluyendo la sintaxis de consulta OData y formateo de mensajes OData.

El protocoloOData es un estándar multiplataforma abierto para exponer los datos a través de servicios basados, enREST HTTP para consultar y actualizar. El API Web ASP.NET ha ampliado para que pueda crear fácilmente servicios que permiten a la sintaxis de consulta OData en la parte superior de cualquier formato que usted elija para sus cargas útiles, o para hacer OData en toda regla tanto con el lenguaje de consulta y el formato compatible con OData . Este curso le enseñará cómo implementar compatibilidad con consultas OData y formato OData de ida y vuelta CRUD (Create-Read-Update-Delete) operaciones en colecciones de recursos expuestos uso de los servicios Web API. Usted primero aprendera algunos fundamentos sobre los servicios de ASP.NET Web API, REST y OData.

Contenido

  • Resumen del curso
  • Introducción a la API de servicios Web ASP.NET y OData
  • OData plataforma, herramientas y recursos
  • Apoyar OData Sintaxis de consultas
  • Apoyar OData Formato y Entidad modelos de datos
  • Actualización de recursos API Web a través de OData
  • El consumo de servicios OData de NET y Clientes JavaScript
DESCARGAR

Descargate este video tutorial sobre .Net 4.5 2013 (Idioma Ingles)

5/27/2013





Aprende .Net 4.5 y toma las ventaja y características conocidas sobre . NET 4.5.
actualización en contexto, nuevos compiladores, bibliotecas de actualización de los usuarios, Mejor comportamiento a menudo tiene la desventaja de cambios importantes y este curso explora la posible desventaja de estos cambios. Escrito en su mayoría en C #, el curso también incluye un módulo de información sobre los cambios en Visual Basic. Verás la amplitud de la liberación a partir asincrónica a zip, incluida la mejora del trazado y el MEF

Contenido

  • Introducción
  • Los cambios en el marco Core
  • Origen del suceso Soporte ETW
  • Async y Paralelismo
  • Información de llamadas
  • Los cambios en Visual Basic
  • Los cambios en el marco de extensibilidad administrada
  • Cambios importantes

DESCARGAR

viernes, 17 de mayo de 2013

Descargate este Pack de cursos de programación variada Python,C#,Android, securizacion Apache

5/17/2013






Python es un lenguaje de programación multiplataforma e interpretado, esto quiere decir:
Que funciona en casi cualquier sistema operativo sin necesidad de modificar absolutamente nada.

C# es uno de los mejores lenguajes de programación que podemos aprender y usar en el
siglo XXI, debido a que:
• C# continúa con la tradición de la familia de lenguajes que incluye a C, C++ y Java.
• Los lenguajes orientados a objetos representan la metodología más reciente y exitosa en materia

Securización Apache: cada vez más aplicaciones y servicios se desarrollan para entornos web -siendo accesibles a través del navegador- de forma que se facilite el acceso desde las redes internas de las empresas o a través de Internet. Por este motivo, se debe poner especial énfasis en la seguridad de los servidores web.

Runtime SDK Android:se basa en el uso de los entornos de desarrollo Eclipse y el lenguaje de programación Java.

Python Algoritmos:programación multiparadigma, ya que soporta orientación a objetos, programación imperativa y, en menor medida, programación funcional

Contenido del Pack
  • AlgoritmosprogramaciónPython
  • ArcGIS-Runtime-SDK-for-Android
  • C# Para Estudiantes DOUGLAS BELL & MIKE PARR
  • DE_0_PHYTON
  • Securizacion-Apache

DESCARGAR




Suscribirse a: Entradas (Atom)