Volver

En esta página vamos a seguir los pasos de la instalación de Wampserver 2.0, instalación que te resultará muy fácil y comoda siguiendo estos sencillos pasos.

Iniciamos la instalación …

Haz doble clic en el icono del programa “Wampserver 2″ que me imagino que estará accesible en tu escritorio, y así podemos pasar a ver la primera ventana de la instalación.
Se inicia una ventana similar a la que ves aquí avisandonos de que este programa no se ha reconocido la firma digital que garantiza el software, o que no paga a windows para sus intereses…???. Esos son problemas ajenos a nosotros.

Ventana de la firma digital de Windows, aceptamos la instalación …

- Haz clic en ejecutar en la imagen tranquilamente, que si no tiene una firma digital para windows este conocidisimo programa, es por que no le apetece pagar un canón exigido por windows, para que podamos ver que han reconocido una firma. A son de que…??? y por que…???, esto no es muy justo creo yo.
Encima que nos hacen los programas gratuitos… deberian pagar los elevadisimos canón exigidos…???.
Tela marinera…!!!

Bienvenido a la instalación e Wampserver 2.0 …

- La primera ventana de la instalación… !!!Bienvenido!!!…
Solicita cerrar todos los trabajos abiertos y “Next” adelante – “Cancel” para cancelar la instalación.

Comentario …

- No te preocupes por los pasos que vas a seguir, pues la instalación es como otra cualquiera que hayas hecho en tu PC, pero hay un par de puntos que debemos estar un poco atentos y saber que vamos a hacer. En la parte donde queremos alojar nuestro servidor… lo tendremos en cuenta si no estamos familiarizados con este tipo de aplicación, lo demás, !!!animo…!!! que es muy sencillo, solo eso.
Seguimos con la instalación…!!!

Tipica ventana para aceptar la licencia …

- Esta una típica ventana para aceptar las condiciones del propietario, puedes leer el contenido, o imprimirlo si te apetece. Acepta y sigue con la instalación.

Lugar donde se instalará el Programa …

- Aquí muestra la parte o el lugar del disco duro donde se instalará el programa, en este caso en la parte del disco “C:”. Te aconsejo que lo dejes por defecto donde indica la ventana de instalación, pues así, si no eres un usuario avanzado en este tipo de aplicación, te evitará quebraderos de cabeza te lo aseguro.

Otros pasos previos …

- Esta ventana indica entre otras cosas que si te apetece crear un icono en el escritorio dejes marcado por defecto como está, si no te apetece los desmarcas y listo…!!!

Recopilando los datos de la instalación …

- Recopilación de la configuración que le has dicho al programa, te crea los iconos y te instala en “C:” el programa… haz clic y sigue adelante.

Instalando en el disco …

- Instalando Wampserver 2 en nuestro equipo, ya queda menos…!!!

Elegir navegador predeterminado para Wampserver 2 …

- Esta parte la considero importante…
Bueno aquí creo que debes prestar un poco de atención y tener claro que navegador prefieres para abrir predeterminadamente las ventanas “Localhost” de wampserver. Si no te importa, y tienes instalado en tu equipo Internet explorer lo dejas por defecto como está.
En caso contrario la instalación te muestra la ventana para la búsqueda de tu navegador predeterminado que generalmente se encuentran en (archivos de programa) en tu equipo. Si encuentras dificultades comentanoslo, y te orientaremos para que puedas elegir tú navegador.
Son pasos sencillos créeme..!!

Configuración del servidor SMTP …

- Esta ventana muestra la configuración tipica de un servidor SMTP y dirección de correo elecctrónico, en caso de que lo necesites y te apetezca configurarlo, esta la ventana de la instalación que te lo permite.

Final de la Instalación de Wampserver 2 …

- Final de la instalación …!!!
Bueno ya hemos instalado en nuestro equipo Wampserver 2 para este ejemplo.
Existen diferentes aplicaciones para instalar un servidor local, recuerdalo…. solo que para este ejemplo e instalado este genial programa como lo son todos de la misma talla y funciónes.
Espero que tu instalación haya sido totalmente !!..OK..!!, en caso que te hayan surgido problemas, o no has encontrado algo… nos lo cominicas en el foro, o bien escribe un comentario que se atenderá gustosamente.

Sigue este enlace de aquí debajo, y te llevará a la tercera parte de la configuración de Wamp…

Volver

En esta página quiero mostrar algunas de las que podemos hace con un servidor local como Apache en nuestro ordenador, sin utilizar un servidor externo (servidor hosting, o alojamiento web) como prefieras llamarlo.

Una pequeña introdución…

He de decir que hoy, por hoy es muy sencillo tener Apache instalado en el PC, y con apache varias aplicaciones que lo hacen completisima la suite, instalando conjuntamente todos los programas necesarios para una administración sin errores de tus archivos php, o instalaciones de programas con sistemas de registro por ejemplo,foros, blog etc. Esto sin alargar mucho ente comentario, por que exactamente cumple muchos más objetivos, te sorprenderá. Pero quiero en esta página mostrar como se puede administrar algunas instalaciones en el ordenador con Apache, mysql, php y phpmyadmin entre otros.

No dejes de ver este tutorial…

Sigue este pequeño tutorial y podrás ver algunas de las cosas que puedes hacer con Apache, mysql, php y phpmyadmin.
Instalaremos un programa que hace por nosotros todas las instalaciones necesarias para el correcto funcionamiento de estas aplicaciones que he mencionado antes. Hay varias aplicaciones en internet para este trabajo, pero yo seguiré utilizando Wampserver, por que me va perfecto y no tengo ningún problema.

Recuerda que antes (y hoy también) los módulos se instalaban por separado, pero de eso no hablaré en este articulo quiero mencionar las suites que instalan todos los módulos conjuntamente. Sigue existiendo esa parte de personas que prefieren instalar los módulos por separados, y así organizar el servidor a su manera, e instalarlos como les gusta, se comprende…!!!

Bueno, no me extiendo más e intenta seguir estos pasos que seguro te ayudarán a comprender estos programas. Los pasos que voy a exponer en este articulo son sencillos y básicos, sin lios y a la vista.
Puede que durante los pasos que expongo en el tutorial las ventanas que se presentan en mi instalación, no son las mismas que las se presentan en tu instalación, no importa… por que cada navegador, pc, o sistema puede mostrar de diferentes maneras algunas apartados.

Pero tienen que tener similitud desde luego, y si tienes errores, o algo te falla o no lo entiendes, puedes comentarlo tranquilamente en el panel de comentarios de aquí debajo, o en el foro.
Se ayudará…!!!

Buscamos el programa en Google …

Este paso es my sencillo, búsca en Google, o en tu buscador preferido el enlace de la descarga del programa, o visita este enlace que pongo aquí de la web del propietario, por si quieres pasar de este paso e ir directamente a la zona de la descarga en Wamp.
Wampserver la web…

Directamente a la descarga …

Hecho esto haz clic en el enlace a la web de Wampserver, fijate en los enlaces debajo del titulo de la web, donde puedas ver que pone el enlace directo “Donwloads”, como en la imagen de aquí al lado, te llevará directamente a la zona de la descarga del programa “Wampserver 2″ y te ahorraras algunos pasos. Estos son pasos muy sencillos…!!!

Una vez dentro de la web del propietario …

Una vez dentro de la web de “Wampserver”, si seguiste los pasos buscando el link de la descarga los pasos siguientes son igual de sencillos que los anteriores, búsca el enlace en donde descargaras el programa, algo así como. DOWNLOAD WampServer 2.0i o en la parte donde diga Latest release, (último lanzamiento). Este enlace te llevará a la descarga del archivo desde el sitio “Sourge-force”, como puedes ver debajo.

Source-forge servidor de las descargas …

Al entrar en la web de la descarga, automáticamente debe de iniciarse la descarga del programa, que pesa alrededor de 16 megas, pero en el caso de que tu descarga se demore, tienes dos alternativas, una esperar a que aparezca la descarga por que el servidor puede estar saturado, o elegir la parte donde pone “direct link” o “mirror”, son otras opciones.

Ventana de la descarga (Wampserver 2.0) …

Este archivo es un ejecutable “exe”, escanea con tu antivirus el archivo y a seguir con la instalación.
Haces clic en guardar el archivo y listo, fijate donde lo guarda la escarga.
Recuerda…!!! dependiendo con que navegador estes haciendo la descarga del programa, obtendras una ventana concreta, para este caso la hice con Firefox en vista, por que todos los navegadores utilizan sus propias ventanas.

El programa descargado (Wampserver 2.0) …

El ejecutable “exe” de wampserver 2.0 tiene esta presencia, en todos los sistemas operativos en los que los he instalado siempre han tenido el mimo diseño, desconfía de otros tipos de icono si no han actualizado el programa.

No es por desconfiar, o meter miedo jejeje pero hay en la red muchas web que ofrecen articulos de otros proveedores ajenos, y no hacen más que liarla, créeme. Intenta descargar desde esta web, es simplemente la del creador del programa… (eso creo).

Quiero contestar al titulo de esta página …

Bueno, antes de seguir con en la segunda página con la instalación de este servidor local como es “Wampserver” , quiero poner entre estas lineas que debido a que muchas veces necesitamos crear, editar, manejar, un sin fin de cosas con los archivos que en condiciones normales no puedes tener acceso en tus navegadores, simplificarán y te ayudarán a poder hacer este tipo de trabajo como por ejemplo, y sin ir más lejos aúnque lo haya repetido varias veces, probar temas de “wordpress” por ejemplo.

Puedes instalar con pasos sencillos, un blog, un sistema de noticias, una wiki, lo que quieras que este basado en datos. Pero hay muchas más cosas que puedes hacer con ello, te servirá de respaldo para tus bases de datos de tu hosting, podrás importar las bases de datos que quieras, crearlas, borrarlas, exportarlas que se yo… es que no me hago a la idea de no tener un servidor local, ya sea Wampserver, Xampp, EasyPHP etc, cualquiera te va ayudar.
Si necesitas más datos de los moódulos que instalan cada programa, lo mejor es que visites la web de cada programa y podrás orientarte, y ver que tipo de aplicación instala en cada paquete.

Capturador y editor de imágenes gratuito …

Búsca y descarga el programa en español (existe) …

Haz clic en la imagen, tiene el enlace a su web, de donde podrás descargar el programa.

Volver

Instalando un Foro en nuestro ordenador…

En este video tutorial quiero mostrar una instalación rápida de un foro phpbb en mi ordenador local con el servidor Apache. También hay otros pasos en el video tutorial, como crear una base de datos con PhpMyadmin para el foro que vamos a instalar, gracias a Wampserver 2.0, totalmente gratuito.

Esta es una instalación de un foro en mí pc con el servidor Apache, que ya he instalado previamente incluido en la suite del programa gratuito Wampserver 2.0. Puedes ver algo que escribo en el blog sobre este programa, es un programa muy fundamental si es tu intención trabajar en tu PC a nivel local, con archivos php, formularios, foros, y como en este ejemplo del video tutorial, para una instalación de un foro phpBB.

Por que no probarlo todo antes en nuestro ordenador, los cambios que creamos en foros, Blog, formularios por nombrar algunos, antes de subirlo a nuestro servidor Web y así en caso de fallar algo poder editar el fallo y corregirlo con la mayor brevedad posible. Por que los errores son bastante comúnes si sueles instalar varios mods, u otro tipo de cambios importantes en tus instalaciones de phpbb, blogs, sistemas etc.

Este video como ayuda y recordatorio de los pasos a seguir para la instalación creo que está bien, bien vale tener un video tutorial con una claidad en la imagen espectacular, pero eso a veces no se casa con el peso del archivo y puede que afecte al acabado, pero podrás ver los pasos fundamentales y como guía para la descarga del foro phpbb3 y el idioma, la creación de una base de datos con Apache en tu PC, instalar el foro con sencillos pasos, entrar en el panel del adminisrador y crear una categoría para el foro que acabamos de instalar.

Bueno espero que te sirva de gran ayuda y si tienes alguna consulta o duda, puedes indicarlo aquí debajo en el panel del comentario, o visitando el foro de Inter Navegación. Intentaremos ayudarte en lo que podamos.
Sin dudarlo…!!!

WampServer 2.0 simplemente genial…

Creo que es un método que útilizan casi todos, por no decir todos (exagerando) los Webmaster que editan y trabajan con foros o blogs por ejemplo en el ordenador.
Mi opnión personal sobre este tipo de instalaciones en el ordenador es que, es casi fundamental tener y útilizar este tipo de programas que cada vez soportan los standares más áctuales como las versiones actualizadas de mysqul, apache, php y otros.

Desde la primera vez que lo utilice descubri que este es, entre otros, uno de los programas instalados por defecto en mis ordenadores. El motivo está a la vista, necesito instalar, nuevos foros, blog, editar archvos etc… y no puedo prescindir de estos maravillosos programas. No tienes por que instalar precisamente Wampserver 2, puedes elegir de ortos que encontraras en la red para este tipo de eventos.
Puedes descargar Wampserver 2.0 desde aquí…. WampServer

Volver

Collage de Imagenes con Photoshop CS3 …

Aquí en este tutorial muestro una manera de crear un collage con varias imágenes. Es un buen ejemplo para que puedas prácticar y crear tus propios Collages, tienes que comprender que en función de las prácticas que hagas, mejorara tu técnica y los resultados que puedes obtener serán muy buenos.


Es muy complicado hacer todo bien en la primera vez que lo prácticas, a no ser que ya conozcas las herramientas de Photoshop, y estes familiarizado con ellas, en cualquier caso viene bien recordar estas herramientas.

Para este ejemplo he utilizado más bien imágenes con tonos oscuros, pero puedo garantizarte que los acabados que puedes conseguir, tanto con imágenes oscuras o claras, pueden ser de muy buenos acabados.
Ten paciencia, si no te sale a la primera prueba, continua probando por que una vez que consigas terminar !!OK!! algún proyecto que hayas empezado, descubrirás que merece la pena prestar un poco de atención en lo mini-tutos., y seguro que crearás formidbles imágenes que podrás mostrar a tus amigos.

Disfruta de este ejemplo, y práctica…!!!

Si te ha gustado, deja un comentario…!!!
Si tienes alguna pregunta escribela en los comentarios, te respondemos…!!!

Volver

Capa vía copiar con Photoshop CS4 …

En esta parte del blog voy a añadir los tutoriales y ejemplos que voy creando con el editor Gráfico Photoshop CS.
Este genial programa hará que puedas editar tus imagenes con unos acabados muy profesionales, puedes lograr casi culaquier acabado para tus imágenes, te sorpenderá la cantidad de herramientas de las que dispone este gran editor.




Prueba con tu editor, y sigue los sencillos pasos que muestro en este video-tutorial para crear un tipo de marca de agua, por denominarlo de alguna manera aunque también lo podriamos encasillar y denominarlo como, “Texto acabado Relieve”.
Esta es una de esas maneras en la que lo podemos lograr, aunque debo recordar que se pueden hacer de muchas maneras y quizás algunas menos complicadas.

Disfruta de este ejemplo, y práctica…!!!

Si te ha gustado, deja un comentario…!!!
Si tienes alguna pregunta escribela en los comentarios, te respondemos…!!!

Volver

- Primeros pasos y algunas anotaciones;

En este instante, voy a pensar en la menera que se puede empezar a explicar algo que quiero transmitir, y que llege a interesar el contenido. Sobre todo quiero que se me entienda, y pueda valer las explicaciones que expondré con ejemplos, o comparaciones.


Vamos a imaginar, que es la primera vez que lees este articulo, y te llama la atención de como puede ser, y como se consigue hacer algo para que se vea como lo estoy viendo en este momento en mi pantalla, si no tengo ni idea…!!!
A lo sumo entiendo como hacer clic, para que se abran otras pestañas, ventanas o imágenes de la Web.

Creo que por estas dudas hemos pasado tod@s, y hasta que lo hemos comprendido si no nos interesó lo olvidaremos, pero si nos intrigó, seguro que hubiesemos deseado que alguien nos lo hubiera explicado paso a paso, apostaría por ello.

Bueno, en realidad no quiero complicar este post indagando y recordando en las sensaciones que hayamos podido tener en esa parte en la que desconociamos, y nos preguntabamos “como se hace esto que estoy viendo en la pantalla”…??? , “quien a puesto estas imágenes aquí”…???, jejeje… esas han sido unas de las muchas dudas que hemos tenido muchos, seguro…..

- Que hay detrás de todo esto…???;

En realidad nada que deba preocuparte, por qué hacer (crear,diseñar) una página web no es tan complicado, creeme, solo hace falta un poco de paciencia, tiempo y un poco de práctica, y podrás comprobar que estoy en lo cierto.
Que al ser un poco nuevo para tí el tema de los códigos html, es un poco complicado y por no haber tenido mucho contacto con ellos… encontremos dificultades que empezaras a comprenderlos en la medida que lees, escribes, y prácicas, casi seguro….
Pero para eso está el interés, la tenazidad y la paciencia, seguro que harán que te sea todo un poco más liviano.

Bueno, permitete entender la manera en la que puedes tu mism@ hacer tus propios trabajos y posiblemente con el tiempo realizarás otros tarbajos, y con mayor calidad según vas adquiriendo más experiencia aún, apuesto por ello.

A veces no es un poco agobiante leer grandes parrafos, por que se hace largo y pesado, pues todos queremos ir directamente a la acción, pero es bueno leer un poco y confiar en alguien en el que vas a depositar parte de tu tiempo pensando que llegarás a aprender algo sobre crear páginas Web. Yo también paso por esto cada día creeme, no es la primera vez que descubro, que despues de seguir una noticia, o un ejemplo no es lo que yo estaba buscando, o me a llegado a sorprender la diferencia de opniones que tengo respecto a lo que estoy leyendo, pero en este mundo de Dios, deben de coexistrir las diferentes opniones, si no sería un caos.
Espero que no te suceda eso mismo conmigo, y te parezca lógico e interesante…jejeje, así lo espero.

- Que voy a necesitar, y donde lo puedo conseguir…???;

Dependiendo un poco de tus intenciones, sin son para probar y ver como se te da el tema de crear un trabajo Web básico, viendo y leyendo las explicaciones que voy a exponer en este sitio, podrías no liarte mucho y en un principio instalar en tu PC como minimo un Editor Html gratuito que los hay en Internet, son programas totalmente gratuitos y de muy logradas prestaciones. Ahora no vamos a hablar de cosas técnicas de los editores gratuitos, por que siempre he pensado que la mejor manera de aprender algo, es prácticar… sin lugar a dudas. Pero seguro que necesitaras un poco apoyo, lo podrás encontrar aquí en el foro…!!!

Aquí en el blog pongo algunos editores Html gratuitos por sus fabricantes, de los cuales casi seguro que alguno te puede a servir, seguro…
Entra aquí en el blog….!!!!   para ver los enlaces y capturas de los programas, más o menos en la mitad del documento.

En este enlace (el de debajo) puedes ver unas capturas de una instalación de Html-Kit que hice para este tuto. Creo que no está nada mal que lo repases si es tú intención descargar, e instalar Htm-kit en tú PC, es un genial editror Html que seguro que te ayudará a crear bonitas páginas Web.
El enlace de la instalación.
Disfrutalo, es totalmente gratuito…!!!

Volver

Estos son los sencillos pasos que he tenido para instalar el genial Editor WysiWyg “Html-Kit”.
Puedes descargarlo directamente desde la web del propietario, te pongo el enlace para que puedas visitar la web y poder descargar este Editor gratuito, y de muy buena prensa. Le caracteriza las completisimas herramientas, y como no destacar que esta versión es totalmente gratuita. Visita La Web de Chami Html-kit e instala en tú PC Html-Kit.

Enlace para descargar el programa…

Puedes ver en este post los pasos que he seguido para descargar e instalar Html-kit en mi PC.
Una vez que hayas entrado en la Web, para descargar la última versión del programa te muestro en las imágenes siguientes los sencillos pasos para instalar la aplicación.

Existen algunos programas gratuitos para editar archivos de código, y este a pesar de que hay otros sitios que también lo útilizan, es una alternativa a tener en cuenta por sus cualidades como editor, y todo queda muy a mano, creo que te divertiras con esta aplicación.

En una primera descarga el programa no viene traducido al español, con lo cual si no eres una de esas personas que manejan el idioma inglés que por defecto viene en el programa, deberás prestar atención, y traducir el programa con sencillos pasos como podrás comprobar.

Bueno en esta parte puedes comprobar el enlace al programa, si utilizas firefox como navegador para hacer la descarga de Html-kit, y si tienes instalado Noscript de Giorgio Maone en el navegador, posiblemente Noscript bloquee la descarga, o sea que deberás permitir la descarga del archivo aceptando y permitiendo la web de Html-kit.
Si en algún momento se dificulta la navegación pudiera ser que noscript te está bloqueando contenido, esto en el caso de tener algún bloqueador de pop ups o similares.

Estos son pasos que a pesar de que pueda estar la página web de htm-kit en Inglés, son my sencillos de seguir pues te resultará muy familiar el proceso de la descarga e instalación, no te preocupes… es sencillo.

Quiero ver a NosCript en acción…

Una vez descargado en tu escritorio el instalador del programa, me imagino que alguna vez abras hecho manualmente una instalación del algún programa, que seguro te resultará muy conocidas las ventanas que se presentan cuando haces clic en el instalador, pero si es el caso contrario y encuentras alguna dificltad o duda sobre los pasos que debes seguir, y no sabes como hacerlo, no te preocupes visita nuestro foro y preguntalo.
Si no estás registrado en Inter Navegación, ve a este apartado en donde te prdrás registrar tranquilamente y luego estrar para solucionar tus dudas.
El foro de Inter Navegación     Quiero registrarme en el Foro
Intentaremos participar y ayudarte en lo que podamos, no lo dudes….!!!!

El archivo a descargar…

Bueno esta es la pinta que tiene al archivo a descargar del programa Html-kit (para mozilla firefoz), pero debes de tener en cuenta que dependiendo de que navegador estás útilizando en el momento de la descarga te aparecerá una clase de ventana diferente posiblemente, eso no cambia las cosas por qué en Internet explorer (como ejemplo) muestra la ventana de Internet explorer, en Opera la suya, y los demás mostrarán la predeterminada del navegador en cuestión, o sea no debes preocuparte por que este es solamente el archivo que se muestra para la descarga, que luego recibirás un instalador que se creará en donde tengas habilitada las dercarga.

Algo similar a este icono que se muestra aquí, este es el instalador del programa.

Aquí puedes ver el icono del instalador, donde debes hacer clic para instalar el programa, pero como buen consejo y todo internauta debe tener en cuenta, es que debes escanear primero antes de ejecutar el instalador con tu antivirus que tengas instalado, aunque sea una descarga de una web famosa y libre de problemas, es muy buena constumbre y sobre todo si haces la descarga desde otra dirección que no se de Chami (web de html-kit), más aún., no lo olvides… asegurate y nunca corras riesgos.

Pasos para la instalación de Html-kit…

Bueno, puedes seguir como el la instalación que hice para mi escritorio que no tiene por que parecerse a lo que aquí muestro, por que si hay algo que tengo muy claro es que todos los Pcs son diferentes, y las instalaciones no tienen por que ser iguales pero para referencia está muy bien la demostración.

Empezamos la instalación…

Esta es la ventana que veras en un sistema Windows, avisandote de que no se ha comprobado el editor…
Esto es el famoso resultado que aparece en las ventanas de los programas que no han pagado a microsoft para ser reconocidos bla bla bla. problemas de patentes supongo.
Puedes deshabilitar esta opción si es molesta para tí, bajo la ventana tienes la opción para deshabilitar el aviso.

La bienvenida y adelante…

La siguiente ventana te da la bienvenida, y te pide que continues con la instalación pulsando el botón como se muestra en la imagen.Estos van a ser los pasos normales para cualquier instalación de un programa en Widows.
Seguimos con la instalación…

Aceptamos la licencia…

La siguientes ventanas te llevan a la instalación, o sea que no comentaré mucho por que serás guiado hasta la finalización de esta, cunado haya algo que tener en cuenta te aviso, pero a pesar de que otros puedan comentar, o decir !!!No eceptes esto, deshabilita aquello, no permitas que se actualice bla bla bla…!!!, te aconsejo que eceptes todo.
Por qué…???
Por que si lo deshabilitas nunca sabras exactamente que es lo que has deshabilitado, por que pienso que en el transcurso de la utilización podrás comprobar que no te hace falta, o no quieres. Yo personalmente acepte todo.
Seguimos con la instalación…

El lugar donde se va a instalar Html-Kit…

En esta ventana puedes ver donde se va a grabar la instalación, es el momento de cambiar el directorio si es esa tú intención, hazlo desde aquí… sigue el asistente haciendo clic en “Browse”, y lleva la instalación a la parte del disco que tú quieras.

Componentes por defecto de Html-Kit…

Aquí puedes ver los componentes recomendados que se van a instalar, si no estas muy seguro de esta parte de la instalación te recomiendo que lo dejes como predeterminado, creo que puede veneficiarte dejarlo como viene configurado por defecto.

Resumen de lo que hemos configurado…

El resumen en esta ventana…
Aquí puedes ver el resumen de los que has configurado en las ventanas del asistente previoa instalar, ya queda menso para las instalación…

Instalación finalizada…

Ya hemos finalizado con la instalación del editor gratuito Html-kit…

Funciones adicionales del programa…

Esta ventana te lleva a otras funciones adicionales del programa.Quizás de momento si es la primera vez que lo útilizas, o no estás muy familiarizado con este editor, es que vayas al programa directamente y dejes para otro momento esta configuración, pues puede ser que se alarge y pierdas la orientación,pues todavía te quedan algunos pasos.
Siempre puedes seguir luego estos pasos, primero creo que es mejor que tomes contacto con el programa…
Haz clic como en la imagen para ir al programa…

Integración con los navegadores…

Aquí te pide entre otras cosas que permitas integrar el programa a Internet explorer, puedes clicar que sí.
Haz clic para agrandar la imagen…

Configuración por defecto…

En esta ventana, a no ser que ya conozcas este tipo de configuraciones, y hayas editado estos valores anteriormente, te recomiendo que dejes por defecto lo que viene mostrandose en la instalación.

Autodetectar archivos Html y navegadores…

Aquí te pide que permitas auto detectar los navegadores predeterminados, y archivos Html, creo que te veneficia y que deberías decir que si….
Haz clic para agrandar la imagen…

Permitir links de ayudas del programa…

En esta ventana, creo que nos pide que le permitamos los links de ayuda On-line, tipo “F1″, para cuando lo solicitemos. Yo personalmente, a no ser que sea algo que pueda perjudicar el manejo, o la navegación de la aplicación, aconsejo permitir… siempre hay tiempo de anular esta función y otras que igual no nos interesan.

Permitir conectarse a internet a Html-kit…

Posiblemente recibas avisos de tu “Firewall”, tanto para actualizarte, o hacer “Preview” de tus documentos html. Permitele el acceso, pero en caso de que no sea esa tí intención, bloquea la conexión para que no se conecte. Siempre puedes volver a editar estos permisos desde tu aplicación firewall, en la pestaña de los permisos de los programas.

Permitir ver nuevas versiones…

En esta nueva ventana te solicita que permitas ir a la web de chami, para ojear las nuevas versiones y posibles actualizaciones, yo creo que deberías permitir este paso. Es un proceso muy común y normal de cualquier aplicación.

La ventana previa a el panel de trabajo de Html-Kit…

Bueno, ya queda menos y despues de los pasos que he comentado anteriormente, podrás visualizar la ventana de inicio de la aplicación, donde puedes empezar creando un archivo u otra función.

Resumen de la instalación; Mi opinión, en un principio es que merece la pena este trabajo para instalar Html-kit.
Quiero decirte que yo personalmente el programa de edición de código que más útilizo áctualmente, es “Dreamweaver”, por sus inalcanzables herramientas (de momento), en otras aplicaciones, pero he de recomendar energicamente la utilización de software gratuito, y como no del editor html gratuito de gran calidad como es Html-kit, en genial..!!! y freeware, que más podemos pedir…???.


Intentare explicar los sencillisimos pasos para traducir el castellano la aplicación, por que he decir, que en un principio viene en inglés, pero eso será pasajero… ya lo verás.
Sigue el enlace de abajo… (ahora en construcción)

Arriba Volver Traducir al castellano Html-kit >>

Volver

- 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.

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…

<img src"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 <p>Para alojar la imagen de prueba</p>,
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…

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
<head></head> de tu documento, entre las etiquetas obligatorias como son…

<script type= "text/javascript" > </script>

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 <head></head>.

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

<script type= "text/javascript" src="http://www.tu-web/tu-archivo.js"> </script>

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…

<a href="http://www.internavegacion.com" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage(‘Imagen2′,”,’http://www.internavegacion.com/imagenes-blog//imagen-2.jpg’,1)"><img src="http://www.internavegacion.com/imagenes-blog/imagen-1.jpg" alt="rollover" name="Imagen2" width="97" height="97" border="0" id="Imagen2" /></a>

Y el código Script creado es algo similar a este de aquí…

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.

Volver

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 <Div></Div> para esta comprobación con Imágenes cambiantes, y también colocaremos las imágenes entre <table><tr><td> </td></tr></table> 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 <div> 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 -> <a href=""></a>) 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 <a href=""></a> para enlazarla por ejemplo con mi Web.

Hice un comentario antes, sobre que en Css está un poco mas limitado el tema de la sustitución de la imagen con enlace <a href="">, para ello debemos apoyarnos en html, pues dentro de las hojas CSS el <a href=""> 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…

<style type="text/css">
.caja{
background:#FFC url(http://www.internavegacion.com/imagenes-blog/lleno.png) no-repeat;
border:#CCC dotted 1px;
height:130px;
width:130px;
}
.caja:hover{
background:#E8F4C1 url(http://www.internavegacion.com/imagenes-blog/vacio.png) no-repeat;
}
img{
border:none;
}
</style>

Vemos en las imagenes de debajo como nos queda dentro de la capa <div> y <table>, 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 <td> 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 <td> nos centra la imagen desde arriba, y la capa <div> hace su función normal, empezar de arriba y a la izquierda..

Este es el ejemplo de como se queda en la capa <div>…
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 <div>…

<div class="caja"><a href="http://www.internavegacion.com/"><img src="http://www.internavegacion.com/imagenes-blog/caja.png" width="50" height="35" title="Prueba de imagen cambiante" alt="Prueba de imagen cambiante" /></a></div><p>&nbsp;</p>

Para esta tabla… <table><tr><td></td></tr></table>

<table class="caja"><tr><td><a href="http://www.internavegacion.com/"><img src="http://www.internavegacion.com/imagenes-blog/caja.png" width="50" height="35" title="Prueba de imagen cambiante" alt="Prueba de imagen cambiante" /></a></td></tr></table>

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 <td>, 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 <a href=""> 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 <td> un align:center, o bien en;

Html ->> <td align="center"></td>
Html ->> <td style="text-align:center"> mediente estilos…

Html ->> <table style="text-align:center"></table> 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 <td></td>

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 <td></td> 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 <td>, con estilos css dentro de la etiqueta <td>, y en el documento Html.

Puedes ver aquí debajo las propieddes y valores que le he asignado a <td>, 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; <img style="padding:32%;display:block;" />

Podriamos haber asignado margenes a la imagen, poner en <td> por ejemplo un align:center, y a la imagen <img src="" /> 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.

Volver

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…

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….

- Bienvenidos al curso, para la creación de una página web…

Arriba Volver

- A quien va dirigido este curso…

Arriba Volver

Para aquellas personas con un nivel básico, o para los que quieran ver otras formas de crear un sitio web.

Bueno dicho esto, en un principio quiero plantearme en que modo quiero transmitir como poder explicar cosas básicas para crear una plantilla, e incrustar código, y a que tipo de personas debería ir dirigido…

Mi intención no es otra, que poder mostrarte los pasos para crear en un principio una plantilla de una página Web.

Mi idea se basa en mostrar como poder crear una plantilla sencilla y de acabados elegantes, y bien estructurada para tú página web. Para esto tomo como referencia algunas ideas y el modo de presentación que quiero que tenga mi diseño, y contenido.
Continua en este espacio y crea tu propia Página Web…

- Que herramientas necesito para crear una Página Web…

Arriba Volver

Debo decirte que puedes crear una página web con multitud de aplicaciones gratuitas que están en la Red, tanto editores Html y de diseño Web, pero una herramienta imprescindible para este tipo de trabajo, no es nada más que el propio "conocimiento". Digo esto un poco, por propia experiencia, y no se puede crear algo de lo que se desconoce.

Este tema de las aplicaciones de Ediciín Html, a mi modo de ver las cosas es bastante amplio, quizás por el gran catálogo de Editores que existen en el mercado, tanto gratuitos como de pago. Pero este sitio hablará de Dreamweaver por sus amplias herramientas y calidad en la edición de páginas Web, pero existen muchos que son Freeware y de gran calidad.

He preparado una pequeña lista de algunos editores Gratuitos que puedes descargar y probar, ni pagar nada a cambio, pero para algunas personas que ya entienden algo sobre las aplicaciones y las herramientas de los eitores Html, es clara la linea que quieren seguir y que tipo de harramientas son más convenientes para cada uno.

Bueno… yo para este caso y así poder demostrar que se pueden hacer grandes trabajos con Software Gratuito, voy a señalar algunas aplicaciones diferentes más abajo, que pineso que me van a ayudar a crear una página Web.

- Algunos editores Html gratuitos en Internet;

Arriba Volver

1 – PspadEditor    La Web…    Capturas…    Descargar…
2 – Html-Kit 292   La Web…    Capturas…    Descargar…
3 – Visual Studio 2008 (microsoft)   La Web…    Capturas…    Descargar…
4 – Aptana Studio 2.0.4   La Web…    Guía útil…     Descargar…
5 – Notepad++   La Web…    Capturas…    Descargar…
6 - Kompozer   La Web…    Capturas…    Descargar…

Esta es una pequeña lista de unos editores html que te pueden servir para crear tus propios trabajos Web. Debo decir que entre ellos posiblemente haya algunas diferencias que los distinguen, como por ejemplo la vista del código, unos tienen la vista del código Visual, y otros no…

Este tipo de herramientas son las que marcan las distancias entre los editores, por lo menos… los que yo personalmente conozco.

Pero te garantizo que con cualquiera de ellos crearas grandes trabajos si te familiarizas con sus herramientas, y comprendes como funciona este tema del código html, y Css. Luego está si te decides por alguno de este escueta lista, informarte máñs detenidamente de los complenetos que tiene cada aplicación.

Comento esto por que todos los editores no son iguales, claramente… y aquellas aplicaciones que carecen de algunas herramientas interesantes y que optimizan el trabajo, como por poner un ejemplo; el box de opciónes de selectores-propiedades al código (posiblemente se le llame de diferente forma en cada aplicación)… la imagen de la izquierda.

Sucede que hay quien lo prefiere así, con estas herramientas concretas y sus asistentes, y otros le da igual por que ellos ya entienden de código y escriben más a mano que con los box de opciones, pero al final creo, y no me equivoco… que es menos largo útilizar los asistentes al código. Esto puede llegar a a hacer que perdamos ciertas constumbres y luego con el tiempo nos encontremos más vagos y se nos olvide algún que otro truco de los que escribiamos antes a mano, casi seguro… Pero es lo más comodo.

Arriba Volver

Resumen de programas que podemos útilizar

- Resumen de los programas que he escogido…

1 – Editores Html…

Html-Kit (Este es el editor que elijo), por tener las herramientas de "ayuda al código" y es "WYSIWYG" (puedes hacer "preview") y ver el código creado en el navegador, al igual que otros como el fenomenal "Aptana Studio (en inglés)", sucede que aptana se encuentra en el idioma Inglés, una pena pero es un genial programa. Puedes escojer otros, como por ejemplo, Visual Studio 2008, también muy completo…

He podido comprobar, sin útilizar más a fondo que cada vez que el box de asistente al código aparece, en el box muestra unos iconos pequeños de los navegadores áctuales, como IE, Firefox, Opera, Safari, que estimo serán para decirnos la compatibilidad de los selectores, propiedades, o valores para cada navegador.

Una muy buena idea en caso de ser afirmativo.

- Puedes ver una imagen del panel de Aptana…

- Descargar Aptana Studio desde la Web del autor

- Puedes ver una captura de Visual Studio 2008 (Microsoft)…

- Descargar Visual Studio developer 2008 desde la Web del autor

P.D.La imagen de la captura de arriba, la coji de la web de Visual Studio, o sea mil perdones… sucede que debía cambiarme de sistema operativo y no me apeteciía… perdón.

Arriba Volver

2 – Recortador de imágenes…

MWSnap 300, este es un programa que siguo útilizando desde hace algun tiempo. Lo encuentro genial y me sirve perfectamente para hacer trabajos puntualizados y determinados. No consume grandes recursos en nuestro PCs, y esta emuchos idiomas lo que lo hace mejro aún. Usalo no te va a drefraudar… Créeme…!!!

- XnView, genial y renovado recortador Freeware (gratuito) para optimizar nuestras imágenes. Este programa no lo he útilizado mucho, pero veo una interfaz más moderna, llamativa que MWSnap, parece muy intuitiva y registra mucha información sobre las imágenes que estamos tratando. Voy a recomendarlo a pesar de que estoy empezando a familiarizarme, pero recuerdo que el que más útilizo es MWsSnap, más antiguo pero me vale.

- Puedes ver una captura del panel de MWSnap300

- Descargar MWSnap300 desde la Web del autor

- Puedes ver una captura del panel de XnView

- Descargar XnView desde la Web del autor

Arriba Volver

3 – Editor de imágenes…

The Gimp , genial editor de imágenes totalmente gratuito.
Editor de la talla del gran "Photoshop CS", y de gran aceptación entre los internautas…. desde luego.
Quizás a mi modo de ver un pelín, solo un pelín diferente en la forma de navegar y utilizar sus herramientas, pero que le vamos a hacer, será cuestión de adaptarnos. No es que este es desacuerdo en utilizar el programa de adobe, de hecho no lo uso mucho, pero he creado bonitos trabajos con "Photoshop CS", pero no nos va a dfraudar el gran "Gimp", confio en él.

- Puedes ver una captura del panel de Gimp 2

- Descargar Gimp 2 editor de imágenes desde la Web del autor

Arriba Volver

4 – Cliente FTP gratuito "Filezilla"…

Filezilla , es un programa FTP, tipo "cliente-servidor", de lo mejorcito que conozco. Una de las razones que lo colocan en un baremo alto, es simple y llanamente que "Es gratuito", y un programa totalmente fiable.

He subido muchos archivos a los hosting, con las propias herramientas Ftp que las propias aplicaciones incluyen, y reconozco que no lo hacen mal, incluso se pueden generar copias de seguridad, pero Filezilla es muy superior por lo menos en la optimización de los recursos.

Filezilla permite renombrar archivos, moverlos, eliminarlos, crearlos, dar y quitar permisos a los archivos, o sea que no voy a hechar más flores a este programa, pero desde que lo probe soy fiel. Te aconsejo que lo descarges y lo instales en tu PC si es lo tuyo subir archivos a los hosting, y no lo utilizas.

- Puedes ver una captura del panel de Filezilla

- Descargar Filezilla desde la Web del autor

Arriba Volver

5 – El programa "Paint" de Windows…

Paint de Windows , este programa lo nombro por que seguro que en algunos momentos lo necesitamos para hacer capturas completas en las que no podemos hacer clilc, por qué en cuanto intentemos capturar un menú emergente de cualquier aplicación, como muestro en esta imagen, el menú desaparecerá y con el paint podemos hacer una captura total.

Bueno pues lo aconsejo, es un programa que viene asociado al sistema operativo en Windows, y creo que nos puede ayudar en momentos determinados para poder capturar partes, o la totalidad de un instante. También tiene otras funciones que muchos útilizan de las que no puedo dar consejos, por que yo no las útilizo.

No hay capturas de pantalla para este tema, por que supongo que los conocemos tod@s, pero si quieres saber de este programa y no lo encuentras en tu Windows, sigue estos pasos;

tanto en Windows XP, como en Windows Vista escribes esta instrucción en la barra "Ejecutar" –>>> pbrush y te surgirá Paint y podras útilizarlo.

- Puedes ver esta captura de Paint…

- Opiniónes e instalaciones…

Arriba Volver

Quiero animaros a que útiliceis los programas que más os convengan, por que para eso están las preferencias de cada aplicación del tipo que sea. Cada uno tiene sus preferencias al igual que las tengo yo, pero debo mostraros alternativas (que yo útilizo) a programas de pago, y muy caros por cierto.

Con este comentario no estoy incentivando a nadie que no compre software, solo comento la posibilidad de instalar en nuestros equipos programas GNU, totalmente gratuitos y lo que es mejor, de una calidad asombrosa que no lo destacan mucho de las grandes compañias.

He mostrado los que pienso que pueden valer perfectamente para crear un espacio Web, y muchos…desde luego.

También hablaré de aplicaciones para instalar en nuestro PC servidores Apache, tan necesarios a veces para poder instalar foros, blog, canales de noticias etc en nuestros equipos. Estos complementos son de gran importancia puesto que siempre, o casi siempre vamos a necesitar manejar y escribir por ejemplo, archivos PHP. Hablaremos de como instalar un foro en nuestro PC, para poder familiarizarnos y hacer incluso pruebas y cambios en lo archivos, para no tener dudas a la hora de hacer cambios en nuetros foros una vez subidos al servidor.

Bueno pues esto es un poco el principio de lo que pretendo mostrar, intento enseñar algo sencillo como hacer un trabajo Web, básico y de muy buenos acabados… desde luego. Sigue este esta web los pasos que se van a escribir para crear tu propia página Web desinteresadamente y para tí.

Animate…!!!

Este blog también va a hablar y mucho sobre Dreamweaver CS.

Como poder hacer que una aplicación como esta, llege a ayudarnos a crear grandes trabajos Web, pero esto lleva un poco de tiempo preparar, y hay que tener un poquito de paciencia…

Si tienes ideas y quieres compartir, puedes contactar conmigo y proponerlas, no esperes nada a cambio, esto es así, estamos para dar y si podemos ayudar, mejor que mejor.

Bueno animaros, y no dejeis de visitar este Blog….

Suerte a tod@s…!!!

Contacta conmigo para esponer tus ideas… se agradece.

Arriba Volver La plantilla que vamos a crear >>

Volver

Imprescindible servidor local WampServer…

Desde estas lineas quiero proponerte una opción casi fundamental para poder administrar archivos PHP, instalar un Foro, un Blog, editar y administrar un formulario, y muchas cosas más, si sueles editar, crear o tratar con el mundillo de las páginas Web, del código php, crear y editar bases de datos o temas relacionados.

En este momento para mí, es impesable no disponer de un servidor local, por que mi afición a este asunto del código así lo requiere. Casi lo veo necesario, por que es muy normal que antes de mostrar un trabajo Web realizado, lo puedas visualizar tu mismo trabajando al 100% en tú PC, sin tener que subirlo y editarlo desde un servidor Hosting gratuito, o de pago en Internet.

Quiero mostrar este programa ideal para este evento, como he dicho antes existen otros programas y métodos para instalar un servidor local en el PC, pero este en especial casi me parece el más desatendido por denominarlo de alguna manera, por la sencillez de la instalación y el propio funcionamiento, y como nota destacada entre otras cosas, es que está disponible en el idioma Español, lo cual mejora todavía sus funcionalidades.
Puedes descargar el programa desde aquí…. WampServer

Volver

- Primeros comentarios y consejos;

Quiero mostrarte la plantilla Web que he creado para este curso de Inter Navegación. Pretendo con delicadeza y tacto, explicar con todo detalle los pasos que he llevado a cabo, para realizar este diseño concreto, que a mi modo de ver es un buen trabajo y válido para cualquier contenido Web.


Esta una plantilla de un ancho fijo como puedes comprobar, a diferencia del diseño de plantillas liquidas (de medidas con porcentajes " %") que se encuentran en muchas páginas web, hay una gran mayoría de personas que utilizan sitios de medidas fijas. Bueno, en realidad hay de todo en Internet, algunos con porcentajes “%”, otros con medidas fijas en todo el sitio, lo cual a mí no me disgusta, pues eso puede solucionar muchos problemas de la resolución de pantalla (también se denomina Video) de una gran cantidad de usuarios que pudieran llegar a visitarte.

Piensa que si creas un sitio Web, donde tu ancho máximo es por ejemplo una medida común, ( 800px ) muchos usuarios no encontrarán problemas en la nevegación de tú página, por que es muy raro que a día de hoy, no se disponga de resoluciones iguales y mayores por lo general.
Pero bueno, este es un tema que creo que es de interés, que seguramente se hablará en esta web sobre como optimizar la nevegación de prácticamente la mayoría de los usuarios que nos visitan.

Visita la Página Creada por Inter Navegación para el curso…

Puedes comprobar que los archivos que he creado están ensamblados en PHP, el resultado que puedes ver en la “Vista código”, será en formato “Html”, pero no afecta en nada por que una vez que puedas construir tu mism@ una plantilla similar a la que te expongo aquí en este curso, podrás convertir el formato de html a php, si lo ves oportuno, luego veremos como cambiar el contenido de las páginas Web y el tipo de documento, en comodos y sencillos códigos php, te gustará conocer los pasos…
Animate…!!! y construye tu propia diseño.

- Sobre los programas que puedes a útilizar…

Bueno yo te sugiero en un principio tener estos programas;
1-Editor html – Html-kit (gratuito) WYSIWYG (vista código-Diseño)
2-Editor de Imágenes – Gimp (gratuito) muy bueno
3-Cliente Ftp – Filezilla (gratuito) a pesar de que los programas de edición Html, tienen su propia herramienta ftp, te aconsejo dejar este trabajo a este genial programa, no te defraudará….
4-Recortador de imágenes – MWSnap 300 (gratuito) quizás más sencillo que otros pero es un buen comienzo para adaptarse, es muy bueno.
5-Servidor local WampServer 2, o AppServ (los dos gratuitos) y muy buenos.Para tratar archivos php localmente, instalar bases de datos en nuestro pc, foros, blogs, etc.
6-Servidor hosting gratuito de “ZobyHost”, gratuito, en español, muchas bases de datos, y algunas cosas más interesantes. Es una buena opción…

Estos son en un principio los que voy a tener presente yo para crear una página web similar a la que os he mostrado en el enlace de arriba. Desde luego que en Dreamweaver se puede crear la misma página para aquellos que dispongan de esta aplicación.

Sucede que Html-kit, es totalmente gratuito y esta web también tiene derecho a disfrutar de tal privilegio, o sea que lo utilizaré.
En un principio, mi intención era útilizar Aptana Studio, pero sucede que está en inglés y eso complica un poco las cosas, no para mí, que más o menos consigo entender prácticamente todas las herramientas, pero no todo el mundo, y eso limita un poco al volumen de personas que lo pueden útilizar, por esa razón nos desviamos y nos dirigimos a Html-kit en windows.

- Forma de navegar por los archivos del curso…

Esta imagen que puedes ver a la izquierda, es una captura del “Spry” que se encuentra arriba a la derecha, y hay podrás seguir los archivos del curso en el Sprymenu.
Intentaré colocar claramente los archivos relacionados y visibles, creo que no tendrás problemas para encontrar los archivos del curso. Recuerda que el “Spry” está construido con “Javascript” y posiblemente si no lo habilitas tu navegador bloqueará la apertura del “Menú Spry”.
Bueno, animo y si tienes problemas para conseguir, o instalar alguno de los programas mencionados acude al Foro de ayudas de esta Web, aquí atenderemso tus demandas y podrás disfrutar del apoyo de unas personas geniales y que lo hacen todo desinteresadamente.

Visitanos…!!!

Arriba Volver

Volver

- Utilidades con herramientas en Dreamweaver CS4

Ejemplo y comentarios para la herramienta de Dreamweaver; "Señalador de Archivos"

En la imagen puedes apreciar el icono "Señalador de archivos" seleccionado, que puedes arrastrar a un archivo de la derecha del "Marco de archivos". Dreamweaver enlazará automáticamente en el código, el texto, imagen u otro objeto seleccionado en el panel de código, en color azúl en este momento. Útil herramienta que te ayudará en el trabajo optimizando el tiempo en crear vinculos hacia tus archivos.

Observa si no conocias este detalle, como crea los enlaces, señala un trozo de texto o una imagen, y arrastra el señalador hasta un archivo de la derecha, te gustará el resultado. Puedes ver en el panel de propiedades, algunas de las opciones para el nuevo enlace, como en la ventana que quieres abrir el enlace y otros detalles.
Disfrutala…!!!

Cuida y limpia tu PC con Ccleaner

Programa Gratuito en Internet

Volver

Como instalar Ubuntu dentro de Windows.

1- Búsqueda de Wubi en Interrnet.
Abre tú navegador y escribe “Wubi” en la barra de búsqueda, y se te presentará una relación similar a la imagen…

2- Elige la primera opción “Wubi Ubuntu”.
Te llevará a la página de los resultados en donde podrás ver en esta imagen la Web de Wubi installer, y desde allí podrás descargar el instalador…

3- Desacarga el instalador de Wubi en la pestaña que aparece….
Haz clic en la pestaña “Download Now” y descargaras el instalador para Ubuntu versión 9.10 Karmic Koala…

4- Descarga el instalador de Wubi en tú PC….
Ventana de comfirmación de la descarga del instalador, no te preocupes esta en una ventana de una plantilla de Opera.Los demás navegadores tienen ventanas parecidas, solo cambian en la forma y todas te piden que lo guardes donde mejor te convenga, puedes descargarlo en tu escritorio por ejemplo…

5- El programa….
Este icono es el instalador de Wubi. No es el programa en sí, áctua como muchas aplicaciones en donde al hacer clic se conectará a internet para descargar los archivos necesarios para la instalación completa.

Recuerda que necesita una conexión a Internet, y si estas conectado posiblemente tú Firewall te avisará de esta conexión, aceptala y continua con la instalación. El icono tiene enlace a la web del programa de Wubi, si quieres descargarlo desde aquí, haz clic y conecta con Wubi.

Las ventanas de la instalacion…

Elegir la parte del disco donde instalar…

Bueno esto es más bien sencillo, y si es nuevo para tí, intenta fijarte bien si dispones de varias particiones en tu disco (o discos). Como puedes ver en la imagen el panel de “unidad de instalación“, te mostrará las particiones  y podrás elegir en donde instalar Ubuntu.

Yo para este caso lo hize en ( C: ),  pero no he probado instalar en otra parte del disco duro. Esto no viene a cuento,  pero la mayoría de los  programas se pueden instalar en diferentes partes del disco, yo lo he útilizado mucho y creo que este no sería un caso diferente.

Bueno fijate en las imágenes y si estas instalando Ubuntu con Wubi, te vendrá bien…

Elegir el tamaño de la instalación…

Esta parte tambien es importante, si no dejas por defecto el tamaño del disco que va a útilizar la instalación, elige en el box el tamaño paara tú instalación. Todo esto es muy sencillo, de verdad…!!!  no tiene nada raro que hacer, lo hacen todo los asistentes de instalación y tarda pero que muy poco en terminar la instalación, vamos… te asombrará.

Elige el tipo de sistema que quieres usar…

Puedes ver en el box algunos sistemas para Ubuntu, puedes elegir que más te convenga y si no sabes cual, deja por defecto “Ubuntu”.
Comprueba tu pais en el desplegable y marca el correcto, luego escribe tu nombre y password (contraseña).
Luego despues de esta configuración, pulsa “Instalar”…

Descargando e instalando Ubuntu…

Las dos ventanas siguientes son previas a la descarga de los archivos que se van a copiar, e instalar. En algunos de los pasos a la instalación, el programa se conectará a Internet, debes dejar que acceda la aplicación para descargar los archivos, por que recuerdas que de la Web de Wubi solo descargaste el instalador, no el programa en sí.
Este lo hará ahora…

Descargando los archivos…

Preparando e instalando…

Final de la Instalación…
Aquí el programa de instalación te pide reiniciar, o hacerlo despues.

Consola del inicio de “GRUB“…
Aquí puedes ver el inicio de los sistemas instalados y elegir cual quieres iniciar. Simplemente elige Ubuntu con los botones-flechas de tu teclado “arriba-abajo”, e inicia Ubuntu para terminar de instalar, simplemente eso…, no tienes nada que hacer el programa de instalación lo hace prácticamente todo.

Mí opinión personal para este tema….

Me gustaría decir que linux Ubuntu es un sistema operativo un poco diferente a Windows si eres usuario de este sistema.
Ante la novedad y la diferencia en las rutas, programas, navegación, etc etc… pudiera ser que llege a deslumbrarte un poco este nuevo contácto, y ante la diferencia optemos por la comodidad y no sigamos por lo menos probando este genial sistema, gratuito y hasta la fecha de hoy de una gran, y elevada seguridad.

Esta nueva versión de Ubuntu tiene mejoras (bueno… las anteriores también) y una nueva interfaz. Tanto en mis Pcs, y mi portatil la localización de las redes a sido un punto muy positivo y no encuentro problemas en localizar redes disponibles.
Incluso conectandome con una tarjeta Inalambrica en una torre con su propia tarjeta la conexión a internet a sido fulminante, como si de el tipo de detención de Hardware mejorado de Windows, en Ubuntu a mejorado mucho.

Bueno quiero animaros a que útilizeis Linux gratuito para tod@s.
Que no es fácil el primer contácto con Linux, casi seguro, pero … lo fue con Windows la primera vez que lo útilizaste…??? Recuerda…
Por que para mí no… si no peor aún.

No soy de los que critican los sistemas, cada uno es como es… yo útilizo de cada uno lo que necesito y no puedo optener de otra forma. Cuando quiero comerme una manzana, acudo al manzano, pero cuando me sigue apeteciendo fruta, y quiero una naranja acudo al naranjo, en los dos casos son frutas… una explicación-ejemplo un poco “cutre”, pero algo parecido.

Digo que no quiero criticar los sistemas, pero he de hablar bien de los dos que más útilizo “Windows” y “Linux”. Pero linux Ubuntu es algo especial, en un sistema muy estable, tiene prácticamente de todo teniendo en cuenta la poca participación, por lo menos antes más, de no ceder al sistema Linux los fabricantes soluciones para poder instalar sofware gratuito en los sistemas Linux.

Pero creo que las cosas están cambiando y la balanza se inclina cada vez más por “compartir”, por lo menos eso me parece….

Bueno, no tengo más capturas de pantalla para hacer más largo este mini-tuto, no te hace falta, por que todo viene muy bien explicado y en tu idioma…

Si tienes dudas en como empezar;
foro Ubuntu español…
Primeros pasos en Linux…
foro todo Linux…

Acude a internet y documentate, seguro que luego ves todo de otra manera.
Espero que haya servido este post, por lo menos para decirte que hay otras ventanas…al mundo.

Volver

Lista de editores Html, Css, Php …

Quiero dedicar este espacio para hablar un poco sobre algunos de los más geniales editores Html que veo para los sistemas Linux.

He estado probando hoy dos programas de edición Web para mi sistema Ubuntu, sofware que se encuentran en los repositorios para Ubuntu. He podido instalarlos desde “Synaptic”, y he podido comprobar a mi modo ver que merecen la pena por lo menos saber que están hay, y como no… probarlos.

Estos son, Quanta y Screem.

!Ha decir verdad, los sistemas Linux que he útilizado siempre han sido para escritorios “Gnome”, recuerdo haber útilizado sistemas KDE, con mandrake, Suse creo que también, pero entonces los sistemas más estables a mi modo de ver, eran para escritorios Gnome, luego me consta que las cosas han ido cambiando y siendo más estables estos sistemas, pero entonces como a mí, en mis modestos equipos funcionaban bien, me quede con linux Ubuntu que me parecio ser el que menos recursos me pedía.

No quiero con esto que nadie saque conclusiones raras, por que en realidad Linux es Linux, tanto con sistemas KDE, como Gnome y con este comentario más bien intento decir que por ejemplo el Editor “Quanta”, me recuerda a los tipos de escritorio KDE, y en cambio “Screem” me recuerda más a Ubuntu, no se cosas mías.
Solo intento decir que encuentro diferencia entre el tipo de ventanas, y “Quanta” no se si en multilingue, por que “Screem” si.., y eso me ha gustado mucho, aunque lo digo de verdad, se entiende bastante bien toda la navegación de la aplicación de “Quanta”.

Los dos son aplicaciones “WysiWyg”, tienen asistentes de opciones para el código, lo que lo hacen programas geniales.

Wine en tu Linux, que más quieres…???

Bueno, este dato también hay que decirlo para quien no se decanta por aplicaciones de los repositorios para Linux, puede que encuentre e instale la aplicación que necesita con el genial programa “Wine Doors”.

Para los que no entiendan a que puedo referirme, decir que esta aplicación que comento (“Wine Doors”), puede instalar en Linux (no emular), una lista bastante amplia de aplicaciones para windows.
Así por cercanía, que en este momento recuerdo, he instalado a parte de “Dreamweaver8″ (no he podido instalar uan versión más áctual), otros que pueden llegarte a funcionar bien, como;
PSPad Editor, también el editor “HtmlKit”, y algún otro más que ahora no recuerdo.

Con este comentario quiero trasmitirte animos, por qué hay varias alternativas y un menú relevante y apetitoso que no te va a defraudar… o sea que animo, e instala este tipo de aplicación.

Colabora… instalando Linux en tu Sistema

Volver

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…

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…

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…

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…

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…

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…

Volver

Que debemos tener en cuenta…???

Creo que debemos recordar que tanto las imágenes como el texto, u otras cosas que incluimos entre el código de nuestras páginas Web, son elementos In-line…

Quiero decir qué las imágenes se posicionan, tal y como lo escribimos, igual que las lineas de texto u otro elemento en un documento cualquiera, si no se le asigna un valor diferente. Personalmente creo una buena opción manejar y colocar las imágenes dentro de un parrafo. Es bueno aconsejar a todos que no incluyan imágenes de grandes dimensiones, pues los navegadores tardarán en mostrarla dependiendo del tamaño que tenga esta.

Muchos nos preguntamos que formato puedes ser el correcto para colocar una imagen en una página web, pero a mi  modo de ver las cosas, y dependiendo de las diferencias que hay entre los formatos más útilizados en Internet, (gif-png-jpg), creo que todos son formatos  correctos, sucede que unos por defecto llegan a pesar más de cara a los navegadores por las diferencias de pixeles que los componen.

Son muy útilizados los formatos que permiten transparencia, como el formtao GIF y PNG, y no así permite el formato JPG la transparencia en sus imágenes, y esa puede ser una de las razones por la que hay veces que  se útiliza menos este formato. A todos nos gusta ver bonitas imágenes e impactantes en las páginas web, por que ellas hablan y transmiten en breve algo que queremos decir o mostrar.

Esto como comentario, noto en algunas web que en vez de emplear para los barner el modo SWF de Flash tan de moda, útilizan muy mejorados Gifs animados. Quizas por que piensan que serán mejor indexados los Gifs,  o por no sobrecargar las páginas con archivos de Flash, igual es más comodo hacerlos en Gif. Esto como comentario, igual lo habeis notado como yo, y desde luego que hay bonitos trabajos en Internet, hay que reconocerlo.

Diferencias entre los formatos más útilizados…

Hablemos un poco sobre los pixeles y comprimido de las tres extensiones más útilzadas;
algunos formatos… PNG … JPG … GIF …

Estos son datos recogidos sobre los formatos para las imágenes Jpg, png, y Gif.
Sabemos que existen otros formatos menos útilizados como el “Tiff”, “Bitmap” y otros más, pero si quieres ir un poco más lejos técnicamente con el tipo de canales, escalas, mapas de bits etc etc, deberás acudir a Internet para búscar esa información, puesto que los ejemplos que te pongo en la tabla son más bien para sacar tus propias conclusiones, y así igual te ayuda a decidir que tipo de formato puede ser el correcto para las imágenes de tu web, pero seguro que como todos los que las útilizamos para las páginas Web, prácticamente útilizamos todos los formatos.

Dentro de los parrafos…

Intentaremos explicar en el apartado de las imágenes, los modos que podemos útilizar para colocalas en los parrafos dentro de los documentos html.
Empezamos con los pasos para incluirlas en los parrafos <p></p>.

Una de las opciones que podemos útilizar para alinear las imágenes dentro los parrafos;

<p align="left">Imagen o texto</p>      Esto nos coloca la imagen, o el texto a la izquierda.

<p align="center">Imagen o texto</p>      Esto nos coloca la imagen, o el texto en el centro.

<p align="right">Imagen o texto</p>      Esto nos coloca la imagen, o el texto a la derecha.

En el ejemplo de arriba, todo lo que este dentro del parrafo <p></p>, se alineará, o centrará en función del valor que le demos… bien left, center, o right.
Para algunos el asunto de las imágenes es más un problema de desconocimiennto para su integración, que de código se tratara, por qué en realidad se pueden manejar bastante bien, a pesar de que no conseguimos posicionarlas donde queremos.

Quizás para esto debemos tener en cuenta algunos métodos que funcionan frente a la propiedad “background-image:”, bueno no debería decirlo así, pero es un poco como lo comento. Es un problema que puedde interpretarse de varias maneras, y tiene varias soluciones correctas, y validadas por la W3C.

Quiero explicar a mi modo de ver, el asunto de las imágenes no es tan complicado, y desde luego que hay que prácticar con ellas, poner, quitar, y volver a colocar, para notar los cambios y de que manera quedan, cuando les asignamos unos valores determinados, desde luego que hay que probar.

Que pasa si ponemos una imagen y texto dentro de un parrafo…???

Buena pregunta…!!!
Si queremos manejar bien y que nos quede la imagen alineada a la izquierda, o la derecha como en la mayoría de los libros, o imágenes al lado del texto, que podemos ver en Internet similar a esta imagen de debajo, debemos tener en cuenta algunas cosas y emplear algún truquillo Css que funciona perfectamente. Existen varias formas, pero te pongo una que me parece comoda y validada por la W3C en el documento “DTD”;

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

En la imagen de la izquierda puedes ver como se alinea el texto al lado de una imagen dentro del mismo parrafo, y el resultado a mí personalmente me parece idóneo, y quedan bien colocados ambos, texto e imagen.

La manera de hacerlo, es un poco como lo estoy haciendo en este momento para indicarte unos pasos a seguir, si es tu intención tener estos resultados con las imágenes al lado de texto.

Debes recordar que como comente antes, las imágenes son elementos “Inline” teniendo como resultado si colocas en un parrafo una detrás de otra, sin indicar mediante Css lo contrario, se colocarán una seguida de otra como este ejemplo de debajo.

Si haces una comprobación, y escribes texto en un parrafo, y luego colocas una, o varias imágenes sin indicar lo contrario, el resultado es este que ves aquí debajo. Esto no es más que un ejemplo añadido, y para no desviar el tema de como colocar con éxito las imágenes, lo comento debajo por que estoy casi seguro que puede ayudarte muchas veces a posicionar bien las imágenes en tus documentos, no es nada especial pero a muchos en su momento se nos hizo teodioso, y dificil de entender y comprender como se colocan mejor estas imágenes dentro de un parrafo.
Veremos en otros ejemplos como colocarlas dentro de capas (Div), tablas, incluso en el fondo del parrafo.

Este es un ejemplo con imágenes y texto.

El código que he escrito (a mano, créeme) para el ejemplo con estos estos Iconos , te lo pongo aquí para que puedas ver como lo he alineado y podrás ver que está tal cual, solo alinearlos al centro pero sin estylos Css.

<p align="center">Este es <img src="http://www.internavegacion.com/imagenes-blog/alien.png" alt="Ejemplo imagen 1" /> un <img src="http://www.internavegacion.com/imagenes-blog/alien.png" alt="Ejemplo imagen 1" /> ejemplo <img src="http://www.internavegacion.com/imagenes-blog/alien.png" alt="Ejemplo imagen 1" /> con imágenes y texto.</p>

En el quote te coloco la menera que lo he hecho con buenos resultados.

<p><img style="float:left;margin:5px 18px 10px 0;" src="Mí imagen" alt="Descripción" title="Titulo que quiero que se vea en todos los navegadores" /> (en este caso no he puesto medidas a la imagen) y aquí seguido he escrito el texto que puedes ver despues de la imagen teniendo como resultado el ejemplo del post.</p>

Quiero mostrarte en otra imagen, que sucede si alineo “left” el parrafo con la imaGen dentro sin otro tipo de código css asignado a la imagen mediante “style”.

SEGUIRÉ CON LOS EJEMPLOS……..

Sobre las imágenes en los documentos…

Una imagen se puede colocar en diferentes tipos de tags, o selectores Css, el modo en como lo hagas, creo que debe ser un poco dependiendo del acabado, o la presencia que le quieres dar a la imagen e integrarlo al flujo de contenido que lo rodea, o lo superpone.

Primero quiero decirte que si tenemos una imagen que vamos a incluir en un documento HTML, lo haremos siempre con las etiquetas obligatorias para este caso, de esta manera;

<img src="Aquí la ruta de la imagen" />

Bien, pretendo decirte que imagina que tenemos una imagen de 1000px de ancho, y 450px de alto…
y donde la queremos colocar no hay más espacio que 500px de ancho y 300px de alto, pues bien si a la etiqueta de la imagen que vamos a incluir le asignamos unas medidas más pequeñas de lo que en realidad es la imagen… funciona, y no afecta que yo sepa en la validación del documento, ejemplo;

<img src="Aquí la ruta de la imagen" width=”500″ height=”300″ />

aquí el navegador asignará la medida que le indicas en el “width” y “height”, respetando tus medidas que añades a la imagen a pesar de que es mayor de tamaño tú imagen.

Que pasa si no le asignamos ninguna propiedad “width” o “height” a la imagen en el <img src=""/>…???

Para las personas que no han tenido ninguno, o poco contácto con los pasos a seguir para crear una página web, para entender y manejar código html, el día que se plantean saber de esto, se hacen la misma pregunta que tod@s no hemos hecho…
“Como se supone que debo empezar…???”

Pues por el principio, desde luego…
Como puede una persona empezar a comprender el código…???
Creo que una de las formas más efectivas, y válida para aprender, y entender el código, es qué nos expliquen sobre este, la forma de utilización, el significado, la posición y los pasos que debemos hacer para crear algo. Una forma de entenderlo, es prácticarlo, ahora bien debemos leer y escuchar como, y de qué se componen las cosas.

Si ponemos ejemplos como el de debajo, a personas que no han visto nunca código Html, no comprenderán el significado del texto y los signos que les mostramos, pero eso nos ha sucedido a tod@s, y estamos aquí intentendo mostrar algo que hemos aprendido, o sea entendiendo y prácticando puedes conseguir tu mism@ escribir, y crear sitios web…

Esto es un ejemplo;

<html>
<head><title>El titulo de esta página Web</title></head>
<body>
<div id=”container”>
<div id=”header”>
<h1>Esto es un ejemplo y esta parte es el "Header"</h1>
<!– end #header –></div>
<div id=”content”>
<h3>Contenido de la página</h3>
<p>El color de fondo</p>
<!– end #content –></div>
<div id=”footer”>
<!– end #footer –></div>
<!– end #container –></div>
</body>
</html>

El código que está escrito arriba dice un estilo de página básico, es posiblemente la manera y distribucón de un diseño muy útilizado en muchas web de Internet;

1 - Cabecera (header)
2 – Contenido (content)
3 – Pie de la página (footer)

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 - <html> </html>

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

b - <head><title></title></head>

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 - <body> </body>

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

<body>
1 – Cabecera (header)
2 – Contenido (content)
3 – Pie de la página (footer)
</body>

Como ver el código fuente de las páginas web…???

Bueno, quiero proponerte una cosa que puede llegar a ser de gran ayuda prácticar este comentario que voy a hacer. Visualiza el código fuente de las páginas que llegen a llamarte la atención, por sus diseños y formas. Es bueno que le heches una ojeada y ver como otros Webmaster organizan sus códigos, imágenes y textos.

Puede, (casi seguro, los demás hemos pasado por esto) que no entiendas nada de lo que ves, incluso intentes búscar el inicio y cierre de una etiqueta, y no lleges a encontrarlo, pero a pesar de eso, creo que es bueno que lo mires…

Dependiendo del navegador que en este momento estás útilizando, para poder ver el código fuente de cada página puedes probar a seguir estos pasos…;
en la página donde te encuentres, si haces clic con el mouse derecho en una parte donde no haya texto, o imágenes, te encuentres en el navegador predeterminado, o preferido en tu PC, te aparecerá en el menú contextual de opciones, la posibilidad de elegir “Ver Código fuente”, prácticamente todos los navegadores enseñan las opciones con gran similitud por no decir casi de la misma manera.

Captura de Mozilla Firefox:
Haciendo clic con el mouse derecho en una zona libre de la pantalla, y vemos las opciones.

Captura de Internet Explorer desde la barra de Herramientas;
También puedes probar en la barra de herramientas de tu navegador, y elegir las opción como se muestra en las imagen de debajo. Clic en ver en la barra de herramientas, y eliges “Código Fuente”, así de sencillo.

Bueno estos son pasos que se útilizan con mucha frecuencia para poder ver el código fuente de las Páginas Web en internet. Ahora mozilla Firefox ha mejorado sus herramientas Webmaster, y una vez que visualizas código fuente con este navegador, te proporciona enlaces desde el código a todos los archivos que son enlazados en ese momento al documento que estas viendo, lo cual me parece un acierto Olympico, ofrecer estas herramientas…
Descubrelo tu mismo….!!!

Bueno quiero mostrarte antes de seguir hablando de los tipos de documentos, el contenido de un archivo Html sencillo, y bastante completo. Se que es un tema que no le vamos a dar mucha importancia, por que lo que nos interesa son otro tipo de cosas como por ejemplo, hacer un bonito espacio, colocar las imagenes más elegantes y un sin fin de cosas que valoramos más que de que se compone un archivo Html. Pero para otros saber de esta parte del código, es muy importante.

En el código escrito debajo se puede ver la parte del tipo de documento (Doctype “dtd”), en este ejemplo muestra la versión;
“xhtml1-strict.dtd”.En el enlace intentaré mostrar una pequeña descripción para algunos tipos de documentos más útilizados, como entre otras las nuevas versiones “xhtml”.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> Tipos de documentos “dtd”
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="es" lang="es"/> Lenguaje-Idioma
<head> El “head”
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> Codificación del Documento
<meta http-equiv="Content-Language" content="ES" /> El idioma en esta Página
<meta name="robots" content="index,follow" /> Archivo para los Robots
<meta name="description" content="(Descripción del sitio)" /> Descripción del Sitio
<meta name="keywords" content="Palabras relevantes (clave) del sitio" /> Palabras claves
<meta name="author" content="El autor" /> El autor del documento
<link rel="shortcut icon" href="La ruta del icono ICO" type="image/x-icon" /> Favicon ICO
<link rel="stylesheet" type="text/css" href="La ruta de los estilos CSS" media="all" /> Estilos CSS
<title>El titulo de esta página Web</title> El Titulo del Sitio
</head>

<body>
<div id=”container”>
<div id=”header”>
<h1>Esto es un ejemplo y esta parte es el "Header"</h1>
<!– end #header –></div>
<div id=”content”>
<h3>Contenido de la página</h3>
<p>El color de fondo</p>
<!– end #content –></div>
<div id=”footer”>
<!– end #footer –></div>
<!– end #container –></div>
</body>
</html>

Bueno, pero este tema está aquí, puedes recurrir cuando sea necesario y necesites orientación, seguro que algo te ayuda en el futuro.. no lo olvides…!!!

Descargar e instalar Dreamweaver CS4….

Adquirir la versión de prueba de Dreamweaver CS4…
Bueno como es mi intención, mostrar algunas cosas básicas, que conozco de la aplicación Dreamweaver CS, para editar y crear trabajos Web, y quizás lo más normal en un principio, es, que muestre los pasos a seguir para adquirir la versión gratuita de Dreamweaver CS4.
Quiero recordaros que Dreamweaver CS, no es un programa gratuito, pero a pesar de ello si quieres probarla, no tienes nada más que seguir estos pasos.

Primero vamos a ir a la web de Adobe, mediante este enlace:
http://www.adobe.com/es/products/dreamweaver/?promoid=BPBIN


Este es el sitio Oficial de Adobe, en donde podrás ver un listado de sus programas de edición, de imágenes, html y otros progarmas caracteristicos de Adobe.
El que se muestra en la imagen de la izquierda, es la página dedicada a Dreamweaver, y esta en un principio es la parte que nos interesa para poder ver, y seguir el enlace de la descarga Trial, del polivalente programa de Adobe Dreamweaver CS4.En los consejos de debajo, comento un poco los pasos a seguir, que para todos no tiene por que ser igual, pero es más o menos, la forma que puedes útilizar para descargar tú programa.

Enlace para descargar Dreamweaver CS4 Trial;
https://www.adobe.com/cfusion/tdrc/index.cfm?loc=es_es&product=dreamweaver

Encontrarás esta página, o similar…
Donde se encuentra la flecha en la imagen, podrás crear una cuenta, para luego pasar al registro obligatorio que los de Adobe sugieren como requisito, para poder descargar gratuitamente el fenomenal Editor (WysiWyg), Dreamweaver CS4, en la versión más actual.Pero no lo olvides, es una versión Trial o sea de prueba, que para poder útilizarla sin restricciones, deberás comprar el producto, o incluir su correspondiente numero de serial.Son sencillos pasos para registrarte y tener opciones al programa Trial de Dreamweaver CS4.
Existen otros sitios en Internet donde podrás descargar esta aplicación, no puedo decirte si está soportado legalmente por Adobe, pero exirtir, existen. Pero desde aquí, necesitas rellenar con tus datos, para enviarselos directamente al fichero automatizado de la base de datos en Adobe, tu decides.

El Formulario de registro;
en la imagen de la parte izquierda, puedes ver más o menos, el formulario que se encuentra en la web de Adobe que debes rellenar, para tener la opción de descargar esta aplicación.
Reconozco qué merece la pena, por lo menos probar este genial programa, que llegará a asombrarte por sus cualidades, y geniales asistentes entre otras cosas.Es una pena que solo se pueda tener en nuestro pC la versión trial durante un mes, por que son tantas, y tantas herramientas, que hace falta un poquito más de tiempo para poder familiarizarse medianamente, en este programa.Pero aún así, te garantizo que merece la pena, no te prives en probarla.
Bueno hecho esto, sigues los pasos que te indican, y podrás descargar el programa. Me imagino que dependiendo un poco de las descargas que en ese momento se están realizando, tendrás más, o menos velocidad para poder tener Dreamweaver CS4 en tu PC…
Ten paciencia…!!!

Mientras tanto, puedes ir mirando, los requisitos que necesita tu sistema para poder funcionar perfectamente este progarma en tu PC.
Requisitos necesarios del sistema…
En linux, yo de momento no he instalado Dreamweaver CS4… me genera un error. Pero la versión 8 si tengo instalada, y funciona perfectamente. Se de un amigo, que ha conseguido instalar con exito Dreamweaver CS4 en Ubuntu 9.10 Karmic-Koala, descargando directamente desde adobe, quemado en un cd el programa y lo pudo instalar.
Le preguntaré que pasos hizo para tener exito en la instalación, y un día lo comentamos.
Desde luego que es por ahora (creo) imposible tal hazaña, sin la ayuda inestimable de Wine-Doors, una herramienta genial.Posiblemente hablemos un poco más adelante de esta herramienta, es interesante, os lo aseguro… pero para Linux.

Pasos siguientes; son para los sencillos pasos a la instalación del programa.

Iniciamos la instalador; un poco por encima,
en los archivos que has descargado, se encuentra el instalador, con extensión ” .exe”, y generalmente con el nombre setup.exe.
Haz doble clic para Iniciar la instalació, y acto seguido aparecerá el asistente que comprobará tu sistema, y te avisará de posibles deficiencias, e incompatibilidades del programa frente a tu Hardware, u otro tema que pueda verse afectado.

Una vez comprobado, y sin avisos, las capturas siguientes aquí debajo, serán las que vas a ver en la instalación.Intentaré ser lo más breve posible explicando un poco las capturas que hice para este pequeño tuto, por que ya hace un poco de tiempo que instale Dreamweaver CS4, y posiblemente haya cosas que se me han pasado por alto, si es así debeis perdonarme.Tú instalación debe de ser muy parecida a esta.

La instalación dde Dreamweaver CS4;

	Esta es la pantalla de bienvenida, de la instalación del programa. En ella, te da dos opciones, 1 – Puedes incluir un numero de serie. 2 – Prueba de la versión de evaluación. Pulsa "Siguiente" en cualquier caso … para continuar la instalación.
	En esta nueva pantalla…. Podemos observar la tipica solicitud del propietario, para aceptar la licencia bajo sus condiciones. No está bien que lo diga, pero no recuerdo en ninguna ocasión, haber leido integramente las licencias de las aplicaciones que he instalado en mí PC. Quiero aconsejarte a que los leas, reconozco que no está de má, por lo menos hecharle una ojeada.
	Opciones para la instalación…. Podemos elegir complementos en la instalación. Puedes fijarte en las opciones que nos dan, y elegir las que creas que son más importantes para tí.Puedes dejar por defecto las que vienen marcadas. Una vez hayas elegido, pulsa instalar …
	Preparando la instalación….. Siguiente paso en la instalación. La aplicación se configura para seguir en la instalacuón. Te pedirá seguir adelante, pulsa instalar y adelante…. Los pasos son muy sencillos, solo es cuestión de fijarse un poco.
	Terminando la instalación….. Siguiente paso, terminando con la instalación. Este es un sencillo paso a la instalación, esperamos que no se genere ningún error, y pasamos a la siguiente pantalla. Trás terminar el proceso, dependiendo de si tienes, o no, otras aplicaciones de Adobe, tardará más o menos, por que en el caso de no tener ninguna, se instalará posiblemente un espacio en tu disco para los archivos compartidos. No hay problemas en este archivo compartido.
	Completada la instalación… Hemos instalado Dreamweaver CS4 en nuestro PC. Bueno, despues de este paso puedes salir tranquilamente del panel de instalación, pues ahora debes decirle en el modo que vas a funcionar el programa, esto en la siguiente pantalla. Ya queda menos…
	Elige tu tipo de Versión…Versión de Evaluación, o numero serial. Bueno, haz clic en el icono de Dreamweaver, y se presenta este panel donde tu decides el modo de utilizar la versión, tanto si es de prueba (trial), o con numero de serie debes ingresarlo en el lugar correspondiente. Estos son previos pasos a una instalación normal…
	Ventana para el soporte de Tipos de Archivos… En el paso siguiente, se presenta el panel de integración para los tipos-formatos de archivos en los que quieres que Dreamweaver sea la aplicación predeterminada que los abrirá. Si no hay otros programas que gestionen los que indica dreamweaver, puedes seleccionar todos, o dejalos predeterminados. Yo los selecciono todos… Bueno, despues de este paso podrás ver tu aplicación funcionando… Enhorabuena, disfruta de este programa…!!!

Esta es la forma en la que yo he tenido mí instalación. Son sencillos pasos que no llegarán a hacerte pasar mucho tiempo.Se cuidadoso con los pasos, mira tu espacio en disco (cuanto ocupa la instalación), y permite las actualizaciones, por lo menos la primera vez.

Seguimos hablando de Dreamweaver CS4 aquí …

Debemos familiarizarnos con el código CSS, dentro, o fuera de las hojas Html. Tenemos que comprobar que propiedades y valores funcionan bien dentro de los selectores que estamos utilizando para nuestro código.
Intentaré explicar un poco, las denominaciones "Selector", "Propiedad", y "Valor". Posiblemente no hará que comprendamos mejor las cosas, pero si sabremos en que parte encajan, y el nombre que lo distingue, y también, por qué no decirlo… forma parte del aprendizaje en este apartado.

En Dreamweaver cs, encontraremos un apoyo para trabajar en el tema del código, pero aviso …, para los que estamos acostumbrados a escribir código, en gran parte de las hojas … seguramente que al trabajar con un editor Html, de la talla de Dreamweaver CS, hará que nos acomodemos, y no realicemos trabajos sencillos dentro de un "Bloc de Notas" por ejemplo …
La culpa de todo esto, se la hecharé a los asistentes de la aplicación, por que ellos van a conseguir que realizemos, y escribamos código, en un abrir y cerrar de ojos, o sea que yo aviso … por que sucederá… casi seguro.

No te lo pierdas…!!!!

Muy a pesar mio, quiero decir que Dreamweaver de Adobe, no es una herramienta gratuita, ni Open Source…, lo cual hace que edite en este blog, otras alternativas y aplicaciones gratuitas que he encontrado en Internet….

He descubierto que existen bastantes “Editores Html” gratuitos y muy buenos… (bueno no debería denominarlos así), quizás solo decir “Diferentes”, por qué en realidad, todos son perfectos… sucede que varía en la aplicación, la integración de los soportes (tipos de documentos), y algunas que otras funciones, o asistentes. Gracias a ellos muchos podremos crear, y terminar nuestros proyectos web….
Mí agradecimiento, y un aplauso para ellos… como no…!!!