Un punto de vista... el de Tote King

Vídeos en HTML5

Mirar el código de este vídeo de YOUTUBE, ha sido insertado usando la etiqueta IFRAME que en los navegadores que soporten este "tag" de HTML5 podrán ver el vídeo.

Si observáis el código HTML veréis que en src="http://www.youtube.com/embed/IBd2KB_JjBE", el id que está en negrita es lo único que varía de cada vídeo...

Naturalmente valdría para cualquier pagina web que tengamos que diseñar...

Cuando hablo de sobriedad...

Cuando hablo de sobriedad quizás me refiera a algo así, eso sí... no es que mis gustos sirvan para algo, son sólo eso, mis gustos...

http://sabiavida.com/

Fotografía....

Uno de los ponentes en el proximo #EBE10 (http://www.eventoblog.com) tiene una web muy buena sobre fotográfia....

http://www.fotomaf.com/blog/


Y como se que el tema interesa, y hay que saber de todo, os la paso...

Jose Miguel se nos casa

Los componentes del modulo de diseño y mantenimiento de páginas web queremos felicitar a nuestro compañero José Miguel que celebró su enlace matrimonial el pasado sábado 25 de Septiembre.

                                                            

¡FELICIDADES Josemi y Alicia!

Visitamos Écija

Ejemplo de empresas y eventos en Facebook

http://www.facebook.com/mentatconsultores

Podéis entrar y ver como una empresa de diseño y programación web (que usa software libre) se publicita en las redes sociales.

http://www.facebook.com/pages/BAMBATAREventos-y-Turismo/70339867059#!/pages/BAMBATAREventos-y-Turismo/70339867059?v=info

Y esta otra dedicada al turismo...

PRE INSCRIPCIONES EBE 2010

http://eventoblog.com/2010/09/ebe10-martes-28-septiembre-abrimos-preinscripciones/

El martes 28 de septiembre de 2010 presentaremos nuevo diseño de #EBE10, anunciaremos los patrocinadores confirmados hasta el momento, el programa preliminar con algunos ponentes destacados y abriremos las pre-inscripciones a las 10:00h de la mañana (hora peninsular): 2.500 plazas.

Atajos de teclado para Twitter

http://estwitter.com/2010/09/25/atajos-de-teclado-en-el-nuevo-twitter-nuevotwitter/

• J – Desplaza para abajo el tweet seleccionado (si le damos a Intro entraremos en la información extra).
• K – Idem pero para arriba.
• Barra espaciadora: avanza una página de tweets completa.
• Mayúscula + Barra espaciadora: retrocede una página de tweets completa.
• Intro: Como os decía, amplía la información del tweet seleccionado (aparece en la parte derecha), es como darle clic con el botón del mouse. Y si volvemos a darle a Intro la cierra.
• F: pone como favorito el tweet seleccionado. Otra pulsación de F para quitarlo como favorito.
• R: abre la ventana emergente para responder al tweet.
• T: es para retuitear (formato oficial) abre una ventana emergente, si aceptamos hacemos el retweet.
• M: abre la ventana emergente para enviar un mensaje privado.
• Esc: Cierra la ventana emergente, bien sea la de replies-retweet-message-nuevo tweet.
• N: Abre una ventana emergente para enviar un tweet nuevo.
• / (la del teclado numérico, la de mayúsculas + 7 no me funciona en la prueba): va al formulario de búsqueda.
• . (punto): actualiza los tweets.
• Ahora varios comandos donde primero pulsamos la G y luego otra opción:
  • G y luego M: Va a la opción de mensajes directos.
  • G y luego R: Va a la opción de replies (menciones).
  • G y luego F: Va a los tweets que hayas marcado como favoritos.
  • G y luego P: Va a tu perfil (tu página de perfil de Twitter tal y como lo ven otros).
  • G y luego U: Aparece una ventana emergente donde tecleando el usuario vamos a su perfil público.
  • G y luego H: Va a la parte superior de la página principal (home), es decir, donde vemos el timeline de la gente a la que seguimos.

Pregón Feria 2010

Con el escenario de la Casa de la Cultura engalanado con una Caseta de Feria y el aforo completamente lleno dio anoche  su Pregón D. Antonio Domínguez, Pregonero de la feria de 2010.

Septiembre, el mes de las actividades externas

Septiembre pasará a la memoria de los alumnos del taller de empleo de Santiponce por ser el mes en el que más actividades conjuntas han realizado fuera de las aulas del centro de asuntos sociales.

Así, el día 16, poco después de volver de las vacaciones, visitamos el parque empresarial Torneo, más concretamente el vivero de empresas que en este lugar tiene la Camara de comercio de Sevilla, donde nuestro ya, gran conocido Patxi, nos deleitó con su capacidad didactica.


Solo unos días después,el 20, participamos en la realización de una sesión de fotografías en el Monasterio de San Isidoro para la promoción de Santiponce como lugar de reuniones de empresa o fudaciones. Esta actividada ha dejado grandes instantaneas.



Por último el pasado día 21 fuimos a Ecija, donde de mano de la empresa Ecija turistica,visitamos la ciudad, sus monumentos, iglesias y monasterios, así como empresas relacionadas con el turismo y la artesanía.

Cartel Feria de Santiponce 2010

Faltan apenas 15 días y al menos sabemos que hay cartel, el que ha creado uno de los alumnos del taller de empleo de diseño y mantenimiento de páginas web.

De Cartel feria 2010

Realizado entero con las técnicas aprendidas en el taller de fotografía, utilizando para la composición el programa photoshop.

Mudulo de Igualdad

Este Modulo de Igualdad se realizó en el mes de Septiembre

Ejercicios de Javascript

Ejercicio 1

Ejercicio 2

Ejercicio 3

Ejercicio 4

Ejercicio 5

Ejercicio 6

Ejercicio 7

Ejercicio 8

Ejercicio 9

Ejercicio 10

Ejercicio 11

No os perdais este blog

http://ventanaadentro.blogspot.com

Un buen blog que comienza.

Clases de Educación Física para el grupo de animación Turística.

Exportar un blog

Para exportar un blog con todas las entradas, imágenes, comentarios,etc. tenemos que acceder a configuración y en herramientas de blog elegir exportar blog. Se descargará un archivo .xml que será el que tendremos que importar (también en configuración/herramientas de blog) si queremos recuperar el blog tal y como estaba cuando se exportó. Muy útil como copia de seguridad.

Nuevos gestores

A partir de hoy tanto este blog como nuestras cuentas en facebook y twitter estarán gestionadas por Ana Mª Tardío y Juan Manuel Salguero.

Trucos para optimizar el escritorio de Windows 7

www.diariodesevilla.es/article/tecnologia/728077/escritorio/windows.html

Para dibujar directamente...

Sin necesidad de tener ningun programa instalado. Y todo hecho con HTML 5, dicen.

http://mugtug.com/sketchpad/

¿Cómo funcionan PRIORITARIOS de GMAIL?

Nuevas etiqueta para un futuro cercano (HTML 5)

http://www.anexom.es/tecnologia/diseno-web/las-novedades-de-html5-i/

• dialog se plantea para escribir conversaciones, por ejemplo para transcripciones de chat.
• figure se plantea para asociar un contenido multimedia (una foto, un vídeo, etc) a un título o leyenda.
• mark representa un texto resaltado, por ejemplo para resaltar una búsqueda.
• meter representa una medida, como el número de KB. Tiene más sentido si lo unimos con…
• progress representa el estado de una tarea, y se puede usar por ejemplo al subir un documento o al realizar varias tareas pesadas. Esto permitirá barras de tareas personalizadas y potentes.
• time representa una fecha o una hora.
• command representa un comando que el usuario puede ejecutar en su navegador.
• output representa una salida de un programa, probablemente ejecutado directamente en el navegador, como una calculadora.
• datagrid representa datos de manera interactiva y permite trabajar dinámicamente con información y cambiar la página respecto a esa información. Será útil sobre todo si se quiere trabajar con aplicaciones que necesiten de bastantes datos a la vez en el lado del cliente.

Elementos multimedia (HTML5)

http://www.anexom.es/tecnologia/diseno-web/las-novedades-de-html5-i/

• audio y video sirven para incrustar un contenido multimedia de sonido o de vídeo, respectivamente. Sin duda uno de los añadidos más interesantes, ya que permite reproducir/controlar vídeos y audios sin necesidad de plugins como el de Flash. Se tratan de manera totalmente nativa como cualquier otro elemento, por ejemplo se pueden incluir enlaces o imágenes dentro de un vídeo. Aunque las implementaciones actuales son un tanto ineficientes, se espera que en un futuro próximo se optimicen. Portales de vídeo como Youtube o Dailymotion ya están empezando a mostrar que un futuro sin Flash es posible (¡y necesario!).
• embed sirve para contenido incrustado pero no nativo, sino ejecutado por plugins como el de Flash. Aunque embed está soportado por casi todos los navegadores desde hace tiempo, es ahora cuando entra parte del estándar y evita el infierno/pelea entre object y embed.
• canvas es un elemento complejo que permite generar gráficos, dibujando elementos dentro de él. Aunque nunca hayas oído hablar de él, seguro que lo has usado alguna vez, por ejemplo de Google Maps. Es un elemento muy potente que dará bastante que hablar en el futuro, y que será el culpable de aplicaciones web espectaculares.

Mejores formularios (HTML5)

http://www.anexom.es/tecnologia/diseno-web/las-novedades-de-html5-i/

El elemento input ha sido ampliado y ahora permite todos estos tipos de datos:

• datetime, datetime-local, date, month, week, time, para que indicar una fecha/hora.
• number para que el usuario indique un número.
• range para indicar un rango entre dos números.
• email para indicar un correo electrónico.
• url para indicar una dirección web.
• search para indicar una búsqueda.
• color para indicar un color.

Lo más interesante de esto es que los navegadores podrán implementar interfaces específicas para cada tipo de dato, por ejemplo una fecha o un color se podrán indicar de manera directa e intuitiva. Otro ejemplo sería el teclado del iPhone, que muestra unos símbolos u otros dependiendo de si es un texto normal, un email (añade @ y el punto) o una url (añade la barra y el punto com), y que por tanto gana mucho con este estándar.

La diferencia semántica (HTML 5)

Veremos que para la inserción de elementos multimedia HTML 5 aporta novedades interesantes pero centrémosnos en la diferencia semántica...

http://www.anexom.es/tecnologia/diseno-web/las-novedades-de-html5-i/

Hoy en día se abusa bastante del elemento div, que nos permite estructurar una web en bloques. En HTML5 hay varios elementos que sirven para estructurar mejor una página web, estableciendo qué es cada sección, y reemplazando en muchas ocasiones a div. Con este extra de semántica, será mucho más coherente y fácil de entender por otras personas. Y lo que es más importante, será trivial de entender para una máquina, dándole más importancia a unas secciones y pudiendo jugar con esos datos automáticamente. Concretamente, la tarea de un buscador será mucho más fácil, pero cualquier aplicación que “lea” páginas web se beneficiará. Estos son los elementos:

• section representa una sección “general” dentro de un documento o aplicación, como un capítulo de un libro. Puede contener subsecciones y si lo acompañamos de h1-h6 podemos estructurar mejor toda la página.
• article representa un contenido independiente en un documento, el caso más claro son las entradas de un blog o las noticias de un periódico online. Así, dentro de la portada podremos tener varios artículos demarcados semánticamente, por lo que una herramienta puede extraerlos fácilmente.
• aside representa un contenido que está muy poco relacionado con el resto de la página, como una barra lateral. Esencial para delimitar el contenido “importante” del contenido “de apoyo”, haciendo más caso al primero que al segundo.
• header representa la cabecera de una sección, y es de suponer que se le dé más importancia que al resto, sobre todo si la sección es un artículo.
• footer representa el pié de una sección, con información acerca de la página/sección que poco tiene que ver con el contenido de la página, como el autor, el copyright o el año.
• nav representa una sección dedicada a la navegación entre el sitio, como la típica barra superior de los periódicos.

Gadgets de iconos fijos

http://elescaparatederosa.blogspot.com/2010/09/gadget-de-iconos-fijo.html

A solicitud de varias personas explicaré como colocar un gadget de iconos fijos en nuestro blog.
El gadget se mostrará a la derecha de la pantalla y se mantendrá fijo mientras subimos y bajamos usando la barra de scroll para ver los contenidos del blog.

En el gadget están incluidas las imágenes que podéis usar si así lo queréis, aunque será muy fácil utilizar otras que os gusten más.
Las que he utilizado (por si queréis añadir alguna más al gadget del mismo diseño) podéis encontrarlas en Iconspedía.

http://elescaparatederosa.blogspot.com/2010/09/gadget-de-iconos-fijo.html

Manual para la instalación de Ubuntu

manual para la instalación de Ubuntu (descargar / ver pdf )

Vamos a ver la instalación de Ubuntu 10.04 paso a paso partiendo de un equipo con Windows 7 y dos particiones ya creadas, que es la configuración que traen por defecto muchos equipos actualmente. Y además el particionado del disco duro va a dejar de tener secretos porque lo vamos a ver con todo lujo de detalles y todas las opciones posibles.

• Preparar Windows

• ¿32 bits o 64 bits?

• Descargar Ubuntu 10.04

• Grabar Ubuntu 10.04 en una memoria USB o en un CD

• Instalar Ubuntu 10.04

• Arrancar el equipo con Ubuntu 10.04 instalado

Descargar Ubuntu

http://www.guia-ubuntu.org/index.php?title=Descargar_Ubuntu

La última versión estable de Ubuntu se conoce como Ubuntu 10.04 LTS o Lucid Lynx (popularmente Lucid). Se puede obtener de distintas maneras y en distintos formatos específicos.

Ubuntu ofrece nuevas versiones estables cada 6 meses (véase preguntas frecuentes). Y cada 4 versiones, osea cada 2 años, una con sorporte LTS, Long Term Support, es decir, una versión especial que ofrece actualizaciones de seguridad y de mantenimiento durante 3 años para las versiones de usuarios domésticos y 5 años para las versiones destinadas a servidores.