domingo, 14 de mayo de 2017

Empresas colaboradoras en las prácticas


Queremos agradecer desde aquí a las siguientes empresas que acogen a nuestros alumnos durante el Módulo de las prácticas profesionales no laborables:


















domingo, 7 de mayo de 2017

Enlaces Blogs Finales

Acabamos el curso. Comienza el Módulo de Prácticas Profesionales No Laborales de 80 hs. en empresas.
Estos son los resultados de los distintos trabajos realizados en formato web interactivo.
Primero se presentan las webs que se han trabajado durante el curso por los tres grupos de alumnos.
Luego se listan sin mucho orden, los blogs de Blogger y páginas en Wordpress que cada uno ha elaborado.

WEBS GRUPALES













BLOGS PARTICULARES














jueves, 20 de abril de 2017

Perlas (x)



Una colección de enlaces para ampliar conocimientos y encontrar recursos de Bootstrap



Para aprender y practicar todos los lenguajes necesarios para controlar el diseño web:
incluso Bootstrap



¿Qué es el lenguaje de preprocesador de CSS Sass?





Unas plantillas gratuitas de páginas web de HTML5, CSS, responsive, WordPress, Bootstrap,…




Un sitio con un material libre de licencias, video e imágenes,

miércoles, 12 de abril de 2017

Perlas de internet (ix)



En esta página se realizan análisis de funcionamiento de interfaz y usabilidad de páginas web y webapps corporativas y de empresas y se proponen cambios y mejoras:

https://www.casestudy.club/

Este es el caso Zara
https://www.casestudy.club/case-studies/zara-a-usability-case-study

Una página con servicio de generación de armonías de colores:

http://www.colourco.de/

Algunos canales de Youtube interesantes con tutoriales y explicaciones de técnicas:

The Futur: UX y en general, tutoriales de diseño

Howard Pinsky tiene ya muchos interesantes tutoriales de Photoshop y Lightroom. Otro punto de vista.

Adobe Photoshop: pues eso, el canal oficial.

The Art of Photography: Ted Forbes. Un buen canal de fotografía, trucos, revisiones de aparatos, …


imagen de Sierratangoxray

Cómo se gestaron los sonidos en la película Godzilla (2014), un interesante documental del proceso creativo. https://vimeo.com/114853672




miércoles, 5 de abril de 2017

SEO Básico


Según la Wikipedia, el SEO se define como:
el posicionamiento en buscadores u optimización de motores de búsqueda es el proceso de mejorar la visibilidad de un sitio web en los resultados orgánicos de los diferentes buscadores. También es frecuente nombrarlo por su título inglés, SEO (Search Engine Optimization).

El motor de Google, en España el 98% de las búsquedas se realizan con él, busca determinar dos factores básicos: la autoridad y la relevancia.
•La Autoridad es básicamente la popularidad de una web, cuanto más popular sea una página o una web más valiosa es la información que contiene. Este factor es el que un motor de búsqueda tiene más en cuenta dado que se basa en la propia experiencia del usuario, cuanto más se comparta un contenido es que a más usuarios les ha parecido útil.
•La Relevancia es la relación que tiene una página frente a una búsqueda dada, esto no es simplemente que una página contenga un montón de veces el término buscado (en los comienzos era así) sino que un motor de búsqueda se basa en cientos de factores on-site para determinar esto. El CTR que tengan nuestros resultados en un motor de búsqueda. El SEO es necesario porque hace más útil tu página web tanto para los usuarios como para los motores de búsqueda. El SEO es necesario para ayudar a los motores de búsqueda a entender sobre qué trata cada página y si es o no útil para los usuarios.
El SEO se ha convertido en el mejor medio de que te encuentren los usuarios a través de búsquedas en las que tu página web es relevante. Los usuarios buscan lo que tu les ofreces y la mejor manera de llegar a ellos es mediante un motor de búsqueda.

Los motores de búsqueda hacen básicamente dos tareas: rastrear e indexar.
Rastrear: los bots recorren todas las páginas a través de los enlaces (de ahí la importancia de una buena estructura de enlaces) al igual que haría cualquier usuario al navegar por el contenido de la Web, pasan de un enlace a otro y recopilan datos sobre esas páginas web que proporcionan a sus servidores. El rastreo empieza con una lista de direcciones web de otros rastreos y de sitemaps proporcionada por otras páginas web. Los bots prefieren los sitios nuevos y los cambios en las web existentes.
Son los propios bots los que deciden qué páginas visitar, con qué frecuencia y cuánto tiempo van a rastrear esa web, por eso es importante tener un bajo tiempo de carga y un contenido actualizado.

Indexar: a continuación las páginas se incluyen en un índice ordenado por su contenido, su autoridad y su relevancia; de este modo cuando se hace una consulta al buscador los resultados se presentan más rápidamente. Hoy en día, los motores de búsqueda son más sofisticados, y basan sus índices en cientos de aspectos diferentes como la fecha de publicación, si contienen imágenes, vídeos o animaciones, los microformatos, etc. Priorizan la calidad del contenido.

Una vez indexadas, entra en funcionamiento el algoritmo: son procesos informáticos que deciden las páginas que aparecen antes o después en los resultados de búsqueda. En milisegundos, los algoritmos son capaces de buscar en los índices y saber cuáles son las páginas más relevantes teniendo en cuenta los cientos de factores de posicionamiento.

Factores para mejorar el SEO.

1. Factores ajenos, SEO Off-site: son aquellos que no podemos controlar directamente. Indican la autoridad que tiene una web, es decir, si es de confianza o no. Existen multitud de factores que la definen. Algunos de los más importantes son:
  1. La calidad de los link externos
  2. Se da más importancia a la calidad de las webs que dirijan a dicho enlace.
  3. Comportamiento del usuario.
  4. Dependiendo del comportamiento del usuario, tal como las páginas visitadas anteriormente y su frecuencia, los motores de búsqueda pueden mostrar unos u otros resultados.
  5. La ubicación del usuario. Los resultados mostrados para un mismo término serán distintos según el lugar desde el que se realice la búsqueda.
  6. Las redes sociales: las menciones en redes sociales cuentan al establecer la autoridad de un dominio. Links compartidos en Twitter y páginas compartidas en Facebook se valoran en los resultados de la búsqueda.
2. Factores propios, SEO On-site: son los relativos a la web, es decir, los que podemos controlar directamente. El objetivo principal es facilitar el trabajo de los buscadores.
  1. El contenido de la web es el factor más importante para posicionar en Google. El contenido original e interesante para el usuario es la principal causa. El algoritmo Google Panda es el encargado de establecer si un contenido es original o no. El contenido debe tener al menos 300 palabras.
  2. Páginas web responsive: que se visualicen en todo tipo de dispositivos especialmente en los móviles.
  3. Conviene realizar una keyword research para seleccionar la palabra clave del artículo, e incluir esa palabra clave en el discurso del texto y ofrecer contenido actual sobre el término.
  4. Diseñar una buena estructura de URLs favorece el rastreo de los bots y mejora la usabilidad y la navegación del usuario.
  5. El tiempo de carga de la página también es fundamental. El exceso no solo empeora la experiencia de usuario sino que influye en los buscadores al indexar todas las páginas de la web.
  6. Datos estructurados: ofrecen a los buscadores información detallada sobre el contenido de la web y añaden información extra que no se incluye ni en <title> ni en <metadescription>, como la valoración en estrellas o el número de comentarios de un artículo.
    • Los bots leen el código HTML de las páginas, por lo que es importante tenerlo claro y optimizado. Los motores de búsqueda emplean el contenido de ciertas etiquetas HTML en sus resultados de búsqueda. Algunas que influyen en el posicionamiento SEO son:
    • <title>: constituye el título azul que muestra Google en sus resultados. Identificar de qué trata la página.
    • <meta-description>: puede hacer que tu página reciba más o menos clics.
    • <h1>, <h2>, <h3>, etc. las etiquetas de encabezado: muestran de forma jerárquica los títulos que pueden encontrarse en un texto. Se aconseja que haya un único <h1> para el título principal del texto.
En resumen, una encuesta revela que los factores más importantes de cara al SEO son:
  1. Autoridad del dominio que enlaza: 23.87%
  2. Popularidad de la página: 22.33%
  3. El texto de enlace o anchor text: 20.26%
  4. Otros factores on-page: 15%

Enlaces:




















domingo, 2 de abril de 2017

Estándares y conversores de video


Estándares de video HTML5

El video añadido a la web es reconocido y reproducido por los navegadores actuales (compatibles HTML5) si está en alguno de estos formatos:
  • mp4: H.264 video codec, AAC audio codec, MPEG-4 formato contenedor.
  • webm: VP8 video codec, Vorbis audio codec, Matroska formato contenedor.
  • ogg: VP3.2 video codec, Vorbis audio codec, OGG formato contenedor. ::"Theora".
De manera que tenemos las siguientes extensiones de archivo reconocidas: .webm (video/webm), .mp4, .m4a, .m4r, .m4b (video/mp4, audio/mp4, application/mp4; 
MPEG-4: usado por Apple también para audio, tonos de teléfono y audio libros), .ogg, .oga und .ogv para audio o video respectivamente (video/ogg, audio/ogg). 

Hay que tener en cuenta que mientras que el formato de video/webm puede alcanzar la calidad y compresión del video/mp4, el codec VP3.2 está superado y no genera la misma calidad al mismo bit-rate.

También conviene que pese lo menos posible y se vea y escuche aceptablemente. Para las conversiones de tus videos de alta calidad contamos con algunas opciones.

Conversores gratuitos de video en línea HTML5

Para videos de menos de dos minutos de duración:
https://html5backgroundvideos.com/converter/

y otro (sin límite):
http://video.online-convert.com/

y otro más:

Para audio:
http://media.io/es/

Conversores gratuitos de video HTML5 para escritorio:

  • Uno sencillo y efectivo totalmente libre de licencia (Mac-Win-Linux):

http://mirovideoconverter.com/ 

  • Algo más complejo pero más completo y personalizable (Mac-Win-Linux):

https://handbrake.fr/

  • Si tienes algún video verdaderamente rebelde prueba:
http://www.ffmpeg.org/

Una referencia de uso de ffmpeg, aquí.

Uso de la web móvil con estándares


Estándares de diseño recomendados por la W3C