# Pequeño probador/generador de código CSS

**URL:** <https://foros.velneo.com/t/pequeno-probador-generador-de-codigo-css/7296>\
**Category:** Velneo\
**Created:** [24 Agosto, 2014 02:50 UTC](https://foros.velneo.com/t/pequeno-probador-generador-de-codigo-css/7296 "2014-08-24T02:50:54Z")\
**Posts on this page:** 17\
**Page:** 1

<div class="post-metadata">

**Author:** ![aztecmexico](https://yyz1.discourse-cdn.com/flex035/user_avatar/foros.velneo.com/aztecmexico/32/3498_2.png) [@aztecmexico](https://foros.velneo.com/u/aztecmexico)\
**Post date:** [24 Agosto, 2014 02:50 UTC](https://foros.velneo.com/t/pequeno-probador-generador-de-codigo-css/7296/1 "2014-08-24T02:50:54Z")

</div>

Buen día a todos,

Esto del CSS es verdaderamente impresionante, permite dotar a nuestras aplicaciones de vistas muy agadables -o todo lo contrario-, y dicen por ahí que de la vista nace el amor, lo cual es muy cierto.

Pero yo soy Desarrollador, no diseñador y, aunque me gusta mucho esto de los CSS pues como que eso de ir a ciegas a la hora de probar directo sobre las aplicaciones como que es mucho perder el tiempo, estar ejecutando la app cada vez que cambiamos algo implica bastantes horas perdidas en prueba y error, que si se ve bien, que si no, que si combina, que si no combina, etc.

Por tal razón me dí a la tarea de desarrollar un pequeño probador/generador de código CSS, el cual me permite ahorrar algunas horas e ir a la segura antes de poner el código en mis aplicaciones.

El mismo consta -de momento- con un marco, un qlabel (que permite emular la mayoría de controles utilizados- y un botón, en próxima versión espero agregar como mínimo rejilla y scrollbar, además de un menú arbolado, con eso tendremos la mayoría de los objetos que comunmente utilizamos.

Bueno, el resto lo tienen que descubrir ustedes, las posibilidades son realmente infinitas, obviamente pueden modificar el vin y agregarle funcionalidades que deseen, y, si lo consideran conveniente, volverlo a compartir con la comunidad.

Anexo unas pantallas de muestra y el vin correspondiente.

Ahora van a perder tiempo hasta jugando con los efectos, jijiji, ahí yo no soy culpable.

Saludos a todos y que les sea de utilidad.

Martin Ibarra.

---

<div class="post-metadata">

**Author:** ![aztecmexico](https://yyz1.discourse-cdn.com/flex035/user_avatar/foros.velneo.com/aztecmexico/32/3498_2.png) [@aztecmexico](https://foros.velneo.com/u/aztecmexico)\
**Post date:** [24 Agosto, 2014 02:52 UTC](https://foros.velneo.com/t/pequeno-probador-generador-de-codigo-css/7296/2 "2014-08-24T02:52:13Z")

</div>

Como de costumbre no subio los archivos a la primera, haber a la segunda.

 ![image](https://canada1.discourse-cdn.com/flex035/uploads/velneo/original/2X/6/64c751425787d2a763f30983ab936e53d0d0089b.jpg)

 ![image](https://canada1.discourse-cdn.com/flex035/uploads/velneo/original/2X/e/e975590c25d2371ebfa15e27eb27bf2380047fa4.jpg)

 ![image](https://canada1.discourse-cdn.com/flex035/uploads/velneo/original/2X/1/17a5944b880acac94c4e6c829b065064daac52aa.jpg)

---

<div class="post-metadata">

**Author:** ![aztecmexico](https://yyz1.discourse-cdn.com/flex035/user_avatar/foros.velneo.com/aztecmexico/32/3498_2.png) [@aztecmexico](https://foros.velneo.com/u/aztecmexico)\
**Post date:** [24 Agosto, 2014 02:52 UTC](https://foros.velneo.com/t/pequeno-probador-generador-de-codigo-css/7296/3 "2014-08-24T02:52:57Z")

</div>

Van otros 3.

 ![image](https://canada1.discourse-cdn.com/flex035/uploads/velneo/original/2X/d/d5734d82859c63f714539aeb2c35df8054cd9588.jpg)

 ![image](https://canada1.discourse-cdn.com/flex035/uploads/velneo/original/2X/9/9dc41d01272c724fda0b5476209ccadfa8adbe1a.jpg)

 ![image](https://canada1.discourse-cdn.com/flex035/uploads/velneo/original/2X/b/bbfff70086854002d69ed66cbed281fa3ef07f80.jpg)

---

<div class="post-metadata">

**Author:** ![aztecmexico](https://yyz1.discourse-cdn.com/flex035/user_avatar/foros.velneo.com/aztecmexico/32/3498_2.png) [@aztecmexico](https://foros.velneo.com/u/aztecmexico)\
**Post date:** [24 Agosto, 2014 03:02 UTC](https://foros.velneo.com/t/pequeno-probador-generador-de-codigo-css/7296/4 "2014-08-24T03:02:34Z")

</div>

Bueno, como no deja subir el .vin, les dejo el enlace para descarga de mi google drive, además algunos recursos que me sirven muchisimo para el manejo de colores, tonos, ideas, etc.

Nuevamente saludos a todos.

Martin Ibarra.

Enlace para descargar el .vin:  
[https://drive.google.com/file/d/0B4WNTwKWqdPjLUt3amhiNXlSNms/edit?usp=sharing](https://drive.google.com/file/d/0B4WNTwKWqdPjLUt3amhiNXlSNms/edit?usp=sharing)

Colores por código Hexadecimal: [http://www.w3schools.com/cssref/css\_colorsfull.asp](http://www.w3schools.com/cssref/css_colorsfull.asp)

Tonos de un color: [http://www.w3schools.com/tags/ref\_colorpicker.asp?colorhex=006400](http://www.w3schools.com/tags/ref_colorpicker.asp?colorhex=006400)

Mezclador de colores: [http://www.w3schools.com/tags/ref\_colormixer.asp?colorbottom=0000FF&colortop=FFFFFF](http://www.w3schools.com/tags/ref_colormixer.asp?colorbottom=0000FF&colortop=FFFFFF)

Colores por nombre: [http://www.w3schools.com/cssref/css\_colornames.asp](http://www.w3schools.com/cssref/css_colornames.asp)

---

<div class="post-metadata">

**Author:** ![ESGRISA](https://avatars.discourse-cdn.com/v4/letter/e/4bbf92/32.png) [@ESGRISA](https://foros.velneo.com/u/ESGRISA)\
**Post date:** [24 Agosto, 2014 03:56 UTC](https://foros.velneo.com/t/pequeno-probador-generador-de-codigo-css/7296/5 "2014-08-24T03:56:24Z")

</div>

Gracias Martin buen aporte y tienes razon con :

> Ahora van a perder tiempo hasta jugando con los efectos, jijiji, ahí yo no soy culpable.

saludos

---

<div class="post-metadata">

**Author:** ![aztecmexico](https://yyz1.discourse-cdn.com/flex035/user_avatar/foros.velneo.com/aztecmexico/32/3498_2.png) [@aztecmexico](https://foros.velneo.com/u/aztecmexico)\
**Post date:** [24 Agosto, 2014 04:31 UTC](https://foros.velneo.com/t/pequeno-probador-generador-de-codigo-css/7296/6 "2014-08-24T04:31:28Z")

</div>

Una pequeña actualización al .vin para que no salgan tantos decimales en el CSS.

[https://drive.google.com/file/d/0B4WNTwKWqdPjdVpBZnhuTnpBREU/edit?usp=sharing](https://drive.google.com/file/d/0B4WNTwKWqdPjdVpBZnhuTnpBREU/edit?usp=sharing)

---

<div class="post-metadata">

**Author:** ![ricardo](https://avatars.discourse-cdn.com/v4/letter/r/a6a055/32.png) [@ricardo](https://foros.velneo.com/u/ricardo)\
**Post date:** [24 Agosto, 2014 10:17 UTC](https://foros.velneo.com/t/pequeno-probador-generador-de-codigo-css/7296/7 "2014-08-24T10:17:21Z")

</div>

Muchas Gracias por el Aporte.

Saludos.

Ricardo Patón

---

<div class="post-metadata">

**Author:** ![percyleoncio1](https://avatars.discourse-cdn.com/v4/letter/p/a587f6/32.png) [@percyleoncio1](https://foros.velneo.com/u/percyleoncio1)\
**Post date:** [24 Agosto, 2014 16:31 UTC](https://foros.velneo.com/t/pequeno-probador-generador-de-codigo-css/7296/8 "2014-08-24T16:31:53Z")

</div>

Excelente tu aporte amigo  
Muchas gracias

---

<div class="post-metadata">

**Author:** ![marianoyana](https://avatars.discourse-cdn.com/v4/letter/m/58f4c7/32.png) [@marianoyana](https://foros.velneo.com/u/marianoyana)\
**Post date:** [24 Agosto, 2014 20:50 UTC](https://foros.velneo.com/t/pequeno-probador-generador-de-codigo-css/7296/9 "2014-08-24T20:50:03Z")

</div>

Muchas gracias

---

<div class="post-metadata">

**Author:** ![juanjo1](https://yyz1.discourse-cdn.com/flex035/user_avatar/foros.velneo.com/juanjo1/32/5114_2.png) [@juanjo1](https://foros.velneo.com/u/juanjo1)\
**Post date:** [25 Agosto, 2014 16:07 UTC](https://foros.velneo.com/t/pequeno-probador-generador-de-codigo-css/7296/10 "2014-08-25T16:07:08Z")

</div>

Gracias excelente aporte

---

<div class="post-metadata">

**Author:** ![naturalsoft](https://avatars.discourse-cdn.com/v4/letter/n/5fc32e/32.png) [@naturalsoft](https://foros.velneo.com/u/naturalsoft)\
**Post date:** [26 Agosto, 2014 07:38 UTC](https://foros.velneo.com/t/pequeno-probador-generador-de-codigo-css/7296/11 "2014-08-26T07:38:15Z")

</div>

+1

---

<div class="post-metadata">

**Author:** ![jdalamillos](https://yyz1.discourse-cdn.com/flex035/user_avatar/foros.velneo.com/jdalamillos/32/5173_2.png) [@jdalamillos](https://foros.velneo.com/u/jdalamillos)\
**Post date:** [29 Agosto, 2014 11:02 UTC](https://foros.velneo.com/t/pequeno-probador-generador-de-codigo-css/7296/12 "2014-08-29T11:02:56Z")

</div>

Tengo que agradecerte mucho este aporte, gracias a el he podido apreciar lo que se puede hacer con CSS, que antes no lo había aplicado.  
Es un gran esfuerzo a favor de la comunidad.

---

<div class="post-metadata">

**Author:** ![aztecmexico](https://yyz1.discourse-cdn.com/flex035/user_avatar/foros.velneo.com/aztecmexico/32/3498_2.png) [@aztecmexico](https://foros.velneo.com/u/aztecmexico)\
**Post date:** [29 Agosto, 2014 14:23 UTC](https://foros.velneo.com/t/pequeno-probador-generador-de-codigo-css/7296/13 "2014-08-29T14:23:42Z")

</div>

Gracias alamillos,

Estoy trabajando en una nueva versión, más “usable” y que incluye ahora la mayoría de los controles y objetos que habitualmente utilizamos y personalizamos mediante CSS, los docs, los marcos, los separadores de pestañas del marco principal, controles de edición, scroll bars, cabeceras, pies, etc.

La verdad es que una aplicación hecha “normalita” con los valores y propiedades de personalización que vienen por defecto en V7 se ve bien, pero con un poco de tiempo dedicado a “vestirla” con CSS se puede llegar a ver impresionante y a ojos del cliente eso cuenta mucho.

Espero no tardar demasiado en terminar esta nueva versión y que sea una verdadera ayuda y apoyo para esta gran comunidad.

Saludos.

Martin Ibarra.

P.D. Gracias también a todos los demás participantes del foro.

---

<div class="post-metadata">

**Author:** ![jjsoft](https://avatars.discourse-cdn.com/v4/letter/j/7c8e57/32.png) [@jjsoft](https://foros.velneo.com/u/jjsoft)\
**Post date:** [29 Agosto, 2014 15:23 UTC](https://foros.velneo.com/t/pequeno-probador-generador-de-codigo-css/7296/14 "2014-08-29T15:23:33Z")

</div>

Muchas gracias.

---

<div class="post-metadata">

**Author:** ![carlos1](https://avatars.discourse-cdn.com/v4/letter/c/6a8cbe/32.png) [@carlos1](https://foros.velneo.com/u/carlos1)\
**Post date:** [29 Agosto, 2014 17:57 UTC](https://foros.velneo.com/t/pequeno-probador-generador-de-codigo-css/7296/15 "2014-08-29T17:57:24Z")

</div>

Muchas gracias.  
Con el fin de semana por delante para jugar con el.  
Carlos

---

<div class="post-metadata">

**Author:** ![Miguel.arhes](https://yyz1.discourse-cdn.com/flex035/user_avatar/foros.velneo.com/miguel.arhes/32/5555_2.png) [@Miguel.arhes](https://foros.velneo.com/u/Miguel.arhes)\
**Post date:** [29 Agosto, 2014 21:29 UTC](https://foros.velneo.com/t/pequeno-probador-generador-de-codigo-css/7296/16 "2014-08-29T21:29:06Z")

</div>

Muy buen aporte, gracias Martin.

Saludos.  
Miguel.

---

<div class="post-metadata">

**Author:** ![arturomiranda](https://yyz1.discourse-cdn.com/flex035/user_avatar/foros.velneo.com/arturomiranda/32/5116_2.png) [@arturomiranda](https://foros.velneo.com/u/arturomiranda)\
**Post date:** [30 Agosto, 2014 17:29 UTC](https://foros.velneo.com/t/pequeno-probador-generador-de-codigo-css/7296/17 "2014-08-30T17:29:50Z")

</div>

@aztecmexico

muy buen trabajo amigo…
