WebKitGTK+

Expositor: Diego Escalante Urrelo (diegoe)

Moderador: Sergio Infante Montero (neosergio)

Sabado 19 de Diciembre de 2009, 17:00 horas UTC

irc.gnome.org #gnome-hispano


Siendo las 17.05 UTC

Bienvenidos a todos a la Charla IRC de Diciembre

de GNOME Hispano

Hoy el tema sera: WebkitGTK+

estara a cargo de Diego Escalante - http://www.gnome.org/~diegoe/

antes de iniciar les pediria a todos intervenir cuando sea absolutamente necesario, con mensajes que ayuden a la charla

listo diegoe adelante la sala es tuya

bueno

comencemos.

primero una rápida presentación, soy Diego Escalante Urrelo, participo en GNOME desde 2006

principalmente en Epiphany, el navegador web, aunque también en otros módulos. ahora estoy en el consejo de directores de la Fundación GNOME

hoy vamos a hablar sobre WebKitGTK+

haremos 2 partes, una de puro texto y mentiras, digo, información. luego veremos un ejemplo

para la segunda parte, si no tienen instalados los paquetes de desarrollo probablemente quieran ganar tiempo si tienen una conexión lenta

me parece q les bastará con libgtk2.0-dev y libwebkit-dev

si están usando debian o ubuntu, eso. si usan Fedora o parecidos, no tengo idea

http://es.gnome.org/Eventos/CharlasIRC/CharlaDiciembre2009

:)

pero es seguramente Gtk-devel o Webkit-devel

bueno. hecha la aclaración, vamos a la primera parte

primero, qué es webkitgtk? WebKit para empezar es un motor de render o de dibujado web. es como gecko (lo que dibuja las páginas en Firefox)

originalmente fue un fork de KHTML

lo hizo apple para usarlo en safari y etc, con el tiempo lo abrieron un poco más y ahora hay ports o frontends para varios toolkits

hay para Qt, Windows, GTK+

el que nos importa es el de GTK+, obvio.

WebKit lo desarrolla principalmente Apple y algunas empresas q rotan alrededor. El port GTK+ lo tocan principalmente Igalia y Collabora, actualmente.

antes han contribuido varias compañías más, y ahora mismo también, pero de memoria y para mencionar fácilmente esas dos.

ah y claro, Google mete mucho trabajo ahí, aunque ellos no usan directamente el port a Gtk+, es medio raro esto de chrome

bueno. lo especial del port GTK+ versus otras cosas es que se reutiliza el stack de GNOME

stack de GNOME son las librerías con las q está hecho casi todo en GNOME: cairo, gstreamer, libsoup, pango

libsoup hace todo lo referente a transporte de red

cairo hace el dibujado mismo de cosas (dibuja una línea, un círculo, una gradiente, etc)

gstreamer son las cañerías multimedia, como algunos sagaces asistentes supondrán esto es para HTML5 principalmente

y pango dibuja fuentes, pero actualmente no se usa por defecto, luego unos datos más de este punto

WebKitGTK+ lo usan ahora mismo Epiphany, Seed, Midori, para mencionar algunos

el port GTK+ tiene otras particularidades muy positivas

principalmente para desarrolladores, como ejemplo les comentaré la experiencia de Epiphany como consumidor de API

desde que firefox es firefox, firefox es el principal usuario del API de gecko

si usan solo firefox eso no es problema

pero si empotran gecko en sus aplicaciones, es un problema

lo que pasó varias veces en epiphany fue que gecko rompía el API a voluntad de firefox, y eso rompía epiphany a cada rato

a veces updates a firefox o xulrunner hacían que epiphany simplemente ya no arranque

evidentemente esto es terrible en cualquier librería o api

en el 2007 se comenzó a explorar el portar epiphany de gecko a webkit

eso lo inició Xan López que es ahora el maintainer de Epiphany

bueno, hasta el 2008 no era muy fácil de usar el port de epiphany a webkit

desde 2008 hasta ahora se ha trabajado mucho en webkit y ya está casi casi a la par con lo q teníamos en epiphany gecko

y precisamente ese es el punto importante de lo q les decía sobre gecko empotrado vs webkit empotrado

en el caso de webkit, todo el desarrollo viene siendo llevado por los principales consumidores del api que son varios y además manteniendo una política de buen api y estabilidad

por ejemplo, el mantenedor de midori es un colaborador activo en webkit y en revisiones de parches y nuevo api

xan por su parte también, e incluso es committer en webkit

esto ha ayudado a tener un api muy bueno

ahora mismo en coruña están reunidos ellos y varios más para el hackfest de WebKitGTK+

http://live.gnome.org/WebKitGtk/Hackfest2009

se está trabajando en regresiones y bugs de webkit y epiphany

http://live.gnome.org/WebKitGtk/Hackfest2009/RegressionBugs

que es una regresion?

una regresión es cuando tu software hace algo y en la siguiente versión luego de algún cambio ya no hace eso o lo hace mal

ha habido una regresión en la funcionalidad

hasta ahora se van haciendo varias cosas interesantes

si están usando una distribución de linux de este trimestre tienen disponible epiphany 2.28 en los repositorios para q prueben

van a ver q hay cosas q no funcionan a comparación de epiphany 2.26 q está hecho con gecko

pregunta, no debio haber sido un cambio mayor, y colocarlo como 3.0?

durante el hackfest se han arreglado por ejemplo los controles para lo elementos <video/>, el corrector ortográfico, recordar passwords en formularios en epiphany

y también un beta de los bindings DOM (que ahora explicaremos qué es)

dantrix, no, solo se cambió el backend, el UI y todo lo demás sigue igual o mínimamente cambiado

gracias

en los dos días que quedan de hackfest, deberíamos tener algunas cosas nuevas

mejor performance por ejemplo, si hay suerte una iteración del beta de DOM bindings y un par más de regresiones arregladas

ahora para ir terminando la "teoría", les contaré q son los DOM bindings

si alguna vez hicieron html con javascript habrán tenido que hacer algo como document.getElementById() o algo así

y los elementos que obtenían los cambiaron con cosas como elemento.innerHTML = "<b>hola</b>";

cosas así.

bueno esos elementos son parte del DOM

DOM es documento object model

q basicamente es un árbol de elementos

los elementos tienen propiedades y etc q pueden modificarse

los DOM bindings hacen algo muy interesante, permiten que uno pueda modificar estos elementos programaticamente desde el código C que hacemos para empotrar nuestro webkit

entonces en el callback de un botón en la barra de herramientas de epiphany podríamos hacer que todos los links aumentaran de tamaño, cosas así

pero sin recurrir a javascript, sino directamente en nuestro código C

bueno eso es más o menos una introducción general a WebKitGTK+

alguna pregunta hasta ahora, antes de pasar al ejemplo que previamente hemos cocinado

parece que todo esta claro :)

en otras noticias, no le cobraron penal al barcelona.

en fin.

continuemos entonces

pregunta?

diegoe: al usar C en ves de js no es un poco mas lento

?

al revés

porque?

javascript es interpretado, C es compilado :-)

en todo caso la diferencia no es perceptible para la mayoría de cosas

con C no tienes que subir una capa mas hasta el dom de js aunque tengas los dom bindings?

y se puede utilizar Python?

los dom bindings son como un puente nomas

o en algo me estoy confundiendo?

tienes el DOM en tu html

con javascript puedes pedir elementos y todo, como haces con jQuery y afines

pero en C, no tienes manera de hacerlo

a menos q escribas javascript y lo ejecutes en tu WebKitWebView con webkit_web_view_execute_script()

entonces mientras que en tu html puedes tener una función que te hace todos los elementos <a> de color fucsia y 20pt de letra

en C no hay forma limpia de hacerlo

eso ya lo interpreta webkit no c


esa función javascript dentro de tu .html lo interpreta webkit

JavaScriptCore para ser precisos

la idea es que puedas por ejemplo g_object_set (G_OBJECT (elemento), "innerHTML", cadena);

cosas así

como si fuese un objeto cualquiera

vensign, eso también se podría en python

me suena a hacer web compilando el codigo... o me equivoco...

ok

igual que en python puedes setear propiedades como visible o sensitive, igual

user001, sí, es una aplicación práctica de esto

en el ejemplo se ve precisamente un caso de eso

bueno, el ejemplo lo pueden obtener aquí: http://www.gnome.org/~diegoe/webkitgtk/

son 4 archivos, el Makefile es opcional

pero les ahorrará copiar y pegar una línea

cuando lo descarguen, tendrán q cambiar un #define en monito.c:

#define FILE_START "file:///hom...

la ruta a start.html tiene q ser la ruta actual en sus equipos

disculpen el primitivismo

Nota: Todos los enlaces que han sido puestos durante la charla estan y estaran aqui : http://es.gnome.org/Eventos/CharlasIRC/CharlaDiciembre2009

los sagaces habrán notado q este ejemplo es una reedición del que usé en el Encuentro Linux 2009

:)

reciclaje de electrones

a ver, empecemos en main()

en main() encontramos un par de cosas

si nunca han usado GTK+ con GtkBuilder les llamará la atención que no haya código creando ventanas o cosas así

la ventana y sus elementos están todos definidos en encuentro.ui

es un archivo GtkBuilder que pueden abrir con glade3

creo que la charla de pygtk de avaldez cubrió eso

nota: Charla de avaldes - http://es.gnome.org/Eventos/CharlasIRC/CharlaNoviembre2009

bien, si ven la línea 148:   web_frame = webkit_web_view_get_main_frame (web_view);

  web_view = WEBKIT_WEB_VIEW (webkit_web_view_new ());

ahí estamos creando el elemento principal de WebKit: WebKitWebView

si han usado GTK+ antes se preguntarán por qué ese cast a WEBKIT_WEB_VIEW (), lo que pasa es que webkit_web_view_new () devuelve el WebKitWebView como un GtkWidget

esto no se los había comentado aun, WebKitWebView es un widget más

así como un GtkButton

o un GtkWindow

osea que pueden meter un WebKitWebView donde sea que pueden meter un GtkButton o lo q sea

hay una referencia del API más o menos completa en http://webkitgtk.org/reference/index.html

continuando, van a ver que como les decía el WebView es un widget cualquiera:

  gtk_container_add (GTK_CONTAINER (scrolled), GTK_WIDGET (web_view));

en ese caso lo empotramos dentro de una ventana con scroll

webkit se comportará como debe y tendrá un scroll operativo y todo, sin hacer mayores trucos

esto es todo el web_view, el objeto más "alto nivel"

luego van a ver q hay un par de creaciones de botones y callbacks conectados

vean por ejemplo

  toolbutton = GTK_WIDGET (gtk_builder_get_object (ui, "homebutton"));

  g_signal_connect (G_OBJECT (toolbutton), "clicked",

                    G_CALLBACK (home_clicked_cb), web_view);

si ven el callback de ese botón, que es el callback del botón con el ícono de casita

se hace esto:  webkit_web_view_load_uri (web_view, FILE_START);

y eso no es nada más que decirle al web_View que cargue el path FILE_START

osea, el archivo start.html

alguien ya compiló el ejemplo?

o alguien q lo está intentando tiene problemas?

que es un callback ?

xapiens, la función llamada en reacción a un evento

diegoe: o/

hay un bug

haces click a un botón, y el callback de "clicked" es mi_funcion_especial()

Juanpe, cuál?

cuando bajas el zoom  lo vuelves a aumentar

el boton se mueve y tapa el texto que tiene detras

ah interesante. está para reportar

confirmado.

error tuyo o de webkit? :D

:D gnome bugsquad

creo que webkit

cuando se hace ese zoom

sí ya lo reproduje, se queda ahí en medio

encima de las cosas

aja

:o

ese control de zoom del que juanpe habla es un "slider" (GtkHScale)

tomaré un screenshot para q se haga obvio

eso

no debería salir todo en fondo negro?

al hacer click?

eso si funciona

bueno por algún motivo no puedo tomar un screenshot

Juanpe, puedes subir uno?

la propieda zoom_level no esta funcionando bien

oki

juanpe: ok, ya lo note.

bueno, la ventana tiene un control de zoom del cual pueden ver el código en la línea 170

verán que se ponen ciertas propiedades del widget y se conecta la señal value-changed

y el callback zoomscale_value_changed_cb lo único que hace es setear la propiedad "zoom-level" del WebView al nuevo valor del control de zoom

webkit por cierto puede hacer zoom del contenido completo

diegoe: http://www.ubuntu-pics.de/bild/34874/selecci__n_001_zeefaG.png

no solo del texto como en el ejemplo

de hecho hay una línea comentada q dice: webkit_web_view_set_full_content_zoom (web_view, TRUE);

si le quitan el // van a usar el zoom completo

pero se ve medio mal con las imagenes q estan en el ejemplo

bueno eso es más o menos la descripción del UI. desde el punto de vista de webkit lo destacable está en cómo fue fácil de empotrar

y en cómo cambiar una propiedad del webview fue solo cosa de usar g_object_set, API estándar de cualquier GObject

ahora podemos pasar a la parte de hacer cosas "híbridas" de web y C

hasta aquí alguna pregunta?

(si no han compilado el ejemplo pueden verlo en el screenshot de Juanpe)

nota: screenshot de juan-pe http://www.ubuntu-pics.de/bild/34874/selecci__n_001_zeefaG.png

bueno sigamos

hay 2 abusos del API de webkit en este ejemplo

el primero es el abuso de create-plugin-widget

  g_signal_connect (G_OBJECT (web_view), "create-plugin-widget",

                    G_CALLBACK (web_view_create_plugin_widget_cb), NULL);

la señal create-plugin-widget es emite cuando el html tiene un <object> o <embed>

si ven el callback web_view_create_plugin_widget_cb()

se está creando un botón y se retorna ese botón

y si ven en start.html

tenemos: <object type="application/x-gtk-encuentrolinux" style="width: 300px; height: 100px;"></object>

qué permite esto? pues que tengamos un visor html personalizado

en donde implementamos "plugins"

por ejemplo podríamos tener un widget Gtk+ de lista de contactos

como el de pidgin

y queremos empotrarlo en nuestra aplicación de intranet que es toda web

podríamos entonces tener un visor personalizado de html ("navegador") donde escuchamos la señal create-plugin-widget

y cuando encontremos el mime "application/x-mi-intranet-lista" creamos y devolvemos un widget

el widget este del que estamos hablando, de lista de contactos

si ven, ese botón tiene conectada la señal "clicked" a web_plugin_clicked_cb(()

donde se hace el truco de execute_script

y como dijo alguien, se cambia el color de fondo de la página a negro

este es el abuso #1 de este ejemplo

como ven, pueden usarlo para empotrar widgets arbitrariamente en un html

por supuesto, con callbacks y todo hecho en C

o en python o en lo que sea q hagan su WebKit empotrado

el segundo y último abuso del API es el que está al final de main()

de la línea 179 hasta el final

van a ver que hay una serie de llamadas y variables con nombre JS

lo que se hace ahí es más o menos lo siguiente:

  js_context = webkit_web_frame_get_global_context (web_frame); obtener el contexto del web_frame (que es el "interno" del web_view)

  js_global = JSContextGetGlobalObject (js_context); obtener el global (donde registraremos nuestra función)

y luego crear una función javascript y registrarla

  js_function_name = JSStringCreateWithUTF8CString ("holaEncuentro");

  js_set_can_register = JSObjectMakeFunctionWithCallback (js_context, js_function_name, (JSObjectCallAsFunctionCallback) hola_encuentro_cb);

  JSObjectSetProperty (js_context, js_global, js_function_name, js_set_can_register, 0, NULL);

ohh ahora se me desaparecio el boton :)

lo que hacen estas líneas es decirle al intérprete de javascript del html cargado actualmente

"en tu contexto global vas a tener una función llamada holaEncuentro"

"cuando se le llame, llamarás a la función C hola_encuentro_cb"

si ven esta función

van a ver que lo que se hace es revisar si se ha recibido un argumento a la llamada de la función

ojo que en el html se llama así: javascript:holaEncuentro(true)

esto se hace en el if()

  if (argument_count == 1

      && JSValueGetType (js_context, js_arguments[0]) == kJSTypeBoolean)

(ver si hay al menos 1 argumento, y pedir el tipo de dicho argumento)

dentro del if se hace la conversión de valor Javascript a valor C

si se descubre que es TRUE entonces se cambia el icono de la ventana

(ojo en la barra de tareas)

lo que hacemos aquí entonces es registrar una función C como una función javascript

las implicancias de eso es que por ejemplo podrían tener un UI hecho en HTML y hacer que sus elementos HTML llamen a funciones C

entonces por ejemplo podrían tener un equipo de diseño, q haga un UI muy bonito en HTML

y uds programar todo en C o Python

una consulta, en la línea 46 de start.html . estas  declarando el type object como: application/x-gtk-encuentrolinux o esto depende de otro..?

no entiendo bien

depende de qué?

el type es arbitrario, pueden poner lo q quieran

de alguna libreria, o mejor si me explicas :)

claro q no vayan a poner un tipo que ya esté tomado

ok

eso era lo q preguntabas?

asi es, gracias

el type en object o embed es arbitrario

por eso en el callback de create-plugin-widget se recibe mime_type

creo q podemos pasar a una parte de preguntas, ya que el ejemplo cubre lo ya explicado

si quieren ver ejemplos de uso del API de webkit pueden ver el código de epiphany: http://git.gnome.org/cgit/epiphany

diegoe: descubri otro bug

midori: http://git.xfce.org/apps/midori

el boton se desaparece :D

y si les interesa usar la parte de javascript: http://git.gnome.org/cgit/seed

http://www.ubuntu-pics.de/bild/34875/selecci__n_001_Q5DPAn.png

Juanpe, con zoom completo? creo q por eso lo desactivé

a ver voy a desactivarlo

interesante como se puede aprovechar webkit

y existe algun framework, o algo que facilite la vida?

diegoe: nop

eso no tiene nada q ver, igual desaparece

lesthack, gwibber (no el nuevo) y empathy usan webkit para tener UIs más ricos sin complicarse

para reproducirlo, reduzcan el zoom y luego en el toolbar haga click en home(la casita)

empathy lo usa para tener temas de adium en las ventanas de conversación

gwibber para el "canvas" donde dibuja los updates

user001, framework de qué?

para escribir el codigo, o IDE no se...

Juanpe, :o está un poco roto eso de los plugins arbitrarios creo, porque hay un bug y ese botón debería tener etiqueta y no tiene (está mal dibujado)

user001 puedes usar lo que quieras

user001, IDE no hay, IDE quizá anjuta

que es un IDE genérico

ok,

user001: o PyDev para python

diego cuando dijiste que se podia usar el html como interfaz y hacer la funcionalidad con c/python

se puede crear una app webkit y alojarla en un servidor

nop

algo asi como una app en php, pero la funcionalidad estaria en c/python

ohh :(

esto no es del lado del servidor, es todo en el cliente

es una aplicación q haces, y q ejecutas en tu escritorio

estás creando una aplicación completa

hay q correrla en tu equipo

y no se ha trabajado en que se pueda poner fucionalidad en el server, con webservices y que mediante webkitgtk se consuma estos webservices?

Juanpe_ podrias indagar mas en el motor de webkit para que veas todo lo que se puede hacer

como por ejemplo consumir el API de facebook o algo así?

claro

ya

algo por el estilo

Juanpe_ y de manera nativa ??

eso estaría genial

lo más "astuto" q podrías hacer es usar libjson o libmojito

q son librerías para consumir json y servicios en línea, respectivamente

las dos se usan en moblin

y son basadas en GObject

pero probablemente sería más fácil hacerlo en javascript en tu UI mismo

no tengo una idea clara

diegoe, eso implicaría que la aplicación pueda ser multiplataforma, hasta que grado eso se podría lograr sin mucho esfurerzo?

claro mediante ajax podrias consumer ws

necesitarías solamente q webkitgtk y gtk compilen sin problema

pero la idea es hacerl con webkitgtk y consumir esos ws

esto le permitiria a las empresas implementar apis que puedan ser consumidas por webkitgtk

diegoe habría problemas en cuanto a poner en riesgo la seguridad del usuario ??

Juanpe, si lo quieres hacer con C, creo que lo mejor es q veas libmojito y libjson

Juanpe, bueno no creo q sería muy diferente a como ahora hacen facebook o twitter

tienen un API y lo hacen disponible

y pues da igual si usas javascript o C

por eso te digo que si lo quieres hacer en C, tienes libmojito y libjson, creo q mojito no consumía facebook hasta hace como 1 ó 2 meses, tendrías q revisar

mm

http://git.moblin.org/cgit.cgi/mojito/

no, no consumen facebook, pero es cosa de implementarse, implementan twitter y flickr por ejemplo

puedes ver en services/ me parece

diegoe: oki

lesthack, como por ejemplo qué situación? no debería haber riesgo, desde el html no puedes pasar punteros ni direcciones de memoria ni nada. y en todo caso sería un poco descuidado esperar recibir argumentos de ese tipo :-)

javascript:free(0x0321d) <- FAIL :-)

:)

:D

: D

diegoe: checka este screeshoot http://www.ubuntu-pics.de/bild/34876/selecci__n_001_69GEma.png

OMG

Juanpe, seleccionaste y cambiaste el zoom?

mas o menos

si

cuando el boton estaba desaparecido seleccione el espacio, y luego volvi a aumentar el zoom con la seleccion hecha y buala!

asu

crap

ni idea

parece q es la funcionalidad de como maneja el doom webkit

funciona erroneamente :D

creo q es porque no juega bien el widget empotrado

algo pasa que se enreda solito :D

muy buena charla, y desafortundamante tengo que salir, gracias diegoe

lesthack, gracias, nos vemos

creo que si no hay más preguntas, ya puede marcarse el fin del log :)

igual podemos seguir conversando si alguien tiene más comentarios

Muchas gracias diegoe  por el tiempo y la buena charla

clap clap

gracias a todos por venir

clap clap 

gracias por la charla.

Excelente :)

Para el proximo año, mas charlas IRC de Gnome Hispano

con mas temas Gnomeros

gracias a todos por asistir.

suban la charla que no estaba presente

no hay de que

como siempre la charla estara disponible en los proximos dias en : http://es.gnome.org/Eventos/CharlasIRC/CharlaDiciembre2009

Eventos/CharlasIRC/CharlaDiciembre2009/Log_CharlaIRCDiciembre2009 (última edición 2010-01-07 07:40:12 efectuada por SergioInfante)