Documenti di Didattica
Documenti di Professioni
Documenti di Cultura
<html> : define el inicio del documento HTML, le indica al navegador que lo que viene a
continuacin debe ser interpretado como cdigo HTML. Esto es as de facto, ya que en
teora lo que define el tipo de documento es elDOCTYPE, que significa la palabra justo
tras DOCTYPE el tag de raz.
<script> : incrusta un script en una web, o llama a uno mediante src="url del
script" . Se recomienda incluir eltipo MIME en el atributo type , en el caso
de JavaScript text/javascript .
<head> : define la cabecera del documento HTML; esta cabecera suele contener
<link> : para vincular el sitio a hojas de estilo o iconos. Por ejemplo: <link
rel="stylesheet" href="/style.css" type="text/css"> .
<style> : para colocar el estilo interno de la pgina; ya sea usando CSS u otros
<body> : define el contenido principal o cuerpo del documento. Esta es la parte del
documento html que se muestra en el navegador; dentro de esta etiqueta pueden definirse
propiedades comunes a toda la pgina, como color de fondo y mrgenes. Dentro del
cuerpo <body> es posible encontrar numerosas etiquetas. A continuacin se indican
algunas a modo de ejemplo:
<a> : hipervnculo o enlace, dentro o fuera del sitio web. Debe definirse el parmetro
<img> : imagen. Requiere del atributo src, que indica la ruta en la que se encuentra la
etiqueta <strong> ).
diferenciadas o destacadas del resto, para indicar correcciones por ejemplo. (etiqueta
desaprobada en HTML 4.01 y redefinida en HTML 5)13 14
La mayora de etiquetas deben cerrarse como se abren, pero con una barra (/) tal como se
muestra en los siguientes ejemplos:
El lenguaje HTML puede ser creado y editado con cualquier editor de textos bsico, como
puede ser Gedit en Linux, el Bloc de notas de Windows, o cualquier otro editor que admita
texto sin formato como GNU Emacs, Microsoft Wordpad, TextPad, Vim, Notepad++, entre
otros.
Existen, adems, otros editores para la realizacin de sitios web con
caractersticas WYSIWYG (What You See Is What You Get, o en espaol: lo que ves es lo
que obtienes). Estos editores permiten ver el resultado de lo que se est editando en tiempo
real, a medida que se va desarrollando el documento. Ahora bien, esto no significa una
manera distinta de realizar sitios web, sino que una forma un tanto ms simple, ya que estos
programas, adems de tener la opcin de trabajar con la vista preliminar, tiene su propia
seccin HTML, la cual va generando todo el cdigo a medida que se va trabajando. Algunos
ejemplos de editores WYSIWYG son KompoZer, Microsoft FrontPage o Adobe Dreamweaver.
Combinar estos dos mtodos resulta muy interesante, ya que de alguna manera se ayudan
entre s. Por ejemplo, si se edita todo en HTML y el desarrollador olvida algn cdigo o
etiqueta, basta con dirigirse al editor visual o WYSIWYG y se contina ah la edicin o
viceversa, ya que hay casos en que resulta ms rpido y fcil escribir directamente el cdigo
de alguna caracterstica que el usuario desea adherir al sitio que buscar la opcin en el
programa mismo.
Existe otro tipo de editores HTML llamados WYSIWYM que dan ms importancia al contenido
y al significado que a la apariencia visual. Entre los objetivos que tienen estos editores es la
separacin del contenido y la presentacin, fundamental en el diseo web.
HTML utiliza etiquetas o marcas, que consisten en breves instrucciones de comienzo y final,
mediante las cuales se determina la forma en la que debe aparecer en sunavegador el texto,
as como tambin las imgenes y los dems elementos, en la pantalla del ordenador.
Toda etiqueta se identifica porque est encerrada entre los signos menor que y mayor que
(<>), y algunas tienen atributos que pueden tomar algn valor. En general las etiquetas se
aplicarn de dos formas especiales:
No pueden abrirse y cerrarse, como <hr />, que se vera en su navegador web como una
lnea horizontal.
En 1989 existan dos tcnicas que permitan vincular documentos electrnicos, por un
lado los hipervnculos (enlaces) y por otro lado un poderoso lenguaje de etiquetas
denominado SGML. Por entonces, Tim Berners-Lee, quien trabajaba en el Centro
Europeo de Investigaciones Nucleares CERN da a conocer a la prensa que estaba
trabajando en un sistema que permitir acceder a ficheros en lnea que funcionaba
sobre redes de computadoras o mquinas electrnicas basadas en el
protocolo TCP/IP. Inicialmente fue desarrollado para que se pueda compartir
fcilmente informacin entre cientficos de distintas universidades e institutos de
investigacin de todo el mundo.15
Tim Berners-Lee, cre el proyecto World Wide Web (Tejido o Telaraa Mundial), as
como un sistema que facilitaba la lectura de informacin, mediante un programa de
navegacin. ste sera el primer navegador Web, llamado WorldWideWeb, y
desarrollado durante la segunda mitad del ao 1990; siendo tiempo despus
rebautizado como Nexus para evitar confusiones por su nombre que era igual al de la
tecnologa que representaba. Le siguieron otros dos navegadores: el Line Mode
Browser y el ViolaWWW. Este ltimo, desarrollado en 1992, fue el primer navegador
en popularizarse entre los primeros usuarios de la World Wide Web.16
Los trabajos para crear un sucesor del HTML, denominado HTML +, comenzaron a
finales de 1993. HTML+ se dise originalmente para ser un superconjunto del HTML
que permitiera evolucionar gradualmente desde el formato HTML anterior. A la primera
especificacin formal de HTML+ se le dio, por lo tanto, el nmero de versin 2 para
distinguirla de las propuestas no oficiales previas. Los trabajos sobre HTML+
continuaron, pero nunca se convirti en un estndar, a pesar de ser la base
formalmente ms parecida al aspecto compositivo de las especificaciones actuales.
El borrador del estndar HTML 3.0 fue propuesto por el recin formado W3C en marzo
de 1995. Con l se introdujeron muchas nuevas capacidades; por ejemplo, facilidades
para crear tablas, hacer que el texto fluyese alrededor de las figuras y mostrar
elementos matemticos complejos. Aunque se dise para ser compatible con HTML
2.0, era demasiado complejo para ser implementado con la tecnologa de la poca, y
cuando el borrador del estndar expir en septiembre de 1995, se abandon debido a
la carencia de apoyos de los fabricantes de navegadores web. El HTML 3.1 nunca
lleg a ser propuesto oficialmente, y el estndar siguiente fue el HTML 3.2, que
abandonaba la mayora de las nuevas caractersticas del HTML 3.0 y, a cambio,
adoptaba muchos elementos desarrollados inicialmente por los navegadores
web Netscape y Mosaic. La posibilidad de trabajar con frmulas matemticas que se
haba propuesto en el HTML 3.0 pas a quedar integrada en un estndar distinto
llamado MathML.
En 1997, HTML 4.0 se public como una recomendacin del W3C. HTML 4.0 adopt
muchos elementos especficos desarrollados inicialmente para un navegador web
concreto, pero al mismo tiempo comenz a limpiar el HTML sealando algunos de
ellos como desaprobados o deprecated en ingls.
HTML 4.0 implementa caractersticas como XForms 1.0 que no necesitan implementar
motores de navegacin que eran incompatibles con algunas pginas web HTML. En
2004 la W3C reabri el debate de la evolucin del HTML, y se dieron a conocer las
bases para la versin HTML5. No obstante, este trabajo fue rechazado por los
miembros del W3Cy se dara preferencia al desarrollo del XML.
Desde el lanzamiento en Junio de 1997 del estndar ECMAScript 1, han existido las
versiones 2, 3 y 5, que es la ms usada actualmente (la 4 se abandon 5 ). En Junio
de 2015 se cerr y public la versin ECMAScript 6 6 .
Bootstrap, es un framework originalmente creado por Twitter, que permite crear interfaces
web con CSS y JavaScript, cuya particularidad es la de adaptar la interfaz del sitio web al
tamao del dispositivo en que se visualice. Es decir, el sitio web se adapta
automticamente al tamao de una PC, una Tablet u otro dispositivo. Esta tcnica de
diseo y desarrollo se conoce como responsive design o diseo adaptativo.
El beneficio de usar responsive design en un sitio web, es principalmente que el sitio
web se adapta automticamente al dispositivo desde donde se acceda. Lo que se usa
con ms frecuencia y que a mi opinin personal me gusta ms es el uso de media
queries, que es un mdulo de CSS3 que permite la representacin de contenido para
adaptarse a condiciones como la resolucin de la pantalla y si trabajas las
dimensiones de tu contenido en porcentajes, puedes tener una web muy fluida capaz
de adaptarse a casi cualquier tamao de forma automtica.
Pero si no quieres nada que ver con los media queries, otra muy buena opcin es el
uso del framework de Bootstrap, que como te dije te ayudar a desarrollar tus sitios
adaptativos.
Aun ofreciendo todas las posibilidades que ofrece Bootstrap a la hora de crear
interfaces web, los diseos creados con Bootstrap son simples, limpios e intuitivos,
esto les da agilidad a la hora de cargar y al adaptarse a otros dispositivos. El
Framework trae varios elementos con estilos predefinidos fciles de configurar:
Botones, Mens desplegables, Formularios incluyendo todos sus elementos e
integracin jQuery para ofrecer ventanas y tooltips dinmicos.
VENTAJAS
- Utiliza componentes y servicios creados por la comunidad web, tales como: HTML5
shim, Normalize.css, OOCSS, jQuery UI, LESS y GitHub.
Es un conjunto de buenas prcticas que perduran en el tiempo.
Quizs dentro de sus caractersticas ms destacadas, podramos mencionar:
La implementacin de HTML5 + CSS3
El famoso Grid system, que por defecto incluye 12 columnas fijas o fluidas,
dependiendo de si tu diseo ser responsivo o no.
El uso de LESS, que es una ampliacin a las famosas hojas de estilo CSS, pero a
diferencia de ests, funciona como un lenguaje de programacin, permitiendo el uso
de variables, funciones, operaciones aritmticas, entre otras, para acelerar y
enriquecer los estilos en un sitio web.
OOCSS, css orientado a objetos, que est organizado por mdulos independientes y
reutilizables en todo el proyecto.
Hay una enorme comunicad que soporta este desarrollo y cuenta con
implementaciones externas como WordPress, Drupal, SASS o jQuery UI.
Herramienta sencilla y gil para construir sitios web e interfaces. Una vez que
entiendas y domines su funcionamiento, vers lo fcil que es hacer efectos y disear
interfaces que te ahorran realmente mucho tiempo de trabajo.
Adems y por si fuera poco tiene un theme por defecto bastante optimizado y que
puedes modificar o crear tu propio theme.
DESVENTAJAS
Es necesario adaptarse a su forma de trabajo, si bien su curva de aprendizaje es
liviana, debers comprender y familiarizarte con su estructura y nomenclatura.
Debes adaptar tu diseo a un grid de 12 columnas, que se modifican segn el
dispositivo.
Aqu empiezan los problemas, Bootstrap por defecto te trae anchos, mrgenes y
altos de lnea, y realizar cambios especficos es por decir, un poco tedioso.
Es complicado, cambiar de versin si has realizado modificaciones profundas sobre
el core.
Si necesitas aadir componentes que no existen, debes hacerlos t mismo en CSS y
cuidar de que mantenga coherencia con tu diseo y cuidando el responsive.
Un problema que he visto a menudo en muchos Themes, es que el responsive
funciona bien, pero a nivel de diseo en ocasiones se le escapan ciertos detalles que
le quitan esttica al sitio. Si eres un perfeccionista del diseo, ten por seguro que
Bootstrap te va a dar algunos problemas.
jQuery es una biblioteca de JavaScript, creada inicialmente por John Resig, que permite
simplificar la manera de interactuar con los documentos HTML, manipular el rbol DOM,
manejar eventos, desarrollar animaciones y agregar interaccin con la tcnicaAJAX a
pginas web. Fue presentada el 14 de enero de 2006 en el BarCamp NYC. jQuery es la
biblioteca de JavaScript ms utilizada.1
frameworks ASP.NET AJAX y ASP.NET MVC, mientras que Nokia los integrar con su
plataformaWeb Run-Time.