ELEKTRO

Dejo para ustedes tres videos tutoriales utilizados en la Maestría en Tecnologías WEB, realizados por KikeKaps.

En esta ocasión teniendo una plantilla en photoshop, la recortamos y usamos las imágenes para crear un sitio con XHTML y CSS.

Parte 1: Manipulación de elementos de una interfaz que se utilizará para un Sitio Web creado en XHTML y CSS. En este video se muestra la primera parte de la creación y es referente al recorte de elementos dentro de photoshop preparándolos para invocarlos con hojas de estilo.

Parte 2: Continuación del tutorial para generar un sitio en XHTML y CSS. En este tutorial se muestran las 2 hojas de estilo que se usaron para generar el XHTML.

Parte 3: Tercera parte del tutorial, creación de sitio web con xhtml y css. En esta parte se mostrará el uso de DIVs para el maquetado dentro del XHTML, ligando los archivos externos de las hojas de estilo.

La prestigiosa Universidad, Massachusetts Institute of Technology (MIT), que se ubica en Cambridge, Massachussetts cuenta con 32 departamentos académicos y tiene un fuerte énfasis en investigación científica y tecnológica. Esta Universidad tiene uno de los sistemas educativos más exigentes y costosos del mundo.  Sin embargo, gracias su programa Open Course Ware abre sus conocimientos y clases al mundo entero completamente gratis.

Por medio de su página http://ocw.mit.edu/OcwWeb/web/home/home/index.htm se pueden tomar cursos completos de la Universidad, aprender de todas las clases con las que cuenta, tomar los éxamenes y ver los videos educativos sin necesidad de registrarse pero aprendiendo niveles de licenciatura y maestría que se imparten.

Tomar los cursos en linea NO garantiza un título de la Universidad y no tiene ninguna validez legal pero SI es una fuente ideal para el conocimiento y la educación de todos aquellos que quieran enriquecerse de información de calidad y conocer otros métodos de aprendizaje.

Si quieres aprender Wordpress, no puedes dejar de adquirir este gran libro (en inglés) de 400 páginas “Digging Into Wordpress“, con ejemplos prácticos del uso de este popular CMS y aunque casi todo lo pueden encontrar sabiendo buscar en Google, tener siempre un libro como guía es de gran utilidad, ya que aquí encuentras todo mejor organizado y lo que es mejor, ya probado!!!

Por 27dll tendrás el PDF de este libro (Es por el momento el único formato que ofrecen, aunque prometen sacar el libro en papel).

Fue escrito por Chris Coyier y Jeff Starr dueños del blog digwp.com que han hecho más de 100 sitios basados en Wordpress, asi que es una de las muchas garantías.

Si decides comprarlo en estos 10 primeros días, por oferta de lanzamiento recibes un descuento de $5 usando el cupón DIWEARLY

Adquiérelo Aquí!!!

Y tú, ¿ya sabes usar Wordpress?

Vía usejquery nos enteramos de esta colección publicada en Six Revisions de técnicas y efectos de animación con JQuery, en la semana estaré probando cada uno de ellos, pero se los dejo para que también los vayan probando e implementando, hay unos realmente impresionantes y últiles.

Les dejo uno que me pareció muy interesante, los demás los pueden ver directamente en la página de Six Revisions, viene tutorial y demo

Stunning Sliding Door Effect

Para el Demo da click sobre la Imagen

El tema Magazeen de Wordpress es un tema a mi gusto muy elegante y lo que es mejor, gratuito.

Tiene excelentes funcionalidades y muchas de ellas con JQuery, sin embargo el problema viene al tratar de meter algún plugin o algun extra que utilice Javascript, ya que el JQuery deja de funcionar o traba algunas de las funciones de las otras librerias.

En el mismo sitio del tema el usuario Spencer aparentemente de los mismos desarrolladores, recomienda modificar el archivo functions.js y recomienda leer la siguiente documentación de JQuery, aunque eso nos da una pista, la verdad batalle un buen rato para encontrar la solución, por lo cual la comparto con ustedes:

El Archivo functions.js original que se encuentra en la carpeta js/ es el siguiente:

$( function() {
	$( '.category' ).click( function() {
		$( this ).toggleClass( 'active' )
		$( this ).siblings( '.dropdown' ).toggle();
		$( this ).find( '.indicator' ).toggleClass( 'indicator-active' );
		return false;
	} );
 
	$( '#dock > li' ).hover( function() {
		$( '.latest' ).fadeOut( 'fast' );
		$( this ).addClass( 'dock-active' );
		$( this ).children( 'span' ).fadeIn( 200 );
	}).bind( "mouseleave", function() {		
		$( this ).removeClass( 'dock-active' );	
		$( this ).children( 'span' ).fadeOut( 200 );
	} );
 
	$( '#dock' ).bind( "mouseleave", function() {
		$( '.latest' ).fadeIn( 1000 );
	} );
} );

Lo cambiamos por este:

jQuery( function() {
	jQuery( '.category' ).click( function() {
		jQuery( this ).toggleClass( 'active' )
		jQuery( this ).siblings( '.dropdown' ).toggle();
		jQuery( this ).find( '.indicator' ).toggleClass( 'indicator-active' );
		return false;
	} );
 
	jQuery( '#dock > li' ).hover( function() {
		jQuery( '.latest' ).fadeOut( 'fast' );
		jQuery( this ).addClass( 'dock-active' );
		jQuery( this ).children( 'span' ).fadeIn( 200 );
	}).bind( "mouseleave", function() {		
		jQuery( this ).removeClass( 'dock-active' );	
		jQuery( this ).children( 'span' ).fadeOut( 200 );
	} );
 
	jQuery( '#dock' ).bind( "mouseleave", function() {
		jQuery( '.latest' ).fadeIn( 1000 );
	} );
} );

En el archivo header.php que esta sobre la raíz del tema buscamos las líneas:

<script src="<?php bloginfo( 'template_directory' ); ?>/js/pngfix.js"></script>
<script src="<?php bloginfo( 'template_directory' ); ?>/js/jquery-latest.js"></script>
<script src="<?php bloginfo( 'template_directory' ); ?>/js/effects.core.js"></script>
<script src="<?php bloginfo( 'template_directory' ); ?>/js/functions.js"></script>

Y después de ellas ponemos el siguiente código:

<script>
     jQuery.noConflict();
</script>

Con esto tendremos la funcionalidad JQuery y no interferirá con nuestras otras librerías, espero les sirva.

Si tienen una solución mejor les agradecería que la compartieran.

Dejo para ustedes nuevamente otros dos videos tutoriales utilizados en la Maestría en Tecnologías WEB, realizados por KikeKaps.

En este primer video se hace un botón sencillo para usarlo en WEB sin usar los botones que vienen por default en el Photoshop

En este video se hace un botón redondo también para su uso en web.

Dejo para ustedes dos videos tutoriales utilizados en la Maestría en Tecnologías WEB, realizados por KikeKaps.

Video tutorial donde se muestra la forma de utilizar la herramienta de pluma y el filtro extract para cortar una fotografía en Photoshop. Esta parte finaliza con el suavizado de los bordes.

Continuación del tutorial donde se muestran 2 formas de cambiar el fondo, uno utilizando el efecto de líneas arratrando 1 pixel y el otro creando un fondo estilo grunge.

Actualización:

Al estar realizando la actividad del video, me di cuenta que en mi Photoshop CS4 no viene el Filtro Extraer, si a ti te pasa lo mismo, lo único que tienes que hacer es descargarlo de la página de adobe, descomprimirlo y copiar los filtros (fijate que sea en el idioma que lo quieras, viene en español, inglés y francés)  a la carpeta que normalmente esta en C:\Archivos de programa\Adobe\Adobe Photoshop CS4\Plug-ins\Filters

Suerte!!!

¿Cuántos de nosotros hemos hecho un croquis en una hoja de papel o en el mejor de los casos agarrábamos el paint e intentabamos reproducir las calles, hoy en día ya existen mapas virtuales interactivos, y algunos gobiernos muestran el mapa de la ciudad completamente funcional como es el caso del Gobierno de León aquí en Guanajuato.

Sin embargo no hay como usar el servicio de la gran G para lograr una interactividad completa con el mapa, logrando así, trazar rutas, marcar sitios, insertar fotos, videos y demás monadas que tiene este servicio.

A continuación pongo un video realizado por mi amigo Alex Franco, también pueden visitar su página tiene artículos muy interesantes.

El video es corto (de 5 min) pero esta muy bien realizado y explica las funcionalidades básicas de este servicio.

Antes que nada una disculpa para mis alumnos, les prometí que este tutorial estaría el día de ayer, el problema es que el video quedó de más de 10 min por lo que tuve que buscar otra opción que no fuera Youtube, tengo Vimeo pero también falló en la subida(después de 2 horas ¬¬) jeje así que opté por subirla en BlipTV y en Dailymotion

————————-

En este tutorial presentamos como abrir una cuenta en Gmail con sus recomendaciones en cada campo del formulario, además de manera rápida abrimos la cuenta para Google Docs y cambiamos su idioma al Español ya que por default lo presenta en Inglés. (El Tutorial está pensado para un nivel de Secundaria)

Todos los tutoriales son presentados bajo la licencia Creative Commons.