Tenemos un nuevo hito, y es que un editor de imágenes, que es increíble, que se llama Fotopea, es una alternativa de Photoshop totalmente gratis, o sea, es gratis, no tenéis que pagar nada, funciona enteramente en la web y tenéis una UI muy similar a lo que sería todo lo de Photoshop, con capas, filtros, un montón de mezcla de colores, es brutal, o sea, podéis abrir incluso archivos PSD, lo cual es increíble.
Pues esto está muy bien, y hace mucho tiempo, y ha sido bastante espectacular, que no estaba Photoshop en la web, hasta hoy, pero os voy a contar una ratada que me parece, pero bueno, os voy a enseñar primero el Photoshop, ya que aquí lo tenéis, Photoshop para la web.
Podéis probar Photoshop con tutoriales prácticos y tal, pero me da la sensación que es de pago, pues empieza prueba gratuita de 7 días, o sea, que ya veis que sí que es de pago.
Si lo queréis ver, todavía podéis darle aquí, demostración, no sé qué, y al menos podéis ver cómo es la UI, y os vais a fijar que es exactamente la UI que tenéis en aplicación, pero en la web.
Yo no, o sea, no os voy a decir ni que paguéis, ni nada, no es por eso, sino porque vamos a ver qué tecnologías han utilizado web para realmente conseguir esto,
porque es bastante impresionante que Photoshop, por fin, uno de los programas más potentes que hemos tenido siempre, que por fin esté en la web.
Y fijaos que yo haya visto, no hay limitaciones, más allá de que la UI no es exactamente, pero tiene incluso el tema de inteligencia artificial,
¿veis esto? El tema de relleno generativo, que podéis generar aquí, por ejemplo, decirle, quiero que pongas aquí un astronauta, ¿no?
Le generáis la imagen, empieza a generar, esto es todo en la web, esto es sin instalar, esto está todo en tu navegador, y es bastante rápido realmente, ¿veis?
Ya me ha puesto aquí el astronauta, y al final podéis también poner variaciones, aquí tenéis como diferentes variaciones, por ejemplo, vamos a poner esta, y ya está.
Finalizar demostración, pero ¿veis? Luego tenéis que pagar y todo esto, esto es un poco rollo, pero bueno, es Adobe que te esperaba, que iba a ser gratis, estás alucinando.
¿Cuál es la ratada? Ojo, la ratada, os voy a explicar la ratada. Bueno, esta es la web, photoshop.adobe.com, pero si utilizáis Brave, os vais a llevar una sorpresa,
y es que os dice que el navegador no es compatible.
Navegador no compatible, para crear o editar un documento, utilicen un navegador compatible, copien la URL, pégala en una versión más reciente de Chrome, Edge o Firefox.
O sea, que encima también deja fuera Safari. Esto me parece una ratada, y os voy a explicar por qué.
Este tipo de cosas, yo entiendo que hacer un... o sea, a mí me pasa, que a veces desarrollo algo y funciona solo en Chrome,
y no funciona mejor en Firefox porque no lo he probado, porque se me ha olvidado, porque no sé qué.
Bueno, pero yo no soy una empresa que tiene cientos de millones de dólares de beneficio, ¿ok? Ojalá, ojalá fuese yo.
Pero el tema es que me va a hacer una ratada porque, obviamente, Brave utiliza el motor de Chrome.
Es el mismo motor. O sea, si no fuese... si fuese otro motor, lo podría entender.
Pero es que es muy raro que te diga que tengas que instalar Chrome cuando realmente Brave utiliza el mismo motor de Chrome.
No tiene ningún tipo de sentido que te diga esto. No tiene sentido. No hay ningún tipo de diferencia entre Chrome y Brave en cuanto al motor,
porque los dos tienen Chromium. Debe ser por temas de privacidad. Bueno, pero es que aunque desactives esto, aunque lo desactives, también.
Y por tema de privacidad, es raro, porque Firefox, al final Firefox, sí que bloquea trackings y cosas así.
O sea, es muy raro. No tiene ningún tipo de sentido. A mí me parece esto una ratada de campeonato.
Aquí, en más información, pues te dicen, no, requisitos del sistema y tal. Pero es una pena tener que ver, ¿ves?
Aquí Google Chrome, no sé qué, para comprobar la versión. Se utiliza un dispositivo, no sé qué. No sé.
A mí me ha sorprendido, y para mal, la verdad, que tengamos este tipo de cosas.
A día de hoy, en pleno 2023, que tengamos este tipo de cosas.
Y sí, seguramente cambiando el user Allen y todo esto funcionará.
Pero, no sé, me parece una ratada.
La ratada es que es algo, es un detalle feo, que en un navegador que utiliza el mismo motor que Chrome,
no funcione, porque seguramente es totalmente transparente.
Photoshop está ahora en la web.
Esto es un artículo de Adios Manny, que justamente habla, y está muy chulo, y os lo recomiendo mucho,
porque muchas veces pensamos que la web es simplemente JavaScript, no sé qué, no sé cuánto.
Y al final, conseguir que te funcione algo como Figma, Photoshop, AutoCAD, y cosas así en la web.
Pero, hombre, utilizas muchas cosas de la web, pero rollo nivel más hardcore.
Y hay aquí APIs, que a lo mejor no conoces, que son de JavaScript, que se utilizan,
pero también hay otras cosas que son mucho más avanzadas, y ya llegan a WebAssembly,
tenemos Web Components, Lead, bueno, un montón de cosas, ¿no?
Aquí tenemos el ejemplo de Photoshop.
Está súper bien porque dice, la visión Photoshop en el browser.
La web promete un acceso sin fricción, que al final es global para todo el mundo,
para que instantáneamente tú abres el navegador, entras y tal, ¿no?
La flexibilidad de que es plataforma, o sea, cross-platform, al final sea Unix, sea Mac, o sea Windows,
puedes entrar a la misma aplicación sin ningún tipo de problema.
Y dice, las nuevas capacidades de la web es la que desbloquea el potencial de Photoshop.
Y esto es una cosa que muy poca gente sabe que existe, y es increíble.
Fijaos en esta, Navigator Storage Get Directory.
Esto es porque tenemos ahora una nueva API, a ver si lo puedo hacer aquí, no me he dejado hacerlo así de una.
Pero bueno, tenemos una nueva API que lo que nos permite es abrir ficheros directamente desde el navegador
y editarlos y guardarlos.
Por ejemplo, ahora podríamos hacer un editor 100% en la web que abras un archivo y que lo guarde en tu disco,
sin necesidad de hacer ninguna cosa rara, sino con acceso directo a tu sistema de archivos.
Y eso me parece increíble.
Y lo tenemos aquí. Es el The New Origin Private File System API,
que te permite a FAS Origin Especial Virtual File System.
Entonces tú aquí puedes tener un sistema, claro, es peligroso porque puedes, es totalmente peligroso, claro.
Pero te pide permisos. Te pide permisos y además puedes hacer dos cosas,
que en este caso están haciendo algo todavía más interesante.
Aquí lo que están haciendo es el sistema de archivos virtual,
que entonces no tiene acceso directamente a tu sistema de archivos.
Y luego lo que puedes hacer es tener el File System Access para decirle cuando lo quiera guardar,
donde lo quieres guardar.
Entonces primero sería a nivel virtual crear los ficheros y todo esto.
Y cuando quieras guardar, pues ya lo puedes guardar sin ningún problema.
Entonces tendrías como dos niveles.
Uno, un sistema de archivos virtual para el navegador solo para esa web.
Y luego, cuando lo quieras llevar a tu sistema de archivos,
pues poder tenerlo sin ningún tipo de problema.
Y ahí por eso pone Origin Private File System.
Es como que te crea, imagínate, un disco duro solo para Photoshop.
Algo así, para que me entendáis.
Entonces tú cuando abres este Storage, haces Get Directory y haces esto, Get File Handle,
este archivo que ves aquí realmente lo está creando como en un disco duro virtual
que realmente solo funciona para la página web de Photoshop.
Tenemos también que utilizan WebAssembly.
¿Por qué?
Porque han estado utilizando código que ya existía de Photoshop,
lo han compilado de C y C++ con WebAssembly utilizando mscripten,
que es un compilador que justamente te permite hacer esto.
¿Vale?
Tú tienes C y C++ y lo puedes convertir para que funcione con JavaScript y todo esto.
¿Vale?
Pues ahí lo tendríamos.
Y aquí te explico un poquito las cosas.
También otra cosa que ha hecho posible utilizar Photoshop es el nuevo P3 Color Gamut.
De esto habló Carmen Anzio en la Midu.com.
Y es que hasta ahora teníamos bastante limitados los colores que podíamos mostrar en la web.
Pues ahora, gracias a esto, al DisplayP3 tenemos más colores que podemos mostrar.
O sea, tenemos toda la gama de colores.
Y ahora, en Photoshop, pues como utiliza esta gama de colores, pues lo podemos utilizar sin ningún problema.
Temas de optimización de rendimiento, que como lo han hecho, ¿no?
Que una aplicación que es de escritorio como Photoshop, la verdad es que si la probáis,
os recomiendo mucho que la probéis solo para ver el rendimiento.
Porque a mí me ha volado la cabeza lo rápida que va, ¿eh?
Mirad, voy a entrar.
Entro de una.
Aquí sí que carga bastante.
Luego le dais Demostración de rollo generativo.
¿Vale?
Esta es la carga del principio.
Y ya está.
O sea, es bastante sorprendente lo rápido que va, ¿eh?
Y el hecho de inteligencia artificial y tal va bastante más rápido incluso que algunos de escritorios que he visto.
Tarda menos que en desktop, ¿verdad?
O sea, a lo mejor no tiene el 100% de las cosas, a lo mejor tiene un poquito menos.
Pero que está muy, muy, muy bien optimizado.
Y aquí hablan justamente de esto, ¿no?
De cómo están cacheando con service workers, cómo han optimizado utilizando esto, ¿no?
Para tener una experiencia que parezca de escritorio.
También aquí, pues, cómo han hecho las optimizaciones de V8.
Es que es impresionante.
Este artículo está muy bien, aunque obviamente es bastante potente.
Pero incluso para hacer multi-thread.
Que mucha gente se cree que no se puede hacer multi-thread.
Pero aquí, no solo utilizando WebAssembly, sino también utilizando WebWorkers.
Para tener threads en JavaScript, ¿vale?
Para tener threads en hilos, diferentes hilos, lo podéis utilizar aquí.
Hombre, 64 GB de RAM ayudan, obviamente.
Pero yo he utilizado Photoshop o similares como Gimp y tal.
Y ya te puedo decir que sorprende todavía lo bien que va, ¿eh?
O sea, bastante sorprendente.
Bueno, que este artículo, si os interesan todas las tecnologías que han hecho que sea posible llevar esto a la web y que funcione tan bien, pues aquí lo tenéis.
Esto es lo que me ha sorprendido, ¿ves?
Mira, están cerca de tener soporte para Safari.
Lo han hecho en colaboración con la gente de Google.
Se nota, ¿no?
Por temas de rendimiento y tal.
Y me alegro un montón porque este tipo de cosas son las que realmente marcan la diferencia.
Creo que es el momento que los navegadores cambien su UI para que se adapte la aplicación a este tipo.
No sé.
Ya, lo que estaría genial, por ejemplo, es que se pudieran instalar, por ejemplo, ¿veis aquí en Brave que aparece esto?
Cuando le dais a este botón, lo que hace es instalar la aplicación como si fuese una aplicación de escritorio.
Entonces, le dais aquí, ¿veis?
Y ya tenemos la aplicación de escritorio aquí.
Ahora ya tenéis Photoshop instalado sin ningún tipo de problema.
Y al final la UI, o sea, queda bastante bien integrada.
O sea, realmente parece una aplicación de escritorio que podéis cerrar.
La podéis cerrar.
Y ahora ya la podéis buscar.
Buscáis Fotopea.
Bueno, no me aparece.
Pero la tengo aquí.
La tengo aquí.
Le podéis dar dos veces.
Y funciona súper rápido, ¿eh?
Esto es Fotopea, pero con la de Photoshop estoy seguro que se puede hacer exactamente lo mismo.
O se debería.
Se debería.
A ver, vamos a verlo.
¡Ah!
Este no me deja.
No me deja con este navegador.
Malditos.
A ver.
Fotopea.
Bueno, aquí veo enviar.
A ver.
Demostración rollo generativo.
No veo que esté para instalar.
Enviar a tus dispositivos.
Crear.
No está para instalar.
No está para instalar.
O sea, que a lo mejor no se puede instalar todavía.
Yo imagino que la pondrán para instalar.
Normalmente debería aparecer por aquí como una figurita, pero a lo mejor no la tienen.
O sea, que a lo mejor no es Progressive Web App todavía.
Pero lo harán.
Lo harán seguro porque es que es parte de la clave.
Que sea Progressive Web App, ¿no?
Crear acceso directo o guardar como aplicación.
Pero debería salir el icono, ¿no?
¿Ves?
Sale el icono.
Sale el icono.
Si no sale el icono es que no es Progressive Web App.
Que al final se puede guardar como aplicación, pero al final sí que es una web.
Entonces...
...
...
...
...
...