jueves, 4 de noviembre de 2010

Curso de TinyMCE en español


Para ver en youtube haz click aquí
Que es TinyMCE:
Es lo que se conoce, como un editor WYSIWYG, lo cual es un acronimo en ingles de: lo que ves es lo que obtienes, y se refiere a los procesadores de texto que muestran directamente el resultado final, y escribir directamente en el, se muestra como una alternativa, a procesadores de texto poco frecuentes el día de hoy, en los que el resultado final no se mostraba hasta el momento de imprimir el documento.

  En el caso de TinyMCE esta diseñado para poder ser usado en nuestras paginas web, integrándolo en el HTML de la misma, esta creado en javascript, y es OpenSource.

En la imagen de arriba vemos un ejemplo de tinyMCE aplicado a una textarea


Primera parte del curso: Implementacion y Uso de tinyMCE
Implementacion:
Lo primero, y mas obvio es descargarse la librería haciendo click aqui, luego para ver el primer capitulo del videotutorial dirigete a este enlace
Archivos de Ejemplo:
Para descargar un archivo de ejemplo, con una implementación básica de tinyMCE, haz click aqui

miércoles, 6 de octubre de 2010

Introducción HTML5 Parte 1

Pregunta Básica ¿Que es HTML5?
Es la nueva revisión del lenguaje HTML, especifica dos variantes para su sintaxis, un html clásico, la variante conocida como html5 que asi se llama por ser la quinta revisión importante, y una variante xml conocida XHTML5, esta es la primera vez que html y xhtml se desarrollan en paralelo, dicho de una forma mas simple es un borrador de lo que sera la próxima versión de html
Diferencias entre html y html5
Etiquetas que pasaron al desuso:
<acronym>, <applet><basefont><big><center><dir><font><frame><frameset><noframes><s><strike><tt>, <u><xmp>
Etiquetas nuevas en html5:
<article>, <aside>, <audio>, <canvas>, <command>, <datalist>, <details>, <embed>, <figcaption>, <figure>, <footer>, <header>, <hgroup>, <keygen>, <mark>, <meter>, <nav>, <output>, <progress>, <rp>, <rt>, <section>, <source>, <summary>, <time>, <video>, <wbr>
Atributos que pasaron al desuso:
rev y charset en <link /> y <a />, target en <link />, nohref en <area />, profile en <head />, version en <html />, name en <map />, scheme en <meta />, archive, classid, codetype, declare y standby en <object />, valuetype en <param />, charset en <script />, summary en header, axis y abbr en <td /> y <th />
Atributos Estándar nuevos:
Al igual que las versiones html anteriores existen atributos que son aplicables a todas las etiquetas, en html5 se agregan los siguientes:
contenteditable, contextmenu, data-yourvalue, draggable, hidden, item, itemprop, spellcheck, subject
Atributos maneja-dores de Evento nuevos:
onafterprint, onbeforeprint, onbeforeonload, onerror, onhaschange, onmessage, onoffline, ononline, onpagehide, onpageshow, onpopstate, onredo, onresize,onstorage, onundo, onunload

miércoles, 29 de septiembre de 2010

Curso de HTML parte 3

Este curso lo publiqué hace varios años, es probable que este desactualizado, voy a publicar un nuevo curso HTML5 muy pronto, puedes suscribirte a mi canal en youtube o darme like en facebook:
Para ir a mi canal de youtube haz click aquí
Página de Facebook, haz click aquí
Las Tablas
En html una tabla se puede definir de la forma mas simple, diciendo que consisten en un conjunto de columnas que contienen celdas, y permiten organizar cualquier tipo de contenido, en el interior de las mismas,
un ejemplo:
Queremos organizar un horario:

Horario Lunes Martes Miercoles Jueves Viernes
Mañana Trabajo Trabajo Trabajo Trabajo Trabajo
Receso Almuerzo Almuerzo Almuerzo Almuerzo Almuerzo
Tarde Trabajo Trabajo Trabajo Trabajo Trabajo

Este es un ejemplo sencillo de la organización de datos, en este caso, un horario básico
Tambien las tablas nos pueden ayudar a organizar el diseño de nuestra pagina web algo asi:

Mi Pagina Web
Columna
En este espacio podriamos organizar, columnas de texto, menus laterales, etc


Contenido


En este espacio podemos colocar el contenido general de nuestra pagina, en el caso de un blog el ultimo porst publicado etc
Columna
En este espacio podriamos organizar, columnas de texto, menus laterales, etc

En este ejemplo vemos como podríamos reorganizar la estructura completa de una pagina de la forma que queramos, que en este caso esconderíamos los bordes y quedaría así:
Mi Pagina Web
Columna
En este espacio podriamos organizar, columnas de texto, menus laterales, etc


Contenido


En este espacio podemos colocar el contenido general de nuestra pagina, en el caso de un blog el ultimo porst publicado etc
Columna
En este espacio podriamos organizar, columnas de texto, menus laterales, etc

Las dos tablas son exactamente iguales, la única diferencia es que la segunda no tiene bordes, los cuales se pueden modificar con el atributo border, que en este caso esta definido como 0, pero en el caso de que no definamos ningún atributo border, el valor por defecto del mismo seria 0, por lo que tampoco se mostraría.
 También en el ejemplo anterior vemos el uso de el atributo colspan y rowspan, que permiten, que una celda ocupe el espacio de varias, cambiando la forma natural de una tabla:
Tabla sin rowspan y/o colspan:




Con Colspan:



Con Rowspan:

miércoles, 15 de septiembre de 2010

Curso de Html parte 2

Este curso lo publiqué hace varias años, es probable que este desactualizado, muy pronto voy a publicar un nuevo curso de HTML5, para estar al pendiente suscríbete a mi canal de youtube o dame like en facebook:


Los Atributos:
En html y en cualquier lenguaje de marcado basado en xml o sgml, los atributos son informacion adicional que se agrega a las etiquetas, en algunos casos estos son necesarios para el funcionamiento de las etiquetas, en otros solo brindan detalles específicos, como por ejemplo la anchura, el largo o el color, un ejemplo de atributo seria el siguiente:
<img src:"images/foto.jpg" >
Lista de Caracteres especiales en HTML
&lt; = <
&gt; = >
&Aacute; = Á
&Eacute; = É
&Iacute; = Í
&Oacute; = Ó
&Uacute; = Ú
&ampaacute; = á
&eacute; = é
&iacute; = í
&oacute; = ó
&uacute; = ú
&Auml; = Ä
&Euml; = Ë
&Iuml; = Ï
&Ouml; = Ö
&Uuml; = Ü
&auml; = ä
&euml; = ë
&iuml; = ï
&ouml; = ö
&uuml; = ü
&Atilde; = Ã
&Ntilde; = Ñ
&Otilde; = Õ
&atilde; = ã
&ntilde; = ñ
&otilde; = õ
&Oslash; = Ø
&oslash; = ø
&ETH; = Ð
&eth; = ð
&szlig; = ß
&frac14; = ¼
&frac12; = ½
&frac34; = ¾
&copy; = ©
&reg; = ®
&ordf; = ª
&sup2; = ²
&sup3; = ³
&sup1; = ¹
&macr; = ¯
&micro; = µ
&para; =
&middot; = ·
&deg; = °
&cedil; = ¸
&iquest; = ¿
&times; = ×
&divide; = ÷
&#147; =
&#148; =
&#140; = Œ
&#135; =
Etiquetas para texto
Primero un repaso a la clase pasada, para recordar las etiquetas que vimos, sabemos que <marquee> crea una marquesina de texto en movimiento, que <b> define un texto en negrirta, que <i> define un texto en itálica, ahora en esta clase veremos mas etiquetas para texto:
<strike>que sirve para mostrar texto con una linea en el medio atravesándolo así: texto de ejemplo
Encabezados en html existen 6 tipos de encabezado, que se crean con las etiquetas de encabezado aquí listadas:
<h1>, <h2>, <h3>, <h4>, <h5> y <h6>
<tt> crea texto con el estilo de las maquinas de escribir, ejemplo:
texto con forma de teletipo
<big>sirve para agrandar el texto
<small>encoje el texto
<br /> crea un salto de linea
Archivos de ejemplo:

domingo, 12 de septiembre de 2010

Curso de Html parte 1

Este curso lo publiqué hace varios años, por lo tanto esta algo desactualizado, muy pronto voy a publicar un nuevo curso de HTML5, puedes suscribirte a mi canal de youtube o darme like en facebook para estar al pendiente de los nuevos tutoriales y cursos que voy a publicar :
Canal de youtube haz click aquí
Facebook, haz click aquí
¿Que es HTML?
Hyper Text Markup Language son sus iniciales, y es un lenguaje de marcado, que se ha convertido en el estándar en la creación de paginas web, su definición seria:
Lenguaje de marcado que se utiliza en la representación de textos en forma de hipertextos y así como para complementar el texto con imágenes y colores, por lo que hasta cierto punto puede incluso describir la presentación del documento, y contener scripts ( como javascript) con los cuales se puede modificar el comportamiento del navegador.
Breve Historia de HTML
La primera descripción de HTML fue un documento llamado html tags, publicado por Tim Benners Lee en 1991, pero no fue si no hasta 1993 cuando la IETF publico la primera proposición para la especificación de HTML, el boceto de HTML de banners lee y Da Conolly, en el cual se incluía una Definición del tipo de documento SGML para definir la gramática.
SGML
Standard Generalized Markup Languge, es un sistema para la organización y etiquetado de documentos, La organización internacional de Estándares, normalizo los estándares lo normalizo en 1996, el SGML sirve para especificar el etiquetado de documentos y no impone en ningún caso un conjunto de etiquetas en especial
XML
Son las iniciales en ingles de Extensible Markup Language, y al igual que SGML es un metalenguaje, que permite definir la gramática de un lenguaje ( al igual que HTML es definido por SGML) y fue desarrollado por World Wide Web Consorium como una simplificación de SGML, y no esta pensado para su uso solo en la web sino para el intercambio de informacion estructurada entre diferentes plataformas.
XHTML
Al igual que HTML esta basado en el SGML, XHTML es el lenguage de marcado pensado para sustituir a HTML como estándar en la creación de paginas web, y es básicamente la versión XML de HTML , su objetivo es avanzar en el proyecto de la W3C de crear una web semántica, donde la presentación y el contenido estén separados
DTD
Definición de tipo de documento (Document Type Definition) es la descripción de la estructura y sintaxis de un documento XML o SGML, su función es describir el formato de datos y así mantener una coherencia entre distintos documentos que usen la misma DTD.
Por tanto un DTD especifica las restricciones en la estructura y sintaxis del mismo, las etiquetas que pueden ser contenidas y el contenido de dichas etiquetas, la estructura ya que indica el orden en le que van las etiquetas dentro del documento, y el anidamiento que dice la forma en la que van etiquetas dentro de otras.
XML_Schema
Es un lenguaje de esquemas utilizado para describir las restricciones y estructura de los documentos XML de forma mas precisa que un DTD, mas alla incluso de las normas en la sintaxis de XML, llegando un muy alto nivel de abstracción en la percepción del tipo de documento
Archivos de Ejemplo: