Archive for the ‘ diseño de interfaces ’ Category

Los mejores CMS del 2010-2011 filtrados y opensource


Lista con los mejores CMS open source para el Q4 2010, Q1 2011, para novatos

Sin dudas el mejor CMS es aquel que programemos nosotros, pero si llegaste a este post posiblemente tengas apenas digerido el include del php o quizás ni eso,  por eso filtro esta lista, con los que podrás montar webs de una manera rápida, sencilla y profesional, demás esta decir que cada uno tiene sus traducciones al español y contenido de testeo el cual reemplazaremos pero nos sirve para ver como queda, además recomiendo probarlos en el Server local (simulador de webhosting en modo local xampp para Windows y lampp para linux) recomiendo que tengan a mano el firebug del firefox y un editor de codigo, ya tendrán ustedes el suyo propio sino el htmlpad va muy bien, ya verán para que….

CMS MADE SIMPLE

CMS completamente open source, con una gran galería de templates en calidad y cantidad, de rápido montaje y muy efectivo a la hora de entregar el control a sus dueños finales, este proceso de entregar el site y que el dueño final se sienta cómodo es critico, ya que si entregamos un joomla los dueños finales puede desde asustarse a la primera vista del panel de administración hasta perderse y modificar cosas del núcleo que desembocarían en un caos total, cms made simple en este caso se presenta en castellano con los contenido bastante separados, además de incluir los permisos de users y grupos para evitar conflictos mayores.

JOOMLA CMS

Debido a que nuestro nuevo sitio lo tenemos que entregar rápido, y aún no conocemos Joomla (supuestamente), baja a segunda posición, si bien es muy poderoso, es complejo de dominar, lo cual hace que nuestra entrega se vea demorada, ahora, si tienes 10-20  días para entregar el site, métete de lleno con el joomla, la comunidad de desarrolladores es la mas grande, los módulos para instalar son muchos, las templates son muchos, si ya conoces joomla, y no te gusta por h o por b, puedes probar made simple, el anterior, pero mi recomendación es que continúes con joomla, el cual subiría de posición si ya tienes conocimiento de joomla o eres experto en html, php y css ideal para sites de todo tipo, incluye comercio electronico, portales, foros y demas.

WORDPRESS

Cae a tercera posición, wordpress en una primera instacia te permite alojar tu blog en sus mismos servidores, pero cuando quieres avanzar y alojar tu blog en un servidor propio, tienes que pagar las redirecciones 301, además en sus servidores cada pequeño detalle que quieres tener, suma su dinero, si bien su css es mas dúctil que el resto, recomendación, monten wordpress en un servidor propio a la primera oportunidad, no dejen el blog en wordpress, a favor tenemos el hecho de que es muy fácil de publicar post sin complicaciones ni riesgos y además tiene ventajas a la hora de hacer seo comparado con Blogger. Ideal para blogs

Drupal

A medio camino entre joomla y made simple en términos de complejidad, también es una buena opción, tiene una gran comunidad de desarrolladores, buen soporte SEO y permisos de acceso editables y flexibles, drupal tendría la segunda posición en cualquier circunstancia si ya conoces made simple y joomla y tienes una opinión formada de ambos

MODX

Curioso y complejo, a medio camino ente un cms y un Framework. Tienes que programar de movida  todo el layout para que arranque, de ahí en mas tendrás que programar todo el front end entero, modx si bien es exageradamente complejo a la primera, la potencia es mucha y te da control total al finalizar el site

Quieren probarlos a todos? Perfecto tienen que instalar el xampp, lampp según tengan win o linux tiene licencia gnu y pesa muy poco para descargar, a que esperan? Luego de instalarlo les queda adentro de las carpetas de xampp una carpeta llamada htdocs sueltan el contenido del rar del cms que bajen ahí, luego en el navegador en la barra de direcciones tipean localhost y ya pueden ver su cms andando, quizas tengan que hacer una base de datos en el MySQL solo crean una nueva base de datos, pongan el nombre de la nueva base de datos y ya

Anuncios

los 18 mejores sitios para descargar imagenes gratuitas, filtrados


Lista definitiva, filtrada y comentada de los mejores sitios para descargar imágenes gratuitas

Descargar imágenes de textura

Mi lista comentada y detallada de los mejores sitios para descargar imágenes y texturas para diseño y desarrollo web y otros fines, salvo detalles los mejores sitios los ubique al principio, espero disfruten y comenten.

http://amazingtextures.com/

De interfase algo tosca, aunque se pueden registrar y participar en los foros, no es necesario para comenzar a bajar texturas, interesante sitio para descargar imágenes para texturas, totalmente gratis y rápido, sin duda lo mejor para diseñadores 3D sin importar cual paquete o renderizador usen

http://openphoto.net

Sin duda de lo mejorcito, buscador integrado, no requiere registración y cuenta con la posibilidad de bajar raw de alta calidad, listos para hacer HDRI

http://www.everystockphoto.com

Seguimos con lo bueno, de características similares al anterior

http://www.google.com/imghp?hl=es&tab=wi

Ahora lo obvio, siempre da una respuesta no importa lo intrincado o novedoso del tópico a buscar, Google imágenes siempre tiene algo que decir

http://www.buzznet.com/tags/photography/

buzznet, la web de moda, presenta una interesante colección de imágenes on aire muy joven y con una cierta rebeldía pop naif, presenta imágenes y conceptos bastante interesantes

http://commons.wikimedia.org/wiki/Main_Page

Sin más que decir, lista las imágenes y demás cosas media, libre de derechos de uso, sería como meterse a la página de autoría de copyright que declararon libres de uso

http://search.creativecommons.org/

http://wallpaperstock.net

Galería de imágenes listas para wallpapers, ideal fondos de escritorio, y en circunstancias también pueden servir para diseño web. Totalmente gratis y fácil de navegar

http://www.sxc.hu/

Cuenta con una interface agradable y sencilla, requiere registración y posee sección de tutoriales integrada

http://www.photolib.noaa.gov

Un poco tosca de navegar, no requiere de registración, y los temas son pocos, pero efectivos y las calidades decentes

http://www.cepolina.com/freephoto/

una interesante colección personal rusa donde el tamaño medio de las imágenes APRA descargar en forma gratuita es de 1600×1200 pixeles

http://www.freeimages.co.uk/

Requiere registración y no parece ser tan free como dicen,  cuidado y a leer la letra chica

http://www.photocase.de

Requiere registración, una interesante e inspiradora interfase con un look web 2.0 muy marcado, tened las tarjetas a mano, se pueden  llevar sorpresas

http://morguefile.com

Con una división clara entre imágenes free e imágenes de pago

http://www.creatingonline.com

las imágenes medias y pequeñas a veces son gratis, pero tampoco esperes tanto

http://www.dreamstime.com

Requiere de registración, también presenta venta de imágenes y apartado de imágenes free

http://www.vintagepixels.com/

vintage pixel, tiene una temática, y es que las imágenes son mas bien texturizadas como si fueran viejas, o directamente son viejas

http://www.ars.usda.gov/is/graphics/photos/

Sitio con imágenes gratuitas para descargar a 72 dpi y 300 dpi con un sencillo árbol de navegación

Las 20 mejores aplicaciones en Adobe Air para desarrolladores


Las 20 mejores aplicaciones en Adobe Air para desarrolladores

Parseforgo: mini editor de php que incluye un diccionario de funciones, excepto la mas comunes, resaltado de sintaxis y algunas cosas mas

http://www.mentalmove.com/pilation/of_desktop-applications/parse4go/tutorial/

Random pattern: generador de patrones svg

http://www.adobe.com/cfusion/marketplace/index.cfm?marketplaceid=1&event=marketplace.offering&categoryid=6&offeringid=10118

Dot3D es una aplicación adobe air, que permite ver una imagen de 16px x 16px en 3d, permite rotar, guardar en png el resultado, soporta para importación jpg png, gif, ico y bmp

http://boreal-kiss.com/app/Dot3D/en/

Polaris aplicación  de escritorio para Google analitycs, similar a twetdeck pero conectando a Google analitycs

http://www.desktop-reporting.com/polaris.html

tweetdeck: de lo mejorcito sin duda, aplicación de escritorio para seguimiento de Twitter

http://www.tweetdeck.com/

RichFLV editor de mp3 y flv

http://richapps.de/?page_id=120

Seoanalizer. Análisis intenso de características seo en un site

http://code.google.com/p/seoanalyzer/

webkut, captura de pantallas con selección

http://toki-woki.net/p/WebKut/

Pixus regla para medir en pixeles el tamaño de objetos en la pantalla con solo clic y arrastrar.

http://code.google.com/p/pixus/

Contrast-A: paleta de colores en 3D, que permite generar paletas y analizar deficiencias de color según WCAG 2.0 y 1.0, se pueden salvar paletas personalizadas en pdf directo al escritorio

http://www.adobe.com/cfusion/marketplace/index.cfm?event=marketplace.offering&offeringid=10763&marketplaceid=1

Font Picker: herramienta para analizar diferentes fuentes para un texto

http://richardsprojects.co.uk/products/font-picker/

Icon-generator generador de íconos

http://icon-generator.net/

Color Picker: generador de paletas de color web safe colors

http://colorpicker.riaforge.org/

Colrful buscador de imágenes basado en busquedas según color o paletas de color

http://flexgeek.wordpress.com/colrful/

Xe-IMG Image Editor V3. pequeño editor de imágenes

http://www.adobe.com/cfusion/marketplace/index.cfm?event=marketplace.offering&categoryid=6&orderby=mostrecent&orderdirection=asc&marketplaceid=1&offeringid=10124

SWF to Animated gif, utilidad para exportar swf a gif animado

http://www.adobe.com/cfusion/marketplace/index.cfm?event=marketplace.offering&marketplaceid=1&offeringid=12746

SQLLite Sorcered, utilidad de administración sql lite

http://afoucal.free.fr/index.php/applications/sqlite-sorcerer/#screenshots

jsBeautifier

simple aplicación para formatear código javascript js

http://www.adobe.com/cfusion/marketplace/index.cfm?event=marketplace.offering&marketplaceid=1&offeringid=13240

Accuweather: muestra el estado actual del clima en tu escritorio, muy importante antes de encontrarnos con la realidad del clima en la calle.

http://www.adobe.com/cfusion/marketplace/index.cfm?event=marketplace.offering&offeringid=10960&marketplaceid=1

Agile Agenda, sencilla agenda en air, que nos permitirá entre otras cosas programar tiempo de actividad y seguimiento de desarrollos, útil para afinar presupuestos.

http://www.adobe.com/cfusion/marketplace/index.cfm?event=marketplace.offering&offeringid=10033&marketplaceid=1

ME SIRVE DOS MONITORES PARA DISEÑO?


Como optimizar el tiempo y la calidad del diseño basado en el trabajo con dos o mas monitores

Diseñar o trabajar en cualquier área de informática que requiera gran despliegue de información de cualquier naturaleza se ve optimizada de gran manera al trabajar con varios monitores, veamos que se puede conseguir según el bolsillo nuestro, y no según las películas de hackers,  las grandes petroleras o empresas que trabajan con datos bursátiles.

diseñar o trabajar con dos monitores

mi estudio

Como justificar la compra de dos monitores según el área de desempeño:

dueño de empresa pyme relacionada al sector it, o jefe de sectores de diseño.

es bien sabido que una estación de trabajo acorde a las nesecidades del aréa sería la elección correcta, pero en este punto, hilando fino, tenemos las prestaciones del equipo que tienen que igualar o superar las aptitudes del operador,  particularmente el doble monitor en este caso puede darle de un 20% a un 60 % de efectividad en el desempeño diario, ademas de que los monitores nuevos de pantalla plana son de muy bajo consumo comparados con los antiguos monitores de tubo tradicionales, bajan el stress del operador y crea de una forma indirecta, un mejor clima laboral más distendido elevando su efectividad, mejora de la apreciación de la empresa por parte del operador, entre muchas otras ventajas humanas y empresariales.

recomendado, consulte con el operador en una primera instancia para analizar la mejor opción precio-prestaciones, en segunda instacia consulte la relación precio-prestaciones con el de sistemas, en su defecto con el local donde comprará las cosas, en su defecto con el sobrino que sabe de compus.

Diseño web o gráfico con dos monitores

Diseñar como todos los diseñadores saben, requiere del uso intensivo de mas de un programa y es bastante común que las sesiones de diseño se manejen mas de un programa abierto en simultaneo, como por ejemplo

photoshop + illustrator+ htmlpad+ photoshop+ acdsee+ navegador flash + Dreamweaver +n avegador

illustrator+ photoshop+flash

corel+ photoshop + illustrator + quarkxpress ó indesing

También incluiría el ejemplo de mirar tutoriales en youtube y reproducirlo casi en tiempo real, o el trabajo desasear por el árbol de navegación del disco rígido buscando, moviendo y abriendo grandes volúmenes de datos, de las mas variadas extensiones.

La recomendación es, según el presupuesto la opción elegida de las partes puede resultar mas barato que una tableta digitalizadora, y con mayores beneficios.

3D studio y autocad con dos monitores

Los programas de animación y modelado 3d se ven sobradamente beneficiados por el uso de dos monitores en simultaneo, desde hace mucho esta clase de programas exigen cualquier cosa que tengan a su alcance, incluso al usuario. De modo que cualquier herramienta o cosa que nos brinde potencia o mejoras de las interfaces humanas-maquinas nos beneficia directamente, en este caso el dualview nos salva porque esta clase de programas empiezan abrir ventanas aún con los objetos mas simples, por citar un ejemplo, 3ds abierto, con ventanas de editor de materiales, config del render, solidrocks y enviroment, aquí con estas cuatro ventanas abiertas ya pertenecen al universo común de los diseñadores 3D, también ayuda para por ejemplo mostrar un tutorial en youtube y seguirlo en tiempo real en la aplicación, ver detalles comparativos con el Autocad mientras modelados sin cotas en el max seria otra comparación, o revisar una web de texturas y verificar si hacemos lo correcto, si trabajamos con Autocad y normas iso, podríamos hacer la corrección de los listados para la revisión iso varias veces mas rápido, etc etc

La recomendación, adquieran la segunda pantalla, es mas que muy recomendable.

quieres aprender autocad con videos y tutorías?

Video edición con dos monitores

Por supuesto la edición de video en computadora se ve claramente beneficiada con el uso de pantallas duales, algunos soft como el premiere o alter effects, se pueden estirar para tener una visión mas clara de la timeline, y otros como el combustión que directamente traen una optimización para multipantallas teniendo layouts de trabajo especiales para dicha función.

La recomendación para el video editor freelance, con poco ya pueden tener multipantalla, y los beneficios son muchos.

Programación con dos monitores

Los entornos de programación no se ven ampliamente optimizados, pero no por ello dejan de tener ventajas por el hecho de tener mas de un monitor, salvo en ciertas circunstancias donde vemos claras ventajas, cuando necesitamos comparar código entre scripts o seguir un tutorial a la misma vez que escribimos nuestro código, los programadores como los diseñadores manejan gran cantidad  de archivos, aquí también tendría un papel preponderante el uso de multipantallas.

La recomendación para programadores, es, no les voy a mentir, en este caso es una cuestión de gustos, aun así, si lo hacen no se arrepentirán.

Pantalla dual para el usuario común.

Solo en el caso de que dicho usuario que requiera manejar grandes volúmenes de información cualquiera sea el área, debería pensar en la opción de pantalla dual, sobre todo si debe comparar datos entre aplicaciones o en la misma aplicación en diferentes archivos, solo si el programa en cuestión permite varias instancias.

Que se necesita para tener dos o más pantallas en la pc?

la mayoría de las veces si estamos ante esta duda, es seguramente porque tenemos la placa de video integrada del mother, cada uno puede remitirse a los manuales que tiene de su propio computador para verificar esta condición, o preguntarle a algún niño/adolescente que sepa del tema para averiguar, básicamente necesitamos una placa de video aparte, si ya la tenemos verificamos que tenga más de una salida, simplemente mirando las salidas, se necesita una gran placa? la verdad que no, con placas chicas también se puede, el rendimiento disminuirá en este caso, si tiene que modelar un estadio olímpico en Autocad y 3ds max y además sabemos o intuimos que los próximos trabajos serán del mismo calibre, para todo el resto con poco se soluciona, si me preguntan de modelos con las nvidias use doble monitor con nvidia geforce 5500 de 128 mb agp, y en pci con una gt8400 y una gt9500, todas muy accesibles, en ati use 4670 y 5670 pci, sobre el segundo monitor la elección quedaría a su gusto.

Cuanto cuesta tener dos pantallas para usar en la compu?

Bueno en este caso con muy poca plata ya podemos tener en nuestro estudio dos pantallas trabajando en simultaneo, hablo de muy poco, lo resolvería con 75 u$s, en este caso sumariamos una placa de video con doble salida de las mencionadas y un monitor de 14-15 pulgadas de tubo crt, ambos usados, en el otro extremo tenemos placas de video de 300/500uss junto a 2 monitores nuevos de 350 u$s, el combo estaría compuesto por placas de línea profesional, ATI FIRE o NVIDIA QUADRO o placas gamers de gama alta, en este punto cabe aclarar que para trabajar en diseño, 3d o video, si poseen la plata  para una placa gamer para juegos de alta gama, busquen una de linea profesional ATI FIRE o una NVIDIA QUADRO, el saber general dice que no andan los juegos y la realidad es que si andan, y la merma de rendimiento en juegos es del orden del 10/15% o sea nada, y los beneficios que las placas gamers con todo la ponposidad de la publicidad y los comentarios y reviews que podemos llegar a encontrar, son entre otros que el vray se renderize en tiempo real con vray RT a una frecuencia, bueno, a tiempo real, renderizado de líneas de tiempo de video a tiempo real, y miles de mejoras a nivel photoshop-illustrator etc, caracteristicas que las placas gamers, así sean de la gama más alta, no poseen.

Aquí vemos que podemos armar el combo con un rango de precios que va de 75 u$s a 700-1000 u$s, y por supuesto todo lo que queda en el medio, elijan ustedes.

Compatibilidad de sistemas entre placas de video y monitores

Muchas placas de las nuevas incluyen salidas vga, hdmi y algunas otras normas, llegado el punto de que no puedan instalar el monitor porque no hay salidas en la placa de video de ese formato, miren las salidas restantes de la placa y miren el cable de conexión del monitor, y luego le piden al local de computadoras mas cercano a su casa, el correspondiente adaptador, existen de muchas clases y todos sirven además no cuestan nada. A no preocuparse por ese detalle. Quizás tengan suerte que dentro de la caja de la placa de video venga el adaptador  en forma gratuita del cual hablo.

como instalar una placa de video para dos monitores

Nuevo micrositio 3D, MSI big bang fuzion 3d


Nueva web interactiva 3D, big bang fuzion MSI

Nuevo micrositio con contenido 3D interactivo totalmente funcional para web

link a la web MSI big bang fuzion 3D interactiva

msi big bang fuzion 3d interactivo realida virtual

En este caso se muestra la cantidad de información visual que se presenta en una pequeña porción del total un sitio, en incluso la forma en que esta información es presentada, ideal para marketing de productos físicos, da la sensación de llevar el producto, desde la fabrica directo a la mano del consumidor, vía web, lo mas cercano a meter la mano en la pantalla y retirar una bebida.

Como puede funcionar la web 3d y la realidad virtual, para el marketing de productos?

Altamente efectivo para marketing de productos físicos, donde la presencia del producto hace la diferencia a la hora de la compra, piense que mientras mas grande sea la escena, la apreciación del producto es aun mayor, y presenta un plus importante, todas estas sensaciones se dan en la comodidad de la casa, de ahí al impulso de compra existe medio metro, en este caso se trata de un motherboard dirigido a un público muy específico, la MSI big bang fuzion, la cual entre otras cosas, puede montar dos placas de video de diferentes fabricantes para destinarlas a procesos diferentes a nivel hardware, a pesar de ello y su elevado costo, se requiere que el comprador sostenga en sus manos el equipo para poder definir la compra.

Detalles técnicos:

La forma de navegación, incluye arrastra y soltar para los dos clicks y contempla el uso de las teclas de dirección del teclado, y presenta carga-descarga interactiva de objetos

Si hasta acá era poco, todavía queda más.

al momento de publicarlo, uno de los puntos críticos era la cantidad de polígonos en pantalla, los cuales consumían memoria a una progresión geométrica, no es nunca un cuello de botella en la maquina que se produce, pero si lo es las maquinas que reproducen la escena, en este caso se cuido de llegar a no pasar los 64mb usando un ancho de 960px y 450px de alto, teniendo bajo la manga, un Hack para abrir memoria hasta los 96 y 128 mb, pero a la mitad de la producción llego una actualización que entre otras cosas empuja ese limite hasta los 512 mb, nada mal, teniendo en cuenta la cantidad de potencia promedio de los navegantes actuales, de modo que ahora se puede tener gran cantidad de objetos en una ventana capaz de presentarse a pantalla completa a resolución total.

el resto de la página se completa con una plantilla css líquida y  elementos ajax para presentar la información escrita en el menor espacio posible y un módulo de contacto ajax, altamente interactivo.

Ideal para marketing

Arquitectura

Ingeniería

Productos y elementos físicos

link a la web MSI big bang fuzion 3D interactiva

SJR Parking Systems, nuevo sitio con css3 producido por Jarivia


SJR Parkingsystems, nuevo sitio con CSS3 producido en  Jarivia

vray hdri desarrollo web omer sjr parking systems

SJR Systems Parks es una empresa próxima  a vender sistemas de optimización de espacio en estacionamientos en colombia, basados en utilizar el espacio superior de un coche ya estacionado por medio de plataforma de elevamiento hidráulico,  SJR vende sistemas OMER LIFT, lider del segmento en europa, bajo las estrictas normas europeas que dan cuenta de la calidad de sus productos.

dada la inusual pero nesesaria naturaleza de sus productos se usaron animaciones 3D de sus productos, para mostrar tanto su diseño, como su comportamiento en aplicaciones reales, brindadole un alto valor agregado al sitio.

para el sitio se uso tecnología css3 y ajax, técnicas seo de posicionamiento a nivel de código y redacción con técnicas seo en algunas áreas cruciales.

desde Jarivia agradecemos a SJR por haber confiado ciegamente en nosotros.

pseudoclases dinamicas, :hover :active :focus, como darle mas interactividad a los links con CSS


con CSS y un poco de imaginacion podemos darle mucha mas nteractidad a nuestros documentos html, en este caso para los estados sobre, activado, y focus.

  • la pseudoclase :hover entra en actividad cuando un puntero esta sobre el link o elemento sin activarlo
  • la pseudoclase :active entra en actividad en el momento que el usuario presiona el mouse sobre el elemento, hasta que lo suelta
  • la pseudoclase :focus se activa cuando se hace foco sobre un elemento, como por ejemplo cuando nos ponemos a rellenar yy escribir dentro de un formulario
  • a:hover{color:red;}
    a:visited {color:blue;}

    un elemento puede combinar muchas pseudo clases a la vez

    CSS 2.1 no define si el padre del elemento en cuestion esta hover o active, es indiferente
    a:hover tiene que ser puesto despues de a:link y a:visited, de lo contrario las caracteristicas de hover bañaran el link entero por el tema de la cascada
    ejemplos
    a:focus { background: yellow }
    a:focus:hover { background: white }