viernes, 26 de julio de 2013

Mostrar información del usuario y listar los grupos que esta agregado con la API de facebook en javascript

7/26/2013

Hace poco vimos comoobtener cierta información del usuario nombre y su foto y listar sus amigosahora de la misma manera vamos a listar todos los grupos que el usuario es miembro para esto necesito otro permiso:

user_groups: acceso a los grupos del usuario

conuser_groups tengo acceso a todos los grupos que el usuario es miembro puedo obtener toda la información de ellos en este caso solo vamos haber como obtener el icono,y el nombre de los grupos.

  • ObtenerinformaciónBásicade los grupos
para obtener dicha información necesito el método/me/groups y usar los campos de retorno:

icon: me retorna el icono con el que se identifica el grupo
name: el nombre del grupo

por ahora eso son los campos que vamos a utilizar.


function listarGrupos() { FB.api('/me/groups',{fields:'id,name,icon'}, function(response) { if(response.data) { for(i=0;iresponse.data.length;i++) { jQuery('#lista_grupos').append('div class="grupos"'+ 'img src="'+response.data[i].icon+'"/'+ 'h3'+response.data[i].name+'/h3'+ '/div'); } } else { console.log('Error al obtener Grupos'); } }); }

el parámetro fields me recibe los campos que necesito obtener y/me/groups me retorna por medio delresponse un array de datos que es recorrido por un ciclo for de esta forma yo obtengo los datos que necesito y dinamicamte creo los elementos o la lista de los grupos. les dejo el codigo fuente completo


DESCARGAR







Mostrar información del usuario y listar amigos con la APi de Facebook en javascript

7/26/2013

Anteriormente ya hemos visto como compartir o publicar en el muro del usuario,ahora veremos como mostrar determinados datos como por ejemplo el nombre y foto del usuario y de los amigos,para ello necesito otro tipo de permisos:

read_friendlists:acceder a la lista de amigos
friends_groups: acceder a la lista de amigos de los grupos

el que nos interesa por el momento esread_friendlists con este permiso obtendremos acceso para listar todos los amigos que el usuario posee.

  • Mostrarinformacióndel Usuario
para poder obtener el nombre y la foto del usuario no necesitamos ningún permiso lo hacemos directamente una vez logeado el usuario,luego se llama al método/me este método me retornara por medio delresponse elname(nombre) y el ID del usuario,luego para obtener la foto necesito usar la API Grafi de facebook por medio de una URLhttp://graph.facebook.com/ añadiendo el ID del usuario seguido de/picture.


function muestraInfo(){ FB.login(function(response) { if (response.status=="connected") { FB.api('/me', function(response) { reaUser(response.name,'http://graph.facebook.com/'+response.id+'/picture'); creaAmigos(); }); } else { console.log('NO CONECTADO'); } },{'scope': 'read_friendlists,friends_groups'}); }


dentro de la functionmuestraInfo() tengo la funcion login que permite al usuario logearse y aceptar los permisos si estos son aceptados pasara a activar el método/me donde obtendré por medio delresponse.name(nombre completo del usuario) yresponse.id el ID del usuario que pasara a la URL del API Grafi para obtener la imagen del usuario estos valores son recibidos por una funcion que crea dinamicamente el elementocreaUser(response.name,'http://graph.facebook.com/'+response.id+'/picture');.


  • Listar Amigos del Usuario
ya que el usuario aceptado los permisosread_friendlists , podemos utilizar el método/me/friends este método nos retornara por medio delresponse un array de datos que debemos de recorrerlo con un ciclo for para extraer el ID de cada amigo que posea el usuario para luego hacer lo mismo que los datos del usuario crear los elementos dinamicamente.


function creaAmigos() { FB.api('/me/friends', function(response) { if(response.data) { for(var i=0;iresponse.data.length;i++) { jQuery('#lista_amigos').append('div class="amigos"'+ 'img src="https://graph.facebook.com/'+response.data[i].id+'/picture"/'+ 'h3'+response.data[i].name+'/h3'+ '/div'); } } else { console.log('Error al obtener amigos'); } }); }


con dos simples funciones hemos obtenido informacion basica del usuario, les dejo el codigo fuente completo con todas las funciones y css del ejemplo


DESCARGAR









jueves, 25 de julio de 2013

Descargate y aprende todo sobre android desde cero ideal para principiantes con este pack de video tutoriales

7/25/2013

Si estas interesado en aprender a desarrollar aplicaciones para móviles en android este pack de tutoriales es para ti.
con este curso aprenderás paso a paso desde como instalar el entorno de desarrollo para programar hasta los pasos mas avanzados.(Recomendado)

Contenido del Pack


  • Tutorial 0.1 Instalar Java JDK
  • Tutorial 0.2 - Descargar Eclipse
  • Tutorial 0.3 - Instalar Android ADT en Eclipse
  • Tutorial 0.4 - Descargar Android SDK
  • Tutorial 0.5 - Crear y correr emulador Android
  • Tutorial 1 - Introduccion. Crear proyecto Android
  • Tutorial 2 - Interfaz de Usuario TextView, Button
  • Tutorial 3 - Declarar TextView y Button en Java
  • Tutorial 4 - OnClickListener y Variables Java
  • Tutorial 5 - Background (Fondo de Pantalla)
  • Tutorial 6 - ImageView (Imagen)
  • Tutorial 7 - ScrollView y HorizontalScrollView
  • Tutorial 8 - Mas de ScrollView, HorizontalScrollView
  • Tutorial 9 - Implementar OnClickListener en la Clase
  • Tutorial 10 - Switch y Case
  • Tutorial 11 - AndroidManifest
  • Tutorial 12 -Permisos (Wallpaper)
  • Tutorial 13 - Toast (Mensaje en Pantalla)
  • Tutorial 14 - EditText
  • Tutorial 15 - Convertir Variable String a Int
  • Tutorial 16 - If y else (Condicionales)
  • Tutorial 17 - Crear nuevo XML
  • Tutorial 18 - Intents.
  • Tutorial 19 - Crear nueva Clase (Activity)
  • Tutorial 20 - Crear nueva Activity en el Manifest
  • Tutorial 21 - Bundles
  • Tutorial 22 - Random (Aleatorio)
  • Tutorial 23 - Layout Weight y Gravity
  • Tutorial 24 - MediaPlayer (Audio, Sonido)
  • Tutorial 25 - SoundPool (Audio, Sonido)
  • Tutorial 26 - Toggle Button (Boton)
  • Tutorial 27 -OnCheckedChangeListener
  • Tutorial 28 - RadioGroup y Radio Buttons (B. Radio)
  • Tutorial 29 - RadioGroup OnCheckedChangeListener
  • Tutorial 30 - ListView (Listas)
  • Tutorial 31 - ArrayList y ArrayAdapter
  • Tutorial 32 - Spinner
  • Tutorial 33 - OnItemSelectListener
  • Tutorial 34 - Crear Metodos
  • Tutorial 35 - WebView (Navegador)
  • Tutorial 36 - WebView Metodos
  • Tutorial 37 - WebView Client
  • Tutorial 38 - Mas de WebView
  • Tutorial 39 - SQLite (Base de Datos)
  • Tutorial 40 - SQLiteOpenHelper Metodos
  • Tutorial 41 - Crear Base de Datos
  • Tutorial 42 - Abrir SQLite
  • Tutorial 43 - Cerrar SQLite
  • Tutorial 44 - Insertar datos en SQLite
  • Tutorial 45 - Crear Dialog
  • Tutorial 46 - Mostrar datos SQLite
  • Tutorial 47 - Mas de SQLite
  • Tutorial 48 - Buscar Datos en SQLite
  • Tutorial 49 - Editar Datos en SQLite
  • Tutorial 50 - Eliminar Datos en SQLite
  • Tutorial 51 - Threads
  • Tutorial 52 - GridView
  • Tutorial 53 - BaseAdapter para Imagenes
  • Tutorial 54 - Metodos del BaseAdapter para Imagenes
  • Tutorial 55 - OnItemClickListener
  • Tutorial 56 - ViewFlipper
  • Tutorial 57 - Metodos del ViewFlipper
  • Tutorial 58 - OnLongClickListener
  • Tutorial 59 - CountDownTimer (Cuenta Regresiva)
  • Tutorial 60 - TabHost
  • Tutorial 61 - Declarar TabHost
  • Tutorial 62 - Insertar Iconos en TabHost
  • Tutorial 63 - Insertar Fondo en TabHost
  • Tutorial 64 - Reloj Analogo
  • Tutorial 65 - Personalizar Botones
  • Tutorial 66 - Tiempo (Metodo Time)
  • Tutorial 67 - Actualizar Pantalla (Runnable)
  • Tutorial 68 - Notification Manager (Notificacion)
  • Tutorial 69 - Notification
  • Tutorial 70 - Notificacion Final
  • Tutorial 71 - OnKeyListener
  • Tutorial 72 - SimpleCursorAdapter (SQLite ListView)
  • Tutorial 73 - Orientacion de Pantalla (Layout-land)
  • Tutorial 74 - RelativeLayout
  • Tutorial 75 - SlidingDrawer
  • Tutorial 76 - FrameLayout
  • Tutorial 77 - Metodos del SlidingDrawer
  • Tutorial 78 - ViewPager - Preparando ambiente
  • Tutorial 79 - Crear XML para ViewPager
  • Tutorial 80 - PagerAdapter
  • Tutorial 81 - Metodos del ViewPager
  • Tutorial 82 - LayoutInflater
  • Tutorial 83 - Botones en ViewPager
  • Tutorial 84 - Menu para Android
  • Tutorial 85 - MenuInflater
  • Tutorial 86 - OnOptionsItemSelected
  • Tutorial 87 - Actividad con Temas(Theme)
  • Tutorial 88 - Preferences (Preferencias)
  • Tutorial 89 - PreferenceScreen (Preferencias)
  • Tutorial 90 - Terminando Preferences (Preferencias)
  • Tutorial 91 - CheckBoxPreference (SharedPreferences)
  • Tutorial 92 - EditTextPreference y ListPreference
  • Tutorial 93 - SeekBar (Barra de Ajuste)
  • Tutorial 94 - AudioManager (Control de Audio)
  • Tutorial 95 - Mas de SeekBar (Barra de Ajuste)
  • Tutorial 96 - Google Maps (Preparando Ambiente)
  • Tutorial 97 - Map Key (Generar Clave Unica Mapas)
  • Tutorial 98 - MapView (Mostrar Mapa)
  • Tutorial 99 - Clase Overlay para Mapas
  • Tutorial 100 - Metodo MotionEvent (Eventos)
  • Tutorial 101 - AlertDialog (Cuadro de Alerta)
  • Tutorial 102 - Controlador y Brujula
  • Tutorial 103 - GeoPoint y GeoCoder
  • Tutorial 104 - Localizar una direccion en el Mapa
  • Tutorial 105 - Vista Satelite y de Calle
  • Tutorial 106 - Dibujar en Mapa con ItemizedOverlay
  • Tutorial 107 - Crear un punto en el Mapa
  • Tutorial 108 - Colocar y Mostrar un punto en Mapa
  • Tutorial 109 - GPS Permisos de Localizacion
  • Tutorial 110 - Localitation Manager y Criterios
  • Tutorial 111 - LocalitatonListener
  • Tutorial 112 - Exportar y firmar proyecto Android
  • Tutorial 113 - Obtener Key especifico para el Mapa
  • Tutorial 114 - Aumentar Velocidad al Emulador
  • Tutorial 115 - Conectar Android y MySql con Php
  • Tutorial 116 - Crear Nuevo Emulador Android
  • Tutorial 117 - ArrayList -NameValuePair
  • Tutorial 118 - Base de Datos MySql.
  • Tutorial 119 - PHP para conectar Android y MySql
  • Tutorial 120 - HttpClient
  • Tutorial 121 - HttpPost y HttpResponse
  • Tutorial 122 - BufferedReader -Leer Datos de MySql
  • Tutorial 123 - Ejecutar HttpClient y HttpPost
  • Tutorial 124 - Sensor Proximity (Proximidad)
  • Tutorial 125 - SensorEventListener
  • Tutorial 126 - Graficos clase View
  • Tutorial 127 - OnDraw dibujar Rectangulos (Canvas)
  • Tutorial 128 - Dibujar Texto (Canvas)
  • Tutorial 129 - Agregar Fuentes a Assets
  • Tutorial 130 - Dibujar Bitmap (Canvas)
  • Tutorial 131 - Animacion de Bitmap.
  • Tutorial 132 - SurfaceView
  • Tutorial 133 - onPause y on Resume para SurfaceView
  • Tutorial 134 - Runnable para SurfaceView
  • Tutorial 135 - Bitmap Canvas SurfaceView
  • Tutorial 136 - MotionEvent
  • Tutorial 137 - Mejorando Animacion Bitmap
  • Tutorial 138 - TimePicker
  • Tutorial 139 - Metodos del TimePicker
  • Tutorial 140 - TimePickerDialog
  • Tutorial 141 - OnTimeSetListener
  • Tutorial 142 - DatePicker
  • Tutorial 143 - Metodos del DatePicker
  • Tutorial 144 - DatePickerDialog
  • Tutorial 145 - Clase Calendar (Calendario)
  • Tutorial 146 - OnDateSetListener
  • Tutorial 147 - AutoCompleteTextView
  • Tutorial 148 - Terminando el AutoCompleteTextView
  • Tutorial 149 - TextWatcher
  • Tutorial 150 - ExpandableListView
  • Tutorial 151 - String Array Multiple
  • Tutorial 152 - BaseExpandableListAdapter
  • Tutorial 153 - Personalizar el ExpandableListView
  • Tutorial 154 - View Inflate
  • Tutorial 155 - OnChildClickListener
  • Tutorial 156 - XML para Utilizar la Camara
  • Tutorial 157 - ActivityForResult
  • Tutorial 158 - OnActivityResult (Obtener Resultado)
  • Tutorial 159 - BitmapDrawable
  • Tutorial 160 - Manejo del Flash de la Camara
  • Tutorial 161 - Clases Camera y Parameters
  • Tutorial 162 - Permisos para la Camara
  • Tutorial 163 - PackageManager (Verificar Hardware)


DESCARGAR





Compartir(Share Dialog ) contenido de una web por el usuario y añadir un comentario y un like a cada uno con la API de Facebook js

7/25/2013

ya hemos visto comopublicar contenido de una web y añadir un comentario y un like o gusto a cada uno,pero también exista otra forma de compartir contenido esto ya lo hace el usuario si le ha gustado un determinado articulo y desea compartirlo en su muro esto se lo hace con unShare Dialog que es solo una ventana modal con un contenido y un área de texto donde el usuario podrá colocar el mensaje que el desee.

Pero como llamo o utilizo el Share Dialog?
asta ahora hemos usado el API de Facebook en si FB.api pero también podemos hacer uso de la UI del SDK de Facebook la UI nos sirve para llamar métodos genéricos o cuadros de diálogos los cuales facebook nos proporciona los siguientes:

  • Feed Dialog: permite al usuario compartir o crear una noticia en su muro.
  • OAuth Dialog:permite al usuario autorizar una aplicación como parte de un flujo de autenticación.
  • Add Page Tab Dialog : permite al usuario añadir una aplicación a una página de Facebook que se administra.
  • Friends Dialog:permite a un usuario enviar una solicitud de amistad a otro usuario.
  • Pay Dialog:permite a un usuario realizar una compra a través de Facebook Credits.
  • Requests Dialog:permite a un usuario enviar una solicitud para uno o más de sus amigos.
  • Send Dialog:permite al usuario enviar un mensaje de Facebook a uno o varios de sus amigos.
de todos estos vamos a utilizar elFeed Dialog este modal nos permite añadir de igual forma contenido con los parámetros correspondientes utilizando elmetodo Feed.

Parámetros que vamos a utilizar:
  • name:el titulo que hace referencia el articulo
  • link: el vinculo o URL del articulo
  • picture: URL de la imagen que corresponde al articulo
  • caption: una pequeña descripción o resumen del articulo.


function compartir() { FB.ui( { method: 'feed', name: 'JavaFace-elblogdelprogramador: aprende usar la api de facebook', link: 'http://www.javaface-elblogdelprogramador.com/', picture: 'https://lh5.googleusercontent.com/-lEKhKIIiobo/UeqlGLHT0xI/AAAAAAAABP8/5FMS0IY3Ghk/s128-no/ima_128.png', caption: 'Aprende como usar la API de facebook y sincroniza tu web con facebook!!' }, function( response ) { if (!response || response.error){ console.log('error al compartir'); } else { creaLike(response.post_id); comentar(response.post_id); alert('Gracias por compartilo tu haces que otros tambien aprendan :)'); } }); }

También podemos hacer uso de los métodos/comments y/likes para añadir comentario y likes solo tenemos que indicar el ID de la publicación con el parámetropost_id , es decir utilizando elresponse.post_id, nos retornara el ID de la publicacion.

les dejo el código completo mas los códigos de comentario y like.


DESCARGAR




Publicar contenido de una web y añadir un comentario y añadir un like o me gusta a cada uno con la API de Facebook JS

7/25/2013

Anteriormente vimos comopublicar contenido de una web y añadir un comentario a esa publicacion, hoy les enseño como añadir un like o un me gusta a cada uno ya sea para la publicación o para el comentario todo de una manera facil y sencilla.

Como lo hacemos?
Facebook nos permite añadir cualquier contenido en el muro del usuario, y manipular ese contenido obviamente con los respectivos permisos ,para añadir unlike o un gusto a una publicación en el muro del usuario existe el metodo/likesel cual solo necesita el permisopublish_stream y ninguno otro mas es tan sencillo que tampoco necesitamos uso de parámetros solo con crear la función y indicarle el ID del comentario del cual se va añadir un like a la API eso es todo.

function creaLike(id){ FB.api('/'+id+'/likes', 'POST',function(response){ if (response && !response.error && response.id) { console.log('Nuevo Gusto id = '+response.id); } }); }

Solo se necesita colocar la funcióncreaLike(response.id) dentro del condicional verdadero, añadiendo el response.id que nos retornara el ID del comentario donde vamos añadir un like o un gusto.

les código completo con los anteriores códigos,


DESCARGAR










lunes, 22 de julio de 2013

Descargate y aprende a como crear paginas web con Adobe Dreamweaver CC

7/22/2013


Dreamweaver es desde hace años un referente en la creación de contenidos para la web. Su principal punto fuerte es la posibilidad de creación de contenidos HTML para desarrolladores de todos los niveles: desde el más novel, gracias a su forma visual de añadir los contenidos, hasta a programadores experimentados, gracias a todas sus herramientas de ayuda a la creación de código. Este curso video2brain aprenderas los conceptos básicos para comenzar a trabajar con texto e imágenes en un sitio web usando las capacidades de Adobe Dreamweaver CC.

Jorge González Villanueva te presenta sucurso Dreamweaver CC 1:Creación sencilla de sitios web. Gestiona un sitio web y añade textos e imágenes.

aprenderas las tareas más básicas: cómo está organizado el entorno de trabajo y dónde podremos encontrar cada elemento en el espacio de trabajo.

Dreamweaver no es solo un editor HTML: también permite trabajar con toda la estructura del sitio, así que simplifica las tareas de organización de archivos, conexión mediante FTP, etc.
El siguiente paso va a ser aprender los fundamentos del HTML y lo haremos desde el programa, usando sus etiquetas semánticas HTML y así aprenderemos a la vez lo básico de programación, usando las herramientas visuales de Dreamweaver.

tambien aprenderas a crear contenidos de texto, añadir imágenes a la página y conocerás las opciones que te ofrece Dreamweaver para crear estos tipos de contenido.



DESCARGAR
Suscribirse a: Entradas (Atom)