Alt1040. Noticias acerca de Internet, diseño, música, cine, opiniones, weblogs y medios

Es uno de los weblogs de tecnología más seguidos de la blogosfera hispana.

Bitelia. Blog de software, internet y servicios web

Software y aplicaciones para mejorar tu vida, guías de uso, trucos, listas, noticias y todo sobre tecnología.

Xataka. Publicación de noticias sobre gadgets y tecnología.

Últimas tecnologías en electrónica de consumo y novedades tecnológicas en móviles, tablets, informática, etc.

Wwwhatsnew. Aplicaciones, marketing y noticias en la web.

Servicios que os pueden ser útiles para dibujar, gestionar tareas, hacer amigos, encontrar restaurantes...

Fayerwayer. Discusiones y opiniones de lo ultimo en tecnología y gadgets

Con secciones dedicadas a Internet, Software o Redes Sociales es un referente a nivel de tecnología en español.

22 de enero de 2013

Cross Domain: comunicación entre distintos dominios


Cuando desarrollamos orientados a tecnologías webs se establece un mecanismo de seguridad de comunicaciones en navegadores webs con el fin de evitar acceder a información alojada en otros servidores.


Lo que se pretende es que ningún script ejecutado desde el navegador de una página web pueda acceder a otro servidor de páginas diferente al suyo.

No obstante hay alternativas para acceder al contenido de otro servidor web desde el browser desde dónde se ejecuta nuestra aplicación:

  •  podemos usar un proxy como web service de tal forma que la comuniación no se establece entre mi browser y el servidor web deseado sino que llamo al servicio web alojado en mi servidor y éste hace la llamada.

  • con jsonp o lo que es lo mismo Json con Padding: en lugar de realizar una petición Ajax (Asynchronous Javascript And Xml no funciona entre dominios distintos), generamos un archivo jsonp dinámicamente en el que definimos una variable que va a actuar como callback de la petición.

Como soy fiel seguidor de "maestros del web", voy a hacerle un guiño y voy a traerme sus diez últimos post publicados:



14 de enero de 2013

CSS3 = Presente y Futuro


El acrónimo CSS (Cascading Style Sheet en inglés) se traduce al castellano como Hojas de Estilo en Cascada y es una tecnología diseñada para la presentación de los documentos que forman una página web.


El organismo que regula sus especificaciones es el W3C (World Wide Web Consortium) de la misma forma que lo hace con el lenguaje Html.

Las novedades que ha introducido la nueva versión de CSS (en el post "html5, el cambio que esperabamos" menciono algunas de sus propiedades más importantes) hacen posible una mayor dinamización e interactividad de la web utilizando tecnologías abiertas. En este sentido, los nuevos estándares web permiten el desarrollo de sitios mucho más accesibles.

Tan sólo debemos disponer de un navegador actualizado para poner en práctica algunos ejemplos asombrosos como los que vemos a continuación:

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris pulvinar rhoncus risus, vel ornare lacus sagittis sit amet. Duis vel sem magna. Proin pulvinar velit eleifend ligula ultrices vestibulum. Nunc posuere dolor eu mauris feugiat dignissim.



Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris pulvinar rhoncus risus, vel ornare lacus sagittis sit amet. Duis vel sem magna. Proin pulvinar velit eleifend ligula ultrices vestibulum. Nunc posuere dolor eu mauris feugiat dignissim.



Contact Us.....

Name:
Email:
Message:
Pass The Paper



Top cube face

The top face is nested in an extra div tag to give correct rotation of skewed rectangle.

This face is also scaled, so the font size has been reduced to accommodate.

Left cube face

Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt.

Right cube face

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco.


10 de enero de 2013

Html5 + Javascript = Presente y Futuro


La animación es un proceso utilizado para dar la sensación de movimiento a imágenes o dibujos o a otro tipo de objetos inanimados (figuras de plastilina, por ejemplo). Fuente: wikiepedia (http://es.wikipedia.org/wiki/Animación).


A continuación voy a mostrar un ejemplo muy simple de una animación en dos dimensiones usando el objeto Canvas de Html5.

Si quieres puedes crear tu propia historia editando las cajas de texto:

Marian (texto1)
Billy (texto1)
Billy (texto2)
Marian (texto2)
Marian (texto3)


Este navegador no soporta CANVAS



Podemos ver un ejemplo de animación en tres dimensiones en la dirección http://www.benjoffe.com/code/demos/canvascape.
Se trata de un juego de aventuras en 3D (disparos en primera persona).

En el post anterior (html5 ¿el cambio que esperábamos?) planteaba la posibilidad de creación de juegos con html5.

Sin duda, html5 es una alternativa para juegos de navegador que presenta ventajas importantes:
  • se trata de una herramienta estándar abierta y gratuíta al alcance de cualquier persona interesada en desarrollo web.
  • no requiere de software adicional o instalación de complementos.
  • es sopotado por los navegadores más actuales con independencia del sistema operativo lo que lo convierte en multiplataforma.
En contra, se está trabajando para mejorar el rendimiento debido al elevado consumo de memoria y cpu.

También os dejo un enlace que os va a sonar: Angry Birds.
Uno de los juegos más populares para dispositivos móviles, también está disponible en HTML5 para disfrutar desde el navegador.
http://chrome.angrybirds.com

3 de enero de 2013

HTML5 ¿el cambio que esperábamos?

HTML5 es el Lenguaje de Marcado de Hipertexto (HyperText Markup Language) en su quinta revisión, regulado y recomendado por el W3C (World Wide Web Consortium), consorcio encargado de la mayoría de las especifiaciones tecnológicas para la web.

Está en fase borrador pero cuenta con el apoyo de las grandes compañías como Google, Apple o Microsoft cuya apuesta supone el lanzamiento definitivo en la web.

Se estima que la versión final de esta recomendación se aprobará en el año 2014. No obstante, se puede usar html5 sin ningún temor ya que la mayoría de sus características se encuentran en una situación muy estable.

Html5 hace referencia al conjunto de nuevas tecnologías que proporcionan una navegación mucho más ágil y flexible y suponen una experiencia de usuario mejorada sin el uso de software adicional.

El objetivo fundamental de html5 es facilitar el desarrollo de aplicaciones web enriquecidas (ahorro de costes en el desarrollo de páginas webs) y mejorar el rendimiento ante las nuevas necesidades tecnológicas y de gestión de la información.
No olvidemos que cada vez más terminales móviles soportan html5 y para el presente año se espera la venta de mil millones de terminales compatibles con esta tecnología. Véase el artículo: http://jmacuna73.blogspot.com.es/2012/12/smartphone-utilidades-reales-y-evolucion.html

Algunas de las aportaciones del lenguaje son:

Etiquetas nuevas:

  • <canvas> para representación de elementos gráficos en 2D y 3D
  • elementos multimedia como <audio>, <video>, <source>, <embed>. Los formatos de audio soportados son AAC, mp3, ogg, PCM, WebM y los de vídeo ogg, H.264, WebM, H.264.
  • elemento <track> para alojamiento de una pista de texto asociada a un contenido multimedia, por ejemplo un vídeo.
  • tags para manejar la web semántica. Algunos elementos que definen secciones del documento son <article>, <aside>, <bdi>, <command>, <details>, <summary>, <figure>, <figcaption>, <footer>, <header>, <hgroup>, <mark>, <meter>, <nav>, <progress>, <ruby>, <rt>, <rp>, <section>, <time>, <wbr>.
  • elementos de forma: <datalist>, <keygen>, <output>.

Formularios enriquecidos:

  • se añaden nuevos tipos de datos cómo direcciones de e-mail <input type=email>, números de teléfono <input type=tel>, url absoluto <input type=url>, búsqueda <input type=search>, fecha y hora global <input type=datetime>, fecha y hora local <input type=datetimelocal>, fecha <input type=date>, mes <input type=month>, semana <input type=week>, hora <input type=time>, número <input type=number>, número en rango <input type=range>, color <input type=color>
  • nuevos tipo de controles de entrada: barras de progreso, generadores de claves, interfaces de salida, listas de datos, selectores de colores, calendarios, cuadros de búsqueda, etc.
  • comportamientos como autofocus, autocompletar, redirigir el valor.
  • y posibilidad de validación de los campos sin el uso complejo de scripting.

CSS3:

  • permite dibujar gráficos vectoriales
  • rotar y escalar imágenes: transform, -webkit-transform, -moz-transform, -o-transform
  • texto sombreado: text-shadow
  • cajas sombreadas:  box-shadow
  • redondear bordes o esquinas de elementos o imágenes: border-radius.
  • bordes con imágenes: border-image y border-corner-image.
  • múltiples imágenes de fondo: background-image: url('fondo1.png'), url('fondo2.png')
  • tooltip usando pseudo-elementos :before (or :after) combinados con pseudo-clases :hover.
  • opacidad: opacity
  • múltiples columnas: -moz-column-count and -moz-column-width
  • soporta una gama más amplia de las definiciones del color: HSL (hue, saturation, lightness), CMYK (cyan, magenta, yellow, black), HSLA (hue, saturation, lightness, alpha) y RGBA (red, green, blue, alpha)

Modelo de procesamiento de errores:

  • el manejo de errores queda claramente definido y es mucho más sencillo para el programador.

Javascript:

  • los nuevos APIs para gestionar la interacción con el usuario permiten dibujar gráficos 3D con WebGL, trabajar off-line, geoposicionamiento, drag and drop, etc.
  • APIs para el acceso a sistema de ficheros, almacenamiento de sesión, base de datos local, etc.

Otros módulos:

  • MathML (Mathematical Markup Language): lenguaje extendido que nos permite expresar notaciones matemáticas .
  • SVG (Scalable Vector Graphics) hace posible dibujar gráficos vectoriales nativamente.

Para poder disfrutar de todo su potencial hay que contar con las últimas versiones de los navegadores más importantes del mercado  (Mozilla, Chrome, Opera, Safari e IE).
Internet Explorer interpreta código html5 a partir de la versión 8. Para versiones anteriores y con el objetivo de no excluir a ningún usuario, recomiendo utilizar la detención de capacidades. La librería más completa para ello es Modernizr: the feature detection library for HTML5/CSS3.

Os dejo un buen vídeo sobre Qué es HTML5 y qué no es, mitos y leyendas de los estándares abiertos, pasado, presente y futuro de HTML5 de Sandra Guerrero Sanmarti que no os podéis perder.



Reflexiones que planteo:

¿es el momento de realizar un cambio tecnológico con tanto impacto en nuestra empresa y nuestros clientes?
¿es html5 una apuesta de futuro para aplicaciones web y videojuegos?

Me interesa tu opinión, ¿qué piensas al respecto?