IdeasWeb.com.ve Blog

Primeros pasos en HTML (Pt. 1)

mprince — Fri, 22 Jul 2011 23:01:07 +0000

Hola, a partir de hoy estaré compartiendo con ustedes algunas de mis ideas web, producto de algunos años de experiencia en el desarrollo de web sites, esta vez hablaremos del HTML, el lenguaje base para todo el desarrollo web y por supuesto uno de los mas sencillos y fáciles de aprender, el siguiente manual fue con el que aprendí y hasta el sol del hoy aún lo consulto cuando se me olvida algo.

El lenguaje se maneja a través de etiquetas, tenemos 2 tipos, etiquetas que abren y cierran, así como etiquetas que no hace falta cerrarlas, para abrir una etiqueta lo hacemos de la siguiente forma y para cerrar colocamos una barra (/) antes del nombre de la etiqueta , entre la apertura y el cierre de las etiquetas va el contenido, mas adelante veremos como son estos contenidos y como es su construcción, a su vez dentro de cada etiqueta existen atributos y por cada atributo propiedades, podemos colocar tantos atributos como necesitemos en una etiqueta, una etiqueta con un atributo se vería así:

contenido

Empecemos entonces.

Todos nuestros documentos HTML deben tener esta etiqueta, es de uso simple y sin cierre. Luego del atributo PUBLIC, se declara el tipo de documento, las propiedades son muchas, aquí pueden encontrar algunas http://www.desarrolloweb.com/articulos/1818.php

Existe un auxiliar para los desarrolladores que son los comentarios, tenemos una etiqueta exclusivamente para hacer estos comentarios, los mismos son ignorados por el navegador, éste no los interpreta y por ende no los ve el usuario. Su construcción es sencilla. Abrimos la etiqueta de la siguiente manera “” y cerramos así “–>“, Ejm:

No subestimen esta etiqueta, nos sirve para documentar un archivo, para guiarnos y para incluir mensajes dentro de nuestro documento HTML.

Para indicar que nuestro documento es HTML tenemos la etiqueta , debe estar al principio, luego de la etiqueta y debemos cerrarla al final de nuestro documento de la siguiente forma ..

Una etiqueta importante es , ésta nos sirve para indicar cierto material que manejaremos en nuestro documento (archivos de Javascript externo, hojas de estilos, favicon, entre otras) y configuración básica del mismo. Es una etiqueta con apertura y cierre. Ejm:

CONTENIDO

Ahora les indico cuales son los parámetros que indicaremos dentro de nuestra etiqueta .

 Con esta etiqueta colocamos el titulo del documento, este titulo aparecerá en la ventana de nuestro navegador. Ejm: <title> ideasweb.com.ve – El blog del desarrollo web

Ahora los , son etiquetas sin cierre y se usan para indicar algunas características del documento, son súper importantes. Ejm:

Ejemplos del uso de los meta son los siguientes:

Esto nos sirve para indicar claves para los buscadores, donde ven “palabra 1, palabra 2, palabra 3″ son las claves que le indican a los buscadores el contenido de nuestro site, si queremos indicar que es de tecnología, esta el siguiente ejemplo:

Les recomiendo siempre usar palabras solas, separando con comas (,), reducir en lo posible las frases, esto nos dará mejores resultados. Una vez el buscador encuentre nuestro site debemos indicarle la descripción del mismo. Ejm:

Esto también nos servirá al momento de incluir en nuestro site botones de social media como el botón “Like” de Facebook, ya que al compartir nuestro enlace la descripción que aparecerá en el muro de quienes hagan like en nuestra pagina será la descripción que hagamos con este meta tag. En próximos posts profundizaremos en los meta tags que nos brindan muchas posibilidades para configurar nuestros documentos.

Una vez indiquemos los y cerremos la etiqueta () debemos indicar en , esta etiqueta debe ser una especie de marco de todo el contenido de nuestro sitio, todo nuestro contenido debe ir dentro de esta etiqueta. Esta etiqueta es de las que tiene atributos y propiedades que indicaremos como les comente una líneas mas arriba. Aquí nuestro contenido Los atributos de esta etiqueta son simples: Para colocar un color de fondo en nuestro site, usamos bgcolor este color puede expresarse de forma hexadecimal así como también indicando RGB, pero para no hacer esto mas complicado trabajaremos con hexadecimales por el momento, para indicar color abrimos el atributo bgcolor, indicamos que vamos a colocar una propiedad colocando (=”), agregamos un gris que en código hexadecimal es #CCCCCC y cerramos la propiedad con comillas (“), Ejm:

Esta hará que nuestro documento tenga como color de fondo el gris, por defecto este color es blanco a menos que indiquemos su cambio, los colores solo son limitados por nosotros mismos, podemos usar cualquier color que consideremos mejor para nuestro site. Aquí les dejo algunos colores:

Rojo = #FF0000

Azul = #0000FF

Amarillo = #FFFF00

Verde = #00FF00

Negro = #000000

Otra forma de indicar fondo de nuestro site es usando background, con esta no indicaremos color, aquí indicaremos una imagen, debemos indicar la ubicación (prefriblemente en el mismo directorio o carpeta) y la extensión, esta puede ser jpg, png o gif, Ejm:

Ahora los márgenes, los básicos y con los que deberíamos trabajar por el momento son el topmargin y el leftmargin, este es el margen que habrá entre el contenido de nuestro site y la ventana del navegador, la propiedad se indica en pixels que es la unidad de medida mas usada en web. Para indicar margen superior usamos topmargin y para el margen izquierda lefmargin, Ejm:

Esto no dará como resultado que el contenido se mostrara a 100 pixels hacia debajo y 200 hacia la derecha de nuestro navegador.

Existe una extensión de nuestro atributo background, este es bgproperties, Ejm:

Esto hará que nuestro fondo una vez indicado con el atributo background se fije al fondo y no se desplace.

En la etiqueta también podemos indicar colores de nuestro enlaces. Para especificar el color de las direcciones en todo el documento usaremos link, definimos su color de la siguiente forma:

Esto hará que todos los enlaces en nuestro documento sean de color rojo y con la etiqueta vlink indicaremos que color adoptaran los enlaces de nuestro documento una vez hayan sido visitados, Ejm:

Esto hará que nuestros enlaces ya visitados tomen el color verde.

Por último indicaremos el color de nuestros textos en general, con text, aquí indicaremos el color que adoptarán todos los textos de nuestro documento sin contar los enlaces, Ejm:

De esta forma nuestros textos en general tomarán el color azul.

Terminamos por esta vez, en un próximo post les contaré el resto de los atributos de la etiqueta y continuamos con el resto, espero les sirva.

Les recuerdo mi cuenta en twitter @manuelprince y por supuesto @TusIdeasWeb, si el post les gustó tienen aquí abajo enlaces para compartir, nos leemos.

AS3: Cómo añadir un MovieClip desde la librería pasando como parámetro un String

admin — Tue, 01 Feb 2011 19:37:10 +0000

Hola, mundo!

A menudo nos encontramos con este problema, tienes varios objetos de la librería listos para ser llamados dinámicamente en tiempo de ejecución y para ello tienes una matriz de tipo texto.

Cómo hacer en este caso? Existe una función llamada getDefinitionByName que pertenece al paquete flash.utils. Tiene un solo parámetro String que es el nombre de la clase en la librería y el valor que regresa es de tipo Class. La podemos usar de la siguiente forma:

import flash.utils.getDefinitionByName; var clase:Class=getDefinitionByName("laClase") as Class; //Suponiendo que tu objeto se referencie como "laClase" var miMovie:MovieClip=new clase() as MovieClip; //Lo casteamos como MovieClip, de otra forma mostraría un Warning addChild(miMovie);

¡Y eso es todo! Espero les sirva, ¡hasta la próxima!

Android: Error añadiendo una cuenta Google adicional

Alexis — Wed, 26 Jan 2011 18:07:08 +0000

¡Hola a todos!

Hace un par de semanas adquirí vía la Tienda Virtual de Movilnet (me pareció un excelente servicio) mi nuevo teléfono HTC Magic. La configuración es sencilla, las aplicaciones muy variadas (el Android Market está bien surtido) y todo en líneas generales era genial.

Mi problema comenzó esta mañana (26/01/11) cuando me sucedió algo bastante extraño. Decidí agregar la cuenta de email de mi trabajo, que funciona con Google Accounts, para revisarlo cuando no esté en la oficina. Entré en Google Mail e intenté añadir la cuenta.

Al final del Wizard, me dio un error diciendo que no había conexión con el servidor (textual: “Can’t establish a reliable data connection to the server. This could be a temporary problem or your SIM card may not be provisioned for data services. If it continues, call Customer Care.”), desconecté, conecté, fui atrás, reintenté y no lograba que funcionara. Visité varios foros de ayuda que tienen muchas personas con el mismo problema (algunos mensajes databan de hace 2 años) y recomendaban hacer un reset del sistema, que implica perder toda la data del teléfono.

La verdad no quería someterme a respaldar todos mis datos y sincronizar todo de nuevo, así que seguí buscando y encontré un artículo brillante con la solución más una crítica al OpenSource bien fuerte: “El problema con mi android y un ejemplo del Software Propietario sobre el Software Libre” (En inglés: “My Android problem and a case for proprietary over opensource”, lo encuentran aquí).

Al final la solución es muy sencilla, tenía que abrir Youtube y conectarme con la otra cuenta: automáticamente queda añadida a la lista de Google Accounts.

¡Hasta la próxima!

AS3: Conoce la diferencia entre ROLL_OVER y MOUSE_OVER

Alexis — Mon, 09 Aug 2010 17:13:09 +0000

¡Saludos, usuarios!

Este post lo voy a dedicar a 2 eventos de flash, que en aparicencia son similares, pero tienen una diferencia fundamental para diferentes circunstancias.

El evento MOUSE_OVER es despachado cuando el cursor entra a un displayObject o a cualquiera de sus hijos. Es más, cuando pasamos el cursor por el MovieClip despacha un MOUSE_OVER, y cuando lo pasamos por un hijo, es despachado un MOUSE_OUT y al momento un MOUSE_OVER indicando que entraste de nuevo.

Por el contrario, el evento ROLL_OVER sólo se despacha cuando entras al displayObject, sin importar los eventos de sus hijos, que puedes capturar en eventos apartes. Al colocarle el listener de ROLL_OVER a un MovieClip, tendremos sólo una llamada a este evento cuando entre el cursor a él y se disparará de nuevo sólo cuando el cursor haya salido y haya entrado de nuevo.

Esta diferencia de atender o no a los hijos de un objeto, es fundamental a la hora de decidir cuál listener es más beneficioso para nuestras necesidades.

En el ejemplo adjunto, en la salida de la película exportada, puedes ver con detalle esta diferencia.

ejemplo_ro_mo.zip

Tamaño de la descarga: 6.1KB

Instrucciones: Descarga el ejemplo, descomprímelo y abre el fla incluido.

Huawei e1552 en ubuntu Lucid Lynx

Alexis — Wed, 04 Aug 2010 19:16:18 +0000

Siguiendo las instrucciones en http://blog.qedx.com/2010/07/huawei-e1552-on-ubuntu-lucid.html, logré hacer que mi Ubuntu Lucid reconociera por defecto a mi dispositivo USB e1552 como módem, y les traduzco a continuación.

Desde el terminal, creas un arhivo de reglas para udev haciendo:

$ sudo nano /etc/udev/rules.d/60-huawei-usb-3g-modem.rules

Te pedirá tu password de administrador, y una vez esté abierto el archivo, introduce el siguiente contenido:

SUBSYSTEM=="usb", ATTR{idVendor}=="12d1", ATTR{idProduct}=="1446", RUN+="/lib/udev/modem-modeswitch -v 0x%s{idVendor} -p 0x%s{idProduct} -t option-zerocd"

Salvas haciendo Ctrl + O, cierras haciendo Ctrl + X, y reinicias udev

$ sudo service udev restart

Si tienes conectado el dispositivo, desconéctalo y vuélvelo a conectar, ¡ya debería reconocerlo como Modem de forma automática!

Tutorial: FLV estirado proporcionalmente en pantalla con AS3

Alexis — Tue, 03 Aug 2010 15:01:11 +0000

¡Saludos!
Alguna vez nos ha tocado (o nos tocará) hacer un site en Flash líquido con video de fondo. Ahora, siempre está el problema de los márgenes incómodos al ensanchar el video, y deformarlo no debe ser opción. Lo mejor en esos casos es que el video sangre (término de impresión) para llenar toda la pantalla.

En este tutorial paso a paso, conseguirás como hacerlo de forma sencilla!

Para hacer este estiramiento con un video FLV en pantalla sin bordes molestos ni distorsiones en el video, es necesario seguir los siguientes pasos:

Inserta el componente FLVPLayback en escena, en el MovieClip que lo necesites. Para encontrar éste y otros componentes, tienes que mostrar el panel “Components”, si no lo ves, debes buscar en el menú de Flash a Windows/Components, en Windows el atajo de teclado es Ctrl+F7.

Modifica los parámetros del componente:

Coloca la ruta a tu archivo, para la mayoría de los casos lo mejor es que sea relativa a la ubicación del swf. Flash CS5 hace ésto para tí, solo asegúrate que coloques bien la ruta a tu swf en las opciones de publicación.

En scaleMode, coloca “exactFit”

En align, “center”

Haz click en “skin”, y dentro del cuadro emergente que te aparece busca “None” dentro de “skin”. Acepta.

Dale un nombre de instancia al componente, para éste ejemplo lo llamaremos “miVideo”.

Selecciona el primer frame del MovieClip, Abre el panel de acciones, e inserta el siguiente código:

//Importando las clases a utilizar import flash.events.Event; import fl.video.VideoEvent; import flash.display.StageScaleMode; import flash.display.StageAlign; function redimensionarVideo(){ //Para una manipulación sencilla, //introducimos ancho y alto del stage en variables. //Observa que estamos usando las propiedades //stageWidth y stageHeight de stage, éstas representan //el ancho y alto Real del stage var anchoStage=stage.stageWidth; var altoStage=stage.stageHeight; //Calculamos si el video tiene proporción "wide" //es decir, que el ancho es mayor que el alto. //Usamos preferredWidth y preferredHeight para obtener //el ancho y alto original del video var isVideoWide:Boolean = miVideo.preferredWidth > miVideo.preferredHeight; if ((isVideoWide)) { //Si el video es "wide", estiramos al alto del stage miVideo.registrationHeight = altoStage; //Acomodamos la proporción a lo ancho de acuerdo a scaleY miVideo.registrationWidth = miVideo.preferredWidth * miVideo.scaleY; if (miVideo.registrationWidth < anchoStage) { //Si el ancho queda muy corto, calulamos cuánto sobra, //luego se lo sumamos a la altura y luego acomodamos proporción miVideo.registrationHeight += anchoStage-miVideo.registrationWidth; miVideo.registrationWidth = miVideo.preferredWidth * miVideo.scaleY; } }else if (!isVideoWide) { //Si por el contrario el video no es wide, //estiramos el video al ancho, ajustamos el alto miVideo.registrationWidth = anchoStage; miVideo.registrationHeight = miVideo.preferredHeight * miVideo.scaleX; if (miVideo.registrationHeight < altoStage) { //Y si sobra un margen arriba y abajo, //calculamos cuanto sobra, se lo sumamos al ancho //y ajustamos proporcion al alto miVideo.registrationWidth += altoStage - miVideo.registrationHeight; miVideo.registrationHeight = miVideo.preferredHeight * miVideo.scaleX; } } //Centramos el video miVideo.x=(anchoStage-miVideo.width)/2; } function stageResized(evt:Event){ if(miVideo.preferredHeight!=-1){ redimensionarVideo(); } } function videoListo(evt:VideoEvent){ redimensionarVideo(); } //Le decimos al stage que no escale y se alinee //arriba y a la izquierda, Ojo, esto es necesario para //todo site líquido básico stage.scaleMode=StageScaleMode.NO_SCALE; stage.align=StageAlign.TOP_LEFT; //Agregamos un listener al video del evento READY //del VideoEvent, que indica que el video esta listo para //recibir órdenes, si escuchamos este evento, //el valor de preferredWidth y preferredHeight sería -1 miVideo.addEventListener(VideoEvent.READY,videoListo); //Agregamos otro listener al stage del evento RESIZE //de la clase Event this.stage.addEventListener(Event.RESIZE,stageResized);

El código esta muy bien comentado, así que si se pierden, pregunten!
Hasta la próxima!

El robot R2 twitteará desde el espacio

admin — Tue, 03 Aug 2010 10:27:18 +0000

El robot R-2 que la NASA ha diseñado para convertirse en el primer androide que forme parte de la tripulación de la Estación Espacial Internacional (EEI) ya está preparado para contar su aventura espacial a través de twitter.

^“Hola, mi nombre es Robonaut 2 – R2, para abreviar”, escribió el androide con ayuda de su equipo de humanos en la que animó a todos a seguir sus aventuras.”¡Sigue mis aventuras aquí mientras me preparo para el espacio!”, añadió.El androide, que pesa alrededor de 150 kilogramos y tiene cabeza, torso, brazos y piernas, no tiene voz pero podrá explicar en los 140 caracteres que ofrece la plataforma twitter cómo le va con sus compañeros, con los que orbitará a 400 kilómetros de la Tierra.

Y es que Robonaut, llamado R2 (igual que el entrañable robot de la saga de películas “Star Wars”), ha comenzado a enviar actualizaciones sobre su próxima misión en su nueva cuenta de twitter @ AstroRobonaut.

Con la ayuda de su equipo de apoyo, R2 documentará los preparativos para el lanzamiento y sus trabajos a bordo de la Estación Espacial Internacional.

Robonaut viajará a bordo del Discovery el próximo otoño para quedarse en la Estación Espacial Internacional para dar a la NASA una mayor comprensión de la interacción entre los humanos y el robot, aunque sus operaciones estarán limitadas al laboratorio “Destiny”.

El robot, que nació el 7 de mayo de 2010, tiene apariencia humana, luce un casco dorado, lleva el escudo de la NASA en su pecho, y ahora será el más moderno de su serie conectado a twitter con sus seguidores humanos.

Robonaut 2 fue creado gracias a un proyecto conjunto entre la NASA y General Motors, que comenzó en 2007.

R2 originalmente estaba destinado a ser un prototipo en la Tierra, pero los ingenieros querían ver cómo funciona en microgravedad por lo que será puesto en órbita en la misión S-133 del Discovery.

[There is a video that cannot be displayed in this feed. Visit the blog entry to see the video.]

[There is a video that cannot be displayed in this feed. Visit the blog entry to see the video.]

[There is a video that cannot be displayed in this feed. Visit the blog entry to see the video.]

Vía La Flecha

Bienvenidos a IdeasWeb.com.ve

Alexis — Fri, 30 Jul 2010 20:44:08 +0000

Hola, usuari@s! bienvenid@s al Blog de IdeasWeb, un espacio donde me dedicaré a compartir noticias de tecnología, trucos relacionados al Desarrollo Web y alguna que otra cosa interesante que encuetre en la Web o en la Vida Real™.

Así que, bueno, adelante!!