Inter Navegación » Temas código

Un documento html básico

manu — Sun, 24 Jul 2011 18:22:47 +0000

Hola de nuevo amigos…
Si creais un nuevo documento “Html” con un editor html este os creará un archivo básico que tenga como predeterminado el programa, que por lo general sera algo parecido a las imágenes que muestro a continuación. Este post no es nada más que para mostrar básicamente como se distribuye el interior de un documento Html.
A modo de recordatorio nada más, por que muchos ya sabeis perfectamente como se distribuye el documento, pero otros no lo tienen muy claro y para estos va este recordatorio.

Creamos un documento básico…

Esto es esencia un documento básico, con todo lo necesario para albergar el contenido de una página Web.

Este archivo lo he creado con el editor Html-kit.

Nos indican el tipo de documento…

La parte resaltada en azúl indica el tipo de documento con el que vamos a trabajar, debes saber que existen varios tipos dependiendo de las necesidades para cada página web, unos decidiran por una versión u otra.

Esto solo son unos ejemplos;
Quizás los tipos de documentos más útilizados, las versiones “Xhtml 1″.

< !DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

Este es el estricto…

< !DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

Esto ejemplo muestra el tipo que me ha creado Html-kit de la versión 4;

< !DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

Bueno esto no es más que para recordar, pues los creadores de software al igual que todo, van actualizando sus programas y renovando el tipo predeterminada de “DTD”, aunque la mayoría de los editores html permiten elegir otros tipos de documento.

Arriba

El inicio del documento…

Esta parte muestra el inicio del documento html, aquí estará todo lo que lo compone, la cabaecera, el titulo, las descripciones, el contenido, todo lo que conpone una página Web.

El head, el titulo y otras cosas…

Aquí van un poco los los archivos adjuntos mediante enlaces, el tipo de lenguaje, los script, muchas de las cosas que se anexarán y que no estarán en modo gráfico, solo como resultado. Quiero decir que si escribes la versión del lenguaje del tipo de web que es por ejemplo, esto no estará visible en la página web, solomante en la parte del código si haces una vista de código.

Esta al igual que todo esta parte es muy importante y también que este bien construido, pues de ello dependerá muchas veces por ejemplo el posicionamiento de nuestra página entre otras cosas.

El Body… igual a contenido…

Esta parte alojará la parte visible para los usuarios, en modo gráfico. Aquí entre las etiquetas Body, añadiremos nuestros artículos, nuestras imágenes, comentarios y todo lo que compone una página web.

Arriba

Final del documento…

Bueno esta parte muestra el final del documento html, y de momento no hay mucho que decir, más adelante se hablará de esta parte, pues hay algunos códigos script que solicitan incluir parte de sus códigos en la parte final del documento para su corecto funcionamiento.

Resumen…

Bueno pues esto es un poco básicamente la distribución no sin antes recordar que seguidas estas explicaciones debemos recordar;

Esta organización se puede variar en función de la manera y diseño que queremos dar a nuestra página, pero lo que no se puede variar es las etiquetas obligatorias para cada documento Html, como por ejemplo;
esto lo explicaremos, pero ahora un poco por encima sin agobiar, pues abra tiempo para mirarlo más detenidamente.

a -

a – Es el tipo de documento que vamos a recibir en nuestro navegador.

b -

b - Esto marca el lugar del titulo de la página, es una etiqueta importante para poder ofrecer una descripción del archivo, autores, palabras clave, archivos relacionados css, javascript y muchos más. De este tema también hablaremos más.

c -

c – Bueno aquí es donde incluiremos todo nuestro trabajo, nuestras imágenes, texto, comentarios, formularios, etc. Es el lugar donde se alojará nuestro contenido y pie de página.

Cabecera,

1 – Contenido (content)
2 – Pie de la página (footer)

Arriba

Las Páginas web analizadas con Firebug

manu — Thu, 16 Jun 2011 21:03:30 +0000

Firebug es un complemento para Mozilla Firefox (creo que va más allá), que todo programador cuenta en su cajón desastre, útil por sus características y funcionalidades. Una herramienta eficaz que ponen a nuestro alcance, y que puedes instalar en tu navegador basado en mozilla, sin apenas esfuerzo. Creo que no deberias perderte este complemento si te gusta la programación web, pues podrás ver el código fuente de muchas páginas web de internet. Bueno no todos, pero si el Html, javascript y otros.

Características destacadas de Firebug…

Navegación por el árbol HTML: En vez de presentar el código fuente de la página en una página plana normalmente “infumable” para el usuario corriente, éste complemento representa la página como un sencillo árbol (ver captura) a través del cual el usuario puede navegar expandiendo sus nodos hasta el nivel de detalle que quiera. Además puede editar las etiquetas HTML viendo inmediatamente el efecto del cambio en la página.

Inspección y análisis de partes concretas de la página: Firebug incluye una especie de puntero especial que permite inspeccionar los elementos HTML de la página. Para ello el usuario pulsando el botón de inspeccionar (ver captura) activa esta función y a partir de ahí conforme se desplaza con el ratón por la página puede ver como un recuadro de color azul va identificando el elemento HTML que se encuentra en la posición del ratón a la vez que ve como en la parte inferior se va seleccionando ese elemento dentro del árbol que representa a la página. Si el usuario hace “clic” con el ratón sobre el recuadro azul se mantiene la selección actual y ya puede inspeccionar con calma los detalles del elemento HTML seleccionado.

Inspección y análisis de la jerarquía de hojas de estilo: Tanto si el usuario se desplaza por el árbol HTML como si inspecciona la página con la función de inspeccionar los elementos de página podrá contemplar otra información realmente interesante: en la parte derecha verá la jerarquía de hojas de estilo y los propios estilos empleados en la página (ver captura). Similar a la modificación sobre la marcha del HTML vista antes, puede seleccionar cualquier propiedad de cualquier estilo y manipularla, incluso crear nuevas propiedades viendo de inmediato el resultado de su acción.
La fuente…

Detalle del complemento en acción…

Consola de Firebug explicado al detalle…

La consola de Firebug es el mejor sustituto de los intrusivos alerts de toda la vida. Ya no es necesario detener la ejecución de un código congelando el navegador para ver el valor de un variable o para comprobar si nuestro script pasa por un determinado punto. En su lugar, podemos enviar mensajes personalizados con distintos estados a la consola que nos muestren valores en tiempo de ejecución a la vez que controlamos el flujo de la aplicación.

El icono de Firebug en Mozilla Firefox…

Puedes ver cada una de estas características con más detalle…
en el artículo de Carlos Benítez;
Carlos Benítez Blog

Es un buen artículo, y se ve que se a preocupado de explicar al detalle las funcionalidades.

Firebug para otros navegadores…

Chrome
IE
Más versiones…

Bueno espero que les sirva para decidir si puede ser útil, o no… esta herramienta.

Todo en sistemas LINUX…. lo que no hay en esta Web, creo que no existe….

SI ERES LIBRE… ERES LIBRE DE PENSAR Y DE ELEGIR… (Probervio manuelino art.1 ver.2 pag.233 lin.7 par.izda )

Personaliza el fondo de tu sitio Web

manu — Wed, 23 Feb 2011 01:24:12 +0000

En este artículo quiero comentar algo que seguro que muchos quieren saber algo más de como personalizar el fondo de nuestras páginas Web. Algo que básicamente no tiene mayor problema, pero a efectos del desconocimiento puede llegar a ser una penitencia.

Quiero mostrar como aprovechar los recursos de las etiquetas “Html” y “body”.
Al margen del propio contenido ( las capas div, table etc) de tú página Web, blog, etc.
Por que ya sabes que puedes incluir imágenes al fondo de cualquier tabla, Div, parrafo etc., en otro momento crearé otro artículo sobre esto último, pues supongo que será de interés.

Los pasos para conseguirlo…

Puedes ver en mí web que tengo algunas imágenes mezcladas en el fondo y en el logo, a mí este efecto para mí sitio me parece adecuado y me gusta como lo deje. Si te fijas, al mover el Scroll la imagen del mapa del mundo está fija, por que he utilizado la propiedad (css) “fixed”, con lo cual le digo a la imagen que se quede fija y no se desplace al mover el Scroll.
He creado un documento con un ejemplo sencillo para que puedas ver el resultado que viene aser algo parecido a el fondo de este sitio.
Para ello, he útilizado dos imágenes;
- una imagen con formato jpg que voy a emplear para el primer fondo del documento (Podría útilizar otro formato sin ningún problema) y lo meto en la etiqueta “Html”, escibiendolo en los estilos Css de esta manera;

html{
background:#FCFCFC url(http://www.internavegacion.com/temas_codigo/imagenes/oso.jpg) no-repeat fixed 50% 50%;
}

Explicando el Css de “html”…

Como puedes ver a la etiqueta “Html” le asigno un color de fondo #FCFCFC, luego le pongo la dirección absoluta a la imagen http://www.internavegacion.com/temas_codigo/imagenes/oso.jpg
Para este ejemplo he útilizado una Url absoluta, cuando lo podría haber hecho con una Url relativa al documento, pero para el ejemplo está bien.
Luego le digo a la imagen que no se repita en el documento con la propiedad “no-repeat”, siguiendole la propiedad “fixed” que lo deja fijo en el fondo y quedará estática aunque desplacemos el scroll.
Como último posiciono la imagen en el centro donde quiero ponerla “50% 50%”, o lo que es lo mismo “center center”. Sobre esto último, la posición de la imagen, puedes elegir las medidas que creas oportunas, de eso hablaremos en otro post.

Arriba Volver

La imagen de fondo en el body…

En el body posiciono y escribo la imagen de esta manera;

body {
background: url(http://www.internavegacion.com/temas_codigo/imagenes/lineas.png);
margin:0;
padding:0;
height:100%;
}

en este caso también he colocado una ruta absoluta para la imagen, como no me importa que se repita la imagen, lo dejo sin definir el estado del valor, lo que es lo mismo, sería dejarlo como “repeat”, o sea que se repita. En el caso de que quisiera asignarle otro estado debo esribirlo despues del paréntesis final de la imagen, ya sabes, “no-repeat”, “repeat-x”, “repeat-y”... etc.

Aquí no hay mucho que explicar, solo que dejo predeterminado a “Body” los atributos sin margenes, ni padding, pero si con un alto del 100% del documento, lo cual hace que se repita la imagen con formato “png” en todo el documento.

Bueno, las imágenes que he útilizado para este ejemplo las muestro aquí debajo;

Esta es la que está en el fondo….

Esta es una imagen png que es transparente, en realidad la que muestro aquí no… solo que he hecho una captura mayor para poder ponerla aquí y así poderla ver, recuerda que la imagen real tiene el tamaño de 4 pixeles, y sería dificil poner una captura en su tamaño real, pero para que se pueda ver como es, la captura es mayor.

Aquí le he dado un color blanco al fondo de la imagen para que puedas ver los cuadritos (pixel) con la que he creado la imagen. Creo que aquí en esta captura de aprecia mejor los pixeles grises.
La imagen la he creado con el programa de adobe “Fireworks”, pero se puede hacer con otros editores gráficos, o de imágenes y exportarlo en formato png transparente.

Dejo aquí el resultado del archivo que he creado para este ejemplo es sencillo y básico, pero queda muy bonito y puedes ser muy práctico para nuestros diseños de páginas. Quiero decir que esto me recuerda al funcionamiento de los editores gráficos en su forma de trabajar con capas. Creo que tiene mucha similitud aunque son dos aplicaciones diferentes, primero la capa de debajo, luego otra encima que no afecte a la de debajo y así hasta conseguir el efecto que deseamos.

Arriba Volver

Bueno espero que te sirva de mucho este artículo, y recuerda si tienes alguna pregunta escribe tú duda aquí en los comentarios.

Un saludo a todos.

Modificación a ImageShack upload box

manu — Sun, 19 Sep 2010 14:58:23 +0000

Cambios para ImageShack upload box …

Hola amigos, quiero añadir una pequeña aportación para este mod “ImageShack upload box”.
Desde mi punto de vista, este mod (Iframe para este caso) lo que hace es, facilitar al usuario a subir las imágenes a ImageShack desde y donde se encuentre editando un mensaje, o post. Lo hace ayudando al usuario a agilizar la subida de imágenes poniendo el box de imageShack al alcance de la mano, no haciendo pasar mucho tiempo al usuario buscando entre sus favoritos, marcadores el enlace de imageShack para subir imágenes al foro.

Primero decir que a consecuencia de que mi amigo “Michan” coloco en su foro este mod que comentamos aquí , se me ha ocurrido colocar en el tema un cambio personal que le hice al mod. La colocación de este “IFRAME” de ImageShack, apenas configurable, que si lo colocas se queda tal cuál, y en algunos casos no se posiciona bien si no lo maquetas un poco con CSS y HTML.

El mod viene de este sitio, http://phpbbegypt.com/ y no quiero restar protagonismo al creador del mod, por que de él parte la idea, yo solo me limito a maquetarlo un poco a mi manera para que encaje de otra forma y añadirle otras funciones, y así poder configurarlo para colocarlo de otra manera, que quede un poco más integrado al lado de las cajas del mensaje del foro, nada más.

Este cambio y el mod, funcionan igual en plantillas basadas en Subsilver2 y Prosilver, por que es un proceso independiente con sus propios estilos, funcionará perfecto siempre y cuando no cindidan los estilos css,o identificadores para el html y lo coloques es su sitio correspondiente como indica el autor del mod. El autor indica en el mod los pasos a seguir apara colocar la parte de código y el “Iframe”, en el mod d eaquí abajo se indica en donde hay que colocarlo para cada estilo, según el autor.

El archivo de phpbbegypt.com, en su interior se encuentra este código del mod y aparte de las descripciones escritas por el autor;

#—–[ OPEN ]——————————————
#
styles/subsilver2/template/posting_body.html
#
#—–[ FIND ]——————————————
#
{MESSAGE}
#
#—–[ AFTER,ADD ]——————————————
#

#
#—–[ OPEN]——————————————
#
styles/prosilver/template/posting_editor.html
#
#—–[ FIND ]——————————————
#
{MESSAGE}{DRAFT_MESSAGE}{SIGNATURE}
#
#—–[ AFTER,ADD ]——————————————
#

#
#—–[ SAVE/CLOSE ALL FILES ]——————————–
#
# EoM

Aquí puedes ver el iframe y funcionamiento de este mod

Arriba Volver

Bien yo lo que he hecho a sido …

- Que imageShack se vea en el “Iframe” parcial, o completamente dependiendo del ancho de video (resolución de pantalla) que estes útilizando en ese momento.
- Que ImageShack Upload se abra en otra ventana si así lo deseas, y poder subir tus imágenes.
- Integrar bajo la caja el cuerpo del mesaje el iframe con las mismas medidas, queda bien colocado.
Estos son los cambios mejorados a mi modo de ver, los que he hecho para este mod con su autor propio.

Refrescar la página …		Añadir Imágenes en el comentario

Aquí puedes ver el código los cambios para decorar el mod …

Bueno, aquí te dejo el código que debes incluir si decides colocar este pequeño cambio.
Si tienes alguna duda comentalo en el foro de Inter Navegación y se responderá.
Creo que es una buena opción, facilita mucho el trabajo para subir una imagen al foro, pues es darle cilic y te aparece la ventana sin ni siquiera cambiar en la que te encuentras, y desde hay gestionar la imagen.

Refrescar la página …		Añadir Imágenes en el comentario

Arriba Volver

Un pequeño detalle a tener en cuenta…

Si te fijas en la imagen que es una captura del código que he incuido arriba, las comillas simples son diferentes, la de la izquierda y la de la derecha.
Por alguna razón al añadir el código aquí se transforma, una si y otra no… el por que…??? ahora no lo se, pero igual lo descubrimos, recuerdalo si colocas este código, debes cambiarlas por la comillas simples que se encuentran debajo del signo interrogación “?” de tú teclado.
Nada más… no se la razón pero es así o me lo parece a mí, las he cambiado y se vuelven a transformar, curioso…!!!.
Son cuatro comillas en las que debes fijarte del “script”, el target si que funciona, pero no el tamaño de la ventana al tener ese otro tipo de comillas.
Disfrutalo…!!!

Si te ha gustado comentalo aquí, ayudas a seguir icluyendo temas que pueden interesarte.
Saludos.

Arriba Volver

Imagen de sustitución con Script…

manu — Sun, 04 Jul 2010 20:26:27 +0000

Crea una imagen de sustitución con Dreamweaver…

Ejemplo y comentarios para la herramienta de Dreamweaver; "Imagen de sustitución" (Rollover).
Imagen que se cambia al pasar el mouse por encima.

- Manos a la Obra…

Quiero poneros dos ejemplos diferentes para la sustitución de una imagen al pasar el mouse por encima…
Lo vamos a hacer de dos formas diferentes;

1 – Con las herramientas de Dreamweaver…
mediante un Script que genera automáticamente Dreamweaver

Quiero ver donde se encuentra esta opción…

2 – Mediante código Css manualmente… dentro o fuera del archivo.
Esta opción está muy bien, pero tiene algunas limitaciones.

Arriba Volver

Bueno, si quereis probar como funciona en Dreamweaver,
sigue estos pasos y podrás comprobar personalmente esta herramienta…

Consigue dos imágenes de similares medidas para el ejemplo, luego puedes hacer tus propias comprobaciones sobre los tamaños y otros en este tipo de acabados.
El formato de las imágenes da igual, lo único que debes escribir la extensión (formato de la Imagen) en el…

Url-relativa-absoluta/imagen-y-formato" />

Bueno dicho esto empezamos con las comprobaciones, y a ver como nos sale este asunto…;
Crea un nuevo archivo Html vacio, si no lo tienes abierto ya.

Para esta prueba haz como te apetezca, crea un parrafo
Para alojar la imagen de prueba
,
o bien haz clic en cualquier parte del documento, para luego elejgir "Insertar" de la barra de harramientas como en el ejemplo de la imagen anterior, y en el menú contextual que te aparece elige la opción; "Objetos de Imagen" y luego "Imagen de sustitución".

- Hacto seguido te parecerá la ventana de debajo para poder crearla…

Arriba Volver

Esto es muy sencillo de crear, con la ayuda del asistente está "Chupao…"
Antes de seguir quiero decirte que en cuanto rellenes los campos y aceptes, tu aplicación creará un Script automáticamente, y lo alojará entre el
de tu documento, entre las etiquetas obligatorias como son…

Bien vamos a rellenar los campos, teniendo en cuenta que has preparado las imágenes para las pruebas, y puedes ver esta ventana como la imagen que he puesto arriba.

Quiero ver más o menos como rellenar los campos…

- Rellenando los campos obligatorios…

- Nombre de la imagen…
Sencillo, elige un nombre cualquiera.

- Imagen original…
Esta el la imagen que ves primero.Puedes poner una Url relativa al documento utilizando el asistente con el botón "Examinar", o puedes escribir una Url absoluta a tu imagen, tipo "http://www.internavegacion.com"

- Imagen de sustitución…
Esta el la imagen que se verá al pasar el mouse por encima, es la que sustituye a la primera. Puedes seguir los pasos para localizar la imagen de la misma forma que en el caso anterior.

- Texto alternativo…
Esta parte es para la descripción de la imagen, o la información que quieres mostrar sobre la imagen.

- Al hacerse clic, ir a la Url…
Esta parte es la que enlazará la imagen con la Web u otro sitio que quieres abrir al hacer clic.
Todos estos son pasos sencillos para crear un rollover con dos imágenes.

Una vez rellenado los campos correctamente, en cuanto aceptes se creará el Script para tal ejemplo.Se situará entre las etiquetas .

Recuerda que puedes crear un documento en donde alojar este Script y enlazarlo en tu documento mediante;

Arriba Volver

Bueno, yo he colocado una imagen para el ejemplo y puedes comprobarlo aquí pasando el mouse por encima…

El código que se ha creado en el documento áctual es este para esta imagen cambiante…

Bueno estos son los pasos para crear en Dreamweaver una imagen de sustitución, más bien es la propia aplicación la que hace todo el trabajo.No se exactamente en la medida que se útiliza este tipo de script para sustituir una imagen, pero si creo que con CSS se pueden hacer grandes acabados.
Lo vemos en el archivo siguiente, o desde la portada de Inter Navegación.

Quiero recordar que este Script es creado integramente por el programa Dreamweaver CS, a sea que los creditos son para la Gente de Adobe, que la verdad hacen grandes aplicaciones para el diseño.

Arriba Volver

Imagen de Sustitución con estilos CSS…

manu — Sun, 04 Jul 2010 20:18:55 +0000

En el ejemplo anterior vimos como sustituir una imagen con la herramienta de Dreamweaver, "Imagen de sustitución".
Ahora intentaré explicar como hacer algo parecido mediante CSS, creo que está bien conocer los pasos sencillos, pero como comente antes si que existen algunas limitaciones, que para corregirlas hacen falta hacer algunos cambios en los documentos, y útilizar conjuntamente Html, y CSS.Siempre y cuando vallamos a colocar una imagen cambiante y con un enlace a un sitio Web cualquiera, o internamente.
Lo vemos…

- Ejemplos de sustitución de una imagen con estilos CSS…

Para preparar este ejemplo sencillo, no creo que nos haga falta muchas cosas, pero si te aconsejo que elijas dos imágenes del mismo tamaño, para poder dejar bien colocado nuestro ejemplo, luego puedes hacer tus propias comprobaciones con imágenes diferentes en tamaño y medidas, incluso prácticar colocar dos imagenes en Urls totalmente distintas, cosas así, como a mí me gusta, crear, quitar, poner y volver a empezar…

Crearemos una capa
para esta comprobación con Imágenes cambiantes, y también colocaremos las imágenes entre
y así podremos ver la diferencia entre una y otra etiqueta. Para los dos ejmplos tendrán los mismos estilos.

Recuerda que para colocar una imagen cambiante lo podrías hacer de maneras diferentes, este ejmplo lo creo en una capa
como comente y a modo de curiosidad, que funciona perfectamente el div:hover, lo único debemos emplear algún truquillo para posicionar la imagen que vamos a útilizar como enlace (ancla -> ) donde queremos ponerla.

Aviso;    Este ejemplo puede que no funcione bien en IE6, debido a alguna incompatibilidad…

- Empezamos…
Crea un archivo html nuevo desde el editor que te encuentres, o bien puedes escribir, o copiar el código que vamos a crear para este ejemplo.
Recuerda, esto no es más que un ejemplo entre capas Div, para ver que pasa y de paso aprendemos cosas nuevas.

Yo para mi ejemplo he elegido estas imágenes, total tres…
La imagen del texto es mucho más pesada que las otras dos que se cambiarán, pesa alrededor de 60KB, y las de las cajas son mayores en tamaño, pero no en peso pues no pasan de los 10KB, pero para el ejemplo nos vale, pero si quisieseis hacer un menú de navegación por ejemplo con este tipo de imagen con sombras, retardarian un poco la carga del menú, casi seguro.No sería aconsejable.
También en vez de usar la imagen puedes usar texto escrito, por que mi intención es poner la imagen como enlace para enlazarla por ejemplo con mi Web.

Arriba Volver

Hice un comentario antes, sobre que en Css está un poco mas limitado el tema de la sustitución de la imagen con enlace , para ello debemos apoyarnos en html, pues dentro de las hojas CSS el no funciona y a diferencia del Script de sustitución y enlace unido que creo Dreamweaver en el ejemplo anterior, en css solo podremos colocar las imagenes cambiantes.Explico como hacerlo…

Bueno ya he creado la capa y la tabla, pongo los dos ejemplos con los mismos estilos y vemos que podemos hacer para que nos quede en el centro el enlace con la imagen.
Lo pongo tal cual queda al escribir el código…

- Los estilos que he útilizado para los dos ejemplos…

Vemos en las imagenes de debajo como nos queda dentro de la capa
y , lo cual nos indica una diferencia entre ellos sobre la imagen "caja", los dos tienen los mismos estilos Css, pero la capa Div nos coloca la imagen arriba a la izquierda, y el
Html ->>
Espero se me entienda esta parte, también se puede escribir en la hoja css, con clases, con identificadores, pero es más sencillo a mi modo de ver como lo hago arriba, pero si son varias, o muchas imágenes que se tratan de esta manera, entonces debes organizarte, y crear clases o propiedades para ese evento.
Css ->> td {text-align:center;} esto centraría la imagen o el contenido de la tabla de datos.
Css ->> table {text-align:center;} esto centraría la imagen y todo el contenido de la tabla, lo cual puede que no te interese, pero hay va el ejemplo…
- Seguimos por centrar la imagen en la capa Div…
Para centrar la imagen en la capa Div, he decidido hacerlo sin margenes.
Para el ejemplo he conseguido centrarla diciendole a la imagen que tenga un salto de linea, y he conseguido un buen resultado.
Luego le asignado un relleno (padding) que rodeará la imágen dentro de
en una medida equivalente a dividir la capa en tres partes más o menos, y he conseguido el resultado de la imagen de arriba, en donde pone "Imágen dentro de la capa Div", y podemos ver el la imagen siguiente como me ha quedado más, o menos centrada.
La parte que se visualiza en el centro es la imagen de texto que lleva el enlace como comente antes. Si te fijas el relleno se a creado al rededor de la imagen con los valores porcentuales que le indico a la tabla de datos
de la tabla nos coloca la imagen en el centro del alto (height), no del ancho (wldth).
Esto no son más que observaciones que se deben tener en cuenta, son interesantes, pues por defecto nos centra la imagen desde arriba, y la capa
hace su función normal, empezar de arriba y a la izquierda..

Arriba Volver

Este es el ejemplo de como se queda en la capa
…
La imagen claro… como está colocado el texto y el código, es cosa mía…

El código que he escrito en Html para esta capa
…

Para esta tabla…

Bueno como hemos podido comprobar, la tabla nos centra la imagen del texto pero la deja en la parte izquierda, (left), y la capa (div), nos coloca la imagen arriba y a la izquierda… lo que son procesos normales para este tipo de etiquetas html.

En realidad para el caso de la tabla, nos ha centrado la imagen la tabla de datos
, que por defecto este será el resultado en un principio, centrará todo lo que se encuentre en el interior, salvo que se le diga lo contrario mediante propiedades, y valores CSS.

Como comente antes, al colocar las imágenes de esta manera limitaba un poco el manejo total para las imágenes dentro de la capa y la tabla, pues seguro deberiamos útilzar estilos css para poder centrarlas.

Imagen dentro de la capa DIV…
Tenemos que tener en cuenta que estamos útilizando tres imágenes, una, en la clase .caja{ }, otra en la clase .caja:hover{ } para que se cambie al pasar el mouse, y por últino la imagen del enlace ancla que va a ser la que nos llevará a otras páginas, u otros sitios.

Imagen dentro de la Tabla…
Bien como sabemos que las imágenes pueden llegar a ser elementos vacios, que muchas propiedades y valores no le afectan, deberemos tratarla como lo que es, un elemento vacio…
Creo que no es mala idea llevar las imágenes en ocasiones a las tablas, muchas veces solucionan teodiosos problemas para centrar las imágenes, pero este es un tema que queremos centrar como lo tenemos y lo vamos a conseguir, desde luego…

- Vamos por partes…

- Empezamos por centrar la imagen en la tabla…

Empezaré por solucionar la parte de las tablas, lo que me resulta más sencillo para centrar la imagen, bastandome para ello, colocar a
un align:center, o bien en;

Html ->>
mediente estilos…

Html ->>
Esto también es válido, pero no me interesa pues centraría toda lo que está dentro de la tabla, y lo que quiero es especifico, solo lo que contiene la imagen del enlace, o sea lo que se encuentra en , con estilos css dentro de la etiqueta , y en el documento Html.

Puedes ver aquí debajo las propieddes y valores que le he asignado a
, un relleno alto y bajo de 32%, y un relleno de izquierda – derecha de 32%, cual me siuia la imagen de texto que lleva el enlace,como se muestra arriba.

Las propiedades y valores que he útilizado;

Podriamos haber asignado margenes a la imagen, poner en
por ejemplo un align:center, y a la imagen un margin-top:32% por ejemplo, pero he útilizado otra manera diferente también válida. El display:block lo que hace es corregir unos pixeles que de estiran hacia los lados, lo cual lo mejora a mi modo de ver.

Bueno amigos, espero que haya servido para algo este post, si hace que puedas tener algo más claro algunos puntos sobre este tema, mejor que mejor…
Si me he liado con algo, y lo ves teodioso, recuerda que para ir al super a comprar alimentos puedes ir, en auto, en camión, en bicicleta o andando, tu decides…

Te aconsejo que práctiques con las imágenes, te darás cuenta de cosas en te llamarán la atención, práctica con lo s valores y las propiedades CSS, luego tenido en cuenta algunos puntos, harán que puedas ver diferentes formas y métodos de coocar una imagen, que en realidad se pueden hacer de otras maneras, no son muchas pero haberlas… las hay.

Arriba Volver

Algunos consejos de interés…

manu — Sun, 04 Jul 2010 20:11:42 +0000

Quizás quieras saber…

Bueno he de decir que consejos podriamos decir de muchos, pero no se trata de agobiar…es normal y sabido, que con el tiempo y práctica, descubriremos grandes soluciones y métodos de hacer, que nos van a ayudar, o sea que date tiempo, he intenta entender el por qué de algunas cosas que pudieran no tener mucho sentido, pero funciona así…vale…date tiempo.

Quiero proponerte de momento y principio dos cosas;
1- No te quedes atrás solo con un navegador como defecto en tu PC. Te lo puedo sugerir por varias razones, pero para no extenderme y sean motivos con fuerza, diré por ejemplo;
que puedes ver tus trabajos de diseño desde varias perspectivas…mejorarán tus conclusiones…lo que no te proporciona uno, te lo entrega otro…y es sabido la diferencia en la interpretación del Código que algunos navegadores destacan día a día.

2- Otra de las razones, puedes ser; que un buen día deja de funcionar momentaneamente tu navegador predeterminado, y por no volver a reiniciar tu PC, te saque de algún apuro el navegaor, o navegadores de complemento….

Puedes ver aquí una lista quizás más extensa de navegadores para windows y Linux;
otros navegadores y aquí más…

Arriba Volver

Obtener el resultado del Código…

Otra de las cosas que quiero proponerte, es que te familiarizes con la útilidad del bloc de notas en Windows, y documento de texto en Linux.
El por que…??? pues es de gran útilidad editar este tipo de archivo para obtención rápida de comprobaciones del código.
Una forma muy útilizada por muchas personas que se dedican a crear páginas web, muchas de las veces al tratar de ver el resultado de una parte, o porción de código Html, es útilizar la opción de “copy y paste”, (copiar y pegar) en un archivo de texto para luego renombralo con la extensión “html” .

Intentaré explicarlo;
Muchos prácticamos el “Copy-paste”, (copiar y pegar) en un archivo bloc de notas, o (Documento de texto dependiendo del sistema Operativo), que en ese momento estamos útilizando, el código que hemos copiado, o arrastrado desde otra ubicación…

Bien, haz una comprobación.. en el Spoiler he escrito un ejemplo de código Html y Css.Bien quiero que lo compruebes por tí mism@…
Arrastra el contenido de la caja del “Quote”, una vez seleccionado el texto haz clic con el ratón derecho y elige en el menú, “Copiar”.

El titulo de esta página Web

Esto es un ejemplo en un documento HTML …

Una vez hecho este paso, el texto copiado lo tenemos en nuestro porta-papeles…bien. Ahora ve a tu escritorio, o donde lo prefieras crear, y haz clic de nuevo con el ratón derecho y selecciona “Nuevo y Archivo de texto.”.

Lo tienes…???..Perfecto, ahora abre el archivo y copia dentro de él lo que tienes en tu porta-papeles…con la opción “Pegar”. Bien, hecho esto puedes guardar el contenido de dos maneras, arriba en “Archivo/guardar”, o saliendo normalmente del archivo, y aceptando los cambios.

Bueno hecho esto último tenemos un Archivo de texto, con extensión “txt”. Ahora debemos cambiar la extenxión “txt”, por la de “html”, sin las comillas, recuerdalo…
La extensión de un archivo de texto, carpeta u otro tipo de documento, y viene a ser las últimas letras despues del punto que las separa, por ejemplo “(.txt .pdf .zip .rar y muchos tipos diferentes más)”

Bueno aceptamos los cambios, y obtenemos un archivo similar al que muestro en la imagen, pues la imagen que se muestra despues del cambio es un archivo “Html”, y tendrá el acabado, como una hoja con un icono del navegador que tengas como predeterminado en el momento que has creado el archivo…

Me sigues…??? En este caso es el Icono de “Firefox”, por que yo tengo en mi PC predeterminado este Navegador…Si tu caso es otro navegador, el archivo obtendrá el Icono de tú Navegador predeterminado.
Bueno estos son unos consejos que la mayoría saben, pero para esa parte en la que no lo práctican, o lo desconocian será de gran ayuda, casi seguro.

Creo que esta forma de ver el resultado rápido, del código que hemos pegado a un archivo de texto es una de las maneras muy útilizada, por la rapidez en la que obtenemos los resultados del “Copy-paste”. Si no eres de esas personas que lo miras así, pruebalo un día….

Arriba Volver

Web relacionadas en Internet

manu — Sat, 06 Mar 2010 22:17:10 +0000

Creo importante destacar los sitios dedicados a enseñar CSS…

Es mi intención orientar a todo aquel que quiera saber de CSS u otro tipo de código WEB, el modo y el soporte que puede encontrar en este sitio, y en las grandes web que se dedican a ofrecer gratuitamente, todo lo relacionado con Html, Css, Php, Editores html Freeware, Editores de Imágenes gratuitos y demás, relacionado con la creación y diseño de Páginas Web.Por eso dedicaré, e incluiré en esta hoja, aquellos que crea que pudieran ser importantes y de gran interés.

El mismo contenido en Internet.
He de decir que he podido comprobar, desde hace ya mucho tiempo el mismo contenido en diferentes sitios Web, sin nisiquiera cambiar un acento, ni una coma.Terrible…!!!!
No logro encontrar al propietario de dicha información, o relato, y así, me encuentro confundido y no me atrevo a seguir, más aún por miedo a poder decepcionarme al descubrir, qué despues de seguir los tutos un tiempo, no sean los propietarios de la información y quedarme en la mitad.Claro… no colocan la fuente de la info, y llegan a confundirnos, todo por la afluencia de visitas, pero bueno este es un tema que nada tiene que ver con esta Web y no cambia las cosas, pero lo comento por que intenteré que lo que aquí se escribe, sean Web propietarias y de gran ayuda.

Web relacionadas, y de ayuda para CSS, Html, Php y otros.

1- Todo tipo de utoriales en Aulaclic …
Web relacionada con Dreamweaver, y otros muchos tutoriales que te van a ayudar a mejorar tu experiencia en algunos tipos de programas para la edición Html, Flash, ofimática y otros muchos más.Personalmente este sitio me parece de gran ayuda a los iniciados, por su gran tacto a la hora de explicar los pasos y formas en sus turoriales.
Creo que cada vez van incluyendo contenido nuevo, aunque no lo visito frecuentemente, noto mejoría y nuevos tutos.No son tutoriales para personas avanzadas, pero como comente antes, para iniciados y recordatorio, está muy bien.

   Incluye este sitio a tus favoritos-marcadores…

2- Todo sobre CSS con LibrosWeb.es …

Libros Web, es un sitio web muy intuitivo, para las explicaciones Css y otros tipos de tutoriales. Aunque no he llegado a leer todo el tuto css de Libros Web, lo que he leido y comprobado, me ha ayudado en mis trabajos y en modo de aclaración, para muchas dudas que he tenido, y tengo.
Sigo pensando que la mejor manera de aprender Css, u otro tipo de código, en simplemente “prácticar, poner, quitar y volver a escribir”.Es, si no la única menera que hará que comprendamos el resultado final de los ejemplos. Podemos leer y leer, lo mismo durante tiempo y tiempo, pero si no lo prácticamos, no conoceremos como funciona y los resultados.
Esto como comentario…

Si tu intención, no va más haya de crear una página web, y no seguir adelante, los tutos de Libros Web llegarán a ser pesados, pero si te intriga y quieres saber como funcionan algunos tipos de programación, lo que te ofrece esta web es un buen comienzo en la andadura para tu experiencia y aprendizaje.

Esta es una Web recomendada por Inter Navegación, recomendada por su contenido de gran importancia y su hilo desinteresado para que podamos aprender, disfrutar y crear con sus magnificas explicaciones, vamos… mejor no puedo hablar sobre esta Web.

   Incluye este sitio a tus favoritos-marcadores…

Arriba Volver

3- Orientado a ejemplos en Php, Css, Html, Asp, y otros tipos de programación …

Este es un sitio que también debo comentar. Creo que merece la pena hablar de esta Web, por los ejemplos visuales y problemas que se pueden resolver On-line.
Trata diferentes tipos de programación, lo cual indica casi seguro que albergará diferentes tipos de visitas, y a mí modo de ver es un sitio de gran ayuda para prácticar ejemplos, y resolver problemas On-line que es un acierto.Creo que se puede recomendar, aún no habiendo explorado este sitio muy a fondo, la impresión, y lo poco que he visto, merece la pena anotarlo en nuestros marcadores.

   Incluye este sitio a tus favoritos-marcadores…

Arriba Volver

4- Orientado a muchos tipos de programación y recursos Webmaster …

Creo interesante que conozcas este sitio.En él encontrarás mucha y variada información sobre la programación, y grandes ejemplos que seguro serán de gran ayuda para añadir a nuestras Web..
Tiene muchos ejemplos en Javascript, tan deseados por muchos, y otros muchos relacionados con esta web, que complementan en gran parte todo lo relacionado con el diseño web.
También encontrarás otros tipos de tutoriales que no nos vienen nada mal saber de ellos.Creo que es una web muy interesante.

   Incluye este sitio a tus favoritos-marcadores…

Arriba Volver

5- Otra Web muy completa en soporte para la programación …

Un Blog muy completo para el apartado de ayuda a la programación. Toca bastantes puntos diferentes en relación al desarrollo, y creación de paginas web con sus complementos, lo cual lo hace completo, y de interés.
Quizás un poco extensa a la hora de navegar, y creo que si uno no se fija, se puede perder entre toda la información que contiene este sitio. Un sitio creo que recomendado y con explicaciones que se entienden perfectamente.
Para tenerlo en cuenta…

   Incluye este sitio a tus favoritos-marcadores…

Arriba Volver

6- Web dedicada a mostrar contenido sobre el código y otros …

Espacio dedicado a la enseñanza del código entre otras cosas.
Creo interesante este sitio por su contenido, y si lo que estas buscando para leer y relajarte, es todo lo relacionado con el Diseño Web, creo que la tendrías que tener en cuenta. Si que es cierto que la web está escrita en otro idioma, lo que seguro que no tendrás problemas con los navegadores áctuales que lo traducen para tí.

   Incluye este sitio a tus favoritos-marcadores…

Arriba Volver

7- Librerías CSS, y otros temas de gran interés …

Espacio dedicado al CSS y trabajos realizados en Css, como menus y otros temas que seguro serán de interés para tí, y para tus trabajos Web. Creo que es una web para tener cerca de los marcadores por que siempre necesitamos ejemplos.
Creo que es un sitio inetresante y pendiente de investigar, por lo poco que he podido comprobar no le falta contenido, desde luego…

   Incluye este sitio a tus favoritos-marcadores…

Arriba Volver