Nicolás Flores

Diseñador Multimedial

  • Diseño de sitios web
  • Webs autogestionables
  • Optimización y rediseño

Playroad

Diseño y maquetacion por Estudio 46.
Finalización del sistema de administración para el catálogo del sitio, que permite altas, bajas y modificaciones de productos y upload de fotos. Desarrollo del carrito de compras.
  • PHP/MySQL | jQuery
  • Dineromail
Ir al sitio Datos técnicos

OD Real Estate

Diseño y maquetacion por Estudio 46.
Desarrollo de un sistema de administración para el catálogo del sitio, que permite altas, bajas y modificaciones de propiedades y noticias, upload de fotos, y un sistema de propiedades destacadas.
  • PHP/MySQL | jQuery
  • CMS propio
  • Montado en Smarty
Ir al sitio Datos técnicos

Bien Cortado

Se rediseño el logo y se desarrollo el sitio web desde cero.
  • PHP | jQuery
  • Maquetacion y SEO
Ir al sitio Datos técnicos

Tercer Ojo

Se terminó el desarrollo del sitio full flash de la empresa. Además se agregó la sección "Novedades", y se optimizó el sitio para que sea correctamente indexado por buscadores.
  • AS 3
  • Información a través de XMLs
  • SEO aplicado a Flash
Ir al sitio Datos técnicos

Coramina Lenceria

Diseño por Pixelate Creativos.
Desarrollo de un sistema de administración para el catálogo del sitio, que permite altas, bajas y modificaciones de los productos y upload de fotos.
  • PHP/MySQL | jQuery
  • CMS propio
  • Maquetación | SEO
Ir al sitio Datos técnicos

Experiencia:

Con más de diez años conociendo la industria, sé como hacer diseños claros y profesionales, donde el foco se pone en cómo transmitir lo que usted y su negocio necesitan, enriqueciendo la experiencia del usuario con diseño interactivo.

Garantía de Calidad

Codificación respetando los estándares de W3C y SEO.

Conectate:

Para conocer más sobre mi experiencia laboral y formación académica:

- Body Line -

Body Line 1 | 2006
Body Line 2 | 2006
Body Line 3 | 2006
Body Line 4 | 2006
Body Line 5 | 2007

- Color -

Rojo | 2005
Naranja | 2005
Amarillo | 2005
Verde | 2005
Celeste | 2005
Azul | 2005
Violeta | 2005

- Influence -

Bob Marley | 2005
Jim Morrison | 2005
John Lennon | 2005
Mick Jagger | 2005

- Pin Up | GGA -

Metamorphosis | 2004
One | 2005
Y | 2006
Web | 2006
Twisted | 2007
NN | 2010

- Angels & Demons -

Angel's Touch | 2004
Divine Temptation | 2004
Lilith | 2005
Black and White | 2005
Sin | 2007

- Personal -

SRV | 2003
Maya | 2004
Ave Fénix | 2004
SL - LD | 2006
Diego Maradona | 2005
Jack Skellington | 2005

Te gusta lo que viste?

Mi estilo es versátil y puede ajustarse a distintos tipos de proyectos:

  • - Arte para regalos personales.
  • - Arte de tapa para libros, CDs o DVDs.
  • - Arte para diseño editorial y gráfico.

Enviame un email a info@nicolasflores.com.ar para hablar sobre lo que necesitás y de qué manera puedo ayudarte.

Exposición:

  • 2010: Invitado al programa de radio "Colores Primarios", para charlar sobre Arte Digital.
  • 2010: Muestra colectiva en la galería Alicia Brandy, salón "Arte Digital 2010".
  • 2005: Conferencista en el Sexto Encuentro de Arte Jóven, Escuela Multimedial Da Vinci, Arte Digital.
  • 2004: Primer Premio del Quinto Encuentro de Arte Jóven, Escuela Multimedial Da Vinci. Categoría, Animación en 2D, por "Expresión de un sentimiento".

El blog del Turu

especialidad de la casa

« ir al inicio

Facebook Share

20 de August de 2010 | 8:37 pm

Un tip rápido para aquellos que añaden cosas de Facebook a sus blogs, en este caso el Share con el globito que cuenta la cantidad de veces que fue compartido un enlace.

Si lo intentaste hacer, ya sabés que el tutorial oficial es muy simple de seguir, un copy/paste y sale con fritas…

Pero si todo fuese taaaaaan facil, entonces no habrías llegado a esta web, ya que existe un problema por el que necesitás hacer click en el share para que te aparezca el globito. Los programadores de Facebook implementaron el hecho de que muestre el globito con la cantidad de shares sólo cuando se haya compartido, como mínimo, tres veces.

Eso quiere decir que hasta que alguien no haga click y lo comparta con sus amigos (y esto, tres veces…) no se va a ver ese diseño tan lindo que querías poner. Entonces, tenés que hacer trampa, y te digo cómo:

1) Parche facil, pero no elegante: el javascript de Facebook hace la cuenta de cuántas veces compartieron tu enlace, y si el resultado es menor a tres, entonces añade la siguiente class al span que hará al gobito:

.fb_share_no_count{
display:none;
}

Entonces la solución es sobreescribir el display none. Si al botón lo colocamos dentro de un div con id share, entonces:

#share .fb_share_no_count{
display:block;
}

Esto sólo mostrará el globito, dentro de él no habrá ningún número, aunque se haya compartido una o dos veces, eso no se mostrará.

2) Parche copado, pero de tiempo limitado: para implementar esta utilidad, copiaste un código javascript, el cual es:

<a name=”fb_share”></a>
<script src=”http://static.ak.fbcdn.net/connect.php/js/FB.Share”
type=”text/javascript”>
</script>

Si en vez de llamar externamente a ese javascript, hay que bajarlo y editarlo, más específicamente hay que buscar la siguiente línea:

this.displayBox(a,3);

¿Ya se imaginan que quiere decir ese 3? Entonces, hay que cambiar al 3 por un 0, guardar, subir el .js a nuestro servidor, y hacer la llamada localmente. Esta solución está publicada en Patrick M. Kelly’s Bulletin Board.

Cuál es el problema de esto? que la semana que viene, o dentro de un mes, o cuando sea, Facebook va a cambiar la programación del Share. Cuando eso suceda, tu programación editada puede llegar a no funcionar.

Estará en cada uno evaluar qué camino seguir.

Presupuestar siendo freelance

18 de May de 2010 | 10:19 pm

Esta etapa de trabajo freelance en la que me embarqué ya se ha extendido por 9 meses. Tiempo durante el cual la vengo pasando muy bien. Sin moverme demasiado, trabajo no me está faltando, lo que es muy bueno. Es por la no falta de trabajo que en este sitio aún no figura mi portfolio con mis últimos trabajos. Esto no quiere decir que si pongo el portfolio online es porque no tengo trabajo, no sean literales. Sólo quiere decir que pude tomarme todo este tiempo para pensar bien cómo quiero que se muestre todo.

Hablando exclusivamente de trabajo freelance, me voy a permitir escribir unas líneas sobre el armado de presupuestos. Tal como dije en el post anterior, guías para ser freelance hay muchisimas, estos posteos no pretenden ser otra cosa que mi visión sobre temas muy puntuales.

Un trabajo freelance empieza por el contacto con el cliente, donde se transmitió una necesidad, y uno puede satisfacerla. Uno empieza entonces a bosquejar en mente varias ideas, de diseño, desarrollo, usabilidad, publicidad, etc. Pero más importante aún, tiempos, costos y equipo de trabajo. Estas obligado a presupuestar, no interesa si sos estudiante y estas leyendo esto porque tenés curiosidad sobre el trabajo freelance, necesitas hacer un presupuesto. Con el correr de los trabajos, los documentos que hago con presupuestos empiezan a ocupar más y más carillas. Los primeros fueron de tres, ahora son 4 o 5… por supuesto que depende del trabajo en sí, ya me van a entender.

Qué items cubro en mis documentos?

Órden de trabajo: suelen ser uno o dos renglones. Muy simple, “Se requiere hacer un sitio web” es perfectamente viable.

Breve detalle: sirve para explayarse en el trabajo. Por ejemplo, si el sitio tendrá administrador, usuarios, carritos, blog, etc. Se intenta nombrar los ítems que habrá (si existe ya un árbol de navegación, va acá), pero no cómo van a funcionar.

Detalle técnico: En este espacio sí se dice como va a funcionar todo lo que se mencionó antes. No hace falta decir detalles de cómo se va a programar o maquetar, pero sí que hará en x lenguaje, o siguiendo estándares, que validará en tales navegadores, etc.

Requerimientos: fácil, que necesitamos que nos dé el cliente para poder hacer todo lo que dijimos que sabemos hacer.

Alcance: es el espacio donde se pone en claro dónde termina mi responsabilidad y empieza la del cliente o la de terceros. Por ejemplo, si preveo que puede existir un problema legal porque el cliente insiste en copiar, este es el espacio en donde pongo de preaviso al cliente. Si el trabajo requiere SEO, suelo aclarar que mi servicio es (precisamente) SEO y no posicionamiento, ya que para primeras posiciones se requiere otro tipo de trabajo.

Tiempo de trabajo: cuánto me va a llevar. Esto va de la mano con algunos puntos de requerimientos y alcances. Entonces, siempre vale la aclaración de que si el cliente no entrega el material, uno también lo hace.

Valor: cuánto cuesta, porcentajes a cobrar, y formas de pago.

Documentación: para hacer un presupuesto, seguro que el cliente nos mostró una web (o lo hicimos nosotros para graficar algo), o nos pasó algún .doc o .jpg, etc. Todo lo que nos haya pasado y que se usó para presupuestar, va acá.

Otras cosas que se pueden añadir pueden las relativas al contrato de terceros, desde fotografías hasta el servidor. Otro punto puede ser sobre la propiedad intelectual.

El que estoy evaluando agregar, pero depende muchísimo del cliente y proyecto, es qué sucede cuando se extiende el período de bocetos de diseño, lo cual va de la mano con que se supone que alguien te contrata no para ejecutar el diseño que él tiene en la cabeza, sino para que uno pueda traducir una necesidad en la mejor resolución visual.

Es un poco más complicado, porque básicamente se trata de decir que la persona idónea soy yo, y no el cliente. Y al menos por ahora, no se me ocurre una forma de decirlo sin que lleve a un malentendido.

Escucho sugerencias…

Imagen en el submit de un form

29 de November de 2009 | 10:33 pm

Adlatina es un portal de comunicación. Tiene unos cuantos años online, si trabajan en publicidad lo conocen por obligación (si trabajan y no lo conocen, que esperan?). Algo que me molesta, y mucho, es que en su formulario de login no funciona el “enter”. O sea, pongo mi email, mi password, toco enter……… y muevo el mouse hasta el boton “Ingresar” para hacer click y loguearme. Horrible…

El otro día me puse a pensar en esto, porque simplemente no puede ser que suceda. Pensé un poco más, y la conclusión es que si está hecho de esa forma (y hace años), es porque no saben hacerlo bien. Alguno dirá “pero es un botón de submit, cómo no van a saber hacerlo?”. Corrección, es un botón de submit con una imagen, es otra cosa.

Veamos el código que usaron para este botón sin usabilidad:

<div class="box">
	<div class="content2">
		<a tabindex="7" class="boton" title="ingresar" onclick="document.formulario.submit();" href="#"><span>ingresar</span></a>
		<div class="clear"> </div>
	</div>
</div>

Como se puede ver, no hay ningún elemento de formulario que haga el submit. En vez de un <input type=”submit”>, hay un <a><span>, donde el atributo onclick del <a> es un javascript que hace el submit de un form. Espantoso.

Según mi teoría, el que hizo este formulario no supo cómo resolver el poner una imagen en el submit del formulario. El problema con los input, es que cuando se trata del <input type=”submit” /> el css empieza a comportarse extraño con todos los navegadores. Mientras en Firefox funciona, Explorer falla siempre. Entonces, en su lugar hay que usar un elemento que no lo usa nadie, el <button>.

El código quedaría así:

<div class="box">
	<div class="content2">
		<button tabindex="7" type="submit" class="boton_usable"><div><span>ingresar<span></div></button>
		<div class="clear"> </div>
	</div>
</div>

A la etiqueta button se le puede poner como contenido un <div> o un <span>, si son maquetadores y no conocían <button>, se acaban de dar cuenta que es su nuevo mejor amigo.

Les dejo el link con el formulario tal cuál como está hoy, y mi propuesta. Chusmeen el CSS.

Firmas con imágenes en Thunderbird

3 de November de 2009 | 9:58 pm

Thunderbird es el cliente de email compañero de aventuras de Firefox. Thunderbird tiene cosas que claramente debe mejorar en cuanto a usabilidad, especialmente el lector de blogs, dar de alta un feed es muy complicado. Más allá de esto, les doy una guía de pasos para crear una firma con imagen embebida, cosa que si bien no es dificil, tampoco está facil.

Lo importante a entender, es que una firma en Thunderbird siempre es un archivo aparte, que el programa lee y añade al final de nuestro email. O sea, si yo hago un archivo llamado firma.txt, cuyo contenido es “Nicolás Flores”, ya tengo mi firma. Entonces, para setear este archivo como firma, Herramientas/Configuración de cuentas:

thunderbird11

Si yo quiero poner en mi firma una imagen, entonces no me sirve setear un archivo .txt como firma. Para hacer esto necesito un archivo .html, y configurar una etiqueta de imagen, con la ruta correspondiente al archivo. No es necesario que el archivo se encuentre en un servidor web, puede estar en una carpeta en mi PC.

Para hacer un archivo html necesitamos un notepad común y corriente, en donde ponemos:

<img moz-do-not-send="false" src="file:///C:/turu.jpg" alt="Turu">

Editamos la ruta con el nombre del archivo correcto, y listo!

Es importante utilizar el parámetro alt, ya que si el receptor del email tiene bloqueado el codigo html que hace posible ver una imagen, en su lugar colocará el texto que pongamos allí.

Cuando enviemos un email, es probable que nos pregunte si deseamos enviar el email en formato html o texto. Elegir html por razones obvias…

Truco CSS para escalar imágenes

11 de May de 2009 | 7:12 pm

Hace unas semanas me encontraba leyendo sobre este truco de css para escalar imágenes en Internet Explorer sin que se vean pixeladas. Quedó como una curiosidad, pero no le ví un uso práctico.

Hoy se lo encontré. Estas semana estuve arreglando un back office y un front, y hoy notaron que las imágenes de los productos subidos por BO tienen un tamaño distinto al utilizado en el front. Como las subidas eran más grandes, bastó con esa simple línea de css:

img{
-ms-interpolation-mode: bicubic;
}

y listo.

SEO y SEM

25 de April de 2009 | 1:09 pm

En los últimos meses me preguntaron en distintas ocaciones sobre SEO y SEM. No es precisamente algo en lo que me especializo, o sobre lo que esté leyendo constantemente. Lo que sí me interesa en relación a SEO es la web semántica, escribir bien para que se guarde un sitio correctamente.

Luego de esta introducción, les cuento brevemente de qué se tratan. Entonces, qué es SEO y SEM?

SEO: Search Engine Optimization. Es preparar un sitio web para que los buscadores (soy generoso con el plural… google) puedan “ver” una página correctamente. O sea, que todo el contenido sea guardado correctamente en la base de datos del buscador. Esto es para que cuando alguien hace una búsqueda, con tus páginas bien guardadas, te puedan encontrar en los primeros resultados de la búsqueda.

Tareas SEO: correcta maquetación del sitio, keywords apropiados, titles apropiados, contenido acorde a esas keywords y títulos, sitemap.xml.

SEM: Search Engine Marketing. Cuando hacés una búsqueda, en google por ejemplo, aparecen sobre el costado derecho links con otro color de fondo, y a veces entre los primeros resultados. Esas posiciones y keywords fueron pagas. Yo pago para que con la palabra “xxxxx” mi sitio web aparezca primero de todo, pero siempre será con otro color de fondo, para indicarle al usuario que esa no es una posición natural.

Para SEO se le debe pagar al diseñador, si es que no lo ofrece como parte de la calidad de su trabajo (debería!). Para SEM, se le paga al buscador que ofrece este servicio (google, yahoo…).

Lo que queda un poco entre medio es lo que se conoce como “ruido”.

Ruido: cuántas y qué páginas están hablando de mi sitio. Si yo tengo un sitio web correctamente hecho, indexado en google, etc. pero no me conoce nadie, entonces nunca voy a figurar en las primeras posiciones… quitemos el buscar la url de tu sitio, ahí siempre vas a estar primero.

Cualquier agregado y corrección, adelante…

Guía de maquetación HTML para e-mails marketing

17 de April de 2009 | 6:46 pm

En el tiempo en que llevo trabajando en Interactive, aprendí que algo a lo que hay que prestarle un poco más de atención en la etapa de test es a los e-mails marketing. Debido a la ausencia de estándares, y que corporativamente se utilizan clientes de email como lotus o outlook pero el público en general utiliza webmails, uno se ve obligado a reducir las piezas html a una serie de reglas para performar correctamente en todos los medios.

Como no suelo encontrar guías en la web sobre este tema, comparto la que uso diariamente. Agreguen o corrijan lo que crean necesario:

  1. Resolución de imágenes para web: 72 dpi.
  2. Evitar usar imágenes menores a 14px de alto y 8px de ancho.
  3. No usar hojas de estilos externas, ni estilos embebidos en el head.
  4. No usar javascript.
  5. No usar div para maquetar, usar tablas y no más de dos anidadas.
  6. Evitar usar degradés como fondo donde haya un cuerpo de texto. De esta manera se puede setear el color de fondo sólido como propiedad del td.
  7. Evitar la imágenes como fondo de un td.
  8. Utilizar etiqueta alt en todas las imágenes.
  9. Setear altura y ancho en tablas y tds.
  10. Setear alineaciones verticales y horizontales, aún cuando sean las default (middle y left).
  11. Para setear márgenes con presición, usar spacer.gif, archivo gif transparente de 15×15 pixeles seteándole ancho y alto a necesidad.
  12. Usar entidades htmls. Adjunto las más comunes:
    • á, é, í, ó, ú = &aacute;, &eacute;, &iacute;, &oacute;, &uacute.
    • Á, É, Í, Ó, Ú = &Aacute;, &Eacute;, &Iacute;, &Oacute;, &Uacute.
    • ñ, Ñ = &ntilde;, &Ntilde;
    • TM = &trade;
    • (R) = &reg;
    • (C) = &copy;
    • Comillas simples = ‘
    • Comillas dobles = “
    • & = &amp;
  13. Ojo al utilizar superscript “<sup></sup>”, en textos multilínea agregará márgenes.
  14. No usar etiqueta <p>.
  15. Colocar textos entre <font></font>. La forma correcta de formatear un texto sería:

<font face=”arial, helvetica, sans-serif” size=”1″ color=”#666666″ style=”font: normal 10px arial, helvetica, sans-serif; color:#666666;”>Lorem ipsum dolor sit amet</font>

De esta forma se asegura que el texto tenga el formato deseado, ya sea por “style”, o por los antiguos parámetros. Lotus usará face=”arial, helvetica, sans-serif” size=”1″ color=”#666666″, los webmails style=”font: normal 10px arial, helvetica, sans-serif; color:#666666;”.
La equivalencia en tamaños de tipografía sería:
- 10-11 = size 1
- 12-13 = size 2
- 14+ = size 3

Notar el retraso importante que se tiene en materia de email. No conozco a nivel mundial la eficacia que tiene un email marketing. Sí sé la eficacia que tienen en los sitios que maneja la agencia, porcentaje alto cuando el email se convierte en una pieza de comunicación y deja de ser un “correo no deseado”.

Más sobre eficacia de email marketing en Dossiernet.

Unicode para javascript

1 de March de 2009 | 4:08 pm

Para los que como yo quieren poner tildes en los alertas de javascript:

  • \u00e1 -> á
  • \u00e9 -> é
  • \u00ed -> í
  • \u00f3 -> ó
  • \u00fa -> ú
  • \u00c1 -> Á
  • \u00c9 -> É
  • \u00cd -> Í
  • \u00d3 -> Ó
  • \u00da -> Ú
  • \u00f1 -> ñ
  • \u00d1 -> Ñ

ASP.NET en servidor Apache

23 de February de 2008 | 2:51 pm

Durante estos años, 9 para ser precisos, he ido aprendiendo todo lo que sé sobre diseño web. Al principio html, diseñando con FrontPage. Después conocí la suite Macromedia, con Flash y Dreamweaver 4, y el primer lenguaje de programación web más fácil de aprender, ASP. Conexiones a bases Access, muy simples de hacer.

Luego aprendí PHP y MySQL. Toda esta introducción es porque nunca jamás volví a usar ASP, hasta ahora que por trabajo me veo obligado a actualizarme.

Aquellos que quieran programar páginas web, sabrán (o aprenderán) que necesitan un servidor local (o sea, en sus máquinas) para hacer las pruebas.

Uno puede instalar para Windows el IIS (está en el disco de instalación, busquen ;) ), pero por supuesto me gusta complicarme, entonces uso Apache. Que está muy bien, salvo por el hecho que sirve para PHP.

Como no quiero tener dos servidores corriendo en paralelo, busqué el camino para instalar ASP en un servidor Apache. Y por supuesto, lo comparto. Sugerencias, configuraciones, mejores pasos a seguir, etc, añadirlos en los comentarios.

ASP.NET en Apache

Para ser sincero, no creí que me fuese tomar poco tiempo. Me imaginaba peleando contra configuraciones. Pero al googlear: "asp net apache" inmediatamente dí con el post del blog de Ohad How to make Apache run ASP.NET / ASP.NET 2.0, de donde obtuve casi todos los pasos.

Lo primero sigue siendo lo primero…

La guía es muuuuuy clara, salvo en un detalle. Antes de ponerte a instalar y configurar Apache, se debe instalar el .NET. Por lo que los pasos son:

  • Instalar Apache (supongo que si lees este tutorial es porque ya está instalado)
  • Instalar alguna versión de Microsoft .NET Framework, por ejemplo la 1.1.
    Paso links:
  • Instalar el mod_aspdotnet

Luego seguir con los pasos de la guía:

  • Editar el httpd.conf agregando:
  1. #asp.net
  2. LoadModule aspdotnet_module "modules/mod_aspdotnet.so"
  3. AddHandler asp.net asax ascx ashx asmx aspx axd config cs csproj licx rem resources resx soap vb vbproj vsdisco webinfo
  4. <IfModule mod_aspdotnet.cpp> 
  5. # Mount the ASP.NET /asp application
  6. AspNetMount /SampleASP "c:/SampleASP"
  7. #/SampleASP is the alias name for asp.net to execute
  8. #"c:/SampleASP" is the actual execution of files/folders  in that location
  9. # Map all requests for /asp to the application files
  10. Alias /SampleASP "c:/SampleASP"
  11. #maps /SampleASP request to "c:/SampleASP"
  12. #now to get to the /SampleASP type http://localhost/SampleASP
  13. #It’ll redirect http://localhost/SampleASP to "c:/SampleASP"
  14. # Allow asp.net scripts to be executed in the /SampleASP example
  15. <Directory "c:/SampleASP">
  16. Options FollowSymlinks ExecCGI
  17. Order allow,deny
  18. Allow from all
  19. DirectoryIndex index.htm index.aspx
  20. #default the index page to .htm and .aspx
  21. </Directory>
  22. # For all virtual ASP.NET webs, we need the aspnet_client files
  23. # to serve the client-side helper scripts.
  24. AliasMatch /aspnet_client/system_web/(\d+)_(\d+)_(\d+)_(\d+)/(.*)
  25. "C:/Windows/Microsoft.NET/Framework/v$1.$2.$3/ASP.NETClientFiles/$4"
  26. <Directory "C:/Windows/Microsoft.NET/Framework/v*/ASP.NETClientFiles">
  27. Options FollowSymlinks
  28. Order allow,deny
  29. Allow from all
  30. </Directory>
  31. </IfModule>
  32. #asp.net
  • Crear el directorio C:\SampleASP, junto con el archivo index.aspx (sí, pueden cambiar el directorio, PERO recuerden editar el httpd.config con el directorio correcto).
  • Reinicien Apache.

Y eso es todo. Dejen preguntas, comentarios, cómo mejorar la guía, otros pasos, etc.

Esta obra está bajo una licencia de Creative Commons.

Creative Commons License

Curso de HTML

11 de December de 2007 | 7:26 pm

Cumpliendo promesas, inauguro los tutoriales para aprender diseño web desde cero.

A quién le puede interesar?

  • A quienes no sepan absolutamente nada de diseño web pero que se mueren por hacer páginas.
  • A los que saben algo, pero quieren aprender más, quizás queriendo volverse profesionales de la web.
  • A los que se dedican a diseño web… les extrañará ver la cantidad de cosas que no saben aún ;) .

A estos últimos les digo que si bien mis palabras pueden sonar soberbias, la idea es más bien que se lo tomen como un desafío profesional, tal vez personal.

O si prefieren destruirme, los invito a que encuentren los miles de errores que seguro existen y me los hagan saber, así añado sus correcciones para ir perfeccionando las técnicas de todos (no olviden de dónde aprendieron lo que saben, y que está bueno devolver algo de lo mismo).

Introducción

Antes de entrar de lleno en el armado y diseño de páginas web, hagamos una breve reseña de aquellos conceptos que a lo largo del curso se van a ir mencionando, y que pasarán a formar parte de un lenguaje común:

www

  • WWW (World Wide Web): es el sistema propio de internet. Concebido como un sistema de información por hipertexto. Esto quiere decir que los elementos mostrados en pantalla (texto o imágenes) pueden vincularse entre sí o hacia otras fuentes de información. Es un sistema global y público, por lo que puede accederse desde diversas plataformas en cualquier parte del mundo.
  • Navegador: Es el programa con el que “navegaremos” un documento. Es aquel que se interactua con el servidor, devolviendo las peticiones solicitadas.
  • Servidor: aloja los documentos que componen un sitio web. Mediante el protocolo HTTP se comunica con el navegador.
  • HTTP: siglas para “Hyper Text Transfer Protocol” (protocolo de transferencia de hipertexto). Es el protocolo de comunicación de la world wide web, el lenguaje en común, entre todos los actores.
  • URL: siglas para “Uniform Resource Locator” (localizador uniforme de recursos), es la dirección que localiza una información dentro de internet.
  • HTML: siglas para “Hyper Text Market Language” (lenguage de marcado para hipertexto). Es el lenguaje en el que se estructuran los documentos que serán leidos por servidores y navegadores.

Lenguaje HTML

El lenguaje que interpretan los navegadores web es el html. Por lo que para hacer una página web necesitamos conocerlo.

Un documento html es un archivo de texto. La diferencia entre un archivo .txt y uno .html radica en las etiquetas presentes en este último. Las etiquetas sirven para orientar al navegador en la forma de estructurar el contenido (títulos, subtítulos, párrafos, listas, etc). En este punto profundizaremos más adelante. Por ahora debemos tener presente que para crear un archivo .htm o .html sólo nos hace falta un editor de texto, desde un simple bloc de notas a alguno más complejo. Recomiendo el Notepad++, aparte de ser el bloc de notas que todos conocemos, trae incorporados otros lenguajes de programación que nos permite una mejor visualización por medio de colores, aparte de ser gratuito y Open Source.

En un futuro veremos que el principal problema que econtraremos es la falta de compromiso de algunas empresas de software al momento de diseñar navegadores que respondan a los estándares divulgados para la correcta interpretación del lenguaje empleado en un documento html. Esto implica un trabajo extra del diseñador al no sólo diseñar una página, sino a corroborar la correcta interpretación de la misma por diferentes navegadores.

¿Lenguaje de marcado? ¿etiquetas?

La base de la sintaxis de este código es la etiqueta. Por ejemplo:

<etiqueta>texto de prueba</etiqueta>

La primera etiqueta activa una orden que afecta a nuestro contenido, siendo la segunda etiqueta con el signo “/” por delante la que pone fin a la misma.

Veamos un ejemplo práctico. Para obtener un texto con negrita, la etiqueta es <b>. Por lo que si queremos lograr:

texto de prueba

El código html será:

texto de <b>prueba</b>

Nuestra primera página

Un documento html cuenta con una estructura a respetar para la correcta visualización por parte de los navegadores. Una estructura básica es:

  1. <html>
  2. <head>
  3. <title>Título de la página</title>
  4. </head>
  5. <body>
  6. Contenido de la página (textos e imágenes)
  7. ………..
  8. ………..
  9. </body>
  10. </html>

Lo que vemos es que todo el documento está contenido en la etiqueta <html>, luego contamos con un encabezado, y finalmente un cuerpo. Con esto en mente, crearemos nuestra primera página. Si en un editor de texto escribimos el siguiente código:

  1. <html>
  2. <head>
  3. <title>Curso de HTML</title>
  4. </head>
  5. <body>
  6. Hola mundo!
  7. </body>
  8. </html>

Lo guardamos como ejemplo_1.htm y lo abrimos en nuestro navegador:

Ejemplo 1

Ya empezamos a escribir en lenguaje html.

Algunas consideraciones en el manejo de archivos:

  • Utilizar siempre minúsculas en los nombres de los archivos.
  • Los espaciados entre palabras pueden crear problemas. En vez de nombrar “ejemplo 1.htm”, es preferible “ejemplo_1.htm”.
  • Se pueden usar las extensines .htm o .html, ambas son válidas. Por una cuestión de orden, se recomienda usar sólo una de ellas en nuestros sitios.
  • Al nombrar el archivo jamás usar tildes ni caracteres especiales, como “ñ”.

Pueden ver el ejemplo_1.htm.

Esta obra está bajo una licencia de Creative Commons.

Creative Commons License

Apretando este botón, serás más feliz