Grupo Adobe Bolivia

En esta oportunidad les traemos un tutorial que muchos deben estar esperando, de la mano de uno de los evangelistas de Adobe, Paul Trani.

En este tutorial nos va a enseñar como obtener los colores de una web a nuestro Photoshop cs6 exportado los css del site.

Sin mas les dejo el tutorial.

Tras escuchar a @cvander de mejorando.la que dijo en su conferencia de css "Hagan símbolos nacionales en css" me anime a hacerlo, pero después de ver lo complejo que era el escudo nacional pensé que iba a ser imposible o me iba a tomar mucho tiempo, sin embargo después de ver todas las opciones que ofrecía css3 como transformaciones (rotación en todos los ejes, traslación, escalado), degradados múltiples, los clásicos bordes redondeados, pseudoelementos ..etc.
Empecé a probar y vi que tomaba forma, así que lo termine. Claro no es exactamente igual pero creo que es muy aceptable tomando en cuenta las limitaciones de css.

Solo utilice dos imágenes en svg, la sección del cóndor de los andes y la sección de la alpaca, todo lo demás es css3 y html, para el css utilice Less CSS este es la fuente del css y el html.

Cabe destacar que las imágenes en svg no las hice yo (soy  un pésimo diseñador), las extraje de este gráfico   
con Adobe Illustrator (esta es la parte que mas me costo, no se nada de Illustrator).

El resultado por el momento solo funciona en Google Chrome, los invito a que dejen su opinión, creen que se puede mejorar?

X Simposio TI USB - Aug Bolivia

El Grupo de Usuarios esta apoyando al evento denominado "X Simposio TIC 2011" que es organizado la Universidad Salesiana de Bolivia, el evento sera en fecha 7 de diciembre de 18:30pm a 22:30pm hora Boliviana (GMT-4), es totalmente gratuito , se llevara a cabo en la instalaciones de la Universidad y también podrán asistir en forma virtual  via streaming por la plataforma Adobe Connect.

En cuanto a los temas y expositores, tenemos invitados del exterior personajes muy conocidos en la red por la labor que realizan en pro de la educación online, y también he tenido el honor de ser invitado como expositor.

• Cesar Cancino Zapata - [ Php + Marketing Digital + Redes Sociales] 
• Jose Miguel Torrico - [AJAX] 
• Josue Mancilla [ Adobe Edge + HTML5 y CSS3] 
• Keyser Engelberth - [SEO - SEM]

Recientemente salio un nueva extensión para fireworks que incluye mejoras que tienen que ver con CSS3 y skining con jquery mobile.

Con la llegada de css3 van apareciendo nuevas formas agregar interactividad  a la web, una de esas formas es a traves de esta librería llamada Animate.css, la cual tiene varios tipos de animaciones similares a los que se logra con jquery o cualquier otra librería javascript, con la única diferencia de que todo es CSS.

Te animo a que lo pruebes en tus próximos proyectos web.

Adobe sigue entrando fuerte a lo que es css3 y html5, y recientemente ha lanzado varias herramientas para facilitarnos mas el trabajo. Entre estas herramientas están:

Muse

Una musa de inspiración para los creadores de páginas web..

"Crea sitios web tan fácil como cuando creas diseños para imprimir"..  Puedes crear y publicar páginas en HTML haciendo uso de los últimos estándares  sin escribir código. Muse, ahora en beta, te sirve de complemente para crear páginas web con un estilo profesional.

Edge

Diseño de movimiento e interacción de HTML5 Adobe ® Edge, es una herramienta de diseño de interacción que permite a los diseñadores llevar el contenido animado a las páginas web, utilizando estándares como HTML5, JavaScript y CSS 3.





Wallaby


"Wallaby" es el nombre en clave de una tecnología experimental que convierte una obra de arte y animaciónes hechas en Adobe ® Flash ® Professional (FLA) a archivos HTML y css3.
Wallaby no es un producto final y se encuentra todavía en la fase de prueba y validación.




Mas información: http://labs.adobe.com

Además de destacar y facilitar información sobre doce nuevas características de HTML5 CSS3, el mismo sitio hace un uso extensivo de las nuevas características tales como CSS3 transiciones , transformaciones con CSS3 , almacenamiento web y mucho más para ofrecer un recurso atractivo visual para aprender más acerca de HTML5 y CSS3. El sitio destaca el HTML5 y CSS3 siguientes características:

Adobe Edge es un nuevo proyecto que permitirá a los diseñadores crear animaciones basadas en estándares como HTML5, CSS3 y JavaScript. Al ver la demo preliminar podemos darnos cuenta que ésta aplicación permitirá crear archivos desde cero o animar archivos ya existentes teniendo soporta para bitmaps y vectores los cuales se animan de una forma muy sencilla e intuitiva.

Algo realmente interesante sobre ésta aplicación es la posibilidad de abrir un archivo .html (o similar) y animar los divs. En éste proceso el código html y CSS no es modificado pues las animaciones se crean mediante JavaScript (específicamente con JSON).

¿Es el inicio del fin de Flash?

Esta será seguramente la pregunta más recurrente que escucharemos al conocer esta aplicación. Adobe ha demostrado su interés en apoyar y adaptarse a los estándares actuales así que lo más seguro es que Flash, Dreamweaver u otras aplicaciones incluyan en un futuro soporte y compatibilidad para ésta tecnología pudiendo por ejemplo exportar a HTML5 y CSS3 las animaciones de Flash (lo cual ya se ha visto parcialmente con el proyecto Wallaby) o animar directamente en Dreamweaver.

Adobe dice que en poco tiempo tendremos posibilidad de jugar con una beta de Edge la cual estará disponible en el sitio labs.adobe.com.


Fuente: cristalab

Tenemos el placer de invitarlos a nuestro segundo eSeminario en la comunidad de Adobe Bolivia, hemos estado preparando este seminario con mucho esmero, cuidando así todos y cada uno de los detalles. Para esta oportunidad hemos realizado con anterioridad una encuesta para saber los temas a tratar en este seminario virtual, nos complace la participación recibida, somos una comunidad en crecimiento.

Las fechas para este evento serán entre el viernes 24 de Junio y el sábado25 de Junio, desde las 3:00 p.m. hora boliviana (GMT-4). Si quieren saber su horario local les recomendamos visitar este enlace.

En esta oportunidad traemos un seminario con Daniel Murguia Garcia, otros dos a cargo de José Miguel Torrico y otros dos a cargo de Josue Mancilla.

La Agenda de los Seminarios es la Siguiente:
Les recordamos registrarse en el Adobe User Group Bolivia, y de esta manera podrán estar al tanto del grupo y de sorpresas que Adobe siempre estará organizando para ustedes. Como siempre estos seminarios son totalmente gratuitos, esta vez debes registrarte para que podamos enviarte el link de acceso a las salas virtuales, no esperes al final para registrarte ya que hay un cupo limitado.

Se pueden registrar aquí: http://augbolivia-eseminar2.es.eventbrite.com/
También les recordamos seguirnos en Twitter y Facebook.
La invitación al evento en Facebook

Adobe CSS Regions permitiría la creación de diseño y layouts más complejos en sitios web.

"Esta especificación define una serie de herramientas que van más allá de layouts multicolumnas con CSS. El concepto central es una "región", que sería similar a una columna pero sin restricciones en su geometría y posición. También definiría características para regiones flotantes cruzadas (cross-region floats) y estilos basados en regiones"
"Esta propuesta intenta dar soporte a layouts con una apariencia o estilo de revistas impresas utilizando CSS" comentó Arno Gourdol, director de ingienería en Adobe.

Una de las razones para esta propuesta de Adobe, es la intención de facilitar a los usuarios de InDesign (editores y diseñadores de revistas y periódicos) la publicación de sus documentos y diseños en versiones para Web.

Pueden encontrar mas información en AdobeLabs y en este tutorial.

El Texto de contenido flota dentro de las forma personalizadas

El texto flota alrededor de las formas personalizadas

Cuando empezamos a trabajar con HTML5, tenemos que tener en cuenta que no existe algo tan simple como "comprobar la compatibilidad total del navegador con HTML5", sino que tenemos que comprobar si el navegador soporta cada una de las funciones que vayamos a utilizar.

Por ejemplo, podría ser que un navegador soporte la etiqueta <canvas>, pero no la etiqueta <video>, e incluso soportando la etiqueta<video>, puede que no esté preparado para reproducir determinados formatos de vídeo.
Si comprobamos el soporte para cada una de estas funcionalidades, podemos ofrecer un contenido alternativo o avisar a los usuarios para que actualicen su navegador.
Modernizr es una librería de Javascript que detecta el soporte para funcionalidades de HTML5 y CSS3 de manera muy sencilla. Por ejemplo si queremos comprobar si está disponible la etiqueta <canvas>:

1. if (Modernizr.canvas) {

2. //Podemos utilizar canvas

3. } else {

4. //No está disponible canvas

5. }

Puedes encontrar mas ejemplos de uso y la última versión de la librería en la web de Modernizr.

También recomiendo echar un ojo a este libro (en inglés), donde viene explicado mas a fondo el tema (y tiene otros capítulos muy interesantes): diveintohtml5.org

Como siempre, un eSeminar Excelente… y decenas de personas durante más de una hora pueden constatarlo. Usuarios, clientes y amigos que se dieron cita, muy puntualmente, para ver las bondades de HTML5 y CSS3 al desarrollar una aplicación tipo YouTube que les dejó a todos impresionados, tanto por la versatilidad como la potencia al combinar ambos lenguajes sumando un poco de creatividad.

Y claro está, si quieren repetir la experiencia o no alcanzaron a llegar a tiempo, aquí está el link de la grabación de este gran eSeminar, listo para disfrutarse (una y otra y otra vez).

Zardi es un fichero CSS que nos permite crear botones con una gran variedad de formas y colores.