Bitelia

Bitelia


Edita tu propia pagina de inicio personalizada en HTML

Posted: 17 Oct 2013 02:01 PM PDT

La pagina de inicio del navegador es lo primero que vemos cuando decidimos navegar la web, para muchos la elección del sitio o herramienta que aparece primero en ese momento, es importante porqué nos da una sensación de organización. Todos tenemos hábitos de navegación que usualmente repetimos día tras día, es ideal entonces que nuestro punto de partida nos apunte directamente a los sitios que más visitamos. Un sitio muy popular para usar como pagina de inicio, era iGoogle, pero últimamente Google nos tiene acostumbrados a eliminar sus servicios sin preocuparse por las molestias de los usuarios. iGoogle va a cerrar en menos de 15 días, obligando a sus usuarios a buscar alternativas.

pagina de inicio personalizada

Una opción bastante interesante, es la de usar una pagina de inicio personalizada creada por alguien más y añadirle algunos toques personales. No necesitas ser un programador para realizar cambios, sino tener solo algunas ideas básicas de que lineas de código editar, para cambiar un color, una imagen o insertar un enlace.

En este tutorial, vamos a descargar una pagina de inicio personalizada escrita en HTML5, CSS3 y JavaScript, y vamos a aplicar algunos cambios muy básicos para ajustarla a nuestras necesidades y gustos. Esto no es un curso de programación, y está muy lejos de serlo. Es solo un pequeño tutorial que los intentará guiar por los pasos de edición más sencillos a la hora de querer editar una de estas páginas.

Para poder editar archivos HTML o CSS vamos a necesitar un editor de texto especial que nos sirva para escribir código. Les recomiendo usar Brackets, ó cualquiera de esta lista.

La pagina que vamos a usar para este ejemplo se llama Awesome startpage, es completamente compatible con Firefox, Chrome y Safari. Tiene un diseño muy bonito, y podemos añadir hasta 9 enlaces a nuestros sitios web favoritos y asignarles atajos de teclado.

pagina de inicio personalizada

Al descargarla tendremos un archivo .Zip, lo descomprimimos y dentro hay una carpeta con 3 elementos: un archivo index.html, una imagen de nombre bg.jpg, y una carpeta de nombre resources que lleva contiene los archivos CSS y JavaScript.

Insertar enlaces

Usamos nuestro editor de texto para abrir el archivo index.html y ubicamos la linea 157, donde tenemos la lista de sitios que podemos modificar. La primera linea contiene un sitio de ejemplo, las demás están comentadas (cuando una linea de código está comentada, quiere decir que el navegador no va a leer ni interpretar el código dentro del comentario) y no tienen nombre ni enlaces asignados.

editar pagina de inicio personalizada

Para añadir nuestros enlaces debemos eliminar los caracteres <!-- del principio de la linea y --> del final, los cuales cumplen la función de encerrar el código en un comentario.

Modificamos las lineas para que pasen de esto:

<li id="link1"><a href="#"><span>1</span>untitled</a></li>

A esto:

<li id="link1"><a href="http://tusitioweb.com"><span>1</span>Nombre para el sitio</a></li>

Ejemplo:

<li id="link1"><a href="http://bitelia.com"><span>1</span>Bitelia</a></li>

Asignar atajos de teclado

El archivo HTML contiene un script para asignarles atajos de teclado a cada enlace, que van del numero 1 al 9. Para poder activar los atajos de teclado debemos editar las lineas del script y añadir los sitios web manualmente.

pagina de inicio personalizada html5

Ubicamos la linea 132 y modificamos los valores de los sitios que queremos tengan atajos de teclado:

var hotlink1 = 'http://bitelia.com';

Recuerda remover los dos // que están delante del código, ya que también cumplen la función de comentar el texto. Guarda el trabajo una vez listo, y puedes abrir tu archivo index.html con el navegador para probar los cambios.

Cambiar el fondo, tipografía y colores

Si queremos editar el fondo, los colores y las tipografías de la pagina necesitamos abrir el archivo s.css que se encuentra dentro de la carpeta resources.

pagina de inicio personalizada css3

Ubicamos la linea 65 con el selector body, aquí podemos reemplazar la imagen de fondo por la de nuestra elección siempre que la guardemos en la carpeta resources tan solo reemplazando la linea:

background: white url(../bg.jpg) fixed no-repeat center center;

Por:

background: white url(../nombre de tu imagen.jpg) fixed no-repeat center center;

Si no queremos editar directamente el código, podemos reemplazar la imagen bg.jpg que se encuentra en la carpeta por la de nuestra elección, solo necesita tener el mismo nombre y la misma extensión.

Los siguientes selectores: font y color indican el tamaño en pixeles, la familia de la tipografía y el color del texto de los enlaces. El color puedes reemplazarlo por cualquier valor hexadecimal siempre que añadas un # antes del numero.

pagina de inicio personalizada hipertextual

Luego solo te queda definir la ruta de tu ordenador en la cual se encuentra el archivo index.html, como la pagina de inicio de tu navegador.

La entrada Edita tu propia pagina de inicio personalizada en HTML aparece primero en Bitelia.








Las mejores plataformas de blogging minimalistas

Posted: 17 Oct 2013 11:47 AM PDT

Desde que la publicación de contenidos en Internet se abrió por completo a las masas gracias a plataformas como Blogger y WordPress, cada vez más y más usuarios se aventuran a escribir sus ideas y publicarlas en linea. Pero, para muchos puede resulta abrumadora la lista de opciones que incluyen estás herramientas, la enorme cantidad de tiempo que puede llevar el proceso de creación de un blog, y el poco tiempo que queda luego para realmente escribir en el.

plataformas de blogging minimalistas

Este problema es la principal razón por la que han surgido nuevas opciones que buscan simplificar la manera en la cual el contenido se publica en Internet. Sitios que persiguen un objetivo simple, hacer que cualquier usuario pueda escribir y publicar sin complicaciones. De todas ellas, estas 5 que les presento a continuación tienen algunos de los más efectivos enfoques para lograrlo, y llegar a ser las mejores plataformas de blogging minimalistas.

Medium

plataformas de blogging minimalistas medium

Medium es una iniciativa creada por Evan Williams, co-fundador de sitios de la envergadura de Blogger y Twitter. Con alguien con semejantes credenciales detrás de un proyecto, podemos predecir con muy poco temor a equivocarnos que estamos frente a un producto de calidad, y que seguramente crecerá y generará mucho ruido.

Medium es una plataforma de publicación de contenido, y una de las que iniciaron el movimiento del minimalismo en el blogging. Es un espacio atractivo en el cual desarrollar tus ideas y enfocarte solo en tus palabras. Medium está diseñado para que el usuario se preocupe solo por el contenido, mientras la plataforma hace lo demás. Usando esta herramienta tienes asegurado que tu texto y tus imágenes se verán geniales en cualquier dispositivo, no tienes que preocuparte de plugins, widgets, ni demás artilugios, sino simplemente enfocarte en lo que escribes teniendo a la mano solo la cantidad herramientas de formato justas y necesarias.

Medium incluye varias funciones sociales y esta fuertemente integrada con Twitter, es una plataforma colaborativa donde los usuarios pueden agregar notas en los párrafos de las entradas de los demás, y también cuentan con el modelo de "colecciones", las cuales se forman por conjuntos de artículos de diferentes autores sobre temas que tengan algo en común.

Por el momento la publicación en Medium está limitada, para escribir necesitas registrarte con tu cuenta de Twitter, y esperar que se te den privilegios para publicar. Todo el tiempo se envían invitaciones, y no vas a quedar sentado esperando para siempre. Otra manera de tener acceso rápidamente es lograr que alguien que ya escriba en Medium te invite a compartir contenido en una de sus colecciones.

De todos los de la lista, Medium es la plataforma con más madurez e identidad de todas. Ya ha sido adoptada como segundo sitio de publicación de muchos bloggers populares que trabajan en grandes sitios de Internet, lo que hacen que no solo escribir en Medium sea atractivo, sino también leer.

Roon

plataformas de blogging minimalistas roon

Roon es una plataforma de blogging creada por Drew Wilson y Sam Soffes. Te registrar y empiezas a escribir, no necesitas configurar absolutamente nada, solo elegir un nombre de usuario y un título para tu blog.

Roon cuenta con aplicaciones para la web, iPhone/iPad, y Mac. Todas sumamente minimalistas y completamente enfocadas en el contenido: texto e imágenes que se vean bien en todos lados. Roon es completamente gratuito y sin anuncios, aunque en el futuro se añadirán algunas mejoras de pago.

Roon no es una plataforma social al estilo de Medium, es simplemente un lugar donde crear un blog propio, sin la necesidad de tener que personalizar una plantilla para que el sitio luzca bien en cualquier dispositivo. Roon se enfoca más en las experiencia de escritura que en la de blogging, y por ello incluye soporte para Markdown. Si quisiera describirlo de mejor manera, diría que es editor de texto rico y minimalista que incluye funciones de plataforma de publicación de contenidos, como el hecho de que te permite usar tu propio dominio personalizado, al que puedes añadir tu blog de Roon.

Pen

plataformas de blogging minimalistas pen

De todas estas plataformas, Pen es sin duda la más simple. Es tan, pero tan minimalista que solo te deja crear un post. Entras a la pagina, elijes un nombre, una contraseña y estás listo, solo necesitas escribir y publicar.

Es una alternativa bastante interesante, puedes crear cuantas paginas quieras, cada una con un solo post y su propia dirección, el cual puede ser editado solo por quien tenga la contraseña. Me gusta la idea de usarlo como una fuente para material anónimo. No necesitas ingresar absolutamente ningún dato sobre ti, solo escribir, subir un par de imágenes y ya. Las posibilidades se limitan solo a la imaginación del usuario.

Throwww

plataformas de blogging minimalistas throwww

Sobre Throwww hablamos hace poco en Bitelia, es un startup reciente que se autodenomina "la plataforma de blogging más simple". Y su formato se presta mucho para que la comparemos con Medium. Al igual que esta última, Throwww tienen un enfoque social, en el cual el protagonista es el contenido, pero podemos también interactuar más activamente con las publicaciones de otros usuarios.

Throwww solo requiere que inicies sesión con tu cuenta de Twitter para comenzar a publicar, esta abierto al publico sin restricciones, y su editor es bastante agradable a la hora es escribir.

Ghost

ghost

Ghost es sin duda la más compleja y completa plataforma de blogging de todas las aquí nombradas, y aún así no deja de ser una oda al minimalismo. Ghost es tres cosas principalmente: hermosa, personalizable y abierta.

Ghost nace como una idea de John O'Nolan, quien siendo usuario de WordPress desde hace mucho tiempo, llegó a la conclusión de que WordPress ha evolucionado tanto que se ha convertido en mucho mas que una simple plataforma de publicación de contenidos, sino en una herramienta sumamente avanzada.

De esta manera, John imaginó crear su propio fork de este servicio, como una especie de WordPress-ligero, un servicio que fuese capaz de romper las mismas barreras que originalmente rompió WordPress en sus inicios llevando a las masas el acceso a la publicación de contenidos. Ghost fue financiado en kickstarter, y es así como apenas hace unos días abrió sus puertas para todos los usuarios.

El objetivo de Ghost es el de lograr que el contenido se publique en linea de manera rápida, fácil, hermosa y eficiente. Completamente dedicado a una cosa y solo una cosa: publicar. Esta diseñado de manera prolija y elegante para que dediques menos tiempo a "hacer el blog" y más tiempo a escribir en el.

Ghost es completamente open source y desde este mismo momento puedes descargar el código fuente. Por ahora para usar Ghost deberás instalarlo tu mismo, pero el sitio cuenta con una guía de configuración paso a paso. Próximamente Ghost lanzará su propio servicio de hosting y podrás crear un blog directamente en solo un par de clics.

Ghost promete revolucionar la forma en que se publica el contenido en Internet, y es el candidato que puede permitirse el lujo de plantarse frente a frente como competencia al gran WordPress.

La entrada Las mejores plataformas de blogging minimalistas aparece primero en Bitelia.








Unroll.me: organiza tus suscripciones de correo electrónico de forma inteligente

Posted: 17 Oct 2013 09:32 AM PDT

Hoy en día, un usuario promedio usa su correo electrónico con una variedad de motivos. Más allá de enviar y recibir emails, también puede estar suscrito a servicios que envían newsletters, email marketing, y mucho más. Por eso, cuando somos usuarios de una buena cantidad de servicios online, puede ser que pronto nuestra bandeja de entrada se convierta en algo inmanejable. Para los usuarios de Gmail, existe una solución en la nueva bandeja de entrada del correo, que permite diferenciar entre correos normales, notificaciones sociales y promociones. Pero existe otro servicio llamado Unroll.me, que nos permite poner un poco de orden en nuestra bandeja de entrada.

Unroll.me

Hay una diferencia crucial en la forma en la que Unroll.me maneja las suscripciones que tenemos. Gmail nos permite configurar tres bandejas de entrada diferentes de acuerdo con categorías. Así, por ejemplo, tenemos una categoría de Promociones donde van a parar todos los correos de cupones, descuentos y demás que llegan. Por otro lado, tenemos la categoría Social, donde van a parar todas las notificaciones de Facebook, Twitter, Pinterest y otras redes sociales. Tenemos todo diferenciado, pero si tenemos muchas suscripciones, aún así tenemos que abrir muchos correos.

Por eso, muchas veces dejamos pasar correos que quizás pueden tener un contenido interesante para nosotros. Unroll.me quiere evitar esto, y por eso introduce una funcionalidad llamada Rollup. Consiste en un único correo electrónico que compila toda la información que llegó en nuestras suscripciones. Así, en lugar de tener que navegar por cientos de emails que contienen información irrelevante, podemos encontrar lo que necesitamos rápidamente, desde un único lugar. De esta forma, nos ahorramos hasta quizás horas de nuestro tiempo, que podemos invertir en hacer otras cosas.

Unroll scanning

Sin embargo, esta no es la única funcionalidad que nos ofrece Unroll.me. De hecho, nos ofrece un sistema potente para organizar nuestras suscripciones. Podemos tener una previsualización de los correos de las suscripciones, para ver qué es lo que está en su interior aún antes de abrirlo. Además, nos permite crear una sección social como sucede con Gmail, pero con un único correo donde encontraremos un resumen de todas las notificaciones de las redes en las que estamos presentes.

Unroll.me también funciona de una forma inteligente a través de la cual nuestras suscripciones son ubicadas en diferentes categorías. Sin embargo, no estamos limitados por el tipo de categoría, como podría suceder en la bandeja de entrada de Gmail, sino que tenemos más lugar para la personalización. Una de sus funcionalidades más destacadas es la posibilidad de quitar la suscripción de un determinado servicio con un solo clic, de forma simple y efectiva. Nada más tenemos que hacer clic en un botón especial y nos podemos olvidar de ello, Unroll.me se encarga de darnos de baja.

rollup

Además, podemos administrar todas nuestras nuevas suscripciones, como por ejemplo de noticias. Unroll.me es muy práctico en este sentido. Si nos preocupamos por un desorden que pueda generarse a partir de un servicio como este, Unroll.me tiene su propia carpeta para garantizar la organización. El servicio se ve muy útil, sobre todo en un momento en el que cualquier usuario tiene a sus espaldas una buena cantidad de suscripciones.

La entrada Unroll.me: organiza tus suscripciones de correo electrónico de forma inteligente aparece primero en Bitelia.








Airmail, un cliente de correo para OS X que mejora tu productividad

Posted: 17 Oct 2013 07:15 AM PDT

La herramienta por defecto de OS X para consultar el correo electrónico, Mail, ha cambiado poco con los años. Si bien está bien diseñada y ofrece las funciones básicas que cualquier gestor de correo debería tener, se ha quedado atrás si lo comparamos con otros clientes de correo para Mac que han surgido en los últimos tiempos, como Unibox o similares. Hoy le echaremos un vistazo a Airmail, un cliente de correo para OS X que destaca por su diseño y por la multitud de funciones enfocadas a la producitivdad, como filtrado inteligente de mensajes o etiquetas.

cliente de correo para OS X

Para empezar, cabe destacar que Airmail es una aplicación exclusiva de OS X. Esto se nota en muchos aspectos, como en la buena integración con OS X a nivel de diseño y de rendimiento, siendo compatible además con el sistema de notificaciones de OS X. Encontrarás AirMail en la Mac App Store por 1,79 € / $1.99, aunque desde su página web puedes probar una versión Beta para hacerte una idea de la aplicación y para descubrir futuras nuevas funciones. En el momento de escribir este artículo, por ejemplo, la versión estable es la 1.1 mientras que la versión Beta que he probado es la 1.2.

cliente de correo para OS X

¿Qué hace tan especial a AirMail? ¿Es realmente una alternativa moderna a Mail? Para empezar, lo que más llama la atención nada más abrir esta aplicación es el diseño de la ventana principal, en realidad la única ventana disponible, lo que ayuda a gestionar mejor el correo. AirMail gira en torno a tres columnas por defecto, la primera dedicada a las bandejas, carpetas y etiquetas, la segunda donde verás un listado de los mensajes disponibles en cada carpeta y una tercera donde se ve el contenido del mensaje seleccionado en la segunda columna. Desde las opciones de visualización puedes cambiar esto, compactando una u otra columna de manera que tengas más espacio libre en pantalla para otras aplicaciones. Además, puedes quitar la vista previa de mensajes para verlos únicamente si haces doble clic en ellos.

AirMail permite configurar una o más cuentas. En el caso de los correos de los principales proveedores online, como Gmail, Yahoo! u Outlook/Hotmail, al colocar tu cuenta de correo se configurarán automáticamente los servidores POP/IMAP, mientras que en los demás casos, como en tu cuenta de correo del trabajo o personal, tendrás que añadir manualmente los datos en caso que AirMail no los deduzca por su cuenta, que también es posible.

Por un lado, AirMail facilita una lectura y respuesta rápidas de los mensajes, gracias a los abundantes atajos para todas las acciones disponibles, de manera que unos pocos clics de ratón puedas marcar un mensaje como leído y responderlo cómodamente. Por otro lado, este cliente de correo para OS X facilita la gestión de gran cantidad de mensajes usando para ello el etiquetado de mensajes, herencia de Gmail y que cada vez más clientes de correo utilizan, y mediante los filtros que permiten mostrar u ocultar correos según la fecha de recepción, el contacto que lo envió o si tiene o no un archivo adjunto. En este sentido, AirMail permite integrar tus documentos de Dropbox, Google rive, Droplr y CloudApp para añadir a tus mensajes como ficheros adjuntos.

cliente de correo para OS X

El editor de mensajes de AirMail tampoco se queda atrás, con la posibilidad de incluir texto plano, texto enriquecido e incluso de aprovechar y hacer uso de Markdown para enriquecer textos con tablas, formato y otras mejoras.

Tras probar la mayoría de clientes de correo para OS X de nueva generación, como Postbox, Sparrow, Inky o Unibox, tengo que destacar que AirMail me ha sorprendido gratamente. Reúne características de todos ellos y consigue optimizar el espacio en pantalla equilibrando la sencillez de uso con las opciones de procesado avanzado, como las etiquetas o los filtros. Si Mail te parece demasiado simple y aborreces las versiones web de tus cuentas de correo electrónico, prueba AirMail y verás que desde el primer momento podrás organizar mejor tu correo y procesarlo en menos tiempo y de una forma más eficiente.

La entrada Airmail, un cliente de correo para OS X que mejora tu productividad aparece primero en Bitelia.








8 editores HTML online para principantes y profesionales

Posted: 17 Oct 2013 05:00 AM PDT

El desarrollo web vive su época dorada, pues la página web como tal es uno de los elementos primordiales de Internet y la manera más práctica de compartir con todo el mundo tu conocimiento, tus ideas o cualquier cosa que quieras transmitir o vender. Aunque hay cientos de herramientas pensadas para facilitarte la creación y publicación de páginas para todos los gustos, nunca está de más tener en cuenta lo básico y saber escribir HTML. En Bitelia hemos hablado largo y tendido al respecto, incluso te hemos ofrecido consejos para ser más productivo en este aspecto. Hoy vamos a ofrecerte editores HTML online para escribir el código directamente desde el navegador y subirlo a tu propia página por tu cuenta.

editores HTML online

Los editores HTML online que verás a continuación podemos dividirlos en dos tipos. Por un lado, los minimalistas, pensados para usuarios que ya conocen la sintaxis HTML y pueden escribir directamente en este lenguaje sin necesidad de ayudas. En segundo lugar, hay editores más completos para usuarios menos familiarizados con HTML que incluyen botones para añadir contenido especial, como imágenes, vídeo o tablas sin necesidad de escribir manualmente las etiquetas.

  • Online HTML Editor: Empezamos con uno de los editores HTML online más sencillos que puedes encontrarte. Básicamente consta de tres partes: la barra de botones para aplicar titulares, negritas y cursivas, añadir enlaces e imágenes, etc.; el campo donde escribir directamente el código HTML y un tercer campo donde ver el resultado y que no puedes editar. Una vez tengas el código listo, tienes la posibilidad de subirlo a tu propio espacio usando el servicio N.Nu, anunciado en la misma página.

  • Real-time HTML Editor: Mucho más minimalista que el editor anteriores, Real-time HTML Editor divide la página en dos paneles, uno superior donde escribir el código y otro inferior donde ver el resultado. Ni botones, ni instrucciones. Es ideal para evitar distracciones y para escribir en HTML si conoces todas las etiquetas disponibles.

  • Quackit Online HTML Editor: Este editor es algo más elaborado, con una barra repleta de botones que te ayudarán a formatear y añadir elementos al texto sin necesidad de escribir las etiquetas manualmente. Además de poder aplicar estilos, formatos y de escoger fuentes y colores de texto, tienes la posibilidad de añadir enlaces, imágenes, tablas, elementos Flash y botones. Muy recomendable si no estás muy familiarizado con HTML y quieres crear páginas relativamente complejas.

  • HTML Instant: Volviendo a los editores HTML online minimalista, en esta ocasión la página se divide en dos partes verticalmente, una para escribir directamente en HTML y la derecha para ver el resultado. Además de poder mover la barra central para tener más o menos espacio para uno u otro apartado, puedes deshacer cambios, guardar el código y cuentas con botones para insertar enlaces, imágenes (de cualquier página o directamente de Imageshack o Photobucket), crear listas, etc. HTML Instant ofrece su propia extensión para Google Chrome, así como con la opción de compartir el código que has creado a través de correo electrónico, Facebook, Twitter o Linkedin, entre otras fuentes.

  • BDS Editor HTML/CSS/JavaScript Online: Si además de HTML quieres editar CSS y JavaScript, este editor te lo pone fácil. Como en el caso anterior, divide la pantalla en dos partes verticalmente. Como ocurre con algunos editores de escritorio, el código se muestra resaltado con colores.

  • Free Online HTML Editor: Otro editor HTML englobado en la categoría de editores HTML online para principiantes, más que nada por su barra de botones, que te ahorrarán el tener que recordar y escribir las etiquetas a mano. Por lo demás es muy sencillo, tanto que echo en falta un panel donde se vea el resultado. Sin embargo, podrás elegir estilos, fuentes, añadir tablas, imágenes y vídeos, etc.

  • Best Online WYSIWYG HTML Editor: Aunque su nombre es muy ambicioso y de ti depende decidir si es el mejor editor HTML online, ofrece un buen panel de botones con los elementos más elementales a añadir en un archivo HTML así como otros no tan habituales, como botones, tablas, elementos Flash, etc. Muy recomendable, aunque carece de vista previa ni funciones para guardar o exportar el resultado directamente.

  • Rendera Online HTML5 Editor: Terminamos con un editor HTML online especialmente diseñado para aprender HTML5, CSS y JavaScript. Dividido en dos paneles verticales, puedes elegir entre las distintas pestañas disponibles, donde encontrarás también ejemplos y ayuda. Además, te permite aplicar código HTML o Markdown, entre otras muchas opciones.

La entrada 8 editores HTML online para principantes y profesionales aparece primero en Bitelia.








Tags :

No hay comentarios:

Publicar un comentario

Con la tecnología de Blogger.

Instagram

Advertisement

Featured Video

Featured Video

Sponsor

Video Of Day